css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css">
		<title>Richard Feynman Tribute</title>
	</head>
	<main>

		<h1>Richard Feynman</h1>
		<h4><em>May 11th, 1918 - February 15, 1988</em></h4>
		<section id="landingImg">
			<img src="https://orig09.deviantart.net/fbdd/f/2011/213/d/4/feynman_wallpaper_by_seigner-d40j5nu.png" alt="">
			<p><b>Feynman Diagrams</b>: pictorial representations of the mathematical expressions describing the behaviour of subatomic particles.</p>
		</section>

		<div class="dropdown">
		  <button class="dropbtn">Contents</button>
		  <div id="myDropdown" class="dropdown-content">
		    <a href="#nav" class="button" onclick="show(0)">A brief history</a>
		    <a href="#nav" class="button" onclick="show(1)">Timeline</a>
		    <a href="#nav" class="button" onclick="show(2)">Resources</a>
		  </div>
      <p id="hint"><br>More &nbsp;<i class="fa fa-arrow-up" aria-hidden="true"></i></p>
		</div>

		<!-- Big screen nav, unnecessary rn -->
		<section id="nav">
			<nav>
				<ul>
					<li><a href="#briefHistory" class="button" onclick="show(0)">Brief history</a></li>
					<li><a href="#timeline" class="button" onclick="show(1)">Timeline</a></li>
					<li><a href="#resources" class="button" onclick="show(2)">Resources</a></li>
				</ul>
			</nav>
		</section>


		<section id="briefHistory" class="content">
			<h2>A brief history</h2>
			<img src="http://www.creativitypost.com/images/uploads/technology/feynman-300.jpg" alt="" class="image1">
			<blockquote cite="http://www.richardfeynman.com/about/bio.html">Richard Phillips Feynman was born in New York City in 1918 and grew up in Far Rockaway, Queens. He attended the Massachusetts Institute of Technology as an undergraduate, and he received his Ph.D. from Princeton University. In 1942 he married his high school sweetheart, Arline Greenbaum, despite the fact that she was ill with tuberculosis. That same year Richard was asked to join the Manhattan Project; he accepted and went on to become a group leader at Los Alamos, New Mexico. Arline died in 1945. <strong>After the war, he became a professor of theoretical physics at Cornell University in Ithaca, New York</strong>. In 1950 he joined the faculty of the California Institute of Technology and spent the remainder of his career there. He had a brief marriage in the early fifties to Mary Louise Bell that did not work out. He married Gweneth Howarth in 1960. Their son Carl was born in 1962, and their daughter Michelle was born in 1968.<br><br>

Many consider him to be the father of nanotechnology for two prizes he offered in a 1959 talk entitled, “There’s Plenty of Room at the Bottom,” where he prompted thinking on a very small scale. He offered a prize for the world’s smallest motor, and another challenge involving very small writing; so small that the text of the Encyclopedia Britannica could be contained on the head of a pin. The prize for the motor was claimed almost immediately, but the challenge of the writing wasn’t met for over 20 years. Between 1961-3 Feynman gave a series of lectures on introductory physics for freshmen and the following year, sophomores, at Caltech. The series was edited and published as <a href="http://www.feynmanlectures.info/">The Feynman Lectures of Physics</a>, which is thought to be the most popular physics book ever written.<br><br>

<strong>His most public achievement came in 1965, when he won the Nobel Prize in Physics</strong>, sharing it with Julian Schwinger and Shin’ichiro Tomonaga for their independent work in quantum electrodynamics. In 1986, he was again in the public eye, this time working on the commission investigating the <a href="https://en.wikipedia.org/wiki/Space_Shuttle_Challenger_disaster">explosion of the Challenger space shuttle</a>. He died in 1988 after a long battle with abdominal cancer.</blockquote>
		</section>

		<!-- this line, more specifically the content, fucks up the timeline. -->
		<section id="timeline" class="content">


<section class="timeline">
	<h2>Timeline</h2>
  <ol>
    <li>
      <div>
        <time>1918</time> Born on May 11th in New York City
      </div>
    </li>
    <li>
      <div>
        <time>1939</time> Received B.S. from MIT and was named a Putnam Fellow at the age of 21
      </div>
    </li>
    <li>
      <div>
        <time>1942</time> Received his Ph.D from Princeton University
      </div>
    </li>
    <li>
      <div>
        <time>1942</time> Joins the Manhattan Project as the leader of the theoretical division.<br><br> Marries highschool sweetheart Arline
      </div>
    </li>
    <li>
      <div>
        <time>1945</time> Teaches theoretical physics at Cornell<br><br> Arline Greenbaum dies
      </div>
    </li>
    <li>
      <div>
        <time>1950</time> Moves to CalTech to teach
      </div>
    </li>
    <li>
      <div>
        <time>1952</time> Feynman proposes to Mary Louise Bell by mail from Rio de Janeiro<br><br> They marry shortly thereafter
      </div>
    </li>
    <li>
      <div>
        <time>1956</time> Feynman and Bell divorce
      </div>
    </li>
    <li>
      <div>
        <time>1960</time> Feynman remarries again to Gweneth Howarth
      </div>
    </li>
    <li>
      <div>
        <time>1965</time> Feynman receives the Nobel Prize in physics for his work in quantum electrodynamics, along with colleagues Julian Schwinger and Shinichiro Tomonaga
      </div>
    </li>
    <li>
      <div>
        <time>1979</time> Feynman receives the National Medal of Science award
      </div>
    </li>
    <li>
      <div>
        <time>1986</time> Becomes a member of the Rogers Commision and discovers the problem (with the <a href="https://en.wikipedia.org/wiki/Space_Shuttle_Challenger_disaster">space shuttle Challenger disaster</a>)
      </div>
    </li>
    <li>
      <div>
        <time>1988</time> Feynman passes away on February 15 at the age of 69
      </div>
    </li>
    <li class="lastLine" style="padding-right: 10%"></li>
  </ol>
  <div class="backToTop">
  	<a href="#timeline" style="color: #ddd; font-size: large">Back to top</a>
  </div>

  <div class="arrows">
    <button class="arrow arrow__prev disabled" disabled>
      <i class="fa fa-arrow-circle-left fa-3x" aria-hidden="true"></i>
    </button>
    <button class="arrow arrow__next">
      <i class="fa fa-arrow-circle-right fa-3x" aria-hidden="true"></i>
    </button>
  </div>
</section>
		</section>

		<section id="resources" class="content">
			<h2>Resources</h2>
			<img src="https://onefuriousllama.files.wordpress.com/2012/03/richard-feynman.jpg" alt="">
			<p><a href="https://en.wikipedia.org/wiki/Richard_Feynman">Wikipedia - Richard Feynman</a></p>
			<p><a href="http://www.timetoast.com/timelines/life-of-richard-feynman">Timetoast - Life of Richard Feynman</a></p>
			<p><a href="http://www.atomicheritage.org/profile/richard-feynman">Atomic Heritage - Richard Feynman</a></p>
			<p><a href="http://www.richardfeynman.com/">Official Richard Feynman website</a></p>
			<p><a href="http://www.telegraph.co.uk/culture/10036024/Richard-Feynman-Life-the-universe-and-everything.html">Telegraph - Richard Feynman</a></p>
			<p><a href="https://en.wikipedia.org/wiki/Space_Shuttle_Challenger_disaster">Space Shuttle Challenger Disaster</a></p>
		</section>

	</main>

	<footer><strong>By Momchil Kolev</strong></footer>
</html>

<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="timeline.js"></script>
<script type="text/javascript" src="hammer.js"></script>

            
          
!
            
              body {
	margin: 0;
}

main {
	font-family: 'Open Sans', sans-serif;
	width: 80%;
	padding: 10px 5% 5% 5%;
	margin: 5%;
	text-align: center;
	background-color: #333;
	color: #ecf0f1;
	border-radius: 10px;
	height: 100%;
}

h1 {
	margin-bottom: 0;
}

h4 {
	margin-top: 5px;
}

#landingImg img{
	width: 90%;
	padding: 0;
	margin: 0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

#landingImg p {
	width: 85%;
	margin-left: 5%;
	margin-top: -7px;
	padding: 5px 2.5%;
	background-color: #444;
  color: #eee;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

/*
@media (min-width: 800px){
	.dropdown, .dropbtn {
		display: none;
	}
	#nav ul {
		list-style: none;
		padding: 15px;
		margin: 0 10px 5px 35px;
		border-bottom: 2px solid #ddd;
		border-radius: 15px;
		float: left;
		background-color: #511;
	}

	#nav li {
		display: inline-block;
		padding: 0 10px;
		margin-left: auto;
		margin-right: auto;
		font-size: larger;
	}

	#nav a {
		color: #ddd;
		background-color: #511;
		padding: 10px;
		border-radius: 10px;
	}
}
*/

/*@media (max-width: 800px) {*/
#nav {
	display: none;
}
.dropbtn {
background-color: #ecf0f1;
color: #333;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #ecf0f1;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ddd;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
	border-radius: 5px;
	left: -32%;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1; border-radius: 5px;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.dropdown:hover .dropdown-content {
    display: block;
}
/*}*/

a {
	text-decoration: none;
}

#nav a:hover {
	background-color: #aaa;
	padding: 10px;
}

#hint {
	display: inline;
	font-style: italic;
	font-size: 0.8em;
}

.image1 {
	float: left;
	display: inline;
	max-width: 280px;
	border-radius: 20px;
	margin: 0 20px 10px 0;
}

.content a {
	color: #93f;
}

.hidden {
	display: none;
}

.visible {
	display: block;
}

blockquote {
	margin: 0;
}

blockquote a {
	color: #3498db;
}

#resources {
	overflow: auto;
}

#resources img {
	float: right;
	width: 40%;
	max-width: 500px;
	border-radius: 10px;
	margin-right: 5%;
}

#resources a {
	color: inherit;
	font-size: large;
	padding: 15px;
}

#resources a:hover {
	background-color: #888;
	border-radius: 5px;
}

@media (max-width: 800px) {
	#resources img {
		display: none;
	}
}

footer {
	bottom: 0;
	background-color: #333;
	padding: 10px;
	margin: 0;
	text-align: center;
	font-size: large;
}

/* Timeline */
button {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}

body {
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
  color: #fff;
}


/* .section SECTION
––––––––––––––––––––––––––––––––––––––––––––––––––

.section {
  background: #ddd;
  padding: 50px 0;
}

.section .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section h1 {
  font-size: 2.5rem;
}

.section h2 {
  font-size: 1.3rem;
}

*/


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 160px;
  height: 3px;
  background: #fff;
}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  bottom: 0;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #ffdd56;
}


/* configure this later */
.timeline ol li div {
  position: absolute; /* this must be as is */
  left: calc(100% + 7px);
  width: 280px;
  height: auto !important;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: black;
  background: white;
}

.timeline ol li div::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.timeline ol li:nth-child(odd) div::before {
  top: 100%;
  border-width: 8px 8px 0 0;
  border-color: white transparent transparent transparent;
}

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
  top: -8px;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent white;
}

.timeline time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.timeline .lastLine {
    padding-right: 80px;
    border-right: 20px;
    margin-right: 20px;
}

@media (min-width: 800px) {
    .backToTop {
        display: none;
    }
}


/* TIMELINE ARROWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline .arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.timeline .arrows .arrow__prev {
  margin-right: 20px;
}

.timeline .disabled {
  opacity: .5;
}

.timeline .arrows i {
  width: 45px;
  height: 45px;
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 799px) {
  .timeline ol,
  .timeline ol li {
    width: auto;
  }

  .timeline ol {
    padding: 0;
    transform: none !important;
  }

  .timeline ol li {
    display: block;
    height: auto;
    background: transparent;
  }

  .timeline ol li:first-child {
    margin-top: 25px;
  }

  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }

  .timeline ol li div {
    width: 94%;
    height: 100% !important;
    margin: 0 auto 25px;
  }

  .timeline ol li div {
    position: static;
  }

  .timeline ol li:nth-child(odd) div {
    transform: none;
  }

  .timeline ol li:nth-child(odd) div::before,
  .timeline ol li:nth-child(even) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }

  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::before,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {
    display: none;
  }
}

            
          
!
            
              var contents = document.querySelectorAll(".content");
var buttons = document.querySelectorAll(".button");

window.addEventListener("DOMContentLoaded", function() {
	hideAll();
	contents[0].className = "visible";

})

function show(n) {
	hideAll();
	contents[n].className = "visible";
}

function hideAll() {
	for (var content of contents) {
		content.className = "hidden";
	}
}

// Timeline
(function () {

  // VARIABLES
  var timeline = document.querySelector(".timeline ol"),
      elH = document.querySelectorAll(".timeline li > div"),
      arrows = document.querySelectorAll(".timeline .arrows .arrow"),
      arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
      arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
      firstItem = document.querySelector(".timeline li:first-child"),
      lastItem = document.querySelector(".timeline li:last-child"),
      xScrolling = 350,
      disabledClass = "disabled";

  // START
  window.addEventListener("load", init);

  function init() {
    setEqualHeights(elH);
    animateTl(xScrolling, arrows, timeline);
    setSwipeFn(timeline, arrowPrev, arrowNext);
    setKeyboardFn(arrowPrev, arrowNext);
  }

  // SET EQUAL HEIGHTS
  function setEqualHeights(el) {
    var counter = 0;
    for (var i = 0; i < el.length; i++) {
      var singleHeight = el[i].offsetHeight;

      if (counter < singleHeight) {
        counter = singleHeight;
      }
    }

    for (var _i = 0; _i < el.length; _i++) {
      el[_i].style.height = counter + "px";
    }
  }

  // CHECK IF AN ELEMENT IS IN VIEWPORT
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
  }

  // SET STATE OF PREV/NEXT ARROWS
  function setBtnState(el) {
    var flag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;

    if (flag) {
      el.classList.add(disabledClass);
    } else {
      if (el.classList.contains(disabledClass)) {
        el.classList.remove(disabledClass);
      }
      el.disabled = false;
    }
  }

  // ANIMATE TIMELINE
  function animateTl(scrolling, el, tl) {
    var counter = 0;
    for (var i = 0; i < el.length; i++) {
      el[i].addEventListener("click", function () {
        if (!arrowPrev.disabled) {
          arrowPrev.disabled = true;
        }
        if (!arrowNext.disabled) {
          arrowNext.disabled = true;
        }
        var sign = this.classList.contains("arrow__prev") ? "" : "-";
        if (counter === 0) {
          tl.style.transform = "translateX(-" + scrolling + "px)";
        } else {
          var tlStyle = getComputedStyle(tl);
          // add more browser prefixes if needed here
          var tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("transform");
          var values = parseInt(tlTransform.split(",")[4]) + parseInt("" + sign + scrolling);
          tl.style.transform = "translateX(" + values + "px)";
        }

        setTimeout(function () {
          isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
          isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
        }, 1100);

        counter++;
      });
    }
  }

  // ADD SWIPE SUPPORT FOR TOUCH DEVICES
  function setSwipeFn(tl, prev, next) {
    var hammer = new Hammer(tl);
    hammer.on("swipeleft", function () {
      return next.click();
    });
    hammer.on("swiperight", function () {
      return prev.click();
    });
  }

  // ADD BASIC KEYBOARD FUNCTIONALITY
  function setKeyboardFn(prev, next) {
    document.addEventListener("keydown", function (e) {
      if (e.which === 37 || e.which === 39) {
        var timelineOfTop = timeline.offsetTop;
        var y = window.pageYOffset;
        if (timelineOfTop !== y) {
          window.scrollTo(0, timelineOfTop);
        }
        if (e.which === 37) {
          prev.click();
        } else if (e.which === 39) {
          next.click();
        }
      }
    });
  }
})();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console