Ada Lovelace Tribute

In this example below you will see how to do a Ada Lovelace Tribute with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by markmikow, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright markmikow ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ada Lovelace Tribute</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  <div class="container-fluid">
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
		<div id="main">
  		<h1>Ada Lovelace</h1>
    		<h2><em>The World's First Computer Programmer!</em></h2>
  		<div id="image-container">
    		<a title="Alfred Edward Chalon [Public domain], via Wikimedia  Commons"               href="https://commons.wikimedia.org/wiki/File%3AAda_Lovelace_portrait.jpg"><img width="256" alt="Ada Lovelace portrait" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Ada_Lovelace_portrait.jpg/256px-Ada_Lovelace_portrait.jpg"/></a>
  		</div>
    		<div id="caption">
      		<p>Ada Lovelace (10 December 1815 – 27 November 1852)</p>
      	</div>
      <div class="text-container">
        <div class="text">
          <p><a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="blank">Ada Lovelace</a> was born <b>Augusta Ada King-Noel</b> to the poet Lord Byron and his wife Anne Isabella Milbanke (the only legitimate child they had). Her parents separated a month after she was born and Lord Byron never saw his daughter again. Ada was reared by her mother who encouraged Ada to study mathematics and logic.</p>
          <p>Ada spent much of her childhood in ill-health and was often bedridden. This gave her the opportunity to develop her imagination and at the age of 12, she decided she wanted to fly. Ada began examining the anatomy of birds and experimenting with various materials in order to construct wings. Her research culminated in authoring and illustrating <em>Flyology</em>, her book on the "Art of Flying."</p> 
          <p>Her educational and social pursuits brought her into contact with many luminaries of the day, including Charles Dickens and Michael Farady. Due to her mathematical talents, Ada began a long working relationship with the mathematician Charles Babbage, who bulit the first mechanical computer.</p> 
          <p>Between 1842 and 1843, Ada translated an article written in Italian on the Analytical Engine (a proposed mechanical computer designed by Babbage). Ada supplemented her translation with copious notes. In these notes, Ada describes an algorithm to be used with the Analytical Engine for calculating a sequence of Bernoulli numbers (a sequence of rational numbers defined by an exponential generating function). This algorithm is considered to be the first computer program. Ada also envisioned computers having abilities to go beyond mere number crunching.</p> 
        </div>
      </div>  
      <div id="important">
        <p>Important dates in Ada's life:</p>
      </div>
        <div class="dates">
          <ul>
            <li><b>1815</b> - Augusta Ada King-Noel is born on 10 December</li>
            <li><b>1816</b> - Ada's mother, Annabella, leaves Lord Byron and heads to her mother's house with Ada</li>
            <li><b>1824</b> - Ada's father, Lord Byron, dies</li>
            <li><b>1828</b> - Ada writes and illustrates <em>Flyology</em></li>
            <li><b>1829</b> - Ada is paralyzed during the month of June due to a bout of measles</li>
            <li><b>1833</b> - Meets Charles Babbage, the "Father of Computers"</li>
            <li><b>1835</b> - Marries Earl of Lovelace and becomes a Countess</li>
            <li><b>1840's</b> - Ada develops a passion for gambling</li>
            <li><b>1841</b> - Ada declares that "Imagination is the Discovering Faculty...which penetrates into the unseen worlds around us, the worlds of Science."</li>
            <li><b>1842</b> - Begins writing the first computer program</li> 
            <li><b>1851</b> - Ada attempts to create a mathematical model for successful gambling bets</li>
            <li><b>1852</b> - Ada dies at the young age of 36</li>
          </ul>
        </div>
        <div class="row">
          <div class="col-xs-6">
            <div class="well">
    	        <p>To learn more about Ada's amazing life,<br>visit Ada's <a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="blank">Wikipedia entry</a>.</p>
    	      </div>           
    	    </div>         
    	    <div class="col-xs-6">
    	      <div class="well">
    	        <p>To learn more about Charles Babbage,<br>visit Charles' <a href="https://en.wikipedia.org/wiki/Charles_Babbage" target="blank"> Wikipedia entry</a>.</p>
    	      </div>
    	    </div>
        </div>
      <p class="text-center">Coded by Mark Mikow</p>
    </div>         
  </div>
</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/markmikow/ada-lovelace-tribute-YQEMGw */
  body {
    margin: 50px 0 50px 0;
    background-color: #789;
    text-align: center;
  }

  #main {
    background-color: #DDD;
    width: 80%;
    min-width: 500px;
    margin: auto;
    padding: 50px;
    border-radius: 20px;
  }

  h1 {
    font-family: Lobster, Times;
    font-size: 3.5em;  
  } 

  h2 {
    font-family: Lobster, Times;
    font-size: 2em;
    margin-bottom: 35px;
  }

  img {
    margin: auto;
    border-radius: 50%;
    margin-bottom: 15px;
  }

  #caption {
    font-family: Lobster, Times;
    font-size: 1.2em;
    padding-bottom: 25px;
  }

  .text {
    width: 70%;
    margin: auto;
    text-align: left;
    background-color: white;
    padding: 10px;
    border: 5px solid #666699;
    border-radius: 10px;
  }

  #important {
    margin: auto;
    padding: 25px 0 0 0;
    font-family: Lobster, Times;
    font-size: 1.5em;
  }

  .dates {
    width: 50%;
    margin: auto;
    padding-bottom: 25px;
    text-align: left;
    line-height: 1.5;
  }

  .well {
    width: 70%;
    background-color: white;
    margin: auto;
    padding: 5px;
    border-radius: 20px;
  }

  .text-center {
    margin-top: 50px;
  }

Comments