vikingeducation · lomparhernandez · Oct 7, 2017 · Oct 7, 2017 · Oct 7, 2017 · Oct 7, 2017
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>The Lorem Micro Blog</title>
+  <link type="text/css" rel="stylesheet" href="style.css">
+  <link type="text/css" rel="stylesheet" href="reset.css">
+</head>
+
+<body>
+
+  <nav>
+    <h3>The Lorem Micro Blog</h3>
+  </nav>
+
+  <main>
+    <section id="content">
+
+      <header><h1>The Lorem Micro Blog</h1>           <h4>By Foo Bar</h4></header>
+
+      <section id="posts">
+        <article>
+          <h2>A Most Posty Post</h2>
+          <p style="text-align: center;">Written 1/3/2000</p>
+          <h5>First Thoughts</h5>
+          <p>Chuck ipsum. Chuck Norris doesn’t need to swallow when eating food. Chuck Norris once kicked a baby elephant into puberty. Chuck Norris’ roundhouse kick is so powerful, it can be seen from outer space by the naked eye. Chuck Norris does not hunt because the word hunting infers the probability of failure. Chuck Norris goes killing.</p>
+          <h5>Additional Thoughts...</h5>
+          <p>Bacon ipsum dolor sit amet salami jowl corned beef, andouille flank tongue ball tip kielbasa pastrami tri-tip meatloaf short loin beef biltong. Cow bresaola ground round strip steak fatback meatball shoulder leberkas pastrami sausage corned beef t-bone pork belly drumstick.</p>
+        </article>
+
+        <article>
+          <h2>Another Posty Post</h2>
+          <p style="text-align: center;">Written 1/2/2000</p>
+          <h5>Only Thoughts...</h5>
+          <p>Cat ipsum dolor sit amet, hunt anything that moves or hopped up on goofballs hide when guests come over. Hide when guests come over intrigued by the shower, or stare at ceiling climb leg for stretch and use lap as chair. Hunt anything that moves flop over, leave dead animals as gifts for chase imaginary bugs, chase mice for stare at ceiling yet hopped up on goofballs.</p>
+        </article>
+
+        <article>
+          <h2>A Posty Post</h2>
+          <p style="text-align: center;">Written 1/1/2000</p>
+          <h5>Be it Resolved</h5>
+          <p>Hearties avast gally jib brigantine scourge of the seven seas hardtack weigh anchor coxswain Gold Road. Yo-ho-ho port driver pillage booty scuttle reef ballast barkadeer hang the jib. Spanker jury mast line weigh anchor yardarm American Main bilge aft jib crow's nest.</p>
+          <p>You got a real attitude problem, McFly. You're a slacker. You remind me of you father when he went her, he was a slacker too. Hey guys, you gotta get back in there and finish the dance. Oh, then I wanna give her a call, I don't want her to worry about you. Yeah, I think maybe you do.</p>
+        </article>
+      </section>
+
+      <footer>
+        <p>Electrode, Diglett, Nidoran, Mankey,
+Venusaur, Rattata, Fearow, Pidgey,
+Seaking, Jolteon, Dragonite, Gastly,
+Ponyta, Vaporeon, Poliwrath, ¡Butterfree!</p>
+      </footer>
+
+
+    </section>
+
+    <aside>
+      <p>Check these ADS</p>
+      <a href=""><img src="https://cdn.pixabay.com/photo/2017/09/26/16/32/autumn-2789234_960_720.jpg"></img></a>
+    </aside>
+  </main>
+
+
+</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/style.css b/style.css
@@ -0,0 +1,195 @@
+body {
+	margin: 0px;
+	font-family: sans-serif;
+}
+
+nav {
+	display: flex !important;
+	flex-flow: row;
+	height: 5vh;
+	background-color: #FFE599;
+	border-bottom: 1px solid black !important;
+}
+
+h3 {
+	font-weight: bold !important;
+	order: 1;
+	align-self: center;
+	padding: 0px 10px !important;
+}
+
+img {
+	width: 250px;
+}
+
+main {
+	margin: 0px auto;
+	margin-top: 10px;
+	width: 990px;
+}
+
+aside {
+	background-color: #D5A6BD;
+	width: 27%;
+	height: 50vh;
+	border: 1px solid black !important;
+	text-align: center;
+	display: flex !important;
+	flex-flow: column-reverse;
+
+justify-content: center;
+align-content: center;
+align-items: center;
+
+}
+
+aside p {
+	order: 1;
+	flex: 0 1 auto;
+	align-self: auto !important;
+	font-weight: bold;
+}
+
+aside img {
+	order: 2;
+	flex: 0 1 auto;
+	align-self: auto !important;
+}
+
+#content {
+	width: 70%;
+	float: right;
+}
+
+header{ 
+	background-color: #B6D7A8;
+	border: 1px solid black !important;
+	border-radius: 10px;
+	padding: 10px !important;
+}
+
+#posts {
+	display: flex !important;
+	flex-flow: row;
+
+justify-content: space-between;
+align-content: center;
+align-items: baseline;
+
+	width: 100%;
+	margin: 10px auto;
+}
+
+article {
+	background-color: #A2C4C9;
+	width: 30%;
+	border: 1px solid black !important;
+}
+
+article p:nth-child(1) {
+	text-align: center !important;
+}
+
+article:nth-child(1) {
+	order: 1;
+	flex: 0 1 auto;
+	align-self: auto;
+}
+
+article:nth-child(2) {
+	order: 2;
+	flex: 0 1 auto;
+	align-self: auto;
+}
+
+article:nth-child(3) {
+	order: 3;
+	flex: 0 1 auto;
+	align-self: auto;
+}
+
+footer {
+	font-weight: bold !important;
+	background-color: #A2C4C9;
+	color: #0000AA;
+	border: 1px solid black !important;
+	border-radius: 10px;
+	padding: 5px !important;
+}
+
+h1 {
+	font-size: 2em !important;
+}
+
+h2 {
+	font-size: 1.5em !important;
+}
+
+h3 {
+	font-size: 1.2em !important;
+	padding-left: 10px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	font-weight: bold !important;
+	padding: 5px !important;
+}
+
+p {
+	padding: 5px !important;
+}
+
+h1, h2, h4 {
+	text-align: center !important;
+}
+
+@media only screen and (max-width: 989px) {
+	aside {
+		display: none !important;
+	}
+
+	main {
+		width: 100%;
+		margin: 0px auto;
+	}
+
+	#content {
+		width: 100%;
+	}
+
+	#posts {
+		display: block !important;
+	}
+
+	article:nth-child(1) {
+		display: inline-block !important;
+		width: 48%;
+		margin: auto;
+		float: left;
+		margin-left: 10px;
+		margin-bottom: 10px;
+	}
+
+	article:nth-child(2) {
+		display: inline-block !important;
+		width: 48%;
+		margin: auto;
+		float: right;
+		margin-right: 10px;
+	}
+
+	article:nth-child(3) {
+		display: grid;
+		width: 97.5%;
+		margin: auto;
+	}
+
+	header {
+		border-radius: 0px;
+	}
+
+	footer {
+		border-radius: 0px;
+	}
+
+}