diff --git a/src/img/hero2.jpg b/src/img/hero2.jpg new file mode 100755 index 0000000..9fedf09 Binary files /dev/null and b/src/img/hero2.jpg differ diff --git a/src/index.html b/src/index.html index 0fe7f02..330dc7a 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,7 @@ + @@ -22,33 +23,63 @@ + +
+ + + +
+

Welcome to my Blog

+

So Much Wow!

+ Contact! +
+ + + +
+
-
-

Welcome to my Blog

- -
- - < +
+
Oct 12, 2015 | Lacey Rice + Leave a Comment +
+

This is my post

+

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. + Read more

+
+ +
+
Oct 12, 2015 | Lacey Rice + Leave a Comment +
+

This is my post

+

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. + Read more

+
+ +
+
Oct 12, 2015 | Lacey Rice + Leave a Comment +
+

This is my post

+

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. + Read more

+
+ + diff --git a/src/js/main.js b/src/js/main.js index e69de29..b203759 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -0,0 +1,4 @@ +$('.menu-icon').on('click', function() { + console.log("CLICK"); + $('.menu-list').toggle('active'); +}); diff --git a/src/scss/_common.scss b/src/scss/_common.scss index 00d923e..bf8ebd3 100644 --- a/src/scss/_common.scss +++ b/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; }