-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
344 lines (329 loc) · 18.2 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a portfolio website for a Web Developer">
<meta name="keywords" content="coding, surfers,surfers co, project, web, developer, html, css, sass, javascript, php, jquery, Branko Anokic, Branko, Anokic, Anokic Branko">
<meta name="author" content="Branko Anokic">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap" rel="stylesheet"> <!-- font-family: 'Montserrat', sans-serif; -->
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600,700,800&display=swap" rel="stylesheet"> <!-- font-family: 'Raleway', sans-serif; -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i&display=swap" rel="stylesheet"> <!-- font-family: 'Playfair Display', serif; -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="dist/css/main.css?cb=1577188988211">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src='dist/js/main.js?cb=1577188988211'></script>
<link rel="shortcut icon" href="assets/img/icon-loading.png" />
<title>Surfers Co</title>
</head>
<body>
<!-- Don't forget to write sematic HTML code -->
<div class="loading">
<img src="assets/img/icon-loading.png" alt="Loading">
</div>
<div class="data">
<header>
<div class="top-header">
<div class="logo">
<a href='#'><h3>Surfers Co.</h3></a>
</div>
<div class="hamburger">
<div class="line"></div>
</div>
<div class="navi">
<nav>
<ul>
<li><a href="">BOARDS</a></li>
<li><a href="">ACCESSORIES</a></li>
<li><a href="">BLOG</a></li>
<li><a href="">TEHNOLOGY</a></li>
<li><a href="">TEAM</a></li>
<li><a href="">DEALERS</a></li>
</ul>
</nav>
<div class="socials">
<div class="social"><a class="face"></a></div>
<div class="social"><a class="insta"></a></div>
<div class="social"><a class="mail"></a></div>
</div>
</div>
</div>
<section class="bot-header">
<div class="bot-heading">
<h1>Ride every wave as if it's your last</h1>
<h5>We love the motion of the ocean</h5>
</div>
<div class="header-container">
<div id='wrapper'>
<div class="abstracts">
<div class="arrows">
<div class="arrow arrow-left-click">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16px" height="14px">
<path fill-rule="evenodd" fill="rgb(247, 247, 247)"
d="M15.021,8.000 L3.341,8.000 L7.495,12.241 C7.704,12.425 7.837,12.696 7.837,13.000 C7.837,13.552 7.398,13.999 6.857,13.999 C6.594,13.999 6.355,13.893 6.180,13.721 L6.177,13.724 L0.300,7.724 L0.300,7.724 C0.115,7.542 -0.000,7.287 -0.000,7.004 C-0.000,7.003 0.000,7.002 0.000,7.002 C0.000,7.001 -0.000,7.000 -0.000,6.999 C-0.000,6.717 0.115,6.462 0.300,6.280 L0.300,6.280 L6.177,0.280 L6.177,0.280 C6.353,0.107 6.593,-0.001 6.857,-0.001 C7.398,-0.001 7.837,0.447 7.837,0.999 C7.837,1.269 7.732,1.514 7.562,1.694 L7.562,1.694 L3.344,6.000 L15.021,6.000 C15.561,6.000 16.000,6.447 16.000,7.000 C16.000,7.552 15.561,8.000 15.021,8.000 Z"/>
</svg>
</div>
<div class="arrow arrow-right-click">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16px" height="14px">
<path fill-rule="evenodd" fill="rgb(247, 247, 247)"
d="M16.000,7.002 C16.000,7.002 16.000,7.003 16.000,7.004 C16.000,7.287 15.885,7.542 15.700,7.724 L15.700,7.724 L9.823,13.724 L9.820,13.721 C9.644,13.893 9.406,13.999 9.143,13.999 C8.601,13.999 8.163,13.552 8.163,13.000 C8.163,12.696 8.296,12.425 8.505,12.241 L12.659,8.000 L0.979,8.000 C0.438,8.000 -0.000,7.552 -0.000,7.000 C-0.000,6.447 0.438,6.000 0.979,6.000 L12.655,6.000 L8.437,1.694 L8.438,1.694 C8.268,1.514 8.163,1.269 8.163,0.999 C8.163,0.447 8.601,-0.001 9.143,-0.001 C9.407,-0.001 9.646,0.107 9.823,0.280 L9.823,0.280 L15.700,6.280 L15.700,6.280 C15.885,6.462 16.000,6.717 16.000,6.999 C16.000,7.000 16.000,7.001 16.000,7.002 Z"/>
</svg>
</div>
</div>
<div class="numbers">
<div class="number">
<span class='count'>01</span>/<span class='length'>00</span>
</div>
</div>
<div class="board-background"></div>
<div class="boards-text">
<h5>BOARDS</h5>
</div>
</div>
<div class="header-content">
<div class="items" id='items'>
</div>
</div>
</div>
</div>
</section>
</header>
<main>
<section class="about-us">
<div class="about">
<h2>ABOUT US</h2>
<div class="background-cut"></div>
<div class="about-content">
<div class="about-text">
<h4>WE ARE SURFERS CO.</h4>
<p>Lorem ipsum dolor sit amet, aeneam consectetur adipiscing elit. Fusce iaculis feugiat arcunum fermentum hendrerit. Suspendisse auctor labor nisi, et interdum diam facilisis, aliquam pulvinar semi egetis belle sollicitudin ut. Nullam tincidun finibustus scelerisque.</p>
<a href="#">Read more</a>
</div>
<div class="video">
<video class="video-file" src="assets/video/surfing.mp4" poster="assets/img/videoBackground.png">
</video>
<div class="control">
<div class="play-container">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="90px" height="90px">
<path fill-rule="evenodd" fill="rgb(255, 255, 255)"
d="M44.999,89.799 C20.257,89.799 0.200,69.741 0.200,44.999 C0.200,20.257 20.257,0.199 44.999,0.199 C69.742,0.199 89.800,20.257 89.800,44.999 C89.800,69.741 69.742,89.799 44.999,89.799 ZM44.999,4.399 C22.577,4.399 4.399,22.576 4.399,44.999 C4.399,67.422 22.577,85.599 44.999,85.599 C67.422,85.599 85.599,67.422 85.599,44.999 C85.599,22.576 67.422,4.399 44.999,4.399 ZM60.440,47.969 L39.278,60.474 C39.271,60.478 39.263,60.482 39.255,60.487 L39.244,60.494 L39.244,60.493 C38.813,60.749 38.311,60.896 37.774,60.896 C36.177,60.896 34.883,59.602 34.883,58.005 L34.883,32.956 C34.883,31.360 36.177,30.066 37.774,30.066 C38.311,30.066 38.813,30.212 39.244,30.468 L39.244,30.467 L39.255,30.474 C39.263,30.479 39.271,30.483 39.278,30.488 L60.440,42.992 L60.440,42.993 C61.289,43.496 61.860,44.421 61.860,45.481 C61.860,46.540 61.289,47.466 60.440,47.969 Z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="team">
<div class="absolute">
<h2>OUR TEAM</h2>
</div>
<div class="arrows">
<div class="arrow left-arrow-block">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16px" height="14px">
<path fill-rule="evenodd" fill="rgb(0, 34, 255)"
d="M15.021,8.000 L3.341,8.000 L7.495,12.241 C7.704,12.425 7.837,12.696 7.837,13.000 C7.837,13.552 7.398,14.000 6.857,14.000 C6.594,14.000 6.355,13.894 6.180,13.721 L6.177,13.724 L0.300,7.724 L0.300,7.724 C0.115,7.542 -0.000,7.287 -0.000,7.004 C-0.000,7.003 0.000,7.003 0.000,7.002 C0.000,7.001 -0.000,7.000 -0.000,6.999 C-0.000,6.717 0.115,6.462 0.300,6.280 L0.300,6.280 L6.177,0.280 L6.177,0.280 C6.353,0.107 6.593,-0.001 6.857,-0.001 C7.398,-0.001 7.837,0.447 7.837,0.999 C7.837,1.269 7.732,1.514 7.562,1.694 L7.562,1.694 L3.344,6.000 L15.021,6.000 C15.561,6.000 16.000,6.447 16.000,7.000 C16.000,7.552 15.561,8.000 15.021,8.000 Z"/>
</svg>
</div>
<div class="arrow right-arrow-block">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16px" height="14px">
<path fill-rule="evenodd" fill="rgb(0, 34, 255)"
d="M16.000,7.002 C16.000,7.003 16.000,7.003 16.000,7.004 C16.000,7.287 15.885,7.542 15.700,7.724 L15.700,7.724 L9.823,13.724 L9.820,13.721 C9.644,13.894 9.406,14.000 9.143,14.000 C8.602,14.000 8.163,13.552 8.163,13.000 C8.163,12.696 8.296,12.425 8.505,12.241 L12.659,8.000 L0.979,8.000 C0.438,8.000 -0.000,7.552 -0.000,7.000 C-0.000,6.447 0.438,6.000 0.979,6.000 L12.656,6.000 L8.437,1.694 L8.438,1.694 C8.268,1.514 8.163,1.269 8.163,0.999 C8.163,0.447 8.602,-0.001 9.143,-0.001 C9.407,-0.001 9.646,0.107 9.823,0.280 L9.823,0.280 L15.700,6.280 L15.700,6.280 C15.885,6.462 16.000,6.717 16.000,6.999 C16.000,7.000 16.000,7.001 16.000,7.002 Z"/>
</svg>
</div>
</div>
<div class="slider-team">
<div class="slider">
<div class="member">
<div class="top-member">
<figure><img src="assets/img/member-1.png" alt="Member"></figure>
</div>
<div class="bot-member">
<h4>Taj Burrow</h4>
<span>@tajamos</span>
<span><img src="assets/img/loc-icon.png" alt="Location icon"> Wailua, HI</span>
</div>
</div>
<div class="member">
<div class="top-member">
<figure><img src="assets/img/member-2.png" alt="Member"></figure>
</div>
<div class="bot-member">
<h4>Taj Burrow</h4>
<span>@tajamos</span>
<span><img src="assets/img/loc-icon.png" alt="Location icon"> Wailua, HI</span>
</div>
</div>
<div class="member">
<div class="top-member">
<figure><img src="assets/img/member-3.png" alt="Member"></figure>
</div>
<div class="bot-member">
<h4>Taj Burrow</h4>
<span>@tajamos</span>
<span><img src="assets/img/loc-icon.png" alt="Location icon"> Wailua, HI</span>
</div>
</div>
<div class="member">
<div class="top-member">
<figure><img src="assets/img/member-4.png" alt="Member"></figure>
</div>
<div class="bot-member">
<h4>Taj Burrow</h4>
<span>@tajamos</span>
<span><img src="assets/img/loc-icon.png" alt="Location icon"> Wailua, HI</span>
</div>
</div>
<div class="member">
<div class="top-member">
<figure><img src="assets/img/member-5.png" alt="Member"></figure>
</div>
<div class="bot-member">
<h4>Taj Burrow</h4>
<span>@tajamos</span>
<span><img src="assets/img/loc-icon.png" alt="Location icon"> Wailua, HI</span>
</div>
</div>
<div class="member">
<div class="top-member">
<figure><img src="assets/img/member-6.png" alt="Member"></figure>
</div>
<div class="bot-member">
<h4>Taj Burrow</h4>
<span>@tajamos</span>
<span><img src="assets/img/loc-icon.png" alt="Location icon"> Wailua, HI</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="updates">
<h4>LATEST UPDATES</h4>
<div class="updates-container">
<div class="update">
<img src="assets/img/update-img-1.png" alt="Two girls surfing">
<p>
Ellie Turner and Jobe Harris have taken out the 2016 British National Surf Championships
</p>
</div>
<div class="update">
<img src="assets/img/update-img-2.png" alt="Wave crashing">
<p>
A large group of surfers invaded the coast of La Jolla Shores, in California, with a single goal in mind
</p>
</div>
<div class="update">
<img src="assets/img/update-img-3.png" alt="Sandy beach with bench">
<p>
Surfboards are constantly evolving, and there are multiple board designs for a broad range of environments
</p>
</div>
</div>
<button class='blue-button' type="button" name="button"><span>VIEW ALL POSTS</span></button>
</section>
</main>
<footer>
<section class="left-side">
<div class="left-side-top">
<h2>INSTAGRAM</h2>
<div class="grid-two-by-two">
<div class="grid-content">
<img src="assets/img/insta-image-1.png" alt="Nature by the sea">
</div>
<div class="grid-content">
<img src="assets/img/insta-image-2.png" alt="Sunset sea">
</div>
<div class="grid-content">
<img src="assets/img/insta-image-3.png" alt="Surboard beach sunset">
</div>
<div class="grid-content">
<img src="assets/img/insta-image-4.png" alt="Sunset beach waves">
</div>
</div>
<div class="insta-heading">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="30px" height="30px">
<path fill-rule="evenodd" fill="rgb(0, 176, 255)"
d="M23.834,0.599 L6.166,0.599 C3.096,0.599 0.600,3.095 0.600,6.164 L0.600,12.043 L0.600,23.834 C0.600,26.903 3.096,29.399 6.166,29.399 L23.834,29.399 C26.903,29.399 29.400,26.903 29.400,23.834 L29.400,12.043 L29.400,6.164 C29.400,3.095 26.903,0.599 23.834,0.599 ZM25.430,3.919 L26.067,3.916 L26.067,4.550 L26.067,8.797 L21.202,8.813 L21.185,3.932 L25.430,3.919 ZM10.890,12.043 C11.812,10.766 13.308,9.929 15.000,9.929 C16.692,9.929 18.188,10.766 19.110,12.043 C19.710,12.876 20.069,13.895 20.069,14.999 C20.069,17.793 17.794,20.067 15.000,20.067 C12.205,20.067 9.931,17.793 9.931,14.999 C9.931,13.895 10.290,12.876 10.890,12.043 ZM26.594,23.834 C26.594,25.356 25.356,26.593 23.834,26.593 L6.166,26.593 C4.644,26.593 3.406,25.356 3.406,23.834 L3.406,12.043 L7.705,12.043 C7.334,12.957 7.125,13.954 7.125,14.999 C7.125,19.340 10.657,22.874 15.000,22.874 C19.342,22.874 22.874,19.340 22.874,14.999 C22.874,13.954 22.665,12.957 22.294,12.043 L26.594,12.043 L26.594,23.834 Z"/>
</svg>
<h4>FOLLOW US</h4>
<span>@surfersco</span>
</div>
</div>
<div class="left-side-bot">
<div class="content">
<span>© 2017 Surfers Co.</span>
<span>Design by @lucaalco</span>
</div>
</div>
</section>
<section class="right-side">
<div class="facebook">
<div class="background">
<div class="background-top">
<div class="facebook-logo"></div>
</div>
<div class="background-bot"></div>
</div>
<div class="face-page"></div>
</div>
<nav>
<ul>
<li><a href=''>About</a></li>
<li><a href=''>Boards</a></li>
<li><a href=''>Accessories</a></li>
<li><a href=''>Blog</a></li>
</ul>
<ul>
<li><a href=''>Technology</a></li>
<li><a href=''>Team</a></li>
<li><a href=''>Dealers</a></li>
<li><a href=''>Contact us</a></li>
</ul>
</nav>
<div class="news">
<h4>Subscribe to out newsletter</h4>
<form>
<svg class='mail-icon'
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16px" height="11px">
<path fill-rule="evenodd" fill="rgb(77, 77, 77)"
d="M10.905,4.935 L15.776,0.216 C15.914,0.352 16.000,0.541 16.000,0.750 L16.000,10.250 C16.000,10.447 15.922,10.625 15.798,10.759 L10.905,4.935 ZM0.249,0.195 C0.382,0.075 0.557,-0.000 0.750,-0.000 L15.250,-0.000 C15.443,-0.000 15.617,0.075 15.750,0.195 L8.000,6.250 L0.249,0.195 ZM0.202,10.759 C0.078,10.625 -0.000,10.447 -0.000,10.250 L-0.000,0.750 C-0.000,0.541 0.086,0.352 0.223,0.216 L5.094,4.935 L0.202,10.759 ZM8.000,7.750 L10.034,5.779 L15.764,10.793 C15.630,10.920 15.449,11.000 15.250,11.000 L0.750,11.000 C0.550,11.000 0.370,10.920 0.236,10.793 L5.966,5.779 L8.000,7.750 Z"/>
</svg>
<input type="text" name="name" placeholder="Your e-mail">
<button type="button" name="button"><svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="12px" height="11px">
<path fill-rule="evenodd" fill="rgb(255, 255, 255)"
d="M11.775,6.065 L11.775,6.065 L7.367,10.780 L7.367,10.779 C7.235,10.915 7.055,11.000 6.857,11.000 C6.451,11.000 6.122,10.648 6.122,10.214 C6.122,10.002 6.201,9.810 6.328,9.669 L6.328,9.669 L9.492,6.285 L0.735,6.285 C0.329,6.285 -0.000,5.933 -0.000,5.500 C-0.000,5.066 0.329,4.714 0.735,4.714 L9.495,4.714 L6.378,1.381 C6.222,1.237 6.122,1.024 6.122,0.785 C6.122,0.351 6.451,-0.000 6.857,-0.000 C7.054,-0.000 7.233,0.083 7.365,0.218 L7.367,0.216 L11.775,4.930 L11.775,4.931 C11.914,5.074 12.000,5.274 12.000,5.496 C12.000,5.497 12.000,5.497 12.000,5.498 C12.000,5.499 12.000,5.499 12.000,5.500 C12.000,5.722 11.914,5.922 11.775,6.065 Z"/>
</svg></button>
</form>
</div>
</section>
<div class="footer-background"></div>
</footer>
</div>
</body>
</html>