update blog index with new stylesheet

[Bill Deng] · [Bill Deng] · commit b85f50a5b6aa · 2016-02-25T06:42:10.000Z
diff --git a/blog/index.html b/blog/index.html
@@ -2,32 +2,37 @@
 <html>
 
 <head>
-    <title>Blog Index</title>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="../stylesheets/blog-indext.css">
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+  <title>Blog Index Page</title>
 </head>
 
 <body>
-    <header>
-        <h1>My Jouney at Dev Bootcamp</h1>
-    </header>
 
-    <img src="#" alt="#">
-    <h3><a href="../index.html">Go Back to Main Page</a></h3>
-    <ul>
-        <li><a href="git.html" target="_blank">Introducing the Command Line, Git and Github</a></li>
-        <li>Coming soon!</li>
-        <li>Coming soon!</li>
-        <li>Coming soon!</li>
-        <li>Coming soon!</li>
-        <li>Coming soon!</li>
-        <li>Coming soon!</li>
-    </ul>
-    <hr>
-    <footer>
-        <p>
-            Built with HTML and coffee
-        </p>
-    </footer>
+  <header>
+    <h1>My Blog and Journey at Dev Bootcamp</h1>
+  </header>
 
+  <main>
+    <div class="outer-div">
+      <div class="img-div">
+        <img src="../imgs/dev-bootcamp.jpg" alt="Dev Bootcamp">
+      </div>
+
+      <div>
+        <ul>
+          <li><a href="git.html">Introducing the Command Line, Git and GitHub</a></li>
+          <li>Coming soon!</li>
+          <li>Coming soon!</li>
+          <li>Coming soon!</li>
+          <li>Coming soon!</li>
+          <li>Coming soon!</li>
+          <li>Coming soon!</li>
+        </ul>
+      </div>
+    </div>
+  </main>
 </body>
 
 </html>
diff --git a/imgs/dev-bootcamp.jpg b/imgs/dev-bootcamp.jpg
diff --git a/stylesheets/blog-index.css b/stylesheets/blog-index.css
@@ -0,0 +1,34 @@
+body {
+  font-family: 'Open Sans', sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #fafafa;
+  text-align: center;
+}
+
+img {
+  width: 50%;
+  height: auto;
+  float: left;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+ul {
+  float: left;
+  width: 40%;
+  list-style-type: none;
+}
+
+li {
+  margin-bottom: 10px;
+  font-size: 20px;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  color: #0000b2;
+}
