vikingeducation · ghost · Nov 11, 2017 · Nov 11, 2017 · Nov 11, 2017 · Nov 11, 2017
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,42 @@
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Swap
+[._]*.s[a-v][a-z]
+[._]*.sw[a-p]
+[._]s[a-v][a-z]
+[._]sw[a-p]
+
+# Session
+Session.vim
+
+# Temporary
+.netrwhist
+*~
+# Auto-generated tag files
+tags
diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 assignment_markup_warmup_sprint
 ===============================
+Seong Kim's forked version
 
 And 1 and 2!  And 1, and 2...!
 [An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com)
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>The Lorem Micro Blog</title>
+  </head>
+  <body>
+    <!-- Nav Bar -->
+    <header class="nav">
+      <h3>The Lorem Micro Blog</h3>
+    </header>
+    <div class="top container">
+      <!-- Ad -->
+      <aside class="ad cols container">
+        <p>Check out my vertically centered ad!</p>
+        <img src="http://via.placeholder.com/200x200" alt="advertisement">
+      </aside>
+      <div class="cols container">
+        <section class="main-heading">
+          <h1>The Lorem Micro Blog</h1>
+          <h3>By Foo Bar</h3>
+        </section>
+        <main class="container">
+          <article>
+            <h2>A Most Posty Post</h2>
+            <p>Written 1/3/2000</p>
+            <h4>First Thoughts...</h4>
+            <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius
+            mod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad
+            minum veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+            ex ea commodo consequat.</p>
+            <h4>Additional Thoughts</h4>
+            <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius
+            mod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad
+            minum veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+            ex ea commodo consequat.</p>
+          </article>
+
+          <article>
+            <h2>Another Posty Post</h2>
+            <p>Written 1/2/2000</p>
+            <h4>Only Thoughts...</h4>
+            <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius
+            mod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad
+            minum veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+            ex ea commodo consequat.</p>
+          </article>
+
+          <article>
+            <h2>A Posty Post</h2>
+            <p>Written 1/1/2000</p>
+            <h4>Be It Resolved</h4>
+            <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius
+            mod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad
+            minum veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+            ex ea commodo consequat.</p>
+            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+            dolore eu fugiat nulla pariatur.  Excepteur sint occaecat.</p>
+          </article>
+        </main>
+
+        <section class="copyright">
+          This copyrighted telecast 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 description of this game may not be
+          disseminated, without express written consent.
+        </section>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,203 @@
+/* Reset */
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* Borders */
+header,
+aside,
+section,
+article {
+  border: 2px solid black;
+}
+
+.main-heading,
+.copyright {
+  border-radius: 20px;
+}
+
+/* Typography */
+h1, h2, h3, h4,
+p, section {
+  font-family: Arial, sans-serif;
+}
+
+h1 {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+h2 {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+h3 {
+  font-size: 18px;
+}
+
+h4 {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+/* Nav */
+.nav {
+  background: #FEE49D;
+  padding: 10px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
+
+/* Containers */
+.container {
+  display: flex;
+}
+
+.top {
+  margin-top: 60px;
+  padding: 0 10%;
+}
+
+.cols {
+  flex-direction: column;
+}
+
+/* Ad */
+.ad {
+  background: #D4A7BD;
+  font-weight: bold;
+  justify-content: center;
+  height: 500px;
+  margin-right: 10px;
+  padding: 10px;
+  text-align: center;
+}
+
+.ad p {
+  margin-bottom: 10px;
+}
+
+/* Main Heading */
+.main-heading {
+  background: #B7D6AA;
+  padding: 15px;
+  text-align: center;
+}
+
+.main-heading h1 {
+  margin-bottom: 5px;
+}
+
+.main-heading h3 {
+  font-style: italic;
+}
+
+/* Articles */
+article {
+  background: #A3C4C9;
+  height: fit-content;
+  margin: 5px;
+  padding: 15px;
+}
+
+article h2,
+article p:first-of-type {
+  text-align: center;
+  margin-bottom: 5px;
+}
+
+article h4,
+article p {
+  margin-bottom: 10px;
+}
+
+article h4:first-of-type {
+  margin-top: 15px;
+}
+
+/* Footer */
+.copyright {
+  background: #A0C6F6; 
+  padding: 10px;
+}
+
+
+/* Media Queries */
+@media only screen and (max-width: 990px){
+  /* Top */
+  .top {
+    margin-top: 40px;
+    padding: 0;
+  }
+
+  /* Ad */
+  .ad {
+    display: none;
+  }
+
+  /* Border Radius */
+  .main-heading,
+  .copyright {
+    border-radius: 0;
+  }
+
+  /* Container */
+  .container {
+    flex-wrap: wrap;
+  }
+
+  /* Articles */
+  article {
+    width: 45%;
+  }
+}
+
+