vikingeducation · cvanert · Feb 24, 2018 · Feb 24, 2018 · Feb 24, 2018 · Feb 24, 2018
diff --git a/Advert Placeholder.jpg b/Advert Placeholder.jpg
diff --git a/README.md b/README.md
@@ -3,3 +3,4 @@ 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)
+Courtney Van Ert
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Lorem Ipsum Blog</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <nav class="navbar">
+    <a href="#!">The Lorem Micro Blog</a>
+  </nav>
+  <main class="mainContent">
+    <aside class="advert">
+      <h4>
+        Check out my vertically centered ad!
+      </h4>
+      <img src="Advert Placeholder.jpg" alt="Advertisement Placeholder">
+    </aside>
+    <div class="contentMinusAd">
+      <div class="blogTitle">
+        <h1>The Lorem Micro Blog</h1>
+        <h3 id="byline">By Foo Bar</h3>
+      </div>
+      <div class="blogPosts">
+        <article id="postOne">
+          <h2 class="postTitle">A Most Posty Post</h2>
+          <h4 class="dateWritten">Written 1/3/2000</h4>
+          <h4>First Thoughts...</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.
+          </p>
+          <h4>Additional Thoughts...</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 id="postTwo">
+          <h2 class="postTitle">Another Posty Post</h2>
+          <h4 class="dateWritten">Written 1/2/2000</h4>
+          <h4>Only Thoughts...</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.
+          </p>
+        </article>
+        <article id="postThree">
+          <h2 class="postTitle">A Posty Post</h2>
+          <h4 class="dateWritten">Written 1/1/2000</h4>
+          <h4>Be it Resolved</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.<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>
+        </article>
+      </div>
+      <footer class="copyright">
+    	<p>
+     	 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/styles.css b/styles.css
@@ -0,0 +1,227 @@
+/* CSS reset */
+/* 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;
+}
+*/
+
+
+/* CSS styling */
+
+body {
+  background-color: #FFF;
+  font-family: "Comic Sans MS", Arial, sans-serif;
+}
+
+/* Header line-height */
+h1, h2, h3, h4, h5, h6 {
+  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: 20px;
+  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%;
+}
+
+/* Advert positioning */
+.advert {
+  background-color: #D4A7BD;
+  border: 2px solid #000;
+  padding: 100px 10px;
+  align-items: center;
+  float: left;
+  margin: 0 .5%;
+  text-align: center;
+}
+
+/* Content to right of advert */
+.contentMinusAd {
+  float: right;
+  margin: 0 .5%;
+}
+
+/* Blog title */
+.blogTitle {
+  background-color: #B7D6AA;
+  border: 2px solid #000;
+  border-radius: 25px;
+  text-align: center;
+}
+
+/* Byline */
+#byline {
+  font-style: italic;
+}
+
+/* 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;
+  margin: 4px;
+  float: left;
+  width: 33.3%;
+}
+
+/* Blog post headings */
+.postTitle {
+  text-align: center;
+}
+
+/* Blog date written */
+.dateWritten {
+  font-weight: normal;
+  text-align: center;
+}
+
+/* Footer copyright */
+.copyright {
+  background-color: #A0C6F6;
+  border: 2px solid #000;
+  border-radius: 25px;
+  padding-left: 10px;
+  padding-right: 10px;
+  clear: both;
+  margin-bottom: 0;
+}
+
+
+/* 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;
+  }
+
+  .advert {
+    display: none;
+  }
+
+  .contentMinusAd{
+    width: 100%;
+    margin: 0 0;
+  }
+
+  .blogTitle {
+    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,4 @@ 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)
		Courtney Van Ert