vikingeducation · alfasf · Aug 27, 2017 · Aug 27, 2017 · Aug 27, 2017 · Aug 27, 2017
diff --git a/Images/placeholder.png b/Images/placeholder.png
diff --git a/assets/style.css b/assets/style.css
@@ -0,0 +1,135 @@
+*{
+    font-family: 'Baloo Tammudu', cursive;
+    font-size: 16px;
+    box-sizing: border-box;
+    margin: 0;
+}
+
+nav{
+	position: fixed;
+	background: #f7f71d;
+	width: 100%;
+	top: 0;
+	left: 0;
+}
+
+main{
+	max-width: 990px;
+	margin: 50px auto;
+}
+
+aside{
+	width: 11%;
+	height: 390px;
+	padding: 20px;
+	border: 2px solid;
+	text-align: center;
+	position: absolute;
+	left: 13px;
+	z-index: -1;
+	background: rgb(245, 175, 187);
+}
+
+aside p{
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+aside img{
+	width: 90%;
+	margin: 30px auto;
+}
+
+section{
+	width: 75%;
+	margin: 0 auto;
+}
+
+
+#headertitle{
+	border: 2px solid;
+	border-radius: 20px;
+	background: rgba(33, 208, 39, 0.7);
+	text-align: center;
+	padding: 5px 0;
+}
+
+#headertitle h1{
+	font-size: 1.35rem;
+}
+
+#headertitle h2{
+	font-size: 1.05rem;
+	font-style: italic;
+	font-weight: normal;
+	line-height: 1;
+}
+
+.flexsection{
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+}
+
+.flexsection .inside-article{
+	border: 4px solid;
+	padding: 10px;
+	margin: 10px 5px;
+	background: rgba(149, 167, 246, 0.76);
+}
+
+.inside-article .body-article p{
+	line-height: 1.05;
+}
+
+/*Footer*/
+
+footer{
+	border: 3px solid;
+	border-radius: 20px;
+	padding: 7px;
+	line-height: 1;
+	background: rgba(149, 167, 246, 0.87);
+}
+
+
+
+@media only screen and (max-width: 900px){
+	nav{
+		border: 1px solid;
+	}
+
+	aside{
+		display: none;
+	}
+
+	main{
+		margin: 38px auto;
+	}
+
+	section{
+		width: 100%;
+	}
+
+	#headertitle{
+		border-radius: 0;
+	}
+
+	.flexsection{
+		flex-flow: row wrap;
+		align-items: flex-start;
+		margin: 0 10px;
+	}
+
+	.flexsection .inside-article{
+		width: 48%;
+	}
+
+	.flexsection .inside-article:nth-child(3){
+		flex-grow: 1;
+	}
+
+	footer{
+		border-radius: 0;
+	}
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>The Lorem Ipsum Blog Page</title>
+    <link href="https://fonts.googleapis.com/css?family=Baloo+Tammudu" rel="stylesheet">      
+    <link rel="stylesheet" href="assets/style.css">
+  </head>
+
+  <body>
+  	<nav>
+  		The Lorem Micro Blog
+  	</nav>
+  	<main>
+  		<aside>
+	  		<p>Check out my vertically centered ad!</p>
+	  		<img src="Images/placeholder.png">
+  		</aside>
+  		<section>
+  			<header id="headertitle">
+  				<h1>The Lorem Micro Blog</h1>
+	  			<h2>By Alfredo D</h2>
+  			</header>
+  			<div class="flexsection">
+	  			<article class="inside-article">
+	  				<header>
+		  				<h3>A Most Posty Post</h3>
+		  				<span class="datetext">Written </span><time datetime="2017-08-26" pubdate>August 26, 2017</time>
+	  				</header>
+	  				<div class="body-article">
+	  					<h4>First Thoughts...</h4>
+	  					<p>
+	  						Praesent tempus euismod metus, vel volutpat eros pulvinar ac. Nunc sit amet pellentesque mi, sed ultricies lacus. Nulla facilisi. Duis pellentesque condimentum metus. Phasellus lobortis justo tincidunt urna faucibus, in congue augue semper. Etiam id ante eget dui imperdiet finibus. Curabitur nec ligula neque. Donec in neque eleifend nisl scelerisque hendrerit. Aliquam lacus odio, vehicula quis diam eget, auctor aliquet est. Sed placerat ornare iaculis. Quisque tristique sed ante at ornare. Praesent in efficitur libero. Integer at sagittis felis. Duis pharetra nisi ac tincidunt consectetur. Nullam aliquet volutpat fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+	  					</p>
+	  					<h4>Additional Thoughts...</h4>
+	  					<p>
+	  						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit, purus nec malesuada tristique, magna mi semper justo, quis venenatis lectus mi eget risus. Pellentesque sed odio porttitor, aliquet diam sit amet, varius augue. In hac habitasse platea dictumst. Donec risus felis, convallis in mollis varius, porttitor ut turpis. In consequat, libero vel luctus egestas, eros ex fermentum sem, quis vulputate mi neque sed eros. Nam nulla dolor, placerat at efficitur eu, gravida eu nunc. 
+	  					</p>
+	  				</div><!--end of body article-->
+	  			</article>
+	  			<article class="inside-article">
+	  				<header>
+		  				<h3>Another Posty Post</h3>
+		  				<span class="datetext">Written </span><time datetime="2017-08-25" pubdate>August 25, 2017</time>
+	  				</header>
+	  				<div class="body-article">
+	  					<h4>Only Thoughts...</h4>
+	  					<p>
+	  						Praesent tempus euismod metus, vel volutpat eros pulvinar ac. Nunc sit amet pellentesque mi, sed ultricies lacus. Nulla facilisi. Duis pellentesque condimentum metus. Phasellus lobortis justo tincidunt urna faucibus, in congue augue semper. Etiam id ante eget dui imperdiet finibus. Curabitur nec ligula neque. Donec in neque eleifend nisl scelerisque hendrerit. Aliquam lacus odio, vehicula quis diam eget, auctor aliquet est. Sed placerat ornare iaculis. Quisque tristique sed ante at ornare. Praesent in efficitur libero. Integer at sagittis felis. Duis pharetra nisi ac tincidunt consectetur. Nullam aliquet volutpat fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+	  					</p>
+	  				</div><!--end of body article-->
+	  			</article>
+	  			<article class="inside-article">
+	  				<header>
+		  				<h3>A Posty Post</h3>
+		  				<span class="datetext">Written </span><time datetime="2017-08-24" pubdate>August 24, 2017</time>
+	  				</header>
+	  				<div class="body-article">
+	  					<h4>Be it Resolved</h4>
+	  					<p>
+	  						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus dui in nunc auctor dignissim. Nullam non nunc nulla. Sed id tortor eu metus convallis hendrerit quis sit amet lectus. Cras lacus orci, elementum at enim at, interdum placerat enim. Mauris nec augue nec urna iaculis varius. Nunc dictum, eros at venenatis feugiat, diam quam ullamcorper lectus, nec vulputate nulla nisl sed massa. Ut vitae hendrerit lacus. Fusce commodo aliquam quam, id pharetra purus aliquam id. Aliquam in cursus massa. Cras suscipit nibh quis ante elementum tempus. Aliquam erat volutpat. 
+	  					</p>
+	  					<p>
+	  						Cras convallis rutrum quam. Aliquam erat volutpat. Etiam convallis dolor ac nibh convallis volutpat. Curabitur ullamcorper efficitur pharetra. Mauris luctus, dui ut convallis maximus, erat tellus cursus orci, ut varius sapien metus ac velit. 
+	  					</p>
+	  				</div><!--end of body article-->	
+	  			</article>
+
+  			</div><!--end of div flexsection-->
+  			<footer>
+	  			This copyrighted telecast is presented by authority of the Office of the Commisioner of Blogging. It may not be reproduced or retransmitted in any form, and the accounts and description of this game may not be disseminated, without express written consent. 
+	  		</footer>
+  		</section>
+
+  	</main> 	
+  </body>
+
+</html>