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

              
                <div class="img-responsive">
<h1 class="text-center display-1" style='font-family: Lobster; font-size: 100px;'> Ada Lovelace</h1>
<h2 class="text-center" style='font-family: Lobster; font-size: 75px;'>The First Programmer</h2>
<div class='row'>
<div class='col-md-6'>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Ada_Lovelace_portrait.jpg" alt="Ada Lovelace Picture" class="ada-picture">
<figcaption class='text-center'>Fig.1 - A portrait of Augusta Ada Baron, famously known as Ada Lovelace.</figcaption>
</div>
<div class='col-md-6'>
<br>
<br>
<img src='http://images.csmonitor.com/csm/2012/12/1210-ada-lovelace-charles-babbage.jpg?alias=standard_900x600' alt='Computer Picture' class='img-rounded'>
<figcaption class="text-center">Fig.2 - The first computer which was developed by Charles Babbage, Luigi Menabrea, and Ada Lovelace.</figcaption>
</div>
</div>
<br>
<blockquote id='ada-quote'>
<p class="mb-0">"Imagination is the Discovering Faculty, pre-eminently. It is that which penetrates into the unseen worlds around us, the worlds of Science. That brain of mine is something more than merely mortal, as time will show. The Analytical Engine has no pretensions whatever to originate anything."</p>
<footer class='block-quote-footer' style='color:white;font-size:16px'>Ada Lovelace</footer>
</blockquote>
<p>
In 1842, more than a century before the start of the information age, in a brilliant flash of penetrating insight, Ada Lovelace had a glimpse of the future. She saw that with suitable modifications, Charles Babbage’s proposed Analytical Engine would be capable of much more than its intended purpose of simple mathematical calculation. Lovelace realised that such a device could be set to execute any logically coherent sequence of instructions, and in this she became the world’s first computer programmer: together with Babbage, she invented what we now call software. When she had her marvellous insight she was in the twenty-seventh year of her short life, and had less than ten years left to live.
</p>
<br>
<p>Here is a timeline of Ada Lovelace's Life</p>
<div id='list-div'>
<ul>
  <li><em>Birth(1815):</em> Born Augusta Ada Byron, she is the only child of poet Lord Byron and his mathematically-minded wife, Anne Isabella Byron. Her father and mother separate one month after her birth.</li>
  <li><em>Death of Lord Byron(1824):</em> Ada never meets her father, as Lord Byron dies of illness while fighting in the Greek War of Independence. Ada grows up under the custody of her mother who does everything she can to make sure Ada doesn't inherit her father's volatile poetic personality. Ada is rigorously schooled in science, logic, and mathematics and forbidden to see any portraits of her father until her twentieth birthday.</li>
  <li><em>Learning to Soar(1828):</em> At age 12, Ada decides she wants to fly. She designs a fanciful steam-powered flying machine by examining the anatomy of birds and experimenting with different materials such as paper, oil-silk, wires, and feathers for the wings.</li>
  <li><em>A Meeting of Minds(1833):</em> Ada meets mathematician Charles Babbage. It's a friendship that would change the course of both their lives. Ada is only 18 at the time while Charles is 42, but she impresses him with her intellect and analytic skills. He calls her The Enchantress Of Numbers. Ada grows up with other influential mentors including Mary Somerville, a Scottish astronomer and mathematician, and Augustus De Morgan, who was a leader in the emerging field of symbolic logic.</li>
  <li><em>The Birth of A Computer(1837):</em> Charles Babbage begins to conceptualize the Analytical Engine - a predecessor to the modern computer. It had an arithmetical unit, conditional branching loops and integrated memory. Babbage even designed a printer for his Analytical Machine. Ada works with Babbage on the engine through the next few years.</li>
  <li><em>The Menabrea Paper(1842):</em> Italian mathematician Luigi Menabrea publishes his paper on Babbage's lecture on the Analytical Engine. Lovelace translates and expands the article, adding notes from her personal knowledge about the engine.</li>
  <li><em>The First Computer Program(1843):</em> Ada completes her work on the Menabrea Paper. In one section, she describes an algorithm for the Analytical Engine to compute Bernoulli Numbers. For this, we recognize Ada as the first computer programmer. She was the first person to publish an in-depth set of instructions that a computing device could use to reach a result that had not been previously calculated.</li>
  <li><em>Taking a Gamble(1851):</em> Ada attempts to create a mathematical model for success in placing large bets. The plan fails and she falls into deep debt. Throughout this period of her life she is followed by rumors of extramarital affairs.</li>
  <li><em>Death(1852):</em> Ada dies from uterine cancer when she is 36, the same age as her father when he passed away. She is buried next to him at the Church of St. Mary Magdalene in Hucknall, Nottingham.</li>
<ul>
</div>
<footer>
<div class='row'>
  <div class='col-md-6'>
    <p>Coded by <a href='https://www.freecodecamp.com/themandotexe' target='blank'>Jaysson Diaz</a></p>
  </div>
  <div class='col-md-6'>
    <p style='text-align:right'>Information from <a href='http://www.popsci.com/article/gadgets/life-and-times-ada-lovelace-first-computer-programmer' target='_blank'>Popular Science</a> and <a href='https://philosophynow.org/issues/96/Ada_Lovelace_1815-1852' target='_blank'>Philosophy Now</a></p>
  </div>
</footer>
</div>  
              
            
!

CSS

              
                .ada-picture{
  width: 600px;
  border-width: 15px;
  border-color: black;
  border-style: solid;
  border-radius:50%;
  margin: 20px;
}
.img-rounded{
  border-width: 15px;
  border-color: black;
  border-style: solid;
  margin:15px;
}
#ada-quote{
  horizontal-align: middle;
}
body{
  background-color:#0099ff;
  color: white;
}
#list-div{
  text-align:left;
  font-size:16px;
  font-family:"Lucida Console";
}
p{
  font-size: 16px;
}
a{
  color:black;
}
              
            
!

JS

              
                
              
            
!
999px

Console