vikingeducation · BrennanFulmer · Oct 8, 2017 · Oct 8, 2017 · Oct 10, 2017 · Oct 10, 2017
diff --git a/Mockups/blog_mockup_narrow.png b/Mockups/blog_mockup_narrow.png
diff --git a/Mockups/blog_mockup_wide.png b/Mockups/blog_mockup_wide.png
diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 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)
+by Brennan Fulmer
+
+https://brennanfulmer.github.io/assignment_markup_warmup/
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,150 @@
+header, aside, h1, article, footer {
+	border: 3px solid black;
+	float: left;
+}
+
+header, h1, footer, .container {
+	width: 100%;
+  box-sizing: border-box;
+}
+
+header {
+	background-color: rgb(246, 248, 124);
+	position: fixed;
+	padding: 12px;
+	z-index: 99;
+	font-size: 22px;
+	font-weight: bold;
+	margin-top: -60px;
+}
+
+.container {
+	margin: 60px 0px;
+}
+
+aside {
+	background-color: rgb(238, 133, 234);
+	width: 25%;
+	min-height: 500px;
+	z-index: 100;
+	position: relative;
+  text-align: center;
+}
+
+p {
+	margin: 6px 14px 20px;
+	line-height: 120%;
+}
+
+.BoxCaption {
+	line-height: 110%;
+	font-size: 18px;
+	margin: 120px 0px;
+}
+
+aside > div {
+    width: 100%;
+		border: 3px solid black;
+}
+
+.box {
+	position: absolute;
+	background-color: orange;
+	width: 150px;
+  min-height: 150px;
+	top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+main {
+	width: 73%;
+  float: right;
+}
+
+h1 {
+	background-color: rgb(168, 243, 134);
+	text-align: center;
+  font-size: 18px;
+	font-style: italic;
+	display: table;
+	border-radius: 12px;
+	padding: 8px;
+}
+
+.title {
+	display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.title::first-line {
+	font-size: 24px;
+	font-weight: bold;
+	font-style: normal;
+}
+
+h2 {
+	text-align: center;
+	margin: 8px 0px 8px;
+	font-weight: bold;
+	font-size: 20px;
+}
+
+h4 {
+	text-align: center;
+}
+
+h3 {
+	margin: 14px 0px 14px 14px;
+	font-weight: bold;
+	font-size: 17px;
+}
+
+.BoxCaption {
+	line-height: 110%;
+	font-size: 18px;
+	margin: 120px 0px;
+}
+
+article {
+	background-color: rgb(133, 198, 238);
+	width: 30%;
+	margin: 1%;
+}
+
+footer {
+	font-size: 16px;
+	padding: 14px;
+	background-color: rgb(133, 198, 238);
+  border-radius: 12px;
+	line-height: 110%;
+}
+
+@media screen and (max-width: 989px) {
+
+aside {
+	display: none;
+}
+
+header {
+	margin-top: -60px;
+}
+
+h1, footer {
+	border-radius: 0;
+}
+
+main {
+	width: 100%;
+}
+
+article {
+	width: 46%;
+}
+
+.OldestPost {
+ 	width: 98%;
+}
+
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>The Lorem Ipsum Blog Page</title>
+  <link rel="stylesheet" type="text/css" href="reset.css">
+  <link rel="stylesheet" type="text/css" href="sass/output.css">
+</head>
+   <body>
+
+    <header>
+      The Lorem Micro Blog
+    </header>
+
+<div class = "container">
+
+    <aside>
+      <p class="BoxCaption">
+        Check out my vertically
+       <br>
+        centered ad!
+      </p>
+      <div class="box">
+      </div>
+    </aside>
+
+<main>
+
+    <h1 class="">
+      <p class="title">
+        The Lorem Micro Blog
+      <br>
+          By Foo Bar
+      </p>
+    </h1>
+
+    <article class="NewestPost">
+      <h2 class= "">
+        A Most Posty Post
+      </h2>
+      <h4 class = "">
+        Written 1/3/2000
+      </h4>
+      <h3 class = "">
+        First Thoughts...
+      </h3>
+        <p class= "">
+          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 class = "">
+          Additional Thoughts...
+        </h3>
+        <p class= "">
+          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>
+    </article>
+
+    <article class="MiddlePost">
+      <h2 class= "">
+        Another Posty Post
+      </h2>
+      <h4 class = "">
+        Written 1/2/2000
+      </h4>
+      <h3 class = "">
+        Only Thoughts...
+      </h3>
+        <p class= "">
+          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>
+    </article>
+
+    <article class="OldestPost">
+      <h2 class= "">
+        A Posty Post
+      </h2>
+      <h4 class = "">
+        Written 1/1/2000
+      </h4>
+      <h3 class = "">
+        Be it Resolved
+      </h3>
+       <p class= "">
+         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
+       </p>
+    </article>
+
+    <footer class="">
+     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.
+    </footer>
+
+   </main>
+  </div>
+ </body>
+</html>
diff --git a/reset.css b/reset.css
@@ -0,0 +1,46 @@
+/* Start of 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;
+}
+/* End of CSS Reset */
diff --git a/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/colors.scssc b/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/colors.scssc
diff --git a/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/style2.scssc b/sass/.sass-cache/c9e530ef8a276952a17df276de20864fdc54ae60/style2.scssc
diff --git a/sass/colors.scss b/sass/colors.scss
@@ -0,0 +1,9 @@
+$liteyellow: rgb(246, 248, 124);
+
+$litepurple: rgb(238, 133, 234);
+
+$orange: orange;
+
+$litegreen: rgb(168, 243, 134);
+
+$blue: rgb(133, 198, 238);