Skip to content

Instantly share code, notes, and snippets.

@Rhinogradentia

Rhinogradentia/build-a-tribute-page.markdown

Last active March 29, 2018 11:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Rhinogradentia/7a261969c62e99bb3a61fe9442aa834a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Rhinogradentia/7a261969c62e99bb3a61fe9442aa834a to your computer and use it in GitHub Desktop.
Download ZIP
Build a Tribute Page
Raw
build-a-tribute-page.markdown

Build a Tribute Page

An assignment for the free Code Camp Certification:

Tasks:

  • tribute page with text and image
  • link to an external page with further information

A Pen by Nadine Tatto on CodePen.

License.

Raw
index.html
<link href="https://fonts.googleapis.com/css?family=Syncopate" rel="stylesheet">
<div class="container-fluid">
<div class="col-md-1 col-lg-1" id="left-column"></div> <!-- left column -->
<div class="col-md-10 col-lg-10" id="middle-column"> <!-- main content column -->
<div class="row"><h1 class="text-primary text-center">Margret Hamilton</h1><div> <!-- header -->
<div class="row"><h3 class="text-primary text-center">The woman who helped to bring the Apollo mission to the moon!</h3></div> <!-- subtitle -->
<div class="row"> <!-- image -->
<div id="image-box" class="text-center">
<img class="img-responsive img-thumbnail" src="https://scontent-vie1-1.xx.fbcdn.net/v/t1.0-9/29216450_1894421480591116_577417026771877888_n.jpg?_nc_eui2=v1%3AAeHrM7oGm2GRAKAoKgM3GrR5FNRwx_VUFVRbSglL2iEqwGuQkGuPwAke1BBT7zD-xZV4vGTJ6jQqPhOe_hrU89mP2fgaNs4vGniQxQl8i_YlKw&oh=083841b2411f3fbffddf38ed5ac3c212&oe=5B4C6ED5" alt="Margret Hamilton besides her code." id="hamilton-pic">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<p class="caption center-block"><small>Margret Hamilton next to the amount of code she and her collegues wrote for the Apollo mission.</small></p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
<div id="bio-block" class="block">
<div class="row"> <!-- biography content -->
<div class="col-md-3"></div>
<div class="col-md-6 center-block panel panel-default">
<div class="panel-heading">
An abstract on her life and achievements:
</div>
<div class="panel-body">
<ul>
<li><b>1936</b> - Born August 17, Indiana, USA</li>
<li><b>1955</b> - begin studies of Mathematics at <a href="https://en.wikipedia.org/wiki/University_of_Michigan">University of Michigan</a> and <a href="https://en.wikipedia.org/wiki/Earlham_College">Earlham College</a></li>
<li><b>1961 - 1963</b> - working on the <a href="https://en.wikipedia.org/wiki/Semi-Automatic_Ground_Environment">SAGE Project</a> as a programmer</li>
<li>joines Charls Stark Draper Laboratory at MIT</li>
<li>Teamleader software development for Apollo and Skylab</li>
<li><b>1976 - 1984</b> - CEO & Co-founder Higher Order Software (HOS)</li>
<li><b>1986</b> - founder & CEO of Hamilton Technologies Inc.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row"> <!-- biography content -->
<div class="col-md-3"></div>
<div class="col-md-6 center-block panel panel-default">
<div class="panel-heading">Awards:</div>
<div class="panel-body">
<ul>
<li><b>1986</b> - Augusta Ada Lovelace Award</li>
<li><b>2003</b> - NASA Exceptional Space Act Award</li>
<li><b>2009</b> - Outstanding Alumni Award by Earlham College</li>
<li><b>2016</b> - Presidential Medal of Freedom by Barack Obama</li>
<li><b>2017</b> - Computer History Museum Fellow Award</li>
<li><b>2017</b> - Women of NASA LEO Set </li>
<ul>
<figure class="figure">
<img class="figure-img img-fluid rounded" src="https://1gr.cz/fotky/idnes/17/102/org/DTT6ec1cd_HighRes_LEGO_Ideas_Women_of_NASA_B.jpg" alt="lego minifigure of Margret Hamilton - Lego Set: Women of NASA" id="lego-pic">
<figcaption class="figure-caption">LEGO mini figure set: Women of NASA</figcaption>
</figure>
</div>
<div class="col-md-3"></div>
</div>
</div>
<div class="row"> <!-- quote -->
<div id="citation-block">
<blockquote>
"When I first came up with the term, no one had heard of it before, at least in our world. It was an ongoing joke for a long time. They liked to kid me about my radical ideas. It was a memorable day when one of the most respected hardware gurus explained to everyone in a meeting that he agreed with me that the process of building software should also be considered an engineering discipline, just like with hardware. Not because of his acceptance of the new 'term' per se, but because we had earned his and the acceptance of the others in the room as being in an engineering field in its own right."
<footer>Margret Hamilton on defining the term "Software Engineering"</footer>
</blockquote>
<blockquote>
"The computer (or rather the software in it) was smart enough to recognize that it was being asked to perform more tasks than it should be performing. It then sent out an alarm, which meant to the astronaut, I'm overloaded with more tasks than I should be doing at this time and I'm going to keep only the more important tasks; i.e., the ones needed for landing ... Actually, the computer was programmed to do more than recognize error conditions. A complete set of recovery programs was incorporated into the software. The software's action, in this case, was to eliminate lower priority tasks and re-establish the more important ones ... If the computer hadn't recognized this problem and taken recovery action, I doubt if Apollo 11 would have been the successful moon landing it was."
<footer>Letter from Margaret H. Hamilton, Director of Apollo Flight Computer Programming MIT Draper Laboratory, Cambridge, Massachusetts[28], titled "Computer Got Loaded", published in Datamation, March 1, 1971</footer>
</blockquote>
</div>
</div>
<div class="row"><div class="horizontal-line"></div></div>
<div class="row"> <!-- Link to Wikipedia -->
<div id="goToWiki" class="bigger-text text-center">If you are interested to learn more about Margret Hamilton, <br>visit the <a href="https://en.wikipedia.org/wiki/Margaret_Hamilton_(scientist)" target="blank">Wikipedia Page</a> on her.</div>
<
</div>
<div class="row"></div> <!-- spacer -->
</div>
<div class="col-md-1 col-lg-1" id="right-column"></div> <!-- right column -->
</div>
Raw
script.js
$(document).ready(function() {
$("#goToWiki").on("click", function(){
var url = "https://en.wikipedia.org/wiki/Margaret_Hamilton_(scientist)";
window.open(url, "_blank");
});
});
Raw
style.css
body {
font-family: 'Syncopate', sans-serif;
}
#middle-column{
background-color:#00cccc;
}
.biblio-size {
font-weight: scriptsize;
}
#image-box{
/*padding: 10px 40px 20px 250px;*/
margin: 20px 20px 30px 20px;
background-color: #00e6e6;
}
#hamilton-pic{
margin: 0 auto; /* center picture*/
padding-top: 10px;
width: 30%;
height: 30%;
}
#lego-pic{
margin: 0 auto;
width: 30%;
height: 30%;
}
#bio-block {
margin: 0 auto;
/*padding-left: 30%;
padding-right: 30%;*/
}
#citation-block {
margin: 0 auto;
padding: 20px 40px 20px 40px;
}
#from{
font-size: 10px;
}
.horizontal-line {
border-top: 3px double #8c8b8b;
width: 95%;
display: block;
margin: 0 auto;
}
.bigger-text {
margin-top: 2px;
font-family: 'Syncopate', sans-serif;
font-size: 20px;
display: block;
padding-top: :20px;
padding-bottom: 20px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment