123

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.

            
              <div class="content">
	<h1>Albert  Einstein</h1>
	<div class="quote">
		<div class="logo"></div>
	</div>

	<div class="timeline">
		<div style="padding-bottom:100px;"></div>
		
		<div class="block">
			<div class="date right"><p class="right">14 March 1879</p></div>
			<div class="dot"></div>
			<div class="left first">
				<h1>Early life and education</h1><hr>
				<p>Albert Einstein was born in Ulm, in the Kingdom of Württemberg in the German Empire on 14 March 1879.His parents were Hermann Einstein, a salesman and engineer, and Pauline Koch. In 1880, the family moved to Munich, where Einstein's father and his uncle
					Jakob founded Elektrotechnische Fabrik J. Einstein & Cie, a company that manufactured electrical equipment based on direct current</p><br>
				<p>Near the beginning of his career, Einstein thought that Newtonian mechanics was no longer enough to reconcile the laws of classical mechanics with the laws of the electromagnetic field. This led to the development of his special theory of relativity.
					He realized, however, that the principle of relativity could also be extended to gravitational fields, and with his subsequent theory of gravitation in 1916, he published a paper on general relativity. He continued to deal with problems of statistical
					mechanics and quantum theory, which led to his explanations of particle theory and the motion of molecules. He also investigated the thermal properties of light which laid the foundation of the photon theory of light.</p>
				<br>
				<p>In 1895, at the age of 16, Einstein sat the entrance examinations for the Swiss Federal Polytechnic in Zürich (later the Eidgenössische Technische Hochschule, ETH). He failed to reach the required standard in the general part of the examination, but obtained
					exceptional grades in physics and mathematics. On the advice of the principal of the Polytechnic, he attended the Argovian cantonal school (gymnasium) in Aarau, Switzerland, in 1895–96 to complete his secondary schooling.</p>
				<a href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Read more</a>
			</div>
		</div>

		<div class="block">
			<div class="date left"><p class="left">30 April 1905</p></div>
			<div class="dot"></div>
			<div class="right hide">
				<h1>Academic career</h1><hr>
				<p>On 30 April 1905, Einstein completed his thesis,with Alfred Kleiner, Professor of Experimental Physics, serving as pro-forma advisor. As a result, Einstein was awarded a PhD by the University of Zürich, with his dissertation entitled, "A New Determination
					of Molecular Dimensions.That same year, which has been called Einstein's annus mirabilis (miracle year), he published four groundbreaking papers, on the photoelectric effect, Brownian motion, special relativity, and the equivalence of mass and energy,
					which were to bring him to the notice of the academic world, at the age of 26.</p>
				<br>
				<p>By 1908, he was recognized as a leading scientist and was appointed lecturer at the University of Bern. The following year, after giving a lecture on electrodynamics and the relativity principle at the University of Zürich, Alfred Kleiner recommended
					him to the faculty for a newly created professorship in theoretical physics. Einstein was appointed associate professor in 1909</p>
				<br>
				<p>In 1914, he returned to the German Empire after being appointed director of the Kaiser Wilhelm Institute for Physics (1914–1932) and a professor at the Humboldt University of Berlin, but freed from most teaching obligations. He soon became a member of
					the Prussian Academy of Sciences, and in 1916 was appointed president of the German Physical Society (1916–1918).</p>
				<a href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Read more</a>
			</div>
		</div>

		<div class="block">
			<div class="date right"><p class="right">2 April 1921</p></div>
			<div class="dot"></div>
			<div class="left hide">
				<h1>Travels abroad</h1><hr>
				<p>Einstein visited New York City for the first time on 2 April 1921, where he received an official welcome by Mayor John Francis Hylan, followed by three weeks of lectures and receptions. He went on to deliver several lectures at Columbia University
					and Princeton University, and in Washington he accompanied representatives of the National Academy of Science on a visit to the White House. On his return to Europe he was the guest of the British statesman and philosopher Viscount Haldane in London,
					where he met several renowned scientific, intellectual and political figures, and delivered a lecture at King's College London.</p>
				<br><p>In 1922, his travels took him to Asia and later to Palestine, as part of a six-month excursion and speaking tour, as he visited Singapore, Ceylon and Japan, where he gave a series of lectures to thousands of Japanese. After his first public lecture,
					he met the emperor and empress at the Imperial Palace, where thousands came to watch. In a letter to his sons, he described his impression of the Japanese as being modest, intelligent, considerate, and having a true feel for art.</p>

				<a href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Read more</a>
			</div>
		</div>

		<div class="block">
			<div class="date left"><p class="left">February 1933</p></div>
			<div class="dot"></div>
			<div class="right hide">
				<h1>Travel to the U.S.</h1><hr>
				<p>In February 1933 while on a visit to the United States, Einstein knew he could not return to Germany with the rise to power of the Nazis under Germany's new chancellor, Adolf Hitler. While at American universities in early 1933, he undertook his third
					two-month visiting professorship at the California Institute of Technology in Pasadena. He and his wife Elsa returned to Belgium by ship in March, and during the trip they learned that their cottage was raided by the Nazis and his personal sailboat
					confiscated. Upon landing in Antwerp on 28 March, he immediately went to the German consulate and turned in his passport, formally renouncing his German citizenship. A few years later, the Nazis sold his boat and turned his cottage into a Hitler
					Youth camp.</p>
				<br>
				<p>After arriving in New York City, Einstein was taken to various places and events, including Chinatown, a lunch with the editors of the New York Times, and a performance of Carmen at the Metropolitan Opera, where he was cheered by the audience on his
					arrival. During the days following, he was given the keys to the city by Mayor Jimmy Walker and met the president of Columbia University, who described Einstein as "the ruling monarch of the mind." Harry Emerson Fosdick, pastor at New York's Riverside
					Church, gave Einstein a tour of the church and showed him a full-size statue that the church made of Einstein, standing at the entrance. Also during his stay in New York, he joined a crowd of 15,000 people at Madison Square Garden during a Hanukkah
					celebration.</p>
				<a href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Read more</a>
			</div>
		</div>

		<div class="block">
			<div class="date right"><p class="right">1939</p></div>
			<div class="dot"></div>
			<div class="left hide">
				<h1>World War II and the Manhattan Project</h1><hr>
				<p>In 1939, a group of Hungarian scientists that included émigré physicist Leó Szilárd attempted to alert Washington to ongoing Nazi atomic bomb research. The group's warnings were discounted. Einstein and Szilárd, along with other refugees such as Edward
					Teller and Eugene Wigner, "regarded it as their responsibility to alert Americans to the possibility that German scientists might win the race to build an atomic bomb, and to warn that Hitler would be more than willing to resort to such a weapon."
					To make certain the U.S. was aware of the danger, in July 1939, a few months before the beginning of World War II in Europe, Szilárd and Wigner visited Einstein to explain the possibility of atomic bombs, which Einstein, a pacifist, said he had never
					considered. He was asked to lend his support by writing a letter, with Szilárd, to President Roosevelt, recommending the U.S. pay attention and engage in its own nuclear weapons research.</p>
				<br>
				<p>The letter is believed to be "arguably the key stimulus for the U.S. adoption of serious investigations into nuclear weapons on the eve of the U.S. entry into World War II". In addition to the letter, Einstein used his connections with the Belgian
					Royal Family and the Belgian queen mother to get access with a personal envoy to the White House's Oval Office. President Roosevelt could not take the risk of allowing Hitler to possess atomic bombs first. As a result of Einstein's letter and his
					meetings with Roosevelt, the U.S. entered the "race" to develop the bomb, drawing on its "immense material, financial, and scientific resources" to initiate the Manhattan Project. The U.S. became the only country to successfully develop nuclear weapons
					during World War II and also remains the only country to have used them in combat, against Hiroshima and Nagasaki on August 6 and 9, 1945, respectively, towards the end of the war.
				</p>
				<a href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Read more</a>
			</div>
		</div>

		<div class="block">
			<div class="date left"><p class="left">14 March 1879 - 17 April 1955</p></div>
			<div class="dot"></div>
			<div class="right hide">
				<h1>Love of music</h1><hr>
				<p>Einstein developed an appreciation for music at an early age, and later wrote: "If I were not a physicist, I would probably be a musician. I often think in music. I live my daydreams in music. I see my life in terms of music... I get most joy in life
					out of music."</p>
				<br>
				<p>His mother played the piano reasonably well and wanted her son to learn the violin, not only to instill in him a love of music but also to help him assimilate into German culture. According to conductor Leon Botstein, Einstein is said to have begun
					playing when he was 5, although he did not enjoy it at that age.</p>
				<br>
				<p>When he turned 13, he discovered the violin sonatas of Mozart, whereupon "Einstein fell in love" with Mozart's music and studied music more willingly. He taught himself to play without "ever practicing systematically", he said, deciding that "love is
					a better teacher than a sense of duty." </p>
				<br>
				<p>At age 17, he was heard by a school examiner in Aarau as he played Beethoven's violin sonatas." What struck the examiner, writes Botstein, was that Einstein displayed a deep love of the music, a quality that was and remains in short supply. Music possessed an unusual meaning for this student."
				</p>
				<a href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Read more</a>
			</div>
		</div>

		<div class="block">
			<div class="date right"><p class="right">14 March 1879 - 17 April 1955</p></div>
			<div class="dot"></div>
			<div class="left hide">
				<h1>Scientific career</h1><hr>
				<h4>Thermodynamic fluctuations and statistical physics</h4>
				<p>Einstein's first paper submitted in 1900 to Annalen der Physik was on capillary attraction. It was published in 1901 with the title "Folgerungen aus den Capillaritätserscheinungen", which translates as "Conclusions from the capillarity phenomena".
					Two papers he published in 1902–1903 (thermodynamics) attempted to interpret atomic phenomena from a statistical point of view. These papers were the foundation for the 1905 paper on Brownian motion, which showed that Brownian movement can be construed
					as firm evidence that molecules exist. His research in 1903 and 1904 was mainly concerned with the effect of finite atomic size on diffusion phenomena.</p>
				<br>
				<h4>Theory of relativity and <i>E = mc²</i></h4>
				<p>Einstein's "Zur Elektrodynamik bewegter Körper" ("On the Electrodynamics of Moving Bodies") was received on 30 June 1905 and published 26 September of that same year. It reconciles Maxwell's equations for electricity and magnetism with the laws of
					mechanics, by introducing major changes to mechanics close to the speed of light. This later became known as Einstein's special theory of relativity. Consequences of this include the time–space frame of a moving body appearing to slow down and contract
					(in the direction of motion) when measured in the frame of the observer. This paper also argued that the idea of a luminiferous aether—one of the leading theoretical entities in physics at the time—was superfluous.</p>
				<a href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Read more</a>
			</div>
		</div>

		<div class="block">
			<div class="date left"><p class="left">17 April 1955</p></div>
			<div class="dot"></div>
			<div class="right hide">
				<h1>Death</h1><hr>
				<p>On 17 April 1955, Albert Einstein experienced internal bleeding caused by the rupture of an abdominal aortic aneurysm, which had previously been reinforced surgically by Rudolph Nissen in 1948. He took the draft of a speech he was preparing for a
					television appearance commemorating the State of Israel's seventh anniversary with him to the hospital, but he did not live long enough to complete it.
				</p>
				<br>
				<p>Einstein refused surgery, saying: "I want to go when I want. It is tasteless to prolong life artificially. I have done my share, it is time to go. I will do it elegantly.He died in Princeton Hospital early the next morning at the age of 76, having
					continued to work until near the end.</p>
				<br>
				<p>During the autopsy, the pathologist of Princeton Hospital, Thomas Stoltz Harvey, removed Einstein's brain for preservation without the permission of his family, in the hope that the neuroscience of the future would be able to discover what made Einstein
					so intelligent. Einstein's remains were cremated and his ashes were scattered at an undisclosed location.</p>
				<a href="https://en.wikipedia.org/wiki/Albert_Einstein" target="_blank">Read more</a>
			</div>
		</div>
		
		<div style="padding-bottom:100px;"></div>
	</div>
	<div id="footer">
		<p id="copyright">Made by&nbsp;<strong><a href="https://www.linkedin.com/in/nicolae-stefan-tudoran-b02291127/" target="_blank">StefanTudoran</a></strong></p>
	</div>
</div>
            
          
!
            
              @3d-shadow: #eee;
@border: #fff;
@date: #fd69c4;
@dot: #fd69c4;
@text: #2c64d0;

/******Slide In******/
.hide{
	opacity: 0;
}

body{
	font-family: 'Roboto Condensed', sans-serif;
}

.slideIn_Mobile {
	opacity: 1;
	animation: slideIn_Mobile .50s;
}

@keyframes slideIn_Mobile {
	0% {
		opacity: 0.5;
		transform: scale(.6);
	}
  55% {
    transform: scale(1.03);
  }
	75% {
    transform: scale(0.98);
  }
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/****************/

body {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	backface-visibility: hidden;
	perspective: 1000;
	background: linear-gradient(90deg, #6190E8 0%, #A7BFE8 100%);
}
.content {
	position: relative;
	width: 100%;
	height: auto;
  text-shadow: 0 0 1px rgba(0,0,0,.05);
	z-index: 99;
	-webkit-backface-visibility: hidden;
	
	h1{
		margin: 35px auto 0 auto;

		font-size: 58px;
		text-align: center;
		color: #fff;

    text-shadow: 0 3px 0 #bbb, 0 1px 0 #bbb, 0 2px 0 #bbb, 0 3px 5px rgba(0, 0, 0, 0.5);
		}
	.logo {
		display: block;
		position: relative;
		width: 265px; height: 265px;

		border-radius: 300px;
		border: solid 8px @border;
		margin: 20px auto 0 auto;

		box-shadow: 0 3px 5px rgba(0, 0, 0, .08), inset 0 4px 12px rgba(0, 0, 0, .05);

		z-index: 0;
		background: url("https://3.bp.blogspot.com/-LJ1EymrCgzI/VMy_ukS4buI/AAAAAAAAEA0/PYiYIVWudZ4/s1600/8.%2BAlbert%2BEinstein,%2B$10M.jpg");
		background-size: 112%;
	}
	.quote {
		opacity: 1;
		p {
			position: relative;
			width: 70%; height: auto;
			margin: 0 auto;
			top: -10px;

			color: #fff;
			font-size: 38px;
			text-align: center;
			text-shadow: 0 3px 0 #dadada, 0 1px 0 #dadada, 0 2px 0 #dadada, 0 3px 5px rgba(0, 0, 0, 0.5);
		}
	}
	.timeline:before {
		content: '';
		position: absolute;
		height: 100%; width: 6px;
		margin-left: auto; margin-right: auto;
		left: 0; right: 0;
		background: #fff;

		z-index: -100;
	}
	.timeline {
		position: relative;
		width: 98%; height: auto;
		margin: 0 auto auto auto;
	}
	.block {
		display: inline-block;
		position: relative;
		width: 100%; height: auto;
		margin: 25px auto 25px auto;
		padding: 0;
		backface-visibility: hidden;
		perspective: 1000;
		text-align: center;
		hr {
			width: 90%; height: 1px;
			margin: -10px auto 20px auto;
			border: 0;
		}
		h1, h4 {
			width: 90%;
			margin: 22px auto;

			color: @text;
			font-size: 32px;
			text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
		}
		h4 {
			font-size: 17px;
		}
		p {
			width: 85%; height: auto;
			margin: 0 auto;
			color: @text;
			font-size: 17px;
		}
		a {
			display: block;
			width: 120px; height: 36px;
			margin: 22px auto 20px auto;
			padding: 0 10px 0 10px;

			text-align: center;
			text-decoration: none;
			text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
			color: #fff;
			font-weight: bold;
			font-size: 18px;
			line-height: 36px;

			border-radius: 6px;
			background: @date;
		}
		a:hover {
			background: lighten(@date, 3%);
		}
		a:active {
			background: darken(@date, 3%);
			box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15);
		}

		.dot {
			display: block;
			width: 16px; height: 16px;
			position: absolute;
			margin-left: auto; margin-right: auto;
			left: 0; right: 0;
			margin-top: 25px;

			background-color: @dot;
			border: solid 5px #fff;
			border-radius: 100px;

			z-index: 300;
		}
		.left, .right {
			display: block;
			position: relative;
			width: 45%; height: auto;
			backface-visibility: hidden;
			perspective: 1000;
			background: #fff;
			border-radius: 7px;
			box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
			z-index: 2;
		}
		.left.first {
			margin-left: 0;
		}
		.left::before {
			content: "";
			position: absolute;
			width: 0; height: 0;
			top: 23px; left: 100%;

			border-width: 15px;
			border-style: solid;
			border-color: transparent transparent transparent #ffffff;
		}
		.right::before {
			content: "";
			position: absolute;
			width: 0; height: 0;
			top: 23px; right: 100%;

			border-width: 15px;
			border-style: solid;
			border-color: transparent #ffffff transparent transparent;
		}
		.left {
			float: left;
		}
		.right {
			float: right;
		}

		.date {
			display: block;
			position: relative;
			width: 45%; height: 78px;
			z-index: 1;

			p {
				margin: 0;
				width: 150px; height: 58px;
				padding: 10px 25px 10px 25px;
				line-height: 58px;
				color: @text;
				text-align: center;
				font-weight: bold;

				border-radius: 7px;
				background-color: @border;
				box-shadow: 0 3px 5px rgba(0, 0, 0, .08);
			}
			p.right {
				float: left;
				margin-left: 0;
				width: auto;
			}
			p.left {
				float: right;
				margin-left: 0;
				width: auto;
			}
		}
		.date.right, .date.left {
			background: none;
			box-shadow: none;
		}
	}
	#footer {
		position: relative;
		width: 180px; min-height: 25px;
		margin:0 auto;
		
		border-radius:17px;

		box-shadow: 0 -2px 6px rgba(0, 0, 0, .1);
		background-color: #fff;

		z-index: 1000;
	}
}

::-moz-selection {
	background: @date;
	color: #fff;
}
::selection {
	background: @date;
	color: #fff;
}

@media only screen and (max-width: 1136px) {
	.content {
		.timeline {
			.block {
				margin: 50px auto 50px auto;
				h1 {
					margin: 35px auto 15px auto;
				}
				.dot {
					margin-top: -14px;
					position: absolute;
					margin-left: auto;
					margin-right: auto;
					left: 0;
					right: 0;
				}
				.right, .left {
					width: 100%;
					margin-top:18px;
				}
				.right:before, .left:before {
					content: none;
				}
				.date {
					height: 50px;
					margin: 0 auto;

					p {
						float: none;
						width: 250px;
						margin: 0 auto;
						border-radius: 10px;
					}
				}
			}
		}
	}
}
#copyright {
	font-size: 16px;
	color: @text;
	margin: 0 auto 100px auto;
	line-height: 40px;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
	width: 180px;
	text-align: center;
	a{
		text-decoration: none;
		color: @text;
		-webkit-transition: all ease-in-out 0.35s;
		-moz-transition: all ease-in-out 0.35s;
		-o-transition: all ease-in-out 0.35s;
		transition: all ease-in-out 0.35s;
	}
	a:hover {
		color: #6e89a5;
	}
}

            
          
!
            
              $(document).ready(function() {
	var previousScroll, 
			previousWidth = 0,
			currentScroll = $(this).scrollTop(),
			curentWidth = $(window).width(),
			SpeedOfAnimationActivation = 0,
			totalHide = $('.hide'),
			posFirstBlock = $('.block').eq(0).offset().top - 150;
	
	// If the current position is > than the first 2 divs then force add the class to all divs.
	if (currentScroll > 600){
		for ( var i = 0; i < totalHide.length; i++ ){
			//Desktop animation
			$(totalHide[i]).addClass('slideIn_Mobile').removeClass('hide');
		}
	}
	
	// If the current width > than the 961px .... do something.
	function SpeedAnimation(){
		if (curentWidth >= 1136){
			SpeedOfAnimationActivation = 100;
		}
		else{
			SpeedOfAnimationActivation = 450;
		}
	}
	SpeedAnimation();

	// End
	
	// Get the position of each div just once and store it into the array.
	var array_div = [];// holds the relative position of each div in the page.
	for ( var j = 0; j < totalHide.length; j++ ){
		array_div[j] = $(totalHide[j]).offset().top + $(totalHide[j]).outerHeight()-SpeedOfAnimationActivation;
	}
	var startWidth = $(window).width();
	// If difference is > or < then recalculate each position again
	$(window).resize(function(event) {							
		var curentWidth = $(window).width();
		var difference = curentWidth - startWidth;

		if (difference > 175 || difference < -175){
			SpeedAnimation();
			
			for (var j = 0; j < totalHide.length; j++){
				array_div[j] = $(totalHide[j]).offset().top + $(totalHide[j]).outerHeight()-SpeedOfAnimationActivation;
			}
		}
	});
	// -------> End
	
	// Show each div on scroll
	$(window).scroll( function(){		
		var currentScroll = $(this).scrollTop();
		// Here we start the search of each div if we are scrolling down.
		if (currentScroll > previousScroll){
			// Get the current position of viewport from the top of page.
			var browser_window = $(window).scrollTop() + $(window).height();
			// Start the search for the current class in the html.
			for (var k = 0; k < totalHide.length; k++){
				let curentWidth = $(window).width();
				if ($(totalHide[k]).is('.hide') && array_div[k] != true && currentScroll > posFirstBlock){
					if (browser_window > array_div[k]){
						$(totalHide[k]).addClass('slideIn_Mobile').removeClass('hide');
						array_div[k] = true;
					}
				}
			}
		}
		previousScroll = currentScroll;
	});
	// End
});
            
          
!
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.

Console