-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (167 loc) · 7.8 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
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bikerland</title>
<link href="https://fonts.googleapis.com/css?family=Catamaran:400,700|Pacifico" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<!-- Header -->
<header id="home">
<div class="fullbleed">
<nav>
<div class="navList">
<ul>
<li><a href="#home">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><img src="assets/hamburgerMenu.png" alt="" class="burger"></li>
</ul>
</div>
</nav>
<h1>Bikerland</h1>
<div class="navIcons">
<ul>
<li><a href="http://www.instagram.com"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<span class="sr-only">Link to Instagram</span>
<li><a href="http://www.facebook.com"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<span class="sr-only">Link to Facebook</span>
<li><a href="http://www.snapchat.com"><i class="fab fa-snapchat-ghost" aria-hidden="true"></i></a></li>
<span class="sr-only">Link to Snapchat</span>
<li><a href="http://www.twitter.com"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<span class="sr-only">Link to Twitter</span>
</ul>
</div>
</div>
</header>
<!-- main starts -->
<main>
<!-- About section -->
<section id="about" class="about">
<div class="gallery clearfix">
<img src="assets/image7.jpg" alt="zoom in of foot on pedal" class="imageTop">
<div class="galleryText textTop">
<h2>About Us</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>read more</button>
</div>
</div>
<div class="gallery galleryBottom clearfix">
<img src="assets/image8.jpg" alt="black bike in dim lighting" class="imageBottom">
<div class="galleryText textBottom">
<h2>Our mission</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>read more</button>
</div>
</div>
</section>
<!-- Meet Alissa (blog) section -->
<section id="blog" class="blog">
<div class="fullbleed clearfix">
<div class="imgContainer">
<img src="assets/image6.jpg" alt="woman in red jacket pedaling bike">
</div>
<div class="blogText">
<h2>Meet Alissa</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>read more</button>
</div>
</div>
</section>
<!-- section with three icons -->
<section id="midSection" class="midSection">
<div class="fullbleed">
<div class="wrapper">
<ul>
<li>
<a href="#">
<i class="fas fa-bicycle"></i>
<p>Products</p>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<p>Community</p>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-phone"></i>
<p>Reach out</p>
</a>
</li>
</ul>
</div>
</div>
</section>
<!-- the gram section -->
<section id="gram" class="gram">
<div class="wrapper">
<h2>The Gram</h2>
<div class="gramWrapper clearfix">
<img src="assets/image2.jpg" alt="woman with red helmet riding uphill on bike">
<img src="assets/image3.jpg" alt="man in full bike gear pedaling in a bike competition">
<img src="assets/image4.jpg" alt="white bike leaning against rusting metal wall">
</div>
</div>
</section>
</main>
<!-- footer -->
<footer id=#contact class="contact">
<div class="fullbleed">
<div class="wrapper clearfix">
<ul class="clearfix">
<li><a href="#home">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>
<div class="contactInfo">
<h2>Contact</h2>
<p>[email protected] | 123 - 456 - 7890</p>
<p>123 some road, Toronto, ON</p>
<p>A5A 5A5, Canada</p>
</div>
<div class="stayUpdated">
<h2>Stay updated</h2>
<p>Subscribe to our newsletter to stay updated.</p>
<form action="" name="subscribe" class="clearfix">
<label for="email" class="visuallyhidden">Email Address</label>
<input type="text" placeholder="email address" id="email">
<button>subscribe</button>
</form>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright © 2019 HackerYou</p>
</div>
</footer>
</body>
</html>