/
index.html
160 lines (160 loc) · 7.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html> <!-- HackerYou Fall 2018 Project1 by Vincent Tang -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Vincent Tang">
<meta name="keywords" content="HackerYou,ProjectOne,Shutter,HTML,CSS,Float">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shutter</title>
<link rel="icon" href="assets/favicon.png" type="image/png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Playfair+Display">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<header class="heroBanner"> <!-- .heroBanner -->
<div class="wrapper clearfix">
<div class="logo">
<h2><a href="#">Shutter</a></h2>
</div>
<ul class="noListMenu desktopMenu">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<nav class="hamburgerMenu">
<input type="checkbox" id="menuToggle" name="menuToggle"> <!-- Hidden Checkbox for the checkbox hack -->
<ul class="noListMenu mobileMenu">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#"><i class="fab fa-facebook-f"></i>Share on facebook</a></li>
<li><a href="#"><i class="fab fa-instagram"></i>Share on Instagram</a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i>Share on LinkedIn</a></li>
<li><a href="#"><i class="fab fa-twitter"></i>Tweet on Twitter</a></li>
</ul>
<label for="menuToggle"><i class="fas fa-bars hamburger"></i></label> <!-- Label serving as a "button" with a checked true/false status for showing and hiding a mobile menu -->
</nav>
</div>
<nav class="clearfix"> <!-- Desktop Social Media Links -->
<ul class="noListMenu socialMedia">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
</ul>
</nav> <!-- /Desktop Social Media Links -->
<section class="welcomeTitle">
<h1>Welcome to <span>Shutter</span></h1>
</section>
</header> <!-- /.heroBanner -->
<section id="about" class="about wrapper"> <!-- .about -->
<h2>About Shutter</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor a elementum eleifend. Vestibulum consequat vestibulum felis pharetra luctus. Quisque interdum orci quis convallis dapibus. Vestibulum vitae tincidunt sem, a blandit sem. Quisque interdum orci.</p>
<button class="more button">Find out more</button>
</section> <!-- /.about -->
<section id="gallery" class="gallery wrapper clearfix"> <!-- .gallery -->
<img src="./assets/gallery1.png" alt="Gallery Image 1">
<img src="./assets/gallery2.png" alt="Gallery Image 2">
<img src="./assets/gallery3.png" alt="Gallery Image 3">
</section> <!-- /.gallery-->
<nav class="midMenu wrapper"> <!-- .middleMenu-->
<ul class="noListMenu clearfix">
<li>
<a href="#gallery">
<i class="fas fa-images"></i>
<h3>Gallery</h3>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-camera"></i>
<h3>Photo Tips</h3>
</a>
</li>
<li>
<a href="#about">
<i class="fas fa-image"></i>
<h3>About</h3>
</a>
</li>
<li>
<a href="#contact">
<i class="fas fa-envelope"></i>
<h3>Contact</h3>
</a>
</li>
</ul>
</nav> <!-- /.middleMenu -->
<main class="behindTheLens wrapper"> <!-- .behindTheLens -->
<img src="./assets/behindTheLens.png" alt="Behind the Lens">
<h2>Behind the Lens</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor nulla elementum eleifend. Vestibulum consequat vestibulum felis pharetra luctus. Quisque interdum orci quis convallis dapibus nulla pulvinar tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor nulla elementum eleifend. Vestibulum consequat vestibulum felis pharetra luctus. Quisque interdum orci quis convallis dapibus nulla pulvinar tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor nulla el. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor nulla elementum eleifend.</p>
<button class="more button">Find out more</button>
</main> <!-- /.behindTheLens -->
<article id="blog" class="blogPost imageRight"> <!-- Nature & Scenery -->
<img src="./assets/natureScenery.png" alt="Nature & Scenery">
<div class="wrapper clearfix">
<h2>Nature & Scenery</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor a elementum eleifend. Vestibulum consequat vestibulum.</p>
<button class="more button">Read more</button>
</div>
</article> <!-- /Nature & Scenery -->
<article class="blogPost imageLeft"> <!-- Candid Photography -->
<img src="./assets/candidPhotography.png" alt="Candid Photography">
<div class="wrapper clearfix">
<h2>Candid Photography</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar tortor a elementum eleifend. Vestibulum consequat vestibulum.</p>
<button class="more button">Read more</button>
</div>
</article> <!-- /Candid Photography -->
<footer id="contact"> <!-- Footer -->
<div class="pgFooter wrapper clearfix">
<aside class="desktop leftFooter">
<h4>Contact</h4>
<ul class="noListMenu">
<li><a href="mailto:info@email.com">info@email.com</a></li>
<li><a href="tel:1234567890">123 - 456 - 7890</a></li>
<li><address>123 some road,</address></li>
<li><address>Toronto, ON</address></li>
</ul>
</aside>
<div class="midFooter clearfix">
<h4>Stay Updated</h4>
<p>Subscribe to our newsletter to stay updated.</p>
<form>
<input class="subscribeEmail" type="email" placeholder="email address">
<button class="subscribe button" type="submit">Subscribe</button>
</form>
</div>
<aside class="mobile leftFooter">
<h4>Contact</h4>
<ul class="noListMenu">
<li><a href="mailto:info@email.com">info@email.com</a></li>
<li><a href="tel:1234567890">123 - 456 - 7890</a></li>
<li><address>123 some road,</address></li>
<li><address>Toronto, ON</address></li>
</ul>
</aside>
<aside class="rightFooter">
<h4>Pages</h4>
<nav>
<ul class="noListMenu pagesMenu">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</aside>
</div>
<div class="copyright">
<p>Copyright © 2018 HackerYou</p>
</div>
</footer> <!-- /Footer -->
</body>
</html>