vikingeducation · steve3424 · Sep 21, 2017 · Sep 21, 2017 · Sep 23, 2017 · Sep 23, 2017
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)
+
+Steve Frazee!!!
diff --git a/ad.jpg b/ad.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+
+<body>
+  <nav>
+    <h1>The Lorem Micro Blog</h1>
+  </nav>
+
+  <div class="fixed"></div>
+
+  <main>
+    <div class="ad">
+      <div class="vertical-align">
+        <p>Check out my vertically centered ad!</p>
+        <img src="ad.jpg" alt="hairless" />
+      </div>
+    </div>
+
+    <section>
+      <header>
+        <h1>The Lorem Micro Blog</h1>
+        <h6>by Foo Bar</h6>
+      </header>
+
+      <div class="flex-query">
+        <div class="C">
+          <h2>A Most Posty Post</h2>
+          <h6>Written 1/3/2000</h6>
+          <h3>First thoughts...</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </p>
+
+
+          <h3>Additional thoughts...</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
+
+        <div class="B post-margin">
+          <h2>Another Posty Post</h2>
+          <h6>Written 1/2/2000</h6>
+          <h3>Only thoughts...</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </p>
+        </div>
+
+        <div class="A">
+          <h2>A Posty Post</h2>
+          <h6>Written 1/1/2000</h6>
+          <h3>Be it resolved</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
+            <br />
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
+      </div>
+
+      <footer>
+        <p>
+          This copywrited 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>
+    </section>
+  </main>
+
+</body>
+
+
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,264 @@
+/*******CSS RESET********/
+
+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;
+}
+
+/*************************************************************************************
+*************************************************************************************/
+
+/******************************
+POSITIONING
+******************************/
+
+main {
+	max-width: 990px;
+	margin: 0 auto;
+}
+
+.ad, header, .A, .B, .C{
+	display: inline-block;
+}
+
+section {
+	width: 80%;
+	float: right;
+}
+
+/******************************
+NAV BAR
+******************************/
+nav {
+	height: 50px;
+	width: 100%;
+	border: 1px solid black;
+	background-color: yellow;
+	position: fixed;
+	top: 0;
+	z-index: 1;
+}
+
+nav h1 {
+	margin: 15px;
+	font-weight: 600;
+	font-size: 1.1em;
+}
+
+.fixed {
+	height: 60px;
+	margin: 5px;
+}
+
+/******************************
+HEADER
+******************************/
+
+header {
+	width: 97%;
+	padding: 10px;
+	margin-bottom: 7px;
+	background-color: lightgreen;
+	border: 2px solid black;
+	border-radius: 15px;
+	text-align: center;
+}
+
+header h1 {
+	margin-bottom: 10px;
+	font-size: 1.2em;
+	font-weight: bold;
+}
+
+header h6 {
+	font-style: italic;
+}
+
+
+/******************************
+Advertisment
+******************************/
+
+.ad {
+	height: 440px;
+	width: 19%;
+	background: pink;
+	border: 2px solid black;
+	text-align: center;
+	position: relative;
+}
+
+img {
+	height: 60%;
+	width: 90%;
+	margin-top: 20px;
+}
+
+.vertical-align {
+	width: 90%;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+}
+
+/******************************
+POSTS
+******************************/
+.flex-query {
+	display: inline-block;
+	border: 1px solid black;
+}
+
+.A, .B, .C {
+	width: 29%;
+	height: auto;
+	padding: 10px;
+	background-color: lightblue;
+	border: 2px solid black;
+	overflow: hidden;
+	vertical-align: top;
+}
+
+.post-margin {
+	margin: 0 7px;
+}
+
+h2, h6 {
+	text-align: center;
+}
+
+h2 {
+	margin-bottom: 5px;
+	font-size: 1.15em;
+	font-weight: bold;
+}
+
+h3 {
+	margin: 20px 0 15px;
+	font-weight: bold;
+}
+
+/******************************
+FOOTER
+******************************/
+
+footer {
+	width: 97%;
+	padding: 5px 10px;
+	margin-top: 7px;
+	background-color: lightblue;
+	border: 2px solid black;
+	border-radius: 23px;
+}
+
+
+/******************************
+MEDIA QUERIES
+******************************/
+@media (max-width: 990px) {
+
+		main {
+			margin: 0 auto;
+		}
+
+		/**************************
+		HEADER / NAV QUERIES
+		**************************/
+
+		header {
+			width: 100%;
+			border-radius: 0;
+		}
+
+		.fixed {
+			height: 51px;
+			margin: 0;
+		}
+
+		.ad, header, .A, .B, .C {
+			display: block;
+		}
+
+		.ad {
+			display: none;
+		}
+
+		section {
+			float: none;
+			width: 100%;
+		}
+
+		/******************************
+		POST QUERIES
+		******************************/
+
+		.flex-query {
+			display: flex;
+			flex-flow: row wrap;
+			justify-content: space-between;
+		}
+
+		.B, .C {
+			height: auto;
+			max-width: 45%;
+			display: inline-block;
+			flex-grow: 1;
+			flex-basis: auto;
+		}
+
+		.A {
+			width: 100%;
+			margin: 15px auto;
+		}
+
+		/******************************
+		FOOTER QUERIES
+		******************************/
+
+		footer {
+			width: 100%;
+			margin: 0 auto;
+			border-radius: 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)

		Steve Frazee!!!