vikingeducation · GeneTinderholm · Oct 23, 2017 · Oct 23, 2017 · Oct 23, 2017 · Oct 23, 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)
+
+Link to deployed page: https://github.com/GeneTinderholm/assignment_markup_warmup/tree/master
diff --git a/assets/adImg.png b/assets/adImg.png
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>A Web Page</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+	<nav>
+		The Lorem Micro Blog
+	</nav>
+	<div id="everythingContainer">
+		<aside>
+			<p>Check out my vertically centered ad!</p>
+			<img src="assets/adImg.png" alt="Ad X">
+		</aside>
+		<div id="everythingButAdContainer">
+			<section id="greenBar">
+				<h1>The Lorem Micro Blog</h1>
+				<p>By Foo Bar</p>
+			</section>
+			<div id="articleContainer">
+				<div id="firstTwoContainer">
+					<article id="first">
+						<h2>A Most Posty Post</h2>
+						<h3>Written 1/3/2000</h3>
+						<h4>First Thoughts...</h4>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at est et dui convallis fringilla vel ut leo. Sed commodo ipsum ligula. Donec viverra ipsum et lorem porta pharetra. Ut magna purus, mattis vel elit ut, feugiat</p> 
+						<h4>Additional Thoughts...</h4>
+						<p>Nunc facilisis sit amet neque a posuere. Integer gravida maximus augue, in mollis ex porta sed. Sed vulputate tempus elit, id hendrerit est semper in. Donec eu arcu</p>
+
+					</article>
+					<article id="second">
+						<h2>Another Posty Post</h2>
+						<h3>Written 1/2/2000</h3>
+						<h4>Only Thoughts...</h4>
+						<p>Sed elementum risus eget mauris finibus viverra. Nunc finibus eros et metus pellentesque consectetur. Integer tempor tempus lacus a consequat. Nunc aliquam, leo eu scelerisque molestie, est sem sagittis metus, at placerat</p>
+					</article>
+				</div>
+				<article id="third">
+					<h2>A Posty Post</h2>
+					<h3>Written 1/1/2000</h3>
+					<h4>Be it Resolved</h4>
+					<p>Sed vestibulum urna lorem, sit amet suscipit enim efficitur et. Phasellus semper porttitor sapien sit amet condimentum. Fusce sit amet purus dapibus, vestibulum mauris sed, aliquet sapien. Donec euismod lacus tempor, ultrices turpis non</p>
+					<p>faucibus libero. Fusce augue tellus, faucibus ac velit quis, sollicitudin elementum velit. Vivamus sollicitudin erat at</p>
+				</article>
+			</div>
+			<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>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,185 @@
+body{
+	background-color:#FFF;
+	font-family: Helvetica, Arial, sans-serif;
+}
+
+nav{
+	display:flex;
+	align-items:center;
+	justify-content: flex-start;
+	background-color:#FFE599;
+	width:100%;
+	height:75px;
+	font-size:2em;
+	text-indent:50px;
+	margin-bottom: 10px;
+	border-style:solid;
+	border-width: 2px;
+	border-color: #000;
+}
+
+@media (max-width:989px){
+	nav{
+		text-indent: 10px;
+		height:50px;
+		font-size:1.5em;
+		margin-bottom: 0px;
+	}
+}
+
+aside{
+	background-color:#D5A6BD;
+	border-style:solid;
+	border-width: 2px;
+	border-color: #000;
+	width:400px;
+	height:600px;
+	margin-right: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+@media (max-width: 989px){
+	aside{
+		display:none;
+	}
+}
+
+section{
+	background-color:#B6D7A8;
+	text-align: center;
+	border-radius: 10px;
+	height:100px;
+	width:100%;
+	border-style:solid;
+	border-width: 2px;
+	border-color: #000;
+}
+
+@media (max-width: 989px){
+	section{
+		border-radius: 0px;
+	}
+}
+
+@media (min-width: 990px){
+	section{
+		margin-bottom:10px;
+	}
+}
+
+#first, #second{
+	margin:10px;
+	background-color:#A2C4C9;
+	max-width:45%;
+	display:inline-block;
+	padding:10px;
+	border-style:solid;
+	border-width: 2px;
+	border-color: #000;
+}
+/*
+@media (max-width: 989px){
+	#first, #second{
+		background-color:#A2C4C9;
+		max-width:45%;
+		min-width:30%;
+		display:inline-block;
+		padding:10px;
+		border-style:solid;
+		border-width: 2px;
+		border-color: #000;
+		margin:10px;
+	}
+}
+*/
+@media (min-width: 990px){
+	#first{
+		margin-left:0px;
+	}
+}
+
+#third{
+	margin:10px;
+	background-color:#A2C4C9;
+	max-width:30%;
+	display:inline-block;
+	padding:10px;
+	border-style:solid;
+	border-width: 2px;
+	border-color: #000;
+}
+
+@media (max-width:989px){
+	#third{
+		max-width:100%;
+	}
+}
+
+@media (min-width: 990px){
+	#third{
+		margin-right:0px;
+	}
+}
+
+footer{
+	background-color:#9FC5F8;
+	padding: 1px;
+	border-radius: 10px;
+	margin-top: 10px;
+	border-style:solid;
+	border-width: 2px;
+	border-color: #000;
+}
+
+@media (max-width: 989px){
+	footer{
+		border-radius: 0px;
+	}
+}
+
+@media (min-width: 990px){
+	#everythingButAdContainer{
+		max-width:990px;
+	}
+}
+
+#firstTwoContainer{
+	max-width:100%;
+	display:flex;
+	align-items: flex-start;
+	justify-content: flex-start;
+	flex-wrap: nowrap;
+}
+
+#articleContainer{
+	max-width:100%;
+	position:relative;
+	display:flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	flex-wrap: nowrap;
+}
+
+@media (max-width: 989px){
+	#articleContainer{
+		flex-wrap: wrap;
+	}
+}
+
+#everythingContainer{
+	display:flex;
+	align-items: flex-start;
+	justify-content: center;
+}
+
+img{
+	height:300px;
+	width:350px;
+}
+
+h2, h3{
+	text-align: center;
+}
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)

		Link to deployed page: https://github.com/GeneTinderholm/assignment_markup_warmup/tree/master