Ada Lovelace tribute for FreeCodeCamp

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

Thumbnail
This awesome code was written by mattbee, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mattbee ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ada Lovelace tribute for FreeCodeCamp</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="container">
  <h1>Ada Lovelace</h1>
  <section>
    <p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Ada_Lovelace_portrait.jpg/220px-Ada_Lovelace_portrait.jpg"></p>
    <h2>Her story</h2>
    <p>Augusta Ada King-Noel, Countess of Lovelace  was an English mathematician and writer, chiefly known for her work on Charles Babbage's early mechanical general-purpose computer, the Analytical Engine. </p>
    <p>Her notes on the engine include what is recognised as the first algorithm intended to be carried out by a machine. <strong>As a result, she is often regarded as the first computer programmer</strong>.</p>
    <p>Did you know Ada Lovelace was the daughter of Lord Byron?</p>
    <p><a href="https://en.wikipedia.org/wiki/Ada_Lovelace">Read more about Ada Lovelace on Wikipedia.</a></p>
  
  <aside>
    <h3>Related people</h3>
    <ul>
      <li><a href="https://en.wikipedia.org/wiki/Charles_Babbage">Charles Babbage</a></li>
      <li><a href="https://en.wikipedia.org/wiki/Grace_Hopper">Grace Hopper</a></li>
      <li><a href="https://en.wikipedia.org/wiki/Alan_Turing">Alan Turing</a></li>
    </ul>
  </aside>
</section>
  
<section>
  <h2>Tweets about Ada Lovelace</h2>
              <a class="twitter-timeline"  href="https://twitter.com/hashtag/AdaLovelace" data-widget-id="908683026070155264">#AdaLovelace Tweets</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
          
</section>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mattbee/ada-lovelace-tribute-for-freecodecamp-dXPaYq */
body {
  font-family: arial, sans-serif;
  background: #f6f6f6;
  padding: 40px;
}
.container {
  background: #fff;
  max-width: 600px;
  padding: 20px 40px;
  margin: 0 auto;
}
a {
  color: #900;
}
ul {
  list-style-type: disc;
}
ul li {
  margin-bottom: 10px;
}

Comments