vikingeducation · Stork66722 · Feb 22, 2019 · Feb 22, 2019 · Feb 22, 2019 · Feb 22, 2019
diff --git a/README.md b/README.md
@@ -3,3 +3,5 @@ assignment_markup_warmup_sprint
 
 And 1 and 2!  And 1, and 2...!
 [An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com)
+
+Richard Lahaie markup assignment
diff --git a/hamms.jpg b/hamms.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Lorem Ipsum Blog</title>
+
+    <link rel="stylesheet" href="/assignment_markup_warmup/reset.css?v=1.0">
+    <link rel="stylesheet" href="/assignment_markup_warmup/stylesheet.css?v=6.1">
+
+  </head>
+  <body>
+      <nav class="navbar"> 
+          <a href="#!">The Lorem Micro Blog</a> 
+      </nav>
+      <main class="mainContent">
+          <aside class="advertise">
+          <h4 id="adText">Check out my vertically centered ad!</h4>
+              <img src="hamms.jpg" alt="hamms">
+          </aside>
+          <div class="contentNoAd">
+           <div class="pageTitle">
+              <h2>The Lorem Micro Blog</h2>
+               <h3 id="author">by Foo Bar</h3>
+              </div>
+          <div class="blogPosts">
+      <article id="postOne">
+      <h2 class="postTitle">A Most Posty Post</h2>
+          <h4 class="postDate">Written 1/3/2000</h4>
+          <h4>Fist Thoughts...</h4>
+          <p>Proident non dolore. Probant ne quem id iis quis multos quo commodo. Nisi 
+              cohaerescant eiusmod aute iudicem, deserunt quid nescius, cillum commodo 
+              praesentibus, e senserit instituendarum, pariatur anim probant expetendis, illum 
+              nostrud mandaremus si cillum eu eiusmod, se fore ita culpa.</p>
+          <br>
+          <h4>Additional Thoughts...</h4>
+          <p>Ab veniam pariatur relinqueret, tempor ubi fabulas ut excepteur anim appellat 
+              ullamco iis et noster amet enim quibusdam. Ea voluptate cohaerescant, qui enim 
+              hic dolor. Aute ut nescius, quamquam sunt nescius. A non arbitrantur. Doctrina 
+              ut minim admodum. Deserunt ea veniam. Ullamco ne sint cupidatat.</p>
+      </article>
+      <article id="postTwo">
+          <h2 class="postTitle">Another Posty Post</h2>
+          <h4 class="postDate">Written 1/2/2000</h4>
+          <h4>Only Thoughts...</h4>
+          <p>Proident non dolore. Probant ne quem id iis quis multos quo commodo. Nisi 
+              cohaerescant eiusmod aute iudicem, deserunt quid nescius, cillum commodo 
+              praesentibus, e senserit instituendarum, pariatur anim probant expetendis, illum 
+              nostrud mandaremus si cillum eu eiusmod, se fore ita culpa.</p>
+      </article>
+              <article id="postThree">
+              <h2 class="postTitle">A Posty Post</h2>
+                  <h4 class="postDate">Written 1/1/2000</h4>
+                  <h4>Be it Resolved</h4>
+                  <p>Minim e cernantur. Voluptate domesticarum ut vidisse. Quo lorem legam aliqua 
+                      quamquam, hic varias offendit, ubi ipsum nisi nam litteris ita nisi doctrina 
+                      eruditionem.</p>
+                  <br>
+                  <p>Te nulla quis quem aliquip ab ad veniam 
+                      coniunctione. Quorum nam incurreret. Expetendis qui malis arbitror ubi multos 
+                      doctrina ea appellat est noster ubi senserit si quem quo appellat noster quae ex 
+                      quae.</p>
+              </article>
+              </div>
+              <footer class="copyright">
+    	   <p id="disclaimer">This copyrighted telecast is presented by authority of the Office of the Commissioner of Blogging. It may not be reproduced or retransmitted in any form, and the accounts and descriptions of this game may not be disseminated, without express written consent.
+    	</p>
+ 	  </footer>
+          </div>
+      </main>
+  </body>
+</html>
+
diff --git a/reset.css b/reset.css
@@ -0,0 +1,47 @@
+/* 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;
+}
diff --git a/stylesheet.css b/stylesheet.css
@@ -0,0 +1,209 @@
+/* Main body styling */
+
+body {
+  background-color: #FFF;
+  font-family: "Comic Sans MS", Arial, sans-serif;
+}
+
+/* Header line-height */
+ h2, h3, h4 {
+  line-height: 1;
+}
+
+/* Navigation bar */
+.navbar {
+  background-color: #FEE49D;
+  border-top: 2px solid #000;
+  border-bottom: 2px solid #000;
+  top: 0;
+  width: 100%;
+  overflow: hidden;
+  position: fixed;
+}
+
+/* Links inside the navbar */
+.navbar a {
+  color: #000;
+  font-size: 15px;
+  text-align: center;
+  text-decoration: none;
+  padding: 14px 20px;
+  display: block;
+  float: left;
+}
+
+/* Content below navbar */
+.mainContent {
+  margin-top: 75px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+  margin-left: 10%;
+  margin-right: 10%;
+}
+
+h2 {
+    font-size: 20px;
+    margin-top: 15px;
+    margin-bottom: 10px;
+    font-weight: bolder;
+}
+
+h4{
+    font-size: 15px;
+    font-weight: bolder;
+    margin-bottom: 10px;
+}
+
+/* Advertise positioning */
+.advertise {
+  background-color: #D4A7BD;
+  border: 2px solid #000;
+  padding: 100px 60px;
+  align-items: center;
+  float: left;
+  margin: 0 .5%;
+  text-align: center;
+}
+/* Ad image-size */
+img{
+    width: 100px;
+}
+
+#adText{
+   display: flex;  
+   margin-left: -70px;
+   margin-right: -70px;
+}
+
+/* Content to right of advert */
+.contentNoAd {
+  float: right;
+  margin: 0 .5%;
+}
+
+/* Blog title */
+.pageTitle {
+  background-color: #B7D6AA;
+  border: 2px solid #000;
+  border-radius: 25px;
+  text-align: center;
+  height: 80px;
+    width: 700px;
+}
+
+/* Author */
+#author {
+  font-style: italic;
+    margin-top: 5px;
+}
+
+/* Blog posts container*/
+.blogPosts {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+/* Individual posts */
+#postOne, #postTwo, #postThree {
+  background-color: #A3C4C9;
+  border: 2px solid #000;
+  padding: 0px 10px 15px;
+  margin: 4px;
+  float: left;
+  width: 33%;
+}
+
+/* Blog post headings */
+.postTitle {
+  text-align: center;
+}
+
+/* Blog date */
+.postDate {
+  font-weight: normal;
+  text-align: center;
+  margin-bottom: 10px;
+  margin-top: -2px;
+  font-size: 12px;
+}
+
+/* Footer copyright */
+.copyright {
+  background-color: #A0C6F6;
+  border: 2px solid #000;
+  border-radius: 25px;
+  padding-left: 10px;
+  padding-right: 10px;
+  clear: both;
+  margin-bottom: 0;
+  margin-top: 10px;
+  text-align: justify;
+  height: 60px;    
+}
+
+#disclaimer{
+    margin-top: 5px;
+    font-size: small;
+}
+
+/* Responsive */
+@media (max-width: 989px) {
+  .mainContent {
+    margin-top: 55px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-evenly;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .advertise {
+    display: none;
+  }
+
+  .contentNoAd{
+    width: 100%;
+    margin: 0 0;
+  }
+
+  .pageTitle {
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  .blogPosts {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .postsOneAndTwo {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    }
+
+  #postOne, #postTwo {
+    float: right;
+    width: 45%;
+  }
+
+  #postThree {
+    width: auto;
+  }
+
+  .copyright {
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+    padding: 0 10px;
+    clear: both;
+    margin-bottom: 0;
+  }
+
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,5 @@ assignment_markup_warmup_sprint

		And 1 and 2! And 1, and 2...!
		[An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com)

		Richard Lahaie markup assignment