thisisjofrank/example.html

## example.html
<!DOCTYPE html>
<html>
    <head>
        <title>Grace Hopper</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <header class="header">
            <img class="header_img" src="gracehopper_portrait.jpg" />
            <h1 class="header_title"> Grace Hopper</h1>
        </header>
        <div class="main">
            <section class="about">
                <figure class="figure">
                    <img class="figure_img" src="grace.jpg">
                    <figcaption class="figure_caption">Rear Admiral Grace M. Hopper</figcaption>
                </figure>
                <p class="main_text">Grace Hopper was born in 1906. Her parents, noticing her interest in math, made special arrangements for her to take classes reserved for boys in school. She received a Bachelors deegree in Mathematics and  physics from Vassa college and then moved onto Yale, where she did her Masters deegree in Math. She continued her education and begun a teaching career at Vassar. When she received her PhD she joined the navy, where she was assigned to work in the Bureau of Ordinance computation project at Harvard university. There, she became part of the programming team, who works on the Mark I; the first computer ever made.</p>
                <p class="main_text">Her work with the navy and computers did not end until 1966, when she was asked to retire. That didn't last for very long. A couple of months later, she was asked to return to work with COBOL, the first standardised programming language.</p>
                <figure class="figure figure-second">
                    <img class="figure_img" src="grace_machine.jpg"/>
                    <figcaption class="figure_caption">Working with COBOL</figcaption>
                </figure>
                <p class="main_text">Throughout her childhood, she had a fascination with both math and the navy. She was able to join the navy after acquiring waivers for the weight and age requirements, and rapidly climbed the ranks. By the time she started working on the Mark I, she was already a lieutenant. The demanding environment and high expectations of her at the navy, helped her thrive. This was for her the perfect work environment. She was also the one who wrote the operating manual for the Mark I. In 1949, she left the navy to continue working with computers, and returned back in 1967 to teach young people about them. She loved teaching about computers as much as she loved working with them. Young people for her were the future.</p>
                <p class="main_text">Grace loved the Navy, and was reluctant to retire, even at the age of 79. At her retirement ceremony she was recognized for all she contributed, and received the Distinguished Service Medal of the Defense Department, the department's highest honor, and a citation which stated
                  <blockquote class="main_quote">
                    Rear Admiral Hopper's personal dedication, technical expertise,and broad-based knowledge of the computers were a cornerstone of the navy's continuing development of Information Systems technology. She is one of the Navy's most effective public speakers and a sought-after adviser on the subject of automatic data processing.
                  </blockquote>
              </p>
              <p class="main_text">Some of her greatest achievements, were creating the term <b>debug</b>, a term used today to mean fixing the coding errors in a program, by taking a moth out of the Mark I, developing the first compiler, which paved the path to modern computer languages, and creating Flow-Matic, a computer language that recognized 20 English phrases, and interpreted them into machine code.
              <p class="main_text">Grace also wrote the first compiler, which enabled a programmer to use words instead of arithmetic, a startling concept for those days. A compiler is now essential in programming languages, and shortens the time it takes to program into days or hours rather then months.
              <p class="main_text-em">Her contributions are invaluable.</p>
            </section>
            <div class="sidebar">
                <h2 class="resourcelist_title">Resources</h2>
                <ul class="resourcelist">
                    <li class="resourcelist_item">
                        <a class="resourcelist_link" href="http://www.cs.yale.edu/homes/tap/Files/hopper-story.html">Computer Scientist</a>
                    </li>
                    <li class="resourcelist_item">
                        <a class="resourcelist_link" href="http://www.youtube.com/watch?v=1-vcErOPofQ">Grace Hopper on Letterman</a>
                    </li>
                    <li class="resourcelist_item">
                        <a class="resourcelist_link" href="http://en.wikipedia.org/wiki/Grace_Hopper">Wikipedia</a>
                    </li>
                    <li class="resourcelist_item">
                        <a class="resourcelist_link" href="http://en.wikiquote.org/wiki/Grace_Hopper">Wikiquote</a>
                    </li>
                </ul>
            </div>
        </div>
        <footer class="footer">
            <p class="footer_text">Made by <a href="http://codebar.io" class="footer_link">codebar.io</a></p>
        </footer>
    </body>
</html>

## grace.jpg

      
    Raw
  

              grace.jpg
            
          
## grace_machine.jpg

      
    Raw
  

              grace_machine.jpg
            
          
## gracehopper_portrait.jpg

      
    Raw
  

              gracehopper_portrait.jpg
            
          
## reset.css
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

## styles.css
body {
    font-family: Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased; /*to fix white text on dark bg*/
    color: #2c3e50;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    background-color: #3498db;
}

.header_img {
    width: 50px; /**/
    height: 50px; /**/
    margin-right: 20px;
    border-radius: 50%;
}

.header_title {
    font-size: 26px; /**/
    font-weight: bold;
    color: white;
}

.main {
    padding: 10px;
}

.figure {
    position: relative;
    max-width: 300px;
    margin: 0 auto 15px;
}

.figure_img {
    display: block; /* to remove space from bottom caused by inline */
    width: 100%;
    border-radius: 4px;
}

.figure_caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7); /* to get transparency */
    color: #2c3e50;
}

.main_text {
    margin-bottom: 1em;
    line-height: 1.4em;
}

.main_quote {
    clear: both;
    margin: 30px 0;
    padding: 0 20px;
    line-height: 1.5em;
    font-style: italic;
    color: #7f8c8d;
    border-left: 4px solid #1abc9c;
}

.sidebar {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

.resourcelist_title {
    padding: 20px;
    font-weight: bold;
    color: white;
    background-color: #1abc9c;
}

.resourcelist {
    background-color: #ecf0f1;
    padding: 20px 20px 10px;
}

.resourcelist_item {
    margin-bottom: 10px;
}

.resourcelist_link {
    color: #e74c3c;
    text-decoration: none;
    line-height: 1.4em;
}

.resourcelist_link:hover {
    text-decoration: underline;
    color: #c0392b;
}

.footer {
    padding: 30px;
    background-color: #ecf0f1;
}

.footer_text {
    color: #95a5a6;
    font-weight: bold;
    text-shadow: 2px 2px white;
}

.footer_link {
    color: #e74c3c;
    text-decoration: none;
    text-shadow: none;
}

.footer_link:hover {
    text-decoration: underline;
    color: #c0392b;
}

.main_text-em {
    font-style: italic;
    margin-bottom: 1.4em;
}

@media screen and (min-width: 500px) { /* stop image from displaying too wide */
    .figure {
        float: left;
        margin: 0 15px 10px 0;
    }
    .figure-second {
        float: right;
        margin: 0 0px 10px 15px;
    }

    .sidebar {
        max-width: 300px;
    }
}

@media screen and (min-width: 620px) {  /* bigger than mobile */
    .header {
        padding: 20px 0;
    }

    .header_img {
        width: 100px;
        height: 100px;
    }

    .main_quote {
        max-width: 530px;
    }
}

@media screen and (min-width: 860px) { /* larger than tablet */
    .main {
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .sidebar {
        width: 250px;
        flex-shrink: 0;
        margin-left: 20px;
    }
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Grace Hopper</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<header class="header">
	<img class="header_img" src="gracehopper_portrait.jpg" />
	<h1 class="header_title"> Grace Hopper</h1>
	</header>
	<div class="main">
	<section class="about">
	<figure class="figure">
	<img class="figure_img" src="grace.jpg">
	<figcaption class="figure_caption">Rear Admiral Grace M. Hopper</figcaption>
	</figure>
	<p class="main_text">Grace Hopper was born in 1906. Her parents, noticing her interest in math, made special arrangements for her to take classes reserved for boys in school. She received a Bachelors deegree in Mathematics and physics from Vassa college and then moved onto Yale, where she did her Masters deegree in Math. She continued her education and begun a teaching career at Vassar. When she received her PhD she joined the navy, where she was assigned to work in the Bureau of Ordinance computation project at Harvard university. There, she became part of the programming team, who works on the Mark I; the first computer ever made.</p>
	<p class="main_text">Her work with the navy and computers did not end until 1966, when she was asked to retire. That didn't last for very long. A couple of months later, she was asked to return to work with COBOL, the first standardised programming language.</p>
	<figure class="figure figure-second">
	<img class="figure_img" src="grace_machine.jpg"/>
	<figcaption class="figure_caption">Working with COBOL</figcaption>
	</figure>
	<p class="main_text">Throughout her childhood, she had a fascination with both math and the navy. She was able to join the navy after acquiring waivers for the weight and age requirements, and rapidly climbed the ranks. By the time she started working on the Mark I, she was already a lieutenant. The demanding environment and high expectations of her at the navy, helped her thrive. This was for her the perfect work environment. She was also the one who wrote the operating manual for the Mark I. In 1949, she left the navy to continue working with computers, and returned back in 1967 to teach young people about them. She loved teaching about computers as much as she loved working with them. Young people for her were the future.</p>
	<p class="main_text">Grace loved the Navy, and was reluctant to retire, even at the age of 79. At her retirement ceremony she was recognized for all she contributed, and received the Distinguished Service Medal of the Defense Department, the department's highest honor, and a citation which stated
	<blockquote class="main_quote">
	Rear Admiral Hopper's personal dedication, technical expertise,and broad-based knowledge of the computers were a cornerstone of the navy's continuing development of Information Systems technology. She is one of the Navy's most effective public speakers and a sought-after adviser on the subject of automatic data processing.
	</blockquote>
	</p>
	<p class="main_text">Some of her greatest achievements, were creating the term <b>debug</b>, a term used today to mean fixing the coding errors in a program, by taking a moth out of the Mark I, developing the first compiler, which paved the path to modern computer languages, and creating Flow-Matic, a computer language that recognized 20 English phrases, and interpreted them into machine code.
	<p class="main_text">Grace also wrote the first compiler, which enabled a programmer to use words instead of arithmetic, a startling concept for those days. A compiler is now essential in programming languages, and shortens the time it takes to program into days or hours rather then months.
	<p class="main_text-em">Her contributions are invaluable.</p>
	</section>
	<div class="sidebar">
	<h2 class="resourcelist_title">Resources</h2>
	<ul class="resourcelist">
	<li class="resourcelist_item">
	<a class="resourcelist_link" href="http://www.cs.yale.edu/homes/tap/Files/hopper-story.html">Computer Scientist</a>
	</li>
	<li class="resourcelist_item">
	<a class="resourcelist_link" href="http://www.youtube.com/watch?v=1-vcErOPofQ">Grace Hopper on Letterman</a>
	</li>
	<li class="resourcelist_item">
	<a class="resourcelist_link" href="http://en.wikipedia.org/wiki/Grace_Hopper">Wikipedia</a>
	</li>
	<li class="resourcelist_item">
	<a class="resourcelist_link" href="http://en.wikiquote.org/wiki/Grace_Hopper">Wikiquote</a>
	</li>
	</ul>
	</div>
	</div>
	<footer class="footer">
	<p class="footer_text">Made by <a href="http://codebar.io" class="footer_link">codebar.io</a></p>
	</footer>
	</body>
	</html>
	/* http://meyerweb.com/eric/tools/css/reset/
	v2.0 \| 20110126
	License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section {
	display: block;
	}
	body {
	line-height: 1;
	}
	ol, ul {
	list-style: none;
	}
	blockquote, q {
	quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
	content: '';
	content: none;
	}
	table {
	border-collapse: collapse;
	border-spacing: 0;
	}

	/* apply a natural box layout model to all elements, but allowing components to change */
	html {
	box-sizing: border-box;
	}
	, :before, *:after {
	box-sizing: inherit;
	}
	body {
	font-family: Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased; /to fix white text on dark bg/
	color: #2c3e50;
	}

	.header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
	background-color: #3498db;
	}

	.header_img {
	width: 50px; /**/
	height: 50px; /**/
	margin-right: 20px;
	border-radius: 50%;
	}

	.header_title {
	font-size: 26px; /**/
	font-weight: bold;
	color: white;
	}

	.main {
	padding: 10px;
	}

	.figure {
	position: relative;
	max-width: 300px;
	margin: 0 auto 15px;
	}

	.figure_img {
	display: block; /* to remove space from bottom caused by inline */
	width: 100%;
	border-radius: 4px;
	}

	.figure_caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.7); /* to get transparency */
	color: #2c3e50;
	}

	.main_text {
	margin-bottom: 1em;
	line-height: 1.4em;
	}

	.main_quote {
	clear: both;
	margin: 30px 0;
	padding: 0 20px;
	line-height: 1.5em;
	font-style: italic;
	color: #7f8c8d;
	border-left: 4px solid #1abc9c;
	}

	.sidebar {
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 20px;
	}

	.resourcelist_title {
	padding: 20px;
	font-weight: bold;
	color: white;
	background-color: #1abc9c;
	}

	.resourcelist {
	background-color: #ecf0f1;
	padding: 20px 20px 10px;
	}

	.resourcelist_item {
	margin-bottom: 10px;
	}

	.resourcelist_link {
	color: #e74c3c;
	text-decoration: none;
	line-height: 1.4em;
	}

	.resourcelist_link:hover {
	text-decoration: underline;
	color: #c0392b;
	}

	.footer {
	padding: 30px;
	background-color: #ecf0f1;
	}

	.footer_text {
	color: #95a5a6;
	font-weight: bold;
	text-shadow: 2px 2px white;
	}

	.footer_link {
	color: #e74c3c;
	text-decoration: none;
	text-shadow: none;
	}

	.footer_link:hover {
	text-decoration: underline;
	color: #c0392b;
	}

	.main_text-em {
	font-style: italic;
	margin-bottom: 1.4em;
	}

	@media screen and (min-width: 500px) { /* stop image from displaying too wide */
	.figure {
	float: left;
	margin: 0 15px 10px 0;
	}
	.figure-second {
	float: right;
	margin: 0 0px 10px 15px;
	}

	.sidebar {
	max-width: 300px;
	}
	}

	@media screen and (min-width: 620px) { /* bigger than mobile */
	.header {
	padding: 20px 0;
	}

	.header_img {
	width: 100px;
	height: 100px;
	}

	.main_quote {
	max-width: 530px;
	}
	}

	@media screen and (min-width: 860px) { /* larger than tablet */
	.main {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	}

	.sidebar {
	width: 250px;
	flex-shrink: 0;
	margin-left: 20px;
	}
	}