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

              
                <html>
  <head>
  <title>Tribute Page</title>
  </head>
  <body>
    <div class="container-fluid">
<div class="row">
<div class="col-xs-8">
                     <h1 class="text-brown text-center">Ada Lovelace - the Countess of Computing</h1></div>
                                                       <div class="col-xs-4"><img src="http://a3.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_350,q_80,w_350/MTE4MDAzNDEwODQwOTQ2MTkw.jpg" alt="Ada Lovelace picture" class="img-responsive thin-border"></div>
                                          <div class="col-xs-9"></div>
                                          <div class="col-xs-3">
                                            <h2 class="ref">...and first coder in the world</h2></div></div>
  <p>A gifted mathematician, Ada Lovelace is considered to have written instructions for the first computer program in the mid-1800s.</p>
  <div class="row">
    <div class="col-xs-4">
      <img src="http://64.78.58.53/wp-content/uploads/2012/09/ezine_73_01.jpg" class="image-responsive thin-border" alt="Ada Lovelas Photograph"></div>
    <div class="col-xs-8">
      <h3 class="sub-title">EARLY YEARS</h3>
                         <p>August Ada Byron was born on December 10, 1815. She was the daughter of the poet Lord Byron. Five weeks after Ada was born Lady Byron asked for a separation from Lord Byron, and was awarded sole custody of Ada who she brought up to be a mathematician and scientist. Ada had an unusual upbringing for an aristocratic girl in the mid-1800s. At her mother's insistence, tutors taught her mathematics and science. Such challenging subjects were not standard fare for women at the time, but her mother believed that engaging in rigorous studies would prevent Lovelace from developing her father's moody and unpredictable temperament.Despite Lady Byron's programming Ada did not sublimate her poetical inclinations. She hoped to be "an analyst and a metaphysician". Her understanding of mathematics was laced with imagination, and described in metaphors.</p></div>
                         <div class="col-xs-8 quotes"><p><i><b>"If you can't give me poetry, can't you give me poetical science?"</b></i></p></div>
    <div class="col-xs-10"></div><div class="ref col-xs-2">-Ada Lovelace-</div>
                         <div class="col-xs-12"><h4 class="sub-title">ADA AND ANALYTICAL ENGINE</h4></div>
  <div class="col-xs-12"><p>Around the age of 17, Ada met Charles Babbage, a mathematician and inventor. The pair became friends, and the much older Babbage served as a mentor to Ada. Through Babbage, Ada began studying advanced mathematics with University of London professor Augustus de Morgan.</p></div>

<div class="col-xs-12"><p>Ada was fascinated by Babbage's ideas. Known as the father of the computer, he invented the difference engine, which was meant to perform mathematical calculations. Ada got a chance to look at the machine before it was finished, and was captivated by it. Babbage also created plans for another device known as the analytical engine, designed to handle more complex calculations.</p></div></div>
                                              <h5 class="sub-title">LOVELACE'S WORK</h5>
                                                                                                           <div class="row"><div class="col-xs-6"><p>Ada was later asked to translate an article on Babbage's analytical engine that had been written by Italian engineer Luigi Federico Menabrea for a Swiss journal. She not only translated the original French text in English, but also added her own thoughts and ideas on the machine. Her notes ended up being three times longer than the original article. Her work was published in 1843, in an English science journal. Ada used only the initials "A.A.L.," for Augusta Ada Lovelace, in the publication.

In her notes, Ada described how codes could be created for the device to handle letters and symbols along with numbers. She also theorized a method for the engine to repeat a series of instructions, a process known as looping that computer programs use today. Ada also offered up other forward-thinking concepts in the article. For her work, Ada is often considered to be the first computer programmer.</p></div>
<div class="col-xs-6"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Diagram_for_the_computation_of_Bernoulli_numbers.jpg/350px-Diagram_for_the_computation_of_Bernoulli_numbers.jpg" alt="The first published computer algorithm"></div></div>
  <p class="quotes"><i><b>"I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc."</b></i></p><div class="col-xs-10"></div><div class="ref col-xs-2">-Ada Lovelace-</div>
    <h6 class="sub-title">TIMELINE</h6>
                     <ul>
                             <li>1641	Blaise Pascal develops one of the first calculating machines</li>
                             <li>1815 December 10 Augusta Ada Byron is born in London.</li>
                             <li>1816	Lord and Lady Byron separate (January 16)</li>
                             <li>Lord Byron leaves England (April 25)</li>
                             <li>1828	Ada designs a flying machine</li>
                             <li>1829	Ada gets the measles and becomes an invalid</li>
                             <li>1833 Ada meets Charles Babbage and his Difference Engine</li>
                             <li>1834	Babbage conceptualizes the Analytical Engine</li>
                             <li>1835	Ada weds William King (July 8)</li>
                             <li>1836	Ada's first child, Byron, is born (May 12)</li>
                             <li>1837	Ada's second child, Anne Isabella (Annabella), is born (September 22)</li>
                             <li>1838	William and Ada become Earl and Countess of Lovelace (June 30)</li>
                             <li>1839	Ada's third child, Ralph Gordon, is born (July 2)</li>
                             <li>1840	Lord Lovelace becomes Lord Lieutenant of Surrey</li>
                             <li>Babbage goes to Italy to discuss the Analytical Engine
Ada begins studying mathematics with De Morgan</li>
                             <li>1841	Lady Byron reveals Ada's "Most Strange and Dreadful History"</li>
                                                                                                  <li>1842	Ada returns after a nine-month absence to her mathematical studies. L. F. Menabrea's description of the Analytical Engine is published in Switzerland (October)</li>
                                                                                                  <li>1843	Ada's translation and Notes are published (August)</li>
                                                                                                  <li>1844	Ada visits the Crosse household in late November</li>
                                                                                                  <li>1852	Ada dies (November 27)</li>
                                                                                                  <li>1890	Hollerith of the United States uses the punch card for sorting and tabulating information for the United States Census</li>
                                                                                                  <li>1931	Vannevar Bush of MIT builds the first "modern large analog" computer</li>
                                                                                                  <li>1946	ENIAC - First digital computer built</li>
                                                                                                  <li>1974	Proposal by military for a common high-order computer language</li>
                                                                                                  <li>1975	First iteration of the language called Strawman, second iteration called Woodenman</li>
                                                                                                  <li>1978	A winning language selected after extensive review</li>
                                                                                                  <li>1980	Language named "Ada" in her honor</li>
                                                                                                                                <li>1984	"Ada" becomes a trademark of the United States Department of Defense</li>
                                                                                                                                               </ul></div></div>
                                                                                                                                               <h6 class="sub-title">LIST OF REFERENCES</h6>
<ul>
<li>Bio (2016). Ada Lovelace Biography. Available from: <a href="http://www.biography.com/people/ada-lovelace-20825323">http://www.biography.com/people/ada-lovelace-20825323</a>. Accessed 22 September 2016.</li>
                                                                                                                                               <li>Betty Alexandra Toole, Ed.D (2016).Ada: The Enchantress of Numbers. Available from: <a href="http://www.well.com/~adatoole/bio.htm">http://www.well.com/~adatoole/bio.htm</a>. Accessed 22 September 2016</li>
                                                                                                                                               <li>Wikipedia (2016). Picture 3 - Lovelace's diagram from Note G, the first published computer algorithm. Available from: <a href="https://en.wikipedia.org/wiki/Ada_Lovelace">https://en.wikipedia.org/wiki/Ada_Lovelace</a>. Accessed: 22 September 2016.</li>
                                                                                                                                               <li>The Mark of a leader (2016). Ada Lovelace and the First Computer. Available from: <a href="http://www.themarkofaleader.com/ada-lovelace-and-the-first-computer/">http://www.themarkofaleader.com/ada-lovelace-and-the-first-computer/</a>. Accessed: 22 September 2016. </li>
                                                                                                                                               </div>
                                                                                                                                               
  </body>
      </html>
              
            
!

CSS

              
                h1 {
  font-size: 50px;
  font-family: Palatino Linotype;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 20px;
  padding-right: 20px;}
.sub-title {font-size: 15px;
font-family: Monospace;
  margin-left: 10px;}
h3 {font-size: 15px;
font-family: Palatino Linotype;}
p {padding-left: 20px;}
.thin-border {
border-color: #8B4513;
border-width: 5px;
border-style: double;
border-radius: 25%;}
.picture-features {padding: 100px, 100px, 100px, 100px;}
body {
  background-color: #FFFFCC; 
  color: #663300;}
.ref {font-size: 10px;}
.quotes {font-size: 20px;
font-family: papyrus;}


              
            
!

JS

              
                
              
            
!
999px

Console