vikingeducation · Seeker0 · Oct 19, 2017 · Oct 19, 2017 · Oct 20, 2017 · Oct 23, 2017
diff --git a/.DS_Store b/.DS_Store
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)
+
+Jeffrey Dederick
diff --git a/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/_colors.scssc b/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/_colors.scssc
diff --git a/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/styles2.scssc b/SASS/.sass-cache/ed7290112335bf0dfa7997859727fe8660514baa/styles2.scssc
diff --git a/SASS/_colors.scss 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
diff --git a/SASS/styles2.css.map b/SASS/styles2.css.map
diff --git a/SASS/styles2.scss 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
@@ -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>
diff --git a/index.html 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
@@ -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;
+}
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)

		Jeffrey Dederick
Original file line number	Diff line number	Diff line change
		@@ -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>