vikingeducation · ryandbarnett · Sep 11, 2017 · Sep 11, 2017 · Sep 11, 2017 · Sep 11, 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)
+
+by Ryan Barnett
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Lorem Ipsum Blog Page</title>
+    <!-- first the css reset, then the stylesheet -->
+    <link rel="stylesheet" type="text/css" href="reset.css">
+    <link rel="stylesheet" type="text/css" href="styles.css">
+  </head>
+
+  <body>
+    <header>
+      <p>The Lorem Mirco Blog</p>
+    </header>
+
+    <div class="container">
+      <aside>
+        <div class="vertical-align">
+          <p>Check out my vertically centered ad!</p>
+          <p><img src="http://placehold.it/128x128"></p>
+        </div>
+      </aside>
+
+      <main>
+        <header>
+          <h2>The Lorem Micro Blog</h2><br>
+          <p>by Ryan Barnett</p>
+        </header>
+
+        <article>
+          <h3>A Most Posty Post</h3>
+          <p>Written 1/3/2000</p>
+          <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.</p>
+        </article>
+
+        <article>
+          <h3>Another Posty Post</h3>
+          <p>Written 1/2/2000</p>
+          <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 class = "mobile-wide">
+          <h3>A Posty Post</h3>
+          <p>Written 1/1/2000</p>
+          <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. </p>
+          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
+          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat</p>
+        </article>
+
+        <footer>
+          <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>
+      </main>
+    </div>
+  </body>
+</html>
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,92 @@
+.vertical-align {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translate(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%); }
+
+h2 {
+  font-weight: bold;
+  line-height: 40px;
+  font-size:  20px;}
+
+h3 {
+  font-weight: bold;
+  line-height: 36px;
+  font-size: 18px;}
+
+h4 {
+  font-weight: bold;
+  line-height: 30px;
+  font-size: 15px;}
+
+@media screen and (min-width: 890px) {
+  .container {
+    max-width: 990px;
+    margin: 5px 50px; } }
+@media screen and (max-width: 890px) {
+  .container {
+    width: 100%;
+    margin: 5px 0; } }
+
+aside, footer, header, article {
+  min-height: 40px;
+  border: 1px solid black;
+  background-color: #98d8ea;
+  float: left;
+  padding: 15px;
+  margin-bottom: 15px;
+  box-sizing: border-box; }
+
+header {
+  width: 110%;
+  margin-left: 0;
+  padding: none;
+  background-color: #f7f96b; }
+
+aside {
+  width: 25%;
+  min-height: 500px;
+  float: left;
+  background-color: pink;
+  position: relative;
+  text-align: center; }
+  aside > div {
+    width: 100%;
+    padding: 15px;
+    line-height: 36px;
+    box-sizing: border-box; }
+  aside img {
+    width: 150px;
+    height: 150px;
+    border: 2px solid blue; }
+  @media screen and (max-width: 890px) {
+    aside {
+      display: none; } }
+
+main {
+  width: 74%;
+  float: right; }
+  main header {
+    background-color: #6ad871; }
+  main header, main footer {
+    clear: both;
+    width: 100%; }
+    @media screen and (min-width: 890px) {
+      main header, main footer {
+        border-radius: 25px; } }
+  @media screen and (max-width: 890px) {
+    main {
+      width: 100%; } }
+
+article {
+  width: 30%;
+  margin: 1%;
+  background-color: #888; }
+  @media screen and (max-width: 890px) {
+    article {
+      width: 48%; } }
+
+@media screen and (max-width: 890px) {
+  .mobile-wide {
+    width: 98%; } }
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)

		by Ryan Barnett