diff --git a/README.md b/README.md
index f5895e0b..01ac65ee 100644
--- 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)
+
+Written by Toni Tesori
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..08bbfb98
--- /dev/null
+++ b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="styles.css" />
+  <title>Lorem Micro Blog</title>
+</head>
+
+<body>
+  <header>
+    <h1>The Lorem Micro Blog</h1>
+  </header>
+  <div class="container">
+    <div class="ad-container">
+      <div class="ad">
+        <p>
+          Check out my vertically centered ad!
+          <a href="#"><img src="http://via.placeholder.com/250x250" /></a>
+        </p>
+      </div>
+    </div>
+
+    <main>
+      <header>
+        <h1>The Lorem Micro Blog</h1>
+        <h2>By Foo Bar</h2>
+      </header>
+
+      <section class="posts">
+        <article>
+          <header>
+            <h1>A Most Posty Post</h1>
+            <aside>Written 1/3/2020</aside>
+          </header>
+          <h3>First Thoughts...</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque.
+          </p>
+          <h3>Additional Thoughts...</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eveniet, cumque vel nobis quidem porro, in alias, et dolore atque aspernatur velit suscipit nostrum ipsam. Suscipit possimus vel voluptatum incidunt!
+          </p>
+        </article>
+
+        <article>
+          <header>
+            <h1>Another Posty Post</h1>
+            <aside>Written 1/2/2020</aside>
+          </header>
+          <h3>Only Thoughts...</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae. Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque.
+          </p>
+        </article>
+
+        <article>
+          <header>
+            <h1>A Posty Post</h1>
+            <aside>Written 1/2/2020</aside>
+          </header>
+          <h3>Be It Resolved</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa reprehenderit inventore quam dolore voluptatem in eos quae soluta vitae.
+          </p>
+          <p>
+            Qui praesentium enim quasi blanditiis at, perferendis consequuntur error dolor eaque.
+          </p>
+
+        </article>
+      </section>
+      <footer>
+        <p>
+          This copyrighted blogcast is presented by the 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 blog may not be disseminated without express written consent.
+        </p>
+      </footer>
+    </main>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 00000000..b0a28066
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,123 @@
+@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css';
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: 1.3;
+  padding: 4.5em 0 1em 0;
+}
+
+body>header {
+  background: #000;
+  color: #fff;
+  padding: 0.5em;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+body>header h1 {
+  font-size: 1em;
+  text-transform: uppercase;
+}
+
+.ad-container {
+  display: none;
+}
+
+main>header {
+  background: #ccc;
+  padding: 0.5em 1em;
+  text-align: center;
+  line-height: 1;
+  margin-bottom: 1em;
+}
+
+main>header h1 {
+  margin-bottom: 0;
+}
+
+main>header h2 {
+  font-size: 1.3em;
+  font-style: italic;
+  font-weight: normal;
+}
+
+main article {
+  background: #eee;
+  padding: 0.5em 1em;
+  margin: 0.5em;
+}
+
+main article header {
+  text-align: center;
+}
+
+main article header h1 {
+  font-size: 1.5em;
+  margin-bottom: 0.15em;
+}
+
+footer {
+  background: #999;
+  font-size: 0.8em;
+  padding: 0.5em 1em;
+}
+
+@media only screen and (min-width: 500px) {
+  main .posts {
+    display: flex;
+    flex-flow: row wrap;
+  }
+  main article {
+    flex: 45%;
+  }
+  main article:last-child {
+    flex: 100%;
+  }
+}
+
+@media only screen and (min-width: 990px) {
+  .container {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 0 auto;
+    max-width: 1200px;
+  }
+  .ad-container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    margin-right: 1em;
+    padding: 1em;
+    background: #aaa;
+    text-align: center;
+  }
+  main {
+    flex: 5;
+    margin: 0;
+    display: block;
+  }
+  main > header, main footer {
+    border-radius:1em;
+  }
+  main .posts {
+    flex-wrap: nowrap;
+  }
+  main .posts article {
+    margin: 0;
+    margin: 0 1em 1em 0;
+    flex: 33%;
+  }
+  main article:last-child {
+    margin-right: 0;
+  }
+}
\ No newline at end of file
