-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (196 loc) · 13.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
<link rel="stylesheet" href="dist/app.css">
<title>Desert Greening</title>
</head>
<body class="body">
<div class="linear-1"></div>
<div class="linear-2"></div>
<header id="1" class="header">
<div class="container container-sm container-md container-lg container-xl d-flex custom justify-content-between">
<picture class="header__picture">
<img class="header__img" src="dist/assets/images/svg/mntn.svg" alt="Logo">
</picture>
<div class="header__menu">
<ul class="header__list d-flex">
<li class="header__item"><a href="#" class="header__link">Equipment</a></li>
<li class="header__item"><a href="#" class="header__link">About us</a></li>
<li class="header__item"><a href="#" class="header__link">Blog</a></li>
</ul>
</div>
<form class="header__form" action="#" method="POST">
<button class="header__btn">Account</button>
</form>
</div>
</header>
<main class="main">
<section class="section section-aside">
<div class="container container-sm container-md container-lg container-xl custom">
<div class="aside">
<button class="aside__btn btn__hidden" id="touch__button" aria-label="touch button to see links for follows"><svg fill="none" height="30" viewBox="0 0 48 48" width="30" xmlns="http://www.w3.org/2000/svg"><g stroke="#fff" stroke-linecap="round" stroke-width="3"><path d="m12.5658 26.1826c-1.7105 1.1718-2.5658 3.111-2.5658 5.8177 0 4.0601 4.9753 11 9.4618 11h11.4797c4.3913 0 7.0585-3.8506 7.0585-6.9399 0-4.3503 0-8.7007 0-13.051 0-1.6568-1.3431-3-3-3h-.0091c-1.6518 0-2.9909 1.3391-2.9909 2.9909"/><path d="m13.9812 28.4453v-20.4393c0-1.65551 1.3421-2.99756 2.9976-2.99756.0027 0 .0055 0 .0083.00001 1.6614.0046 3.0058 1.35274 3.0058 3.01418v15.56947"/><path d="m19.9929 23.0085v-3.9929c0-1.6654 1.3501-3.0155 3.0155-3.0155s3.0155 1.3501 3.0155 3.0155v3.9929" stroke-linejoin="round"/><path d="m26 22.7159v-2.7123c0-1.6569 1.3431-3 3-3s3 1.3431 3 3v3" stroke-linejoin="round"/></g></svg></button>
<ul class="aside__list aside__follow aside__hidden" id="follow">
<li class="aside__title aside__item">Follow us</li>
<li class="aside__item"><a class="aside__link" href="https://www.twitter.com/" target="_blank"><i class="aside__icon aside__twitter">
<svg width="30" height="30" fill="none" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1668.56 1221.19" xml:space="preserve">
<path id="path1009" d="M283.94,167.31l386.39,516.64L281.5,1104h87.51l340.42-367.76L984.48,1104h297.8L874.15,558.3l361.92-390.99
h-87.51l-313.51,338.7l-253.31-338.7H283.94z M412.63,231.77h136.81l604.13,807.76h-136.81L412.63,231.77z" fill="white"/>
</svg>
</i></a>
</li>
<li class="aside__item"><a class="aside__link" href="https://www.instagram.com/" target="_blank"><i class="aside__icon aside__insta">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.8 2.00002H16.2C19.4032 2.00002 22 4.59677 22 7.80002V16.2C22 19.4033 19.4032 22 16.2 22H7.8C4.59675 22 2 19.4033 2 16.2V7.80002C2 4.59677 4.59675 2.00002 7.8 2.00002ZM7.6 4C5.61177 4 4 5.61178 4 7.6V16.4C4 18.3882 5.61177 20 7.6 20H16.4C18.3882 20 20 18.3882 20 16.4V7.6C20 5.61178 18.3882 4 16.4 4H7.6ZM17.25 5.5C17.9404 5.5 18.5 6.05965 18.5 6.75C18.5 7.44036 17.9404 8 17.25 8C16.5596 8 16 7.44036 16 6.75C16 6.05965 16.5596 5.5 17.25 5.5ZM12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23857 17 7 14.7614 7 12C7 9.23858 9.23857 7 12 7ZM12 9C10.3431 9 9 10.3432 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3432 13.6569 9 12 9Z" fill="white"/>
</svg></i></a>
</li>
</ul>
</div>
<div class="enter-content">
<h1 class="enter-content__title section__title">A hiking guide</h1>
<p class="enter-content__sub start-sub">Be Prepared For The Mountains And Beyond!</p>
<div class="enter__scroll d-flex">
<a class="enter__link" href="#two">Scroll down</a>
<div class="enter__icon"><img class="enter__arrow" alt="arrow-down" src="dist/assets/images/svg/arrow_downward_24px.svg"></div>
</div>
</div>
<nav class="nav menu-trigger">
<ul id="list-example" class="nav__list list-group">
<li class="nav__item list-reset d-flex"><a class="nav__start nav__link nav__active" href="#1">Start</a>
<a class="nav__top nav__link nav__active" onclick="upFunction()" aria-label="go to up"><svg class="top__btn" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg)" width="16" height="24" fill="none"><path fill="#fff" d="m16 16-1.41-1.41L9 20.17V0H7v20.17l-5.58-5.59L0 16l8 8 8-8Z"/></svg></a></li>
<li class="nav__item list-reset d-flex"><a class="nav__link nav__active" href="#2">01</a></li>
<li class="nav__item list-reset d-flex"><a class="nav__link nav__active" href="#3">02</a></li>
<li class="nav__item list-reset d-flex"><a class="nav__link nav__active" href="#4">03</a></li>
</ul>
</nav>
</div>
</section>
<section id="2" class="section section-one">
<div class="container container-sm container-md container-lg container-xl custom">
<div class="row justify-content-between">
<div class="col-5 col-after align-self-center">
<h2 class="section__title">Get Started</h2>
<h3 class="section__title-sub">What level of hiker are you?</h3>
<p class="section__sub">Determining what level of hiker you are can be an important tool when planning future hikes. This hiking level guide will help you plan hikes according to different hike ratings set by various websites like All Trails and Modern Hiker. What type of hiker are you – novice, moderate, advanced moderate, expert, or expert backpacker? </p>
<div class="section__source">
<a class="section__link" href="#">Read more</a>
<div class="section__arrow"><img class="section__icon" src="dist/assets/images/svg/arrow_right_24px.svg" alt="arrow-right"></div>
</div>
</div>
<div class="col-5 col-img d-flex">
<picture class="section__picture">
<source srcset="dist/assets/images/320/01_min-square.webp" media="(min-width: 320px) and (max-width: 380px)">
<source srcset="dist/assets/images/square/01_square.webp" media="(max-width: 400px)">
<source srcset="dist/assets/images/panorama/01_panorama.webp" media="(max-width: 600px)">
<source srcset="dist/assets/images/media/01_50.webp" media="(max-width: 768px)">
<source srcset="dist/assets/images/media/01_35.webp" media="(max-width: 1040px)">
<img class="section__img section__right-img nav-trigger" src="dist/assets/images/01.webp" alt="Hiker">
</picture>
</div>
</div>
</div>
</section>
<section id="3" class="section section-two">
<div class="container container-sm container-md container-lg container-xl custom">
<div class="row justify-content-between">
<div class="col-5 col-img justify-content-start d-flex">
<picture class="section__picture">
<source srcset="dist/assets/images/320/02_min-square.webp" media="(min-width: 320px) and (max-width: 380px)">
<source srcset="dist/assets/images/square/02_square.webp" media="(max-width: 400px)">
<source srcset="dist/assets/images/panorama/02_panorama.webp" media="(max-width: 600px)">
<source srcset="dist/assets/images/media/02_50.webp" media="(max-width: 768px)">
<source srcset="dist/assets/images/media/02_35.webp" media="(max-width: 1040px)">
<img class="section__left-img" src="dist/assets/images/02.webp" alt="Tourist">
</picture>
</div>
<div class="col-5 col-after align-self-center">
<h2 class="section__title">Hiking Essentials</h2>
<h3 class="section__title-sub">Picking the right Hiking Gear!</h3>
<p class="section__sub">The nice thing about beginning hiking is that you don’t really need any special gear, you can probably get away with things you already have.
Let’s start with clothing. A typical mistake hiking beginners make is wearing jeans and regular clothes, which will get heavy and chafe wif they get sweaty or wet.</p>
<div class="section__source">
<a class="section__link" href="#">Read more</a>
<div class="section__arrow"><img class="section__icon" src="dist/assets/images/svg/arrow_right_24px.svg" alt="arrow-right"></div>
</div>
</div>
</div>
</div>
</section>
<section id="4" class=" section section-three">
<div class="container container-sm container-md container-lg container-xl custom">
<div class="row justify-content-between">
<div class="col-5 col-after align-self-center">
<h2 class="section__title">Where you go is the key</h2>
<h3 class="section__title-sub">Understand Your Map & Timing!</h3>
<p class="section__sub">To start, print out the hiking guide and map. If it’s raining, throw them in a Zip-Lock bag. Read over the guide, study the map, and have a good idea of what to expect. I like to know what my next landmark is as I hike. For example, I’ll read the guide and know that say, in a mile, I make a right turn at the junction.</p>
<div class="section__source">
<a class="section__link" href="#">Read more</a>
<div class="section__arrow"><img class="section__icon" src="dist/assets/images/svg/arrow_right_24px.svg" alt="arrow-right"></div>
</div>
</div>
<div class="col-5 col-img d-flex">
<picture class="section__picture">
<source srcset="dist/assets/images/320/03_min-square.webp" media="(min-width: 320px) and (max-width: 380px)">
<source srcset="dist/assets/images/square/03_square.webp" media="(max-width: 400px)">
<source srcset="dist/assets/images/panorama/03_panorama.webp" media="(max-width: 600px)">
<source srcset="dist/assets/images/media/03_50.webp" media="(max-width: 768px)">
<source srcset="dist/assets/images/media/03_35.webp" media="(max-width: 1040px)">
<img class="section__right-img nav-trigger" src="dist/assets/images/03.webp" alt="Compas">
</picture>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container container-sm container-md container-lg container-xl mx-0 custom">
<div class="row">
<div class="col-5 footer-section-col-5">
<picture>
<img class="footer__img" src="dist/assets/images/svg/mntn.svg" alt="footer-logo">
</picture>
<p class="footer__descr">Get out there & discover your next slope, mountain & destination!</p>
</div>
<div class="footer__lists col-5 justify-content-between">
<div class="col-3 col-list">
<h3 class="footer__title">More on The Blog</h3>
<ul class="footer__list">
<li class="footer__contacts"><a class="footer__link" href="#">About MNTN</a></li>
<li class="footer__contacts"><a class="footer__link" href="#">Contributors & Writers</a></li>
<li class="footer__contacts"><a class="footer__link" href="#">Write For Us</a></li>
<li class="footer__contacts"><a class="footer__link" href="#">Contact Us</a></li>
<li class="footer__contacts"><a class="footer__link" href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="col-3 col-list">
<h3 class="footer__title">More on Mntn</h3>
<ul class="footer__list">
<li class="footer__contacts"><a class="footer__link" href="#">The Team</a></li>
<li class="footer__contacts"><a class="footer__link" href="#">Jobs</a></li>
<li class="footer__contacts"><a class="footer__link" href="#">Press</a></li>
</ul>
</div>
</div>
</div>
<div class="footer__copy">
<p class="footer__sub">Copyright 2024 MNTN, Inc. Terms & Privacy</p>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="dist/app.js"></script>
<script>
function upFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
<!-- https://www.figma.com/file/hMVtKRVHUxyY03knIrHkgG/MNTN---Landing-Page?type=design&node-id=1-2&mode=design -->