Skip to content

Commit a647aef

Browse files
RicecoderRicecoder
committed
Merge pull request #29 from Ricecoder/feature--image-header
Feature image header into release--0.0.2
2 parents e9f3c6c + 60a0881 commit a647aef

File tree

4 files changed

+148
-34
lines changed

4 files changed

+148
-34
lines changed

‎src/img/hero2.jpg‎

45.3 KB
Loading

‎src/index.html‎

Lines changed: 53 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<link rel="stylesheet" href="../bower_components/normalize-css/normalize.css">
1313
<!-- <link rel="stylesheet" href="css/normalize.css"> -->
1414
<link rel="stylesheet" href="css/main.css">
15+
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
1516
<!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> -->
1617
<script src="../bower_components/modernizr/bin/modernizr"></script>
1718
<svg class="icon icon-menu"><use xlink:href="#icon-menu"></use></svg>
@@ -22,33 +23,63 @@
2223
<![endif]-->
2324

2425
<!-- Add your site or application content here -->
26+
27+
<header class="hero">
28+
<!-- <img src="img/hero2.jpg"> -->
29+
<nav class="hamburger-menu">
30+
<a href="#" class="menu-icon border"></a>
31+
<h1>Ricecoder</h1>
32+
</nav>
33+
34+
<div class="text">
35+
<h2>Welcome to my Blog</h2>
36+
<p>So Much Wow!</p>
37+
<a href="btn btn-success">Contact!</a>
38+
</div>
39+
40+
<nav class="menu-list">
41+
<a href="#">About</a>
42+
<a href="#">Portfolio</a>
43+
<a href="#">Contact</a>
44+
</nav>
45+
46+
</header>
47+
2548
<main class="container">
26-
<header>
27-
<h1>Welcome to my Blog</h1>
28-
29-
<nav class="hamburger-menu">
30-
<a href="#" class="menu-icon border"></a>
31-
<ul class="menu">
32-
<li>
33-
<a href="#">About</a>
34-
</li>
35-
<li>
36-
<a href="#">Portfilio</a>
37-
</li>
38-
<li>
39-
<a href="#">Tutorials</a>
40-
</li>
41-
<li>
42-
<a href="#">Blog Posts</a>
43-
</li>
44-
</ul>
45-
</header>
46-
47-
<
4849

50+
<section class="posts">
51+
<div class="meta"> Oct 12, 2015 | <span class="author">Lacey Rice</a>
52+
<a href="" class="comment">Leave a Comment</a>
53+
</div>
54+
<h3><a href="">This is my post</a></h3>
55+
<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.
56+
<a href="" class="more">Read more</a></p>
57+
</section>
58+
59+
<section class="posts">
60+
<div class="meta"> Oct 12, 2015 | <span class="author">Lacey Rice</a>
61+
<a href="" class="comment">Leave a Comment</a>
62+
</div>
63+
<h3><a href="">This is my post</a></h3>
64+
<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.
65+
<a href="" class="more">Read more</a></p>
66+
</section>
67+
68+
<section class="posts">
69+
<div class="meta"> Oct 12, 2015 | <span class="author">Lacey Rice</a>
70+
<a href="" class="comment">Leave a Comment</a>
71+
</div>
72+
<h3><a href="">This is my post</a></h3>
73+
<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.
74+
<a href="" class="more">Read more</a></p>
75+
</section>
4976

5077
</main>
5178

79+
<footer>
80+
<!-- something here eventually -->
81+
</footer>
82+
5283

5384
<script src="../bower_components/jquery/dist/jquery.js"></script>
5485

‎src/js/main.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
$('.menu-icon').on('click', function() {
2+
console.log("CLICK");
3+
$('.menu-list').toggle('active');
4+
});

‎src/scss/_common.scss‎

Lines changed: 91 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,117 @@
1+
body {
2+
font-family: "Lato", sans-serif;
3+
}
4+
svg.icon { //Invisible block that messes with my hero
5+
display: none;
6+
}
7+
18
header {
2-
background-color: teal;
9+
position: relative;
10+
top: 0;
11+
width: 100%;
12+
height: 448px;
13+
margin-bottom: 20px;
14+
// margin-left: 30px;
15+
16+
background: transparent url('../img/hero2.jpg') no-repeat; //recieved help from a web developer on this part
17+
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
18+
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
19+
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
320

4-
h1 {
21+
22+
a {
23+
text-decoration: none;
24+
font-weight: bold; color: #fff;
25+
border-bottom: 1px solid rgba(198, 70, 61, 0);
26+
}
27+
28+
a:hover {
29+
border-bottom: 1px solid #500000;
30+
color: #500000;
31+
}
32+
33+
34+
h1 { //Ricecoder
535
text-align: center;
636
color: #fff;
737
}
838

39+
.text { //H2 and p in the header
40+
text-align: center;
41+
color: #fff;
42+
}
43+
44+
.menu-list { //menu
45+
display: none;
46+
}
947

48+
.menu-list.active { //menu active state
49+
display: inherit;
50+
background-color: #fff;
51+
float: left;
1052

11-
.menu-icon {
53+
a { //all links in header
54+
text-decoration: none;
55+
color: #fff;
56+
display: block;
57+
}
58+
}
59+
60+
61+
62+
.menu-icon { //Hamburger Menu
1263
position: relative;
1364
display: inline-block;
14-
width: 7vw;
65+
width: 2vw;
1566
text-indent: -999px;
16-
float: right;
67+
1768

1869
}
1970

20-
.border {
21-
height: 30px;
22-
border-top: 10px solid blue;
23-
border-bottom: 10px solid blue;
71+
.border { //Hamburger Menu
72+
height: 15px;
73+
border-top: 5px solid #fff;
74+
border-bottom: 5px solid #fff;
2475
border-radius: 5%;
2576
}
2677

27-
.border::before {
78+
.border::before { //Hamburger Menu
2879
content: "";
2980
position: absolute;
30-
top: 10px;
81+
top: 5px;
3182
left: 0;
3283
width: 100%;
33-
border-top: 10px solid blue;
84+
border-top: 5px solid #fff;
3485
border-radius: 5%;
3586

3687
}
3788

89+
90+
} //END OF HEADER
91+
92+
//MAIN CONTAINER
93+
.container {
94+
max-width: 960px;
95+
margin: 0 auto;
96+
97+
.posts{ //Posts section
98+
padding-bottom: 10px;
99+
margin-bottom: 10px;
100+
border-bottom: 1px solid #ccc;
101+
102+
a {
103+
text-decoration: none;
104+
}
105+
106+
.comment {
107+
padding: 5px;
108+
}
109+
110+
}
111+
} //END OF MAIN CONTAINER
112+
113+
footer{
114+
padding: 10px 0;
115+
color: #ccc;
116+
background: #121417;
38117
}

0 commit comments

Comments
 (0)