vikingeducation · eliashantula · Nov 6, 2017 · Nov 6, 2017
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)
+Elias Hantula
diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link href="styles.css" rel="stylesheet" type ="text/css">
+<link href='https://fonts.googleapis.com/css?family=Josefin Sans' rel='stylesheet'>
+</head>
+<html>
+<body>
+	<div class="top">
+<nav class="navbar fixed-top navbar-light bg-light">
+  <span class="navbar-brand mb-0 h1">The Lorem Micro Blog</span>
+</nav>
+</div>
+<div class="container">
+
+<div class="writings">
+	<div class="intro1"><header class="main-title"><h1>The Lorem Micro Blog<footer>By Foo Bar</footer></h1></header>
+	</div>
+<section class="articles"><article class="article1"><h3 class="atitle>">A Most Posty Post</h3><footer class="date
+	">Written 1/3/2000</footer><span class="intro">First Thoughts</span><br><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper tempus lacus nec sollicitudin. Proin pulvinar urna eget erat molestie, non pulvinar libero faucibus. Duis ultrices fringilla dui at cursus. Vestibulum eu nisi id enim sagittis sodales.<br><br>
+
+<span class="intro">Additional Thoughts</span>
+<br><br>
+Nam facilisis in ex eget semper. Curabitur nibh eros, hendrerit sit amet auctor sed, porta sed velit. Praesent accumsan lorem mauris, in luctus augue elementum ac. Phasellus iaculis vitae lacus vitae finibus. Fusce in enim volutpat ante vehicula pellentesque. Aliquam erat volutpat.</p></article><article class="article2"><h3 class="atitle>">Another Posty Post</h3><footer class="date">Written 1/2/2000</footer><span class="intro">Only Thoughts...</span><br><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper tempus lacus nec sollicitudin. Proin pulvinar urna eget erat molestie, non pulvinar libero faucibus. Duis ultrices fringilla dui at cursus. Vestibulum eu nisi id enim sagittis sodales. Nam facilisis in ex eget semper. Curabitur nibh eros, hendrerit sit amet auctor sed, porta sed velit. Praesent accumsan lorem mauris, in luctus augue elementum ac. Phasellus iaculis vitae lacus vitae finibus. Fusce in enim volutpat ante vehicula pellentesque. Aliquam erat volutpat.</p></article><article class="article3"><h3 class="atitle>">A Posty Post</h3><footer class="date">Written 1/1/2000</footer><span class="intro">Be it Resolved</span><br></br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper tempus lacus nec sollicitudin. Proin pulvinar urna eget erat molestie, non pulvinar libero faucibus. Duis ultrices fringilla dui at cursus. Vestibulum eu nisi id enim sagittis sodales. Nam facilisis in ex eget semper. Curabitur nibh eros, hendrerit sit amet auctor sed, porta sed velit. Praesent accumsan lorem mauris, in luctus augue elementum ac. Phasellus iaculis vitae lacus vitae finibus. Fusce in enim volutpat ante vehicula pellentesque. Aliquam erat volutpat.</p></article></section>
+</div>
+<div class="copyright"><footer><p>This copyrighted telecast is presented by the authority of the Office of the Commisioner of Blogging.Praesent accumsan lorem mauris, in luctus augue elementum ac.</p> </footer>
+</div>
+
+
+
+
+
+
+</div>
+
+
+
+
+
+
+<div class="ad">
+	<aside class="adcontent">test</aside>
+
+</div>
+
+
+
+
+</body>
+
+
+
+
+
+
+
+
+
+
+
+
+
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,184 @@
+
+
+.container {
+	max-width: 990px;
+	margin: 0 auto;
+
+
+
+}
+
+.top {
+position:fixed;
+	border: 2px solid black;
+	 background-color: yellow;
+	 width: 100%;
+
+}
+.main-title {
+
+}
+
+
+.writings {
+	padding-top: 25px;
+
+
+}
+
+.intro1 {
+	border: 2px solid black;
+	 background-color: green;
+	 max-width: 100%;
+	 padding: 10px;
+	 text-align: center;
+	 border-radius: 25px;
+
+}
+
+
+h5 {
+	text-align: center;
+}
+.articles {
+
+width: 100%;
+position: relative;
+
+
+
+
+}
+
+h3 {
+
+	padding-top: 10px;
+}
+
+footer.date {
+
+	padding-bottom: 5px;
+}
+
+.articles::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
+.article1 {
+
+	border: 2px solid black;
+	margin: 5px;
+	 background-color: #7bccc8;
+	 max-width: 30%;
+	 float: left;
+	 position: relative;
+}
+.article2 {
+
+	border: 2px solid black;
+	margin: 5px;
+	 background-color: #7bccc8;
+      position: relative;
+	 max-width: 30%;
+	 float: left;
+}
+
+.article3 {
+
+	border: 2px solid black;
+	margin: 5px;
+	 background-color: #7bccc8;
+	 max-width: 30%;
+	 position: relative;
+	 float: left;
+
+}
+.ad {
+
+
+max-height: 320px;
+	max-width: 120px;
+	border: 2px solid black;
+	 background-color: red;
+	 margin-top: -350px;
+	 margin: 10 auto;
+
+
+
+
+
+}
+.copyright {
+	border:2px solid black;
+	border-radius: 25px;
+	font-size: 15px;
+	background-color: blue;
+	padding: 7px;
+
+}
+
+h3 {
+	text-align: center;
+	font-weight: bold;
+	font-size: 18px;
+}
+
+.date {
+	text-align: center;
+	font-size: 13px;
+}
+
+.adcontent {
+	height: 50%;
+	width: 95%;
+	background: white;
+	border: 2px solid black;
+	margin-top: 50px;
+
+}
+
+.intro {
+	font-weight: bold;
+	padding: 2px;
+}
+
+p {
+	padding: 5px;
+}
+
+@media screen and (max-width: 990px) {
+
+    .writings .intro1 {
+	border: 2px solid black;
+	 background-color: green;
+	 max-width: 100%;
+	 border-radius: 0px;
+
+	 text-align: center;
+}
+}
+@media screen and (max-width: 990px) {
+    .copyright {
+
+	border:2px solid black;
+	font-size: 15px;
+	background-color: blue;
+	padding: 7px;
+	border-radius: 0px;
+
+}
+
+}
+
+@media screen and (max-width: 990px){
+.ad{   
+display:none;
+
+}
+h5 {
+	display:none;
+}
+
+}
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)
		Elias Hantula