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.

            
              <link href='https://fonts.googleapis.com/css?family= 'Abel'' rel= 'stylesheet' type = 'text/css'>

<h1>The Life of Albert Einstein</h1>

<div id="wrapper">
  <div id="textholder">
    <p id="text">Mouse Over the Planets to see Einstein's Life Unfold</p>
  </div>
  <img id="Einstein" src=http://a4.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTE5NDg0MDU0OTU2OTAxOTAz.jpg />
  <br>

  <img class="planet" id="sun" src=https://s19.postimg.org/9werc1843/sun.jpg />
  <img class="planet" id="venus" src=https://s19.postimg.org/gtdj2atsf/mercury.jpg ""/>
  <img class="planet" id="mercury" src=https://s19.postimg.org/hzcxncspb/venus.jpg ""/>
  <img class="planet" id="earth" src=https://s19.postimg.org/hudrrfarz/moon.jpg />
  <img class="planet" id="mars" src=https://s19.postimg.org/iz7twsx8v/mars.jpg />
  <img class="planet" id="jupiter" src=https://s19.postimg.org/qgh1c0ms3/Jupier.jpg />
  <img class="planet" id="saturn" src=https://s19.postimg.org/isu4tpo43/Saturn.jpg />
  <img class="planet" id="uranus" src=https://s19.postimg.org/oebyk0zf7/uranus.jpg />
  <img class="planet" id="neptune" src=https://s19.postimg.org/lph5tztxv/Neptune.jpg />
  <img class="planet" id="pluto" src=https://s19.postimg.org/3le59cw9f/Pluto.jpg />
  <img class="planet" id="sunTwo" src=https://s19.postimg.org/9werc1843/sun.jpg />
  <img class="planet" id="venusTwo" src=https://s19.postimg.org/gtdj2atsf/mercury.jpg />
  <img class="planet" id="mercuryTwo" src=https://s19.postimg.org/hzcxncspb/venus.jpg />
  <img class="planet" id="earthTwo" src=https://s19.postimg.org/hudrrfarz/moon.jpg />
  <img class="planet" id="marsTwo" src=https://s19.postimg.org/iz7twsx8v/mars.jpg />
  <img class="planet" id="jupiterTwo" src=https://s19.postimg.org/qgh1c0ms3/Jupier.jpg />
  <img class="planet" id="saturnTwo" src=https://s19.postimg.org/isu4tpo43/Saturn.jpg />
  <img class="planet" id="uranusTwo" src=https://s19.postimg.org/oebyk0zf7/uranus.jpg />
  <img class="planet" id="plutoTwo" src=https://s19.postimg.org/3le59cw9f/Pluto.jpg >

  <img class="planet" id="moon" src=https://s19.postimg.org/fi5rtty6r/moon2.jpg />

</div>
            
          
!
            
              

h1 {
  width: 400px;
  margin: auto;
  color:white;
  text-shadow: 1px 1px gold;
  }

body{ 
    background: url(http://universe-beauty.com/albums/userpics/2011y/05/11/1/10/universe-hd-photo57-JPG.jpg)
}

#wrapper{
  background:black;
  width: 1100px;
  margin-left:auto;
  margin-right:auto;
  height:550px;
  border-radius: 60px;
  border-style: solid;
  border-color:gold;
  }

.planet {
  width:50px;
}

#Einstein{
  display:block;
  margin-left:auto;
  margin-right:auto;
  width:auto;
  margin-top:-260px;
  height:300px;
  border-radius:30px;
  border-style: solid;
  border-color: gold;
  box-shadow: 2px 2px silver;
 
}

img#planet:hover{ 
background:white;
}

#texthover{
  display:inline;
}

#textholder{
  color:white;
  width:350px;
  height:350px;
  background:black;
  position:relative;
  top:50px;
  left:20px;
  display: table-cell;
  vertical-align:middle;
}

p {
  text-align:center;
  vertical-align:middle;
}

#text{
  text-shadow: .2px .2px gold, .5px .5px silver;
  font-size:1.1em;
  font-family: 'Abel', sans-serif;
  
}
            
          
!
            
              document.getElementById("sun").onmouseover = function() {sunMouseOver()};
document.getElementById("sun").onmouseout =  function() {sunMouseOut()};
document.getElementById("venus").onmouseover = function() {venusMouseOver()};
document.getElementById("venus").onmouseout =  function() {venusMouseOut()};
document.getElementById("mercury").onmouseover = function() {mercuryMouseOver()};
document.getElementById("mercury").onmouseout =  function() {mercuryMouseOut()};
document.getElementById("earth").onmouseover = function() {earthMouseOver()};
document.getElementById("earth").onmouseout =  function() {earthMouseOut()};
document.getElementById("mars").onmouseover = function() {marsMouseOver()};
document.getElementById("mars").onmouseout =  function() {marsMouseOut()};
document.getElementById("jupiter").onmouseover = function() {jupiterMouseOver()};
document.getElementById("jupiter").onmouseout =  function() {jupiterMouseOut()};
document.getElementById("saturn").onmouseover = function() {saturnMouseOver()};
document.getElementById("saturn").onmouseout =  function() {saturnMouseOut()};
document.getElementById("uranus").onmouseover = function() {uranusMouseOver()};
document.getElementById("uranus").onmouseout =  function() {uranusMouseOut()};
document.getElementById("neptune").onmouseover = function() {neptuneMouseOver()};
document.getElementById("neptune").onmouseout =  function() {neptuneMouseOut()};
document.getElementById("pluto").onmouseover = function() {plutoMouseOver()};
document.getElementById("pluto").onmouseout =  function() {plutoMouseOut()};
document.getElementById("moon").onmouseover = function() {moonMouseOver()};
document.getElementById("moon").onmouseout =  function() {moonMouseOut()};
document.getElementById("sunTwo").onmouseover = function() {sunTwoMouseOver()};
document.getElementById("sunTwo").onmouseout = function() {sunTwoMouseOut()};
document.getElementById("venusTwo").onmouseover = function() {venusTwoMouseOver()};
document.getElementById("venusTwo").onmouseout = function() {venusTwoMouseOut()};
document.getElementById("mercuryTwo").onmouseover = function() {mercuryTwoMouseOver()};
document.getElementById("mercuryTwo").onmouseout = function() {mercuryTwoMouseOut()};
document.getElementById("earthTwo").onmouseover = function() {earthTwoMouseOver()};
document.getElementById("earthTwo").onmouseout = function() {earthTwoMouseOut()};
document.getElementById("marsTwo").onmouseover = function() {marsTwoMouseOver()};
document.getElementById("marsTwo").onmouseout = function() {marsTwoMouseOut()};
document.getElementById("jupiterTwo").onmouseover = function() {jupiterTwoMouseOver()};
document.getElementById("jupiterTwo").onmouseout = function() {jupiterTwoMouseOut()};
document.getElementById("saturnTwo").onmouseover = function() {saturnTwoMouseOver()};
document.getElementById("saturnTwo").onmouseout = function() {saturnTwoMouseOut()};
document.getElementById("uranusTwo").onmouseover = function() {uranusTwoMouseOver()};
document.getElementById("uranusTwo").onmouseout = function() {uranusTwoMouseOut()};

document.getElementById("plutoTwo").onmouseover = function() { plutoTwoMouseOver() };
document.getElementById("plutoTwo").onmouseout = function() {plutoTwoMouseOut()};



function sunMouseOver() {
  document.getElementById("text").innerHTML = "1879 Albert Einstein Born <br><br> Albert Einstein is born in Ulm, Germany, the son of Hermann Einstein, a German-Jewish featherbed salesman, and his wife Pauline.";
}

function sunMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function venusMouseOver() {
  document.getElementById("text").innerHTML = "1884 Mystery of Magnetism <br><br> At the age of five, Albert Einstein becomes fascinated by his father's pocket compass, intrigued by invisible forces that cause the needle always to point north. Later in life, Einstein will look back at this moment as the genesis of his interest in science.";
}

function venusMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function mercuryMouseOver() {
  document.getElementById("text").innerHTML = "1894 Move to Italy <br><br> Struggling financially, the Einstein family moves from Germany to Italy in search of better work. Albert, aged fifteen, stays behind in Munich to finish his schooling, but soon either quits or is kicked out of his high school and follows his parents to Italy.";
}

function mercuryMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function earthMouseOver() {
  document.getElementById("text").innerHTML = "1895 Boarding School in Aarau <br><br> Albert Einstein attempts to get out of his last year of high school by taking an entrance exam to ETH, the Swiss Polytechnic University in Zurich. He fails the test, forcing him to attend one final year of high school in the small town of Aarau, Switzerland, instead.";
}

function earthMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function marsMouseOver() {
  document.getElementById("text").innerHTML = "1896 Eistein at ETH <br><br> Albert Einstein graduates from high school and begins attending ETH, the prestigious Swiss Polytechnic University in Zurich."
}

function marsMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function jupiterMouseOver() {
  document.getElementById("text").innerHTML = "1896 Einstein Renounce German Citizen Ship <br><br> At the age of 17, Albert Einstein renounces his German citizenship to avoid mandatory military service in the German army. For the next four years, he will not be a legal citizen of any nation.";
}

function jupiterMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function saturnMouseOver() {
  document.getElementById("text").innerHTML = "1900 College Graduation <br><br> Albert Einstein graduates from ETH with a degree in physics. He tries to find a teaching job, but is unable to obtain work.";
}

function saturnMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function uranusMouseOver() {
  document.getElementById("text").innerHTML = "1901 Swiss Citizenship <br><br> Albert Einstein obtains Swiss citizenship.";
}

function uranusMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function neptuneMouseOver() {
  document.getElementById("text").innerHTML = "1901 Einstein Impregnates Girlfriend <br><br> Albert Einstein travels to Italy for a tryst with his on-again, off-again girlfriend, Milena Maric, a former classmate at the ETH. He ends up getting her pregnant.";
}

function neptuneMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function plutoMouseOver() {
  document.getElementById("text").innerHTML = "1902 Daughter Born, Put Up For Adoption <br><br> Milena Maric gives birth to Leiserl Einstein, Albert's first child. The unwed couple, unable to care for the girl and perhaps ashamed of her illegitimate status, put her up for adoption.";
}

function plutoMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function moonMouseOver() {
  document.getElementById("text").innerHTML ="1919 Restoration of German Citizenship <br><br>At the close of World War I, Albert Einstein regains his German citizenship in a gesture of solidarity with liberal new government of the Weimar Republic."
}

function moonMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function sunTwoMouseOver() {
  document.getElementById("text").innerHTML = "1902 Swiss Patent Office<br><br> Unable to find any work as a teacher or academic, Albert Einstein takes a job as a clerk at the Swiss Patent Office.";
}

function sunTwoMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function venusTwoMouseOver() {
  document.getElementById("text").innerHTML = "1903 Einstein Marries Milena Maric<br><br>Albert Einstein marries his longtime girlfriend, Milena Maric.";
}

function venusTwoMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function mercuryTwoMouseOver() {
  document.getElementById("text").innerHTML = "1904 Birth of Hans Albert Einstein<br><br>A year after marrying Albert, his wife Milena gives birth to the Einsteins' first son, Hans Albert.";
}

function mercuryTwoMouseOut() {
  document.getElementById("text").innerHTML = "";
}


function earthTwoMouseOver() {
  document.getElementById("text").innerHTML = "1905 Annus Mirabilis<br><br>Over the course of a year that he will later describe as his 'Annus Mirabilis'—his miraculous year—Albert Einstein publishes four major theoretical papers in the prestigious German academic journal Annalen Der Physik. The four papers include a groundbreaking new interpretation of the photoelectric effect (for which Einstein will eventually win the Nobel Prize) as well as the first published exploration of the theory of Special Relativity and the first formulation of the famous equation e=mc2.";
}

function earthTwoMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function marsTwoMouseOver() {
  document.getElementById("text").innerHTML = "1910 Birth of Eduard Einstein <br> Albert Einstein's wife Milena gives birth to their second son, Eduard.";
}

function marsTwoMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function jupiterTwoMouseOver() {
  document.getElementById("text").innerHTML = "1912 Move Back to Murich <br><br> After just a year in Prague, the Einsteins move back to Switzerland, to where Albert takes professorship at his alma mater, the Swiss Federal Institute of Technology in Zurich.";
}

function jupiterTwoMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function saturnTwoMouseOver() {
  document.getElementById("text").innerHTML = "1914 Director of Kaiser Wilhelm Institute <br><br> Albert Einstein moves to from Zurich to Berlin to become the director of the prestigious Kaiser Wilhelm Institute. His marriage to Milena begins to unravel, and his wife and children decide to stay behind in Zurich. They will never live together as a family again.";
}

function saturnTwoMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function uranusTwoMouseOver() {
  document.getElementById("text").innerHTML = "1915 General Theory of Relativity <br><br> Einstein completes his General Theory of Relativity.";
}

function uranusTwoMouseOut() {
  document.getElementById("text").innerHTML = "";
}

function plutoTwoMouseOver() {
  document.getElementById("text").innerHTML = "1919 Divorce and Remarriage<br><br>After several years of estrangement, Albert divorces his first wife Milena Maric and immediately remarries. Einstein's second wife, Elsa Lowenthal, is a cousin with whom he fell in love when she nursed him back to health following a serious illness in 1917.";

}

function plutoTwoMouseOut() {
  document.getElementById("text").innerHTML = "";
}
            
          
!
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