Ada Lovelace -- A Tribute

Ada Lovelace -- A Tribute.markdown

Ada Lovelace -- A Tribute

This is a tribute page for Ada Lovelace following the guidelines from FreeCodeCamp : Build a Tribute Page.

A Pen by Maya Shankar on CodePen.

License.

index.html

<div class="container">
  <div class="tribute">
    <span class="text"><span class="glyphicon glyphicon-console" aria-hidden="true"></span></span>
    <span class="text">tribute</span>
    <div class="sub-head text">to Ada, countess of Lovelace</div>
  </div>
  <!-- figure out how to incorporate the picture
  <div class="jumbotron-fluid">
    <img class="img-responsive img-rounded" src="//c2.staticflickr.com/4/3022/2946464601_0ce90e2d98_z.jpg" />
  </div>
  -->
  <div class="list">
    <ul class="text">
      <h3>who was Ada Lovelace?</h3>
      <li>sole child of poet George Gordon and his mathematics-loving wife Annabella Milbanke</li>
      <li>her mother raised her under a strict regimen of science, logic, and mathematics</li>
      <li>in 1833, Lovelace’s mentor introduced her to Charles Babbage</li>
      <li>they both had somewhat unconventional personalities and became close and lifelong friends</li>
      <h3>the analytical engine</h3>
      <li>it combined the array of adding gears of Babbage's earlier Difference Engine with an elaborate punchcard operating system</li>
      <li>Lovelace sketched out programs for an engine and earned her the title of “the first computer programmer”</li>
      <li>her notes became one of the critical documents to inspire Alan Turing’s work on the first modern computers</li>
      <h3>11 October 2016 is Ada Lovelace Day</h3>      
    </ul>
  </div>
</div>
<div class="footer text">
  <br><br>
  all information taken from <a href="findingada.com/about/who-was-ada">findingada.com</a>
</div>

style.css

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic);

@import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700);

body {
  background-color: #ff6f69;
}

.text {
  font-family: 'Inconsolata';
  color: #fdfbfb;
}

.tribute {
  font-size: 2em;
  font-weight: 400;
  //border: 1px solid #fdfbfb;
  display: inline-block;
  margin-bottom: 20px;
}

img {
  margin: 0 auto;
  padding-bottom: 20px;
}

.sub-head {
  font-size: 0.5em;
}

li {
  list-style-type: none;
  font-size: 1.5rem;
}
li:before {
  content: ">_ ";
}

a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
  color: dark-grey;
}

.footer {
  text-align: center;
  width: 100%;
}