Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<title> Laptop Investigation </title>

   <div class="w3-top">
   <div class="w3-bar w3-white w3-wide w3-padding w3-card-2">
    <a href="#home" class="w3-bar-item w3-button"><b>Laptop Investigation</b> Alessandro Volta</a>
<div class="w3-right w3-hide-small">
      <a href="#biography" class="w3-bar-item w3-button">Biography</a>
      <a href="#legacy" class="w3-bar-item w3-button">Legacy</a>
      <a href="#quotes" class="w3-bar-item w3-button">Quotes</a>
      <a href="#extra" class="w3-bar-item w3-button">Extra</a>
      <a href="#sources" class="w3-bar-item w3-button">Sources</a>
    </div>
  </div>
</div> <!--Top Bar-->

<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
   <div class="p1 w3-middle">
     <img class="w3-image volta" src="http://newsgo.it/wp-content/uploads/2017/03/Alessandro-Volta.jpg" alt="Alessandro Volta" width="600" height="1200">
  <div class="w3-display-middle w3-margin-top w3-center">
    <h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>Alessandro Volta</b></span> <span class="w3-hide-small w3-text-light-grey">Scientist</span></h1>
  </div>
</div> <!--image-->
<br>
<h class="w3-xxlarge w3-text-white"><span class=" w3-hide-small w3-text-white w3-padding w3-grey w3-opacity-min">(Zoom best fit = 75%)</span></h>
</header> <!--Header-->
<br>

<div class="w3-container w3-padding-32" id="biography">
    <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Biography</h3>
  </div>
<p style="float:left; text-indent:50px;"><img src="https://static1.squarespace.com/static/51cdd10de4b08819bd7bc9b4/t/54e5f411e4b08b7e358e5deb/1424356370619/SciSource_SB3781.jpg" height="400" width="300" border="1px"></p><p style="float: right; margin-right:50px;"><img class="border" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Electrophorus_device.png" height="400" width="300" border="1px"></p>
<p class="biography-p"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Alessandro Volta was born in Como, Lombardy, Italy, on February 18, 1745. At the age of 12, he started to study at a Jesuit boarding school. The Jesuit school charged no fees, but pressurized him to become a priest. His family did not want this, and withdrew him from the school after four years. His family wanted Volta to be a lawyer, but he had his own ideas, he was interested in the world around him and wanted to be a scientist. His main idea was to show the world his ideas and be able to make new revolutionary inventions with the ideas on his head.</p>
<p class="biography-p"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Alessandro Volta is most famous for inventing the electric battery. In 1800, Volta invented his first electric battery which people called the “voltaic pile”. With these inventions and discoveries, he was able to write his first electromotive series, which introduced the voltage of the battery when made from different materials. Due to Alessandro Volta’s invention and studies, the unit of electric potential is called the volt. he improved and popularised the electrophorus, a device that produced static electricity. His promotion of it was so extensive that he is often credited with its invention, even though a swedish scientist came up with a similar invention.</p>



<div class="w3-container w3-padding-32" id="quotes">
    <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Quotes</h3>
  </div>
<div>
<div class="border-center">
<p style="float:left; text-indent:50px;"><img class="simple_picture at_include" src="http://www.azquotes.com/picture-quotes/quote-you-must-be-ready-to-give-up-even-the-most-attractive-ideas-when-experiment-shows-them-alessandro-volta-145-66-56.jpg" alt="You must be ready to give up even the most attractive ideas when experiment shows them to be wrong. - Alessandro Volta" title="You must be ready to give up even the most attractive ideas when experiment shows them to be wrong. - Alessandro Volta" height="200" width="350"></p>
<p class="quotes-p"> This is one of Alessandro Volta’s famous quotes, “You must be ready to give up even the most attractive ideas when experiment shows them to be wrong.” This quote shows how Volta wanted to make every science experiments and scientific ideas perfect. However, this quote from Alessandro Volta clearly shows that scientists should be open minded and that their personal thoughts shouldn’t take over the result of the experiment. </p>
</div> <!--quote 1-->
<div class="border-center">
<p style="float:left; text-indent:50px;"><img class="simple_picture at_include" src="http://www.azquotes.com/picture-quotes/quote-each-metal-has-a-certain-power-which-is-different-from-metal-to-metal-of-setting-the-alessandro-volta-83-23-62.jpg" alt="Each metal has a certain power, which is different from metal to metal, of setting the electric fluid in motion... - Alessandro Volta" title="Each metal has a certain power, which is different from metal to metal, of setting the electric fluid in motion... - Alessandro Volta" height="200" width="350"></p>
<p class="quotes-p"> “Each metal has a certain power, which is different from metal to metal, of setting the electric fluid in motion…” This quote by Volta describes how he thought about different types of humans like people with different races. According to Volta’s quote he thinks that every human has it’s own abilities on doing things and that you shouldn’t judge them by the looks or by their names. However the outer meaning of this quote is that different types materials have their own stats and its own ‘setting of electric fluid in motion’. </p>
</div>
</div>
<div class="w3-container w3-padding-32" id="legacy">
    <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Legacy</h3>
  </div>
<p style="float: right; margin-right:150px;"><img class="border" src="https://upload.wikimedia.org/wikipedia/commons/5/52/Alessandro_Volta.jpeg" height="400" width="300" border="1px"></p>
  <p class="legacy-p"> Volta’s introduction of the electric battery exclusively influenced the Enlightenment, and the production of electrical inventions played a huge role in the development of nineteenth and twentieth century science.  Volta’s battery can be seen in many aspects of our today’s life. Car batteries are direct features of Volta’s original models.The unit of measurement for electrical drive or motivation is called a volt, as a testament to Volta’s influence in the development of electricity.</p>
<br>
<p class="legacy-p"><b> Without Volta’s batteries: </b></p>
<ul class="legacy-l">
  <li>Andrè Ampère and Hans Christian Oersted wouldn’t have been able to investigate magnetic fields</li>
  <li>Georg Ohm and Gustav Kirchhoff couldn’t be able to master electric current</li>
  <li>Michael Faraday could not have seen the way to generate electricity from magnetic fields</li>
  <li>James Clerk Maxwell also wouldn’t have unified it all with his theories on electromagnetism.</li>
</ul>

<div class="w3-container w3-padding-32" id="extra">
    <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Extra</h3>
   </div>
<div>
  <h2 class="w3-center">Inventions Volta made</h2>
<div class="w3-content w3-display-container">
  <img class="mySlides inventions" src="https://static1.squarespace.com/static/51cdd10de4b08819bd7bc9b4/t/54e5f411e4b08b7e358e5deb/1424356370619/SciSource_SB3781.jpg" alt="electic battery" style="width:25%">
  <img class="mySlides inventions" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Electrophorus_device.png" style="width:50%">
  <img class="mySlides inventions" src="https://cdn1.vox-cdn.com/thumbor/wmlnAzQDds-tIr5hQ8zQGDmjk5Q=/cdn0.vox-cdn.com/uploads/chorus_asset/file/3420350/voltasgun.0.jpg" style="width:50%">

  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
</div>
</div><!--image slideshow-->
<br>

<p class="extra-h border"><b> Interesting Facts </b></p>
<p class="extra-p"> Volta did not set out to invent the battery. His experiments in this area were actually performed to show the claims of another scientist were wrong. That scientist was another Italian, Luigi Galvani. Galvani, in the late 1780s, he noticed that a spark of static electricity carried by a metal scalpel touching the nerves of a dead frog. He believed that all animals generate electricity in their bodies and that electricity was sent to the muscles of the bodies to make them move. However Volta did a lot of experiments with frogs and found out that to make them move you had to make contact with two different metals. He discovered that the contact of the same two metals did nothing. Volta found that animal tissue was not needed to produce electricity.</p>
<br>

<p class="extra-h border"><b> Alessandro Volta Timeline </b></p>
<table width="640" border="0" cellspacing="0" cellpadding="0" align="center">
        <tbody><tr> 
          <td> 
            <table width="100%" border="0" cellspacing="5" cellpadding="5">
              <tbody><tr> 
                <td width="18%"> 
                  <div align="center"><font face="Arial, Helvetica, sans-serif" size="3">Volta wrote his first scientific paper</font></div>
                </td>
                <td width="10%">&nbsp;</td>
                <td width="19%"> 
                  <div align="center"><font size="3" face="Arial, Helvetica, sans-serif">Volta invented a much better eudiometer</font></div>
                </td>
                <td width="12%">&nbsp;</td>
                <td width="20%"> 
                  <div align="center"><font size="3" face="Arial, Helvetica, sans-serif">Volta built increasingly sensitive electroscopes</font></div>
                </td>
                <td width="21%">&nbsp;</td>
              </tr>
              <tr> 
                <td width="18%" bgcolor="#CCCCCC"> 
                  <div align="center"><font face="Arial, Helvetica, sans-serif"><b><font size="3">1765 </font></b></font></div>
                </td>
                <td width="10%">&nbsp;</td>
                <td width="19%" bgcolor="#CCCCCC"> 
                  <div align="center"><font face="Arial, Helvetica, sans-serif" size="3"><b>1777</b></font></div>
                </td>
                <td width="12%">&nbsp;</td>
                <td width="20%" bgcolor="#CCCCCC"> 
                  <div align="center"><font size="3" face="Arial, Helvetica, sans-serif"><b>1788 </b></font></div>
                </td>
                <td width="21%">&nbsp;</td>
              </tr>
            </tbody></table>
          </td>
        </tr>
        <tr> 
          <td><img src="http://www.teach-nology.com/web_tools/materials/timeline/line.gif" width="640" height="30"></td>
        </tr>
        <tr> 
          <td> 
            <table width="100%" border="0" cellspacing="5" cellpadding="5">
              <tbody><tr> 
                <td width="11%">&nbsp;</td>
                <td width="22%" bgcolor="#CCCCCC"> 
                  <div align="center"><font face="Arial, Helvetica, sans-serif" size="3"><b>1776</b></font></div>
                </td>
                <td width="11%">&nbsp;</td>
                <td width="20%" bgcolor="#CCCCCC"> 
                  <div align="center"><font size="3" face="Arial, Helvetica, sans-serif"><b>1778</b></font></div>
                </td>
                <td width="13%">&nbsp;</td>
                <td width="23%" bgcolor="#CCCCCC"> 
                  <div align="center"><font size="3" face="Arial, Helvetica, sans-serif"><b>1800</b></font></div>
                </td>
              </tr>
              <tr> 
                <td width="11%">&nbsp;</td>
                <td width="22%"> 
                  <div align="center"><font face="Arial, Helvetica, sans-serif" size="3">Volta was the first person to isolate methane gas</font></div>
                </td>
                <td width="11%">&nbsp;</td>
                <td width="20%"> 
                  <div align="center"><font size="3" face="Arial, Helvetica, sans-serif">Volta discovered that the electrical potential</font></div>
                </td>
                <td width="13%">&nbsp;</td>
                <td width="23%"> 
                  <div align="center"><font size="3" face="Arial, Helvetica, sans-serif">Volta invented the first electric battery</font></div>
                </td>
              </tr>
            </tbody></table>
          </td>
        </tr>
      </tbody></table>

<div class="w3-container w3-padding-32" id="sources">
    <h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Sources</h3>
   </div>
<div class="sources-p">
<p class="sources-h"><b> Bibliography </b></p>
<p> "Alessandro Volta." Legacies Rememebered. Accessed March 30, 2017. <a href="http://legaciesremembered.com/alessandro-volta/." class="source-l">http://legaciesremembered.com/alessandro-volta/. </a></p>
<p> "Home." Famous Scientists. Accessed March 28, 2017. <a href="https://www.famousscientists.org/alessandro-volta/." class="source-l">https://www.famousscientists.org/alessandro-volta/. </a></p>
<p> "QUOTES BY ALESSANDRO VOLTA." A-Z Quotes. Accessed March 28, 2017. <a href="http://www.azquotes.com/author/51693-Alessandro_Volta." class="source-l">http://www.azquotes.com/author/51693-Alessandro_Volta. </a></p>
<p> The Editors of Encyclopædia Britannica. "Alessandro Volta." Encyclopædia Britannica. March 20, 2017. Accessed March 30, 2017. <a href="https://www.britannica.com/biography/Alessandro-Volta." class="source-l"> https://www.britannica.com/biography/Alessandro-Volta. </a></p>
<p>"This Month in Physics History." American Physical Society. Accessed March 28, 2017. <a href="https://www.aps.org/publications/apsnews/200603/history.cfm." class="source-l"> https://www.aps.org/publications/apsnews/200603/history.cfm. </a></p>
<p>Worksheets, Lesson Plans, Teacher Resources, and Rubrics from TeAch-nology.com. Accessed April 10, 2017. <a href="http://www.teach-nology.com/cgi-bin/timeline.cgi."  class="source-l">http://www.teach-nology.com/cgi-bin/timeline.cgi.</a></p>
</div>
<br>

<h class="w3-xxlarge w3-text-white" style="float:right;"><span class=" w3-hide-small w3-text-white w3-padding w3-grey w3-opacity-min">by Sangmin Han</span></h>
              
            
!

CSS

              
                .p1 {
  background-color: gray;
}

.border {
  border-style: solid;
  border-width: 1px;
  padding: 15px;
}
.border-center {
  font: normal 400 20px/30px Times,serif;
  margin: 10px 0 0 10px;
  background-color: #edfdf0;
  border-bottom: 1px dashed #ccc;
  border-width: 10px;
  padding-top:30px;
  margin-left: 300px;
  margin-right: 300px;
}

.biography-p {
  font: normal 400 20px/30px Times,serif;
  text-indent: 50px;
  text-align: left;
  padding-right: 400px;
  padding-left: 400px;
}

.quotes-p {
  text-indent: 50px;
  padding-left: 450px;
  padding-right: 50px;
}

.legacy-p {
  text-indent: 50px;
  text-align: left;
  padding-right: 500px;
  padding-left: 50px;
  font: normal 400 20px/30px Times,serif;
}
.legacy-l {
  padding-left: 150px;
  padding-right: 500px;
  font: normal 400 20px/30px Times,serif;
}

.extra-h {
  padding-left: 350px;
  font: normal 400 40px/30px Times,serif;
}
.extra-p {
  font: normal 400 20px/30px Times,serif;
  text-indent: 50px;
  text-align: left;
  padding-right: 400px;
  padding-left: 400px;
}

.sources-h {
  font: normal 400 35px/30px Times,serif;
}
.sources-p {
  font: normal 400 20px/30px Times,serif;
  text-indent: 50px;
  text-align: left;
  padding-left: 50px;
}
.source-l {
  color: #0d8fea;
  text-decoration: underline;
}

.timeline-p {
  font: normal 50px/10px Times,serif;
}

.inventions {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.volta {
  margin-top: 55px;
}
              
            
!

JS

              
                var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none"; 
    }
    x[slideIndex-1].style.display = "block"; 
}
              
            
!
999px

Console