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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" type="text/css">
<!--Lobster, Lobster 2, Quicksand, BioRhyme, Bitter-->
  <body style="font-family: Quicksand; color: black; background-color: black;">
  <div id="container">
    <div class="page1-background">
      <h1 class="text-center" style="padding-top: 30px"><b>Charles Babbage</b></h1>
      <h3 class="text-center"><em><b>The man who conceived the first computer</b></em></h3>
      <hr width="65%" />
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Charles_Babbage_1860.jpg/220px-Charles_Babbage_1860.jpg" class="title-image">
        <section id="Quote1">
          <h3 style="color: black" class="text-center text-info"><b>"Errors using inadequate data are much less than those using no data at all."<b></h3>
        </section>
        <section id="Signature1">
    <h4 class="text-center" style="margin-right: 550px; margin-top: 5px; margin-bottom: 30px">- Charles Babbage</p>
        </section>
    <div id="Timeline">
      <h3 class="text-left" style="margin-left: 300px; margin-right: 300px; margin-bottom: 5px; padding-bottom: 5px"><b>Charles Babbage led a life of invention and intellectual innovation. Major milestones in his life are listed below:</b></h3>
     <div class="solid-border1 off-white-background" style="margin-left: 300px; margin-right: 300px; padding-bottom: 1px; padding-top: 5px; color: black">
      <ul class="text-left" style="font-size: 16px">
        <li><b>1791:</b> Charles Babbage is born in England on December 26th</li>
        <li><b>1798:</b> Sent to Alphington near the city of Exeter for schooling and to recover from a fever that was nearly fatal</li>
        <li><b>1810:</b> The already self-taught mathematician attends Cambridge. Due to his extensive background in math, he was disappointed by the instruction available at the university</li>
        <li><b>1812:</b> Babbage, along with John Hershel and George Peacock, form the Analytical Society, a group that promoted the Leibnizian notation for differentiation in calculus</li>
        <li><b>1814:</b> The scholar graduates without honors for defending a thesis that was considered blasphemous at the time</li>
        <li><b>1815:</b> Babbage lectures at the Royal Institution on astronomy</li>
        <li><b>1816:</b> Made a fellow of the Royal Society</li>
        <li><b>1822:</b> Work begins on the Difference Engine, a mechanized machine capable of solving polynomial functions. It used four basic functions: addition, subtraction, multiplication, and division</li>
        <li><b>1825:</b> Babbage works with John Hershel to publish Arago’s rotations</li>
        <li><b>1831:</b> The difference engine is left unfinished due to funding problems. While it was never completed by Babbage, two fully functional models were constructed in 2002 </li>
        <li><b>1838:</b> Babbage invents the pilot, the metal device on the front of trains that is meant to clear the track of obstacles </li>
        <li><b>1840-1871:</b> Babbage invents the Analytical Engine. It marked the transition from mechanical arithmetic to full-blown computation. It had memory, a processor, and it could be programmed with small punch cards. Like the Difference Engine, this machine was never built. However, the Analytical Engine is considered to be the first conception of the modern computer</li>
        <li><b>1871:</b> Charles Babbage dies in his home at the age of 79</li>
       </ul>
        </div>
      </div>
   <section id="Quote2">
     <h3 class="text-left" style="margin-left: 510px; margin-right: 570px;"><b>"At each increase of knowledge, as well as on the contrivance of every new tool, human labour becomes abridged."</b></h3>
    <h4 style="margin-left: 550px; padding-bottom: 30px">- Charles Babbage</h4>
      </div>    
      </section>
    <div class="page2-background">
      <h1 class="text-center hidden-xs" style="padding-top: 30px";><b>Mechanical Creations</b>
      </h1>
   <div class="hidden-xs" id="Page2photos"
      <div class="row">
        <div class="col-xs-6">
          <img src="http://www.101101.io/babbage/babbage-engine-main.jpg" class="solid-border2 img-1">
        </div>
        <div class="col-xs-6">
          <img src="http://ed-thelen.org/bab/bab-t-173.jpg" class="solid-border2 img-2">
      </div>
      <!--Had to remove a </div> for some reason-->
      <div class="row">
        <div class="col-xs-6">
          <h4 class="solid-border2 text-center white-background" style="margin-left: 115px; margin-right: 55px; margin-top: 0px" width="600px" height="300px">Difference Engine constructed in 2002</h4>
        </div>
        <div class="col-xs-6">
          <h4 class="solid-border2 text-center white-background" style="margin-left: 69px; margin-right: 98px; margin-top: 0px" width="600px" height="300"> Analytical Engine as designed by Charles Babbage
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6">
          <img src="https://c1.staticflickr.com/9/8118/8650386728_92056a6a5b_b.jpg" class="solid-border2 img-3">
        </div>
        <div class="col-xs-6">
          <img src="https://www.wired.com/wp-content/uploads/archive/images/slideshow/2008/04/gallery_babbage/10.jpg" class="solid-border2 img-4">
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6">
          <h4 class="solid-border2 text-center white-background" style="margin-left: 114px; margin-right: 55px; margin-top: 0px" width="600px" height="300px">Punch cards used to program the Analytical Engine</h4>
        </div>
        <div class="col-xs-6">
          <h4 class="solid-border2 text-center white-background" style="margin-top: 0px; margin-left: 70px; margin-right: 100px;" width="600px" height="300"> Numerical columns of the Difference Engine</h4>
        </div>
   </div>
      </div>
   <section id="Wikepedia">
        <h3 class="text-center" style="margin-top: 60px; padding-bottom: 60px;"><b>To learn more about the genius of Charles Babbage, check out his<a href="https://en.wikipedia.org/wiki/Charles_Babbage" target="_blank"> Wikipedia page</b></a>
      </div>
     </section>
          </div>
    <h4 class="text-center" style="color: white; margin-top: -40px;">Coded and written by <a href="https://codepen.io/russeld8/" target="_blank">Dylan Russell</a></h4>
 

    
              
            
!

CSS

              
                #container {
  width: 1650px;
}
.page1-background {
  background-image: url("http://wallpapercave.com/wp/aVMEQR0.jpg");
  background-repeat: no-repeat;
  background-size: 120%;
  border-radius: 4px;
  margin: 60px 40px 60px 40px;
}
.page2-background {
  background-image: url("http://wallpapercave.com/wp/aVMEQR0.jpg");
  border-radius: 4px;
  background-size: 100%;
  margin: 60px 40px 60px 40px;
}
.off-white-background {
  background-color: #F0EFEF;
  background-repeat: no-repeat;
  background-size: 100%;
}
.solid-border1 {
  border-style: solid;
  border-color: black;
  border-radius: 6px;
}
.solid-border2 {
  border-style: solid;
  border-color: black;
  border-radius: 0px;
}
.white-background {
  background-color: white;
}
.title-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
  border-radius: 50%;
  padding-top: 0px
}
body {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
  border-radius: auto;
  padding-top: 0px
}
  .img-1 {
    margin-left: 100px;
    margin-top: 40px;
    width: 600px;
    height: 300px;
  }
.img-2 {
  margin-left: 70px;
  margin-top: 40px;
  width: 600px;
  height: 300px
}
.img-3 {
  margin-left: 114px;
  margin-top: 40px;
  width: 600px;
  height: 300px;
}
.img-4 {
  margin-left: 70px;
  margin-top: 40px;
  width: 600px;
  height: 300px;
}
    
@media screen and (max-width: 450px) { 
  #container {
    width: 100%;
  }
  .page1-background {
  background-image: url("http://www.sawyoo.com/postpic/2015/10/old-newspaper-paper_437055.jpg");
  background-repeat: repeat;
  background-size: 100%;
  border-radius: 4px;
  overflow-x: hidden;
  margin: 5px 5px 5px 5px;
}
.page2-background {
  background-image: url("http://wallpapercave.com/wp/aVMEQR0.jpg");
  border-radius: 4px;
  background-size: 100%;
  overflow-x: hidden;
  margin: 5px 5px 60px 5px;
}
  #Signature1 {
    width:230%;
    margin-left: 0%;
    padding-right: 0px;
  }
  #Timeline {
   width: 240%;
   margin-left: -70%; 
  }
  #Quote2 {
    width: 350%;
    margin-left: -115%;
  }
}
@media screen and (max-width: 352px) { 
  #container {
    width: 100%;
  }
  .page1-background {
  background-image: url("http://www.sawyoo.com/postpic/2015/10/old-newspaper-paper_437055.jpg");
  background-repeat: repeat;
  background-size: 100%;
  border-radius: 4px;
  overflow-x: hidden;
  margin: 5px 5px 5px 5px;
}
.page2-background {
  background-image: url("http://wallpapercave.com/wp/aVMEQR0.jpg");
  border-radius: 4px;
  background-size: 100%;
  overflow-x: hidden;
  margin: 5px 5px 60px 5px;
}
  #Signature1 {
    width:270%;
    margin-left: 0%;
    padding-right: 0px;
  }
  #Timeline {
   width: 284%;
   margin-left: -92%; 
  }
  #Quote2 {
    width: 437%;
    margin-left: -152%;
  }
  img {
    max-width: 100%; 
height: auto;
margin-left: ;
  }
              
            
!

JS

              
                
              
            
!
999px

Console