diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..ccf0d1d7
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index f5895e0b..db8cf6fa 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)
+
+Jeffrey Dederick
diff --git a/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/_colors.scssc b/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/_colors.scssc
new file mode 100644
index 00000000..68cce9b8
Binary files /dev/null and b/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/_colors.scssc differ
diff --git a/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/styles2.scssc b/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/styles2.scssc
new file mode 100644
index 00000000..bbc85a70
Binary files /dev/null and b/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/styles2.scssc differ
diff --git a/SASS/_colors.scss b/SASS/_colors.scss
new file mode 100644
index 00000000..cfef3f43
--- /dev/null
+++ b/SASS/_colors.scss
@@ -0,0 +1,7 @@
+$head-color: #aac6a1;
+
+$post-color: #a1c6c6;
+
+$foot-color: #8eb0d1;
+
+$ad-color: #d1a3aa;
diff --git a/SASS/styles2.css b/SASS/styles2.css
new file mode 100644
index 00000000..8bebc67d
--- /dev/null
+++ b/SASS/styles2.css
@@ -0,0 +1,82 @@
+.main {
+  display: flex;
+  align-items: flex-start;
+  padding: 50px; }
+
+.header {
+  background: #aac6a1;
+  border: 2px solid black;
+  border-radius: 2px;
+  margin: 10px;
+  border-radius: 20px;
+  text-align: center; }
+  .header h1
+  caption {
+    vertical-align: top; }
+
+.post-section {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  flex-wrap: wrap; }
+
+.posts {
+  background: #a1c6c6;
+  border: 2px solid black;
+  border-radius: 2px;
+  margin: 10px;
+  padding: 10px;
+  flex-basis: 300px;
+  min-width: 300px;
+  box-sizing: border-box;
+  flex: 1; }
+  .posts h2 {
+    text-align: center; }
+  .posts .date {
+    text-align: center; }
+
+#blogs {
+  flex: 3;
+  order: 2; }
+
+#foot {
+  border: 2px solid black;
+  border-radius: 2px;
+  margin: 10px;
+  background: #8eb0d1;
+  border-radius: 30px;
+  text-align: center; }
+
+#aside {
+  background: #d1a3aa;
+  border: 2px solid black;
+  border-radius: 2px;
+  margin: 10px;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 20px;
+  flex: 1;
+  order: 1;
+  padding: 10px;
+  min-height: 500px; }
+
+#image {
+  margin: auto;
+  background: white;
+  width: 200px;
+  height: 200px; }
+
+.ad {
+  display: flex;
+  flex-direction: column;
+  margin: auto; }
+  .ad p {
+    text-align: center; }
+
+@media (max-width: 900px) {
+  #aside {
+    display: none; } }
+
+/*# sourceMappingURL=styles2.css.map */
diff --git a/SASS/styles2.css.map b/SASS/styles2.css.map
new file mode 100644
index 00000000..2ad03128
--- /dev/null
+++ b/SASS/styles2.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAiBA,KAAM;EALJ,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,UAAU;EAMvB,OAAO,EAAE,IAAI;;AAGf,OAAQ;EACN,UAAU,ECvBC,OAAO;EDGlB,MAAM,EAAE,eAAe;EACvB,aAAa,EAAE,GAAG;EAIlB,MAAM,EAAE,IAAI;EAkBZ,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;EAEhB;SACQ;IACN,cAAc,EAAE,GAAG;;AAKzB,aAAc;EAxBZ,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,UAAU;EAyBvB,eAAe,EAAE,YAAY;EAC7B,SAAS,EAAE,IAAI;;AAGjB,MAAO;EACL,UAAU,ECzCC,OAAO;EDClB,MAAM,EAAE,eAAe;EACvB,aAAa,EAAE,GAAG;EAIlB,MAAM,EAAE,IAAI;EAsCZ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,KAAK;EACjB,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,UAAU;EACtB,IAAI,EAAE,CAAC;EACP,SAAG;IACC,UAAU,EAAE,MAAM;EAEtB,YAAM;IACJ,UAAU,EAAE,MAAM;;AAItB,MAAO;EACL,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;;AAGV,KAAM;EA7DJ,MAAM,EAAE,eAAe;EACvB,aAAa,EAAE,GAAG;EAIlB,MAAM,EAAE,IAAI;EA2DZ,UAAU,EC/DC,OAAO;EDgElB,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;;AAGpB,MAAO;EACL,UAAU,ECnED,OAAO;EDHhB,MAAM,EAAE,eAAe;EACvB,aAAa,EAAE,GAAG;EAIlB,MAAM,EAAE,IAAI;EAIZ,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,UAAU;EAgEvB,cAAc,EAAE,GAAG;EACnB,WAAW,EAAE,MAAM;EACnB,YAAY,EAAE,IAAI;EAClB,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,KAAK;;AAGnB,MAAO;EACL,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,KAAK;EACjB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;;AAGf,GAAI;EACF,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,MAAM,EAAE,IAAI;EACZ,KAAE;IACA,UAAU,EAAE,MAAM;;AAItB,yBAAyB;EACvB,MAAO;IACL,OAAO,EAAE,IAAI",
+"sources": ["styles2.scss","_colors.scss"],
+"names": [],
+"file": "styles2.css"
+}
\ No newline at end of file
diff --git a/SASS/styles2.scss b/SASS/styles2.scss
new file mode 100644
index 00000000..2ce80245
--- /dev/null
+++ b/SASS/styles2.scss
@@ -0,0 +1,107 @@
+@import 'colors';
+
+@mixin border-general {
+  border: 2px solid black;
+  border-radius: 2px;
+}
+
+@mixin margin-general {
+  margin: 10px;
+}
+
+@mixin flex-general {
+  display: flex;
+  align-items: flex-start;
+}
+
+
+.main {
+  @include flex-general;
+  padding: 50px;
+}
+
+.header {
+  background: $head-color;
+  @include border-general;
+  @include margin-general;
+  border-radius: 20px;
+  text-align: center;
+  h1 {
+    &
+    caption {
+      vertical-align: top;
+    }
+  }
+}
+
+.post-section {
+  @include flex-general;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.posts {
+  background: $post-color;
+  @include border-general;
+  @include margin-general;
+  padding: 10px;
+  flex-basis: 300px;
+  min-width: 300px;
+  box-sizing: border-box;
+  flex: 1;
+  h2 {
+      text-align: center;
+  }
+  .date {
+    text-align: center;
+  }
+}
+
+#blogs {
+  flex: 3;
+  order: 2;
+}
+
+#foot {
+  @include border-general;
+  @include margin-general;
+  background: $foot-color;
+  border-radius: 30px;
+  text-align: center;
+}
+
+#aside {
+  background: $ad-color;
+  @include border-general;
+  @include margin-general;
+  @include flex-general;
+  flex-direction: row;
+  align-items: center;
+  margin-right: 20px;
+  flex: 1;
+  order: 1;
+  padding: 10px;
+  min-height: 500px;
+}
+
+#image {
+  margin: auto;
+  background: white;
+  width: 200px;
+  height: 200px;
+}
+
+.ad {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  p {
+    text-align: center;
+  }
+}
+
+@media (max-width: 900px){
+  #aside {
+    display: none;
+  }
+}
diff --git a/image b/image
new file mode 100644
index 00000000..215bb08f
--- /dev/null
+++ b/image
@@ -0,0 +1,2 @@
+<script>window.googleJavaScriptRedirect=1</script><META name="referrer" content="origin"><script>var n={navigateTo:function(b,a,d){if(b!=a&&b.google){if(b.google.r){b.google.r=0;b.location.href=d;a.location.replace("about:blank");}}else{a.location.replace(d);}}};n.navigateTo(window.parent,window,"https://www.wpclipart.com/signs_symbol/alphabets_numbers/outlined_alphabet/white_capitol/capitol_X_white.png.html");
+</script><noscript><META http-equiv="refresh" content="0;URL='https://www.wpclipart.com/signs_symbol/alphabets_numbers/outlined_alphabet/white_capitol/capitol_X_white.png.html'"></noscript>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..ef39e2ff
--- /dev/null
+++ b/index.html
@@ -0,0 +1,58 @@
+<!DOCYTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width= device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="SASS/styles2.css">
+
+  <title>Markup Warmup</title>
+  <main class="main">
+    <div id="blogs">
+    <header>
+      <div class="header">
+        <h1>The Lorem Micro Blog</h1>
+        <caption>By Foo Bar</caption>
+      </div>
+    </header>
+    <section class="post-section">
+      <article class="posts">
+        <h2>A Most Postly Post</h2>
+        <p class="date">Written 1/3/2000</p>
+        <h3>First Thoughts...</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <h3>Additional Thoughts....</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </article>
+      <article class="posts">
+        <h2>Another Postly Post</h2>
+        <p class="date">Written 1/2/2000</p>
+        <h3>Only Thoughts</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </article>
+      <article class="posts">
+        <h2>A Postly Post</h2>
+        <p class="date">Written 1/5/2000</p>
+        <h3>Be It Resolved</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+      </article>
+    </section>
+      <footer id="foot">
+        <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>
+    <aside id="aside">
+      <div class="ad">
+        <p>Check out my vertically centered ad!</p>
+        <div id="image">
+        </div>
+      </div>
+    </aside>
+  </main>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 00000000..ae7fc5f1
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,91 @@
+.main {
+  display: flex;
+  align-items: flex-start;
+  padding: 50px;
+}
+.header{
+  background: #aac6a1;
+  border: 2px solid black;
+  border-radius: 20px;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.header h1 {
+  vertical-align: top;
+}
+
+.header caption {
+  vertical-align: top;
+}
+
+.post-section {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.posts {
+  background: #a1c6c6;
+  border: 2px solid black;
+  border-radius: 2px;
+  Margin-left: 10px;
+  margin-right: 10px;
+  flex: 1;
+  padding: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  min-width: 300px;
+  box-sizing: border-box;
+}
+
+@media (max-width: 900px){
+  #aside {
+    display: none;
+  }
+}
+
+#blogs {
+  flex: 3;
+  order: 2;
+}
+
+#foot {
+  background: #8eb0d1;
+  border: 2px solid black;
+  border-radius: 30px;
+  text-align: center;
+  margin-top: 10px
+}
+
+#aside {
+  flex: 1;
+  order: 1;
+  background: #d1a3aa;
+  border: 2px solid black;
+  padding: 10px;
+  border-radius: 2px;
+  margin-right: 20px;
+  min-height: 600px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+#image {
+  margin: auto;
+  background: white;
+  width: 200px;
+  min-height: 50%;
+}
+
+.ad {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+}
+
+.ad p{
+  text-align: center;
+}