Feature image header into release--0.0.2

src/index.html

@@ -12,6 +12,7 @@
         <link rel="stylesheet" href="../bower_components/normalize-css/normalize.css">
         <!-- <link rel="stylesheet" href="css/normalize.css"> -->
         <link rel="stylesheet" href="css/main.css">
+        <link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
         <!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> -->
         <script src="../bower_components/modernizr/bin/modernizr"></script>
         <svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
@@ -22,33 +23,63 @@
         <![endif]-->
 
         <!-- Add your site or application content here -->
+
+        <header class="hero">
+          <!-- <img src="img/hero2.jpg"> -->
+          <nav class="hamburger-menu">
+      			<a href="#" class="menu-icon border"></a>
+      			<h1>Ricecoder</h1>
+      		</nav>
+
+      		<div class="text">
+      			<h2>Welcome to my Blog</h2>
+      			<p>So Much Wow!</p>
+      			<a href="btn btn-success">Contact!</a>
+      		</div>
+
+            <nav class="menu-list">
+              <a href="#">About</a>
+              <a href="#">Portfolio</a>
+              <a href="#">Contact</a>
+            </nav>
+
+        </header>
+
         <main class="container">
-          <header>
-            <h1>Welcome to my Blog</h1>
-
-            <nav class="hamburger-menu">
-              <a href="#" class="menu-icon border"></a>
-              <ul class="menu">
-                <li>
-                  <a href="#">About</a>
-                </li>
-                <li>
-                  <a href="#">Portfilio</a>
-                </li>
-                <li>
-                  <a href="#">Tutorials</a>
-                </li>
-                <li>  
-                  <a href="#">Blog Posts</a>
-                </li>
-              </ul>
-          </header>
-
-          <
 
+          <section class="posts">
+            <div class="meta"> Oct 12, 2015 | <span class="author">Lacey Rice</a>
+              <a href="" class="comment">Leave a Comment</a>
+            </div>
+              <h3><a href="">This is my post</a></h3>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum eu lorem a egestas. Pellentesque eros enim, posuere ac turpis non, dignissim fermentum orci. Integer eget elementum ex, et gravida nulla.
+                <a href="" class="more">Read more</a></p>
+          </section>
+
+          <section class="posts">
+            <div class="meta"> Oct 12, 2015 | <span class="author">Lacey Rice</a>
+              <a href="" class="comment">Leave a Comment</a>
+            </div>
+              <h3><a href="">This is my post</a></h3>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum eu lorem a egestas. Pellentesque eros enim, posuere ac turpis non, dignissim fermentum orci. Integer eget elementum ex, et gravida nulla.
+                <a href="" class="more">Read more</a></p>
+          </section>
+
+          <section class="posts">
+            <div class="meta"> Oct 12, 2015 | <span class="author">Lacey Rice</a>
+              <a href="" class="comment">Leave a Comment</a>
+            </div>
+              <h3><a href="">This is my post</a></h3>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum eu lorem a egestas. Pellentesque eros enim, posuere ac turpis non, dignissim fermentum orci. Integer eget elementum ex, et gravida nulla.
+                <a href="" class="more">Read more</a></p>
+          </section>
 
         </main>
 
+        <footer>
+      	 <!-- something here eventually -->
+      	</footer>
+
 
         <script src="../bower_components/jquery/dist/jquery.js"></script>
 

src/js/main.js

@@ -0,0 +1,4 @@
+$('.menu-icon').on('click', function() {
+  console.log("CLICK");
+  $('.menu-list').toggle('active');
+});

src/scss/_common.scss

@@ -1,38 +1,117 @@
+body {
+  font-family: "Lato", sans-serif;
+}
+svg.icon {                //Invisible block that messes with my hero
+  display: none;
+}
+
 header {
-  background-color: teal;
+  position: relative;
+	top: 0;
+	width: 100%;
+	height: 448px;
+	margin-bottom: 20px;
+  // margin-left: 30px;
+
+  background: transparent url('../img/hero2.jpg') no-repeat;    //recieved help from a web developer on this part
+  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
+  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
 
-  h1 {
+
+  a {
+    text-decoration: none;
+  	font-weight: bold; color: #fff;
+    border-bottom: 1px solid rgba(198, 70, 61, 0);
+  }
+
+  a:hover {
+    border-bottom: 1px solid #500000;
+  	color: #500000;
+  }
+
+
+  h1 {                          //Ricecoder
     text-align: center;
     color: #fff;
   }
 
+  .text {                       //H2 and p in the header
+    text-align: center;
+    color: #fff;
+  }
+
+  .menu-list {                  //menu
+    display: none;
+  }
 
+  .menu-list.active {           //menu active state
+    display: inherit;
+    background-color: #fff;
+    float: left;
 
-  .menu-icon {
+    a {                         //all links in header
+      text-decoration: none;
+      color: #fff;
+      display: block;
+    }
+  }
+
+
+
+  .menu-icon {                        //Hamburger Menu
     position: relative;
     display: inline-block;
-    width: 7vw;
+    width: 2vw;
     text-indent: -999px;
-    float: right;
+
 
   }
 
-  .border {
-    height: 30px;
-    border-top: 10px solid blue;
-    border-bottom: 10px solid blue;
+  .border {                           //Hamburger Menu
+    height: 15px;
+    border-top: 5px solid #fff;
+    border-bottom: 5px solid #fff;
     border-radius: 5%;
   }
 
-  .border::before {
+  .border::before {                   //Hamburger Menu
     content: "";
     position: absolute;
-    top: 10px;
+    top: 5px;
     left: 0;
     width: 100%;
-    border-top: 10px solid blue;
+    border-top: 5px solid #fff;
     border-radius: 5%;
 
   }
 
+
+} //END OF HEADER
+
+//MAIN CONTAINER
+.container {
+  max-width: 960px;
+	margin: 0 auto;
+
+  .posts{                             //Posts section
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #ccc;
+
+    a {
+    text-decoration: none;
+  }
+
+    .comment {
+      padding: 5px;
+    }
+
+  }
+} //END OF MAIN CONTAINER
+
+footer{
+	padding: 10px 0;
+	color: #ccc;
+	background: #121417;
 }