-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
457 lines (441 loc) · 17.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
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! Site Title</title>
<script>
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
document.documentElement.style.display = 'none';
document.head.insertAdjacentHTML(
'beforeend',
'<link rel="stylesheet" href="./css/light.css" onload="document.documentElement.style.display = \'\'">',
);
}
</script>
<link rel="stylesheet" href="./css/dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="./css/light.css" media="(prefers-color-scheme: light)"/>
<link href="./css/mobile.css" type="text/css" rel="stylesheet" />
<link href="./css/desktop.css" rel="stylesheet" media="(min-width: 768px)">
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col">
<a class="logo" href="#" alt="Hiking Life Logo">Hiking <span>Life</span></a>
</div>
<div class="col">
<nav class="main-nav">
<input class="main-nav__toogle" type="checkbox" aria-label="Main navigation switcher" />
<span></span>
<span></span>
<span></span>
<ul class="main-nav__list" aria-label="Main Navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="search-form header__search-form">
<form role="search">
<div class="text-field">
<input aria-label="Search" mini-cardholder="Search" class="text-field__text text-field__text_has-icon"
type="text" />
<button class="text-field__icon text-field__icon_search" type="submit">Search</button>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
<main>
<div class="promo-main back-image back-image_centered back-image_wavy back-image_wavy-gray"
style="background-image:url('./i/main.jpg');">
<div class="container">
<div class="row">
<h1 class="title title_color-main h2 back-image__title">
<span class="title__main">Discover your<br />next Hike</span>
<span class="title__subtitle corner corner_type-bl">Edge of the world</span>
</h1>
</div>
</div>
</div>
<div class="info-tile">
<div class="container">
<div class="row">
<h2 class="title title_color-main title_underlined h3 info-tile__h2">
HOW TO RECOVER FROM
A HIKE
</h2>
</div>
<div class="row row_wrap">
<div class="day-card">
<h3 class="h4 title">Day 1.</h3>
<div class="row row_wrap">
<div class="day-card__description text">
<ul class="list-dashed">
<li>Dolor sit amet consectetur</li>
<li>Adipiscing elit aptent </li>
<li>Torquent, interdum</li>
</ul>
</div>
<span class="icon day-card__icon icon_rounded icon_mountains">mountains</span>
</div>
<div class="box-underlined-above">
<h4 class="h4 title">Lorem Ipsum Consectetur<br />
<time datetime="2020-09-21">21.09.20</time>
</h4>
<time class="day-card__day-time" datetime="15:30">15.30 hs.</time>
<div class="indicator indicator_fill-100">5/5</div>
</div>
</div>
<div class="day-card">
<h3 class="h4 title">Day 2.</h3>
<div class="row row_wrap">
<div class="day-card__description text">
<ul class="list-dashed">
<li>Dolor sit amet consectetur</li>
<li>Adipiscing elit aptent </li>
<li>Torquent, interdum</li>
</ul>
</div>
<span class="icon day-card__icon icon_rounded icon_backpack">mountains</span>
</div>
<div class="box-underlined-above">
<h4 class="h4 title">Lorem Consec Ipsum<br />
<time datetime="2020-09-28">28.09.20</time>
</h4>
<time class="day-card__day-time" datetime="16:00">16.00 hs.</time>
<div class="indicator indicator_fill-60">3/5</div>
</div>
</div>
</div>
</div>
</div>
<div class="promo-event promo-event_flex-end back-image back-image_tinted-purple"
style="background-image:url('./i/big-photo.jpg');">
<div class="container">
<div class="row">
<div class="promo-event__main">
<h2 class="title h1 back-image__title">
<span class="title__main">
<div class="corner corner_type-tr">BIG BEND NATIONAL</div><br />PARK hiking guide
</span>
<span class="title__subtitle corner corner_type-bl">this hike is the next<br />best option.</span>
</h2>
</div>
<div class="promo-event__more promo-event__more_right back-image__event">
<div class="h3 title title_underlined">
<time datetime="2020-05-21">21.05.20</time>
</div>
<div>
<a href="#" class="button button_rounded">see more</a>
</div>
</div>
</div>
</div>
</div>
<div class="promo-event back-image back-image_wavy back-image_wavy-gray-diagonal"
style="background-image:url('./i/group.jpg');">
<div class="container">
<div class="row">
<div class="promo-event__main">
<h2 class="title title_color-main h2 back-image__title promo-event__title">
<div class="title__main"><span class="corner corner_type-bl"><span
class="corner corner_type-tr">Rock</span><br />Climbing</span>
</div>
</h2>
<div class="text">
<h3 class="h4 title">1. Classes & Events</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
</p>
<div class="box-underlined-above">
<p>
<strong>10 modules <br />
divided into 7 weekends</strong>
</p>
</div>
</div>
</div>
<div class="promo-event__more">
<div class="row">
<div class="corner corner_type-bl">
<h4 class="h4 title">
<time datetime="2020-09-28">28.09.20</time>
</h4>
<time class="promo-event__time" datetime="15:30">15.30 hs.</time>
</div>
<div class="promo-event__price">
Price<br />
$900
</div>
</div>
</div>
</div>
</div>
</div>
<div class="info-tile mini-cards">
<div class="container">
<div class="row">
<h2 class="title title_color-main h2 back-image__title">
<div class="title__main tint"><span class="corner corner_type-bl"><span class="corner corner_type-tr">Places to visit
</span><br />in autumn </span>
<div>
</h2>
</div>
<div class="row mini-cards__container">
<div class="mini-card">
<picture>
<source srcset="./i/place1.webp" type="image/webp">
<img alt="mini-card 1" src="./i/place1.jpg" width="270" height="270" />
</picture>
<h3 class="h4 title mini-card__title">Mountain Loop</h3>
<div class="text">
<p>Lorem ipsum sit amet,
consectetur adipisicing...</p>
<div class="box-underlined-above">
<p>
<strong>Location 0.3 miles.</strong>
</p>
</div>
</div>
</div>
<div class="mini-card">
<picture>
<source srcset="./i/place2.webp" type="image/webp">
<img alt="mini-card 2" src="./i/place2.jpg" width="270" height="270" />
</picture>
<h3 class="h4 title mini-card__title">National Park</h3>
<div class="text">
<p>Lorem ipsum sit amet,
consectetur adipisicing...</p>
<div class="box-underlined-above">
<p>
<strong>Location 0.3 miles.</strong>
</p>
</div>
</div>
</div>
<div class="mini-card">
<picture>
<source srcset="./i/place3.webp" type="image/webp">
<img alt="mini-card 3" src="./i/place3.jpg" width="270" height="270" />
</picture>
<h3 class="h4 title mini-card__title">Canyon Trail</h3>
<div class="text">
<p>Lorem ipsum sit amet,
consectetur adipisicing...</p>
<div class="box-underlined-above">
<p>
<strong>Location 0.3 miles.</strong>
</p>
</div>
</div>
</div>
</div>
<div class="row row_center">
<a href="#" class="button button_rounded button_color-tint">see more</a>
</div>
</div>
</div>
<div class="promo-event promo-event_flex-end promo-event_inversed back-image back-image_tinted-blue"
style="background-image:url('./i/view.jpg');">
<div class="container">
<div class="row">
<div class="promo-event__main">
<h2 class="title h1 back-image__title">
<span class="title__main corner corner_type-tr">Hiking & <br />
Backpacking</span>
<span class="title__subtitle">this hike is the<br />
<span class="corner corner_type-bl">next best</span>
</span>
</h2>
</div>
<div class="promo-event__more back-image__event">
<div class="h3 title title_underlined">
<time datetime="2020-05-21">21.05.20</time>
</div>
<div>
<a href="#" class="button button_rounded">see more</a>
</div>
</div>
</div>
</div>
</div>
<div class="info-tile mini-cards green">
<div class="container">
<div class="row">
<h2 class="title title_underlined h2 back-image__title">
<div class="title__main">
Hiking And <br/>
Camping Classes
<div>
</h2>
</div>
<div class="row mini-cards__container">
<div class="mini-card mini-card_center">
<span class="icon icon_center icon_rounded icon_backpack">mountains</span>
<h3 class="h4 title mini-card__title">Activities</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipiscing, elit molestie posuere</p>
<a href="#" class="button button_rounded button_color-green">see more</a>
</div>
</div>
<div class="mini-card mini-card_center">
<span class="icon icon_center icon_rounded icon_man">man</span>
<h3 class="h4 title mini-card__title">Hiking</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipiscing, elit molestie posuere</p>
<a href="#" class="button button_rounded button_color-green">see more</a>
</div>
</div>
<div class="mini-card mini-card_center">
<span class="icon icon_center icon_rounded icon_mountains">mountains</span>
<h3 class="h4 title mini-card__title">Mountains</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet consectetur adipiscing, elit molestie posuere</p>
<a href="#" class="button button_rounded button_color-green">see more</a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="line">
</div>
</div>
<div class="promo-event promo-event_inversed green back-image back-image_wavy back-image_wavy-gray-diagonal back-image_wavy-gray-diagonal_inversed back-image_wavy-gray-diagonal_bicolor"
style="background-image:url('./i/climbing.jpg');background-position: 50% -10%;">
<div class="container">
<div class="row">
<div class="promo-event__main">
<h2 class="title title_color-green h2 back-image__title promo-event__title">
<div class="title__main"><span
class="corner corner_type-tr">mountaineering </span><br /><span class="corner corner_type-bl">ice Climbing</span>
</div>
</h2>
<div class="text">
<h3 class="h4 title">2. activities</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
</p>
<div class="box-underlined-above">
<p>
<strong>10 modules <br />
divided into 7 weekends</strong>
</p>
</div>
</div>
</div>
<div class="promo-event__more">
<div class="row">
<div class="">
<h4 class="h4 title">
<time datetime="2020-09-28">28.09.20</time>
</h4>
<time class="promo-event__time" datetime="15:30">15.30 hs.</time>
</div>
<div class="promo-event__price">
Price<br />
$900
</div>
</div>
</div>
</div>
</div>
</div>
<div class="info-tile promo-event back-image back-image_dual-green"
style="background-image:url('./i/view.jpg');">
<div class="container">
<div class="row">
<div class="promo-event__main">
<h2 class="title title_underlined h3 info-tile__h2">
HOW TO RECOVER FROM
A HIKE
</h2>
<div class="h3 title">
<time datetime="2020-05-21">21.05.20</time>
</div>
</div>
<div class="promo-event__more">
<div class="decrease">
50<span>%<span>off</span></span>
</div>
<p class="h4 title">
Lorem Ipsum Consectetur
</p>
<time class="promo-event__time" datetime="15:30">15.30 hs.</time>
</div>
</div>
</div>
</div>
<div class="back-image back-image_tinted-blue"
style="background-image:url('./i/hands.jpg');">
<div class="container">
<div class="row row_center">
<h2 class="title title_center h1 back-image__title">
<span class="title__subtitle">Lorem ipsum dolor sit amet, <br/>
consectetur adipiscing elit, sed do<br/> eiusmod tempor dolore magna aliqua.
</span>
</h2>
</div>
<div class="row row_center">
<span class="icon icon_mountains">mountains</span>
</div>
<div class="row row_center">
<a href="#" class="button button_rounded">see more</a>
</div>
</div>
</div>
</main>
<footer class="info-tile footer">
<div class="container">
<div class="row">
<div class="col text">
<h4 class="h4">about</h4>
<p>
Lorem ipsum dolor sit amet, consec
tetur adipisicing elit, sed do eiusmod tempor incididunt ultimam quantum
</p>
</div>
<div class="col row">
<nav class="col">
<h5 class="h5">about</h5>
<ul class="list-vertical-nav">
<li><a href="#">Team</a></li>
<li><a href="#">Join us</a></li>
<li><a href="#">Ethic</a></li>
<li><a href="#">Goals</a></li>
</ul>
</nav>
<nav class="col">
<h5 class="h5">about</h5>
<ul class="list-vertical-nav">
<li><a href="#">Team</a></li>
<li><a href="#">Join us</a></li>
<li><a href="#">Ethic</a></li>
<li><a href="#">Goals</a></li>
</ul>
</nav>
<nav class="col">
<h5 class="h5">about</h5>
<ul class="list-vertical-nav">
<li><a href="#">Team</a></li>
<li><a href="#">Join us</a></li>
<li><a href="#">Ethic</a></li>
<li><a href="#">Goals</a></li>
</ul>
</nav>
</div>
</div>
<div>
<a class="logo" href="#" alt="Hiking Life Logo">Hiking <span>Life</span></a>
</div>
</div>
</footer>
</body>
</html>