vikingeducation · memyselfandhai · Aug 21, 2017 · Aug 21, 2017 · Sep 5, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
 assignment_markup_warmup_sprint
 ===============================
 
+Hai Nguyen
+
 And 1 and 2!  And 1, and 2...!
 [An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com)
diff --git a/assets/ads.jpg b/assets/ads.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="UTF-8">
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
+
+    <title>The Lorem Micro Blog</title>
+    <link rel="stylesheet" href="/reset.css">
+    <link rel="stylesheet" media="(min-width: 990px)" href="/styles.css">
+    <link rel="stylesheet" media="(max-width: 989px)" href="/narrow.css">
+  </head>
+
+
+  <nav>
+    <h1 id="banner">The Lorem Micro Blog</h1>
+  </nav>
+
+
+  <main>
+
+      <aside>
+        <section id="ad">
+          <h3>Check out my vertically centered ad!</h3>
+          <img src="/assets/ads.jpg" width=200px>
+        </section>
+      </aside>
+
+  <div class="content">
+
+      <header>
+        <h1>The Lorem Micro Blog</h1>
+        <h2> by Foo Bar</h2>
+      </header>
+
+        <div class="flex-container">
+          <article>
+            <h3>A Most Posty Post</h3>
+            <h4>Written 1/3/2000</h4>
+              <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.
+              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>
+          </article>
+
+          <article>
+            <h3>Another Posty Post</h3>
+            <h4>Written 1/2/2000</h4>
+              <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>
+          </article>
+
+          <article class="last-article">
+            <h3>Posty McPostFace</h3>
+            <h4>Written 1/1/2000</h4>
+              <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.
+              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>
+          </article>
+        </div>
+
+      <footer>
+        <p>Copyright Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
+      </footer>
+  </div>
+
+  </main>
+</html>
diff --git a/narrow.css b/narrow.css
@@ -0,0 +1,75 @@
+nav {
+  background-color: #FFEFAA;
+  width: 100%;
+  padding: 8px;
+  border: solid 2px black;
+}
+
+aside {
+  display:none;
+}
+
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+header {
+  background-color: #A0C562;
+  border: 2px solid black;
+}
+
+article {
+  background-color: #41817F;
+  float: left;
+  width: 45%;
+  height: auto;
+}
+
+footer {
+  background-color: #4F608F;
+  clear:both;
+}
+
+article, footer {
+  padding: 8px;
+  margin: 5px;
+  border: 2px solid black;
+}
+
+
+.last-article {
+  clear:both;
+  width: auto;
+  margin: 5px;
+}
+
+h1 {
+  font-size: 25px;
+  padding: 5px;
+  margin-left: 5px;
+  text-align: center;
+}
+
+#banner {
+  font-size: 25px;
+  padding: 5px;
+  margin-left: 5px;
+  text-align: left;
+}
+
+h2, h3 {
+  font-size: 20px;
+  padding: 5px;
+  margin-left: 5px;
+  text-align: center;
+}
+
+h3 {
+  font-weight: bold;
+}
+
+h4 {
+  text-align: center;
+  margin-bottom: 10px;
+}
diff --git a/reset.css b/reset.css
@@ -0,0 +1,48 @@
+/* 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/styles.css b/styles.css
@@ -0,0 +1,93 @@
+nav {
+  background-color: #FFEFAA;
+  position: fixed;
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 8px;
+  border: solid 2px black;
+}
+
+main {
+  width: 990px;
+  position: absolute;
+    top:60px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+
+aside {
+  float: left;
+  width:24%;
+  height: 600px;
+  background-color: #FFAAAA;
+  text-align: center;
+  position: relative;
+}
+
+#ad {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+   transform: translate(-50%, -50%);
+}
+
+.content {
+  width: 72%;
+  float:right;
+}
+
+header {
+  background-color: #A0C562;
+  border-radius: 10px;
+}
+
+article {
+  background-color: #41817F;
+  float: left;
+  width: 29%;
+}
+
+footer {
+  background-color: #4F608F;
+  clear:both;
+  border-radius: 10px;
+}
+
+aside, header, article, footer {
+  padding: 8px;
+  margin: 5px;
+  border: 2px solid black;
+}
+
+
+h1 {
+  font-size: 25px;
+  padding: 5px;
+  margin-left: 5px;
+  text-align: center;
+}
+
+#banner {
+  font-size: 25px;
+  padding: 5px;
+  margin-left: 5px;
+  text-align: left;
+}
+
+h2, h3 {
+  font-size: 20px;
+  padding: 5px;
+  margin-left: 5px;
+  text-align: center;
+}
+
+h3 {
+  font-weight: bold;
+}
+
+h4 {
+  text-align: center;
+  margin-bottom: 10px;
+}
diff --git a/styles_v1.css b/styles_v1.css
@@ -0,0 +1,57 @@
+
+
+#container {
+  width: 990px
+}
+
+#left {
+  width: 25%}
+}
+
+#right {
+  width: 75%}
+}
+
+nav {
+  background-color:#D4BE6A;
+  padding:10px;
+  border: 1px solid;
+}
+
+header {
+  background-color:#A5C663;
+  padding:2px;
+  margin:2px;
+  border: 2px solid;
+}
+
+aside {
+  background-color:#D4856A;
+  float:left;
+  width: 20%;
+  padding:2px;
+  margin:2px;
+  border: 2px solid;
+}
+
+article {
+  background-color:#489174;
+  display: inline-block;
+  width:20%;
+  padding:2px;
+  margin:2px;
+  border: 2px solid;
+}
+
+
+footer {
+  background-color:#4F628E;
+  padding:2px;
+  border: 2px solid;
+  margin:2px;
+}
+
+
+h1 {
+  font-size: 20px;
+}