-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (173 loc) · 9.92 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
<!DOCTYPE html>
<!-- This site is coded by hand by "Pakodev" -->
<!-- Linkedin: https://linkedin.com/in/zahid-t-pakodev -->
<!-- Github: https://github.com/pakodev43 -->
<!-- E-mail: pakodev.info@gmail.com -->
<!-- The sites UI is from "Kryston Schwarze" on figma. -->
<!-- This sites UI: https://www.figma.com/community/file/788675347108478517 -->
<!-- Kryston's Website: http://krystonschwarze.com/ -->
<!-- Site is live at: https://pakodev43.github.io/Hiking-and-Traveling-Blog-Landing-Page/ -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="generator" content="Pakodev">
<meta name='designer' content='Kryston Schwarze'>
<!-- Title -->
<title>MNTN</title>
<meta content="This is a concept for a blog landing page about hiking and traveling. By Kryston Schwarze." name="description">
<!-- Style Sheets -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- HEADER -->
<header class="header">
<!-- Nav Bar -->
<div class="nav_bar">
<!-- Logo -->
<div class="logo_div">
<p class="logo"><a href="">MNTN</a></p>
</div>
<!-- Nav -->
<nav class="nav">
<ul class="">
<li><a href="">Equipment</a></li>
<li><a href="">About us</a></li>
<li><a href="">Blog</a></li>
</ul>
</nav>
<!-- Account Btn -->
<a href="#" class="account_div account_link">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 14C14.2091 14 16 12.2091 16 10C16 7.79086 14.2091 6 12 6C9.79086 6 8 7.79086 8 10C8 12.2091 9.79086 14 12 14ZM12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9261 20.0557C20.397 18.235 22 15.3047 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 15.3047 3.60301 18.235 6.07388 20.0557C6.11934 20.0892 6.16509 20.1223 6.21112 20.1551C6.65997 20.4742 7.1363 20.7573 7.63587 21C8.95464 21.6407 10.4354 22 12 22C13.5646 22 15.0454 21.6407 16.3641 21C16.3909 20.987 16.4177 20.9738 16.4443 20.9606C16.9657 20.7015 17.4613 20.3982 17.9261 20.0557ZM17.2287 18.055C18.926 16.588 20 14.4194 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 14.4194 5.07401 16.588 6.77128 18.055C7.80066 16.2313 9.75654 15 12 15C14.2435 15 16.1993 16.2313 17.2287 18.055ZM15.5567 19.1679C14.8921 17.8803 13.5488 17 12 17C10.4512 17 9.10792 17.8803 8.44332 19.1679C9.51467 19.7005 10.7224 20 12 20C13.2776 20 14.4853 19.7005 15.5567 19.1679Z" fill="currentColor"></path>
</svg>
<span>Account</span>
</a>
</div>
<!-- Heading -->
<div class="heading_div">
<div class="heading_prefix_div">
<div class="heading_prefix_line"></div>
<h2 class="heading_prefix">A HIKING GUIDE</h2>
</div>
<h1 class="heading">Be Prepared For The Mountains And Beyond!</h1>
<div class="scrolldown_div">
<a href="#content" class="scrolldown_link">scroll down <span><svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 16L14.59 14.59L9 20.17V0H7V20.17L1.42 14.58L0 16L8 24L16 16Z" fill="currentColor"></path>
</svg></span></a>
</div>
</div>
<!-- Header Background Images -->
<img class="header_background_img header_background_img_1" src="./assets/HG.png" alt="">
<img class="header_background_img header_background_img_2" src="./assets/MG.png" alt="">
<img class="header_background_img header_background_img_3" src="./assets/VG.png" alt="">
<!-- Hero Gradient -->
<div class="hero_gradient"></div>
<!-- Hero Gradient Bottom -->
<div class="hero_bottom_gradiant"></div>
</header>
<!-- MAIN -->
<main class="main" id="content">
<!-- POST -->
<div class="post post_1">
<!-- Post Img -->
<div class="post_img_div"><img src="./assets/01.png" class="post_img_1" alt=""></div>
<div class="post_content">
<!-- Count -->
<div class="count">01</div>
<div class="post_heading_prefix_div">
<div class="post_heading_prefix_line"></div>
<h3 class="post_heading_prefix">Get Started</h3>
</div>
<h2 class="post_heading">What level of hiker are you?</h2>
<p class="post_text">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="read_more_link_div">
<a href="" class="read_more_link">read more <span><svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 16L14.59 14.59L9 20.17V0H7V20.17L1.42 14.58L0 16L8 24L16 16Z" fill="currentColor"></path>
</svg></span></a>
</div>
</div>
</div>
<!-- POST -->
<div class="post post_2">
<!-- Post Img -->
<div class="post_img_div"><img src="./assets/02.png" alt=""></div>
<div class="post_content">
<!-- Count -->
<div class="count">02</div>
<div class="post_heading_prefix_div">
<div class="post_heading_prefix_line"></div>
<h3 class="post_heading_prefix">Hiking Essentials</h3>
</div>
<h2 class="post_heading">Picking the right Hiking Gear!</h2>
<p class="post_text">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="read_more_link_div">
<a href="" class="read_more_link">read more <span><svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 16L14.59 14.59L9 20.17V0H7V20.17L1.42 14.58L0 16L8 24L16 16Z" fill="currentColor"></path>
</svg></span></a>
</div>
</div>
</div>
<!-- POST -->
<div class="post post_3">
<!-- Post Img -->
<div class="post_img_div"><img src="./assets/03.png" alt=""></div>
<div class="post_content">
<!-- Count -->
<div class="count">03</div>
<div class="post_heading_prefix_div">
<div class="post_heading_prefix_line"></div>
<h3 class="post_heading_prefix">Where you go is the key</h3>
</div>
<h2 class="post_heading">Understand Your Map & Timing</h2>
<p class="post_text">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="read_more_link_div">
<a href="" class="read_more_link">read more <span><svg width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 16L14.59 14.59L9 20.17V0H7V20.17L1.42 14.58L0 16L8 24L16 16Z" fill="currentColor"></path>
</svg></span></a>
</div>
</div>
</div>
</main>
<!-- FOOTER -->
<footer class="footer">
<div class="first_div">
<div class="footer_info_div">
<div class="footer_logo_div"><a href="">MNTN</a></div>
<p class="footer_text">Get out there & discover your next slope, mountain & destination!</p>
</div>
<p class="footer_copyright">Copyright 2020 MNTN, Inc. Terms & Privacy<br>A concept by <a href="http://krystonschwarze.com/">Kryston Schwarze</a></p>
</div>
<div class="second_div">
<nav class="footer_nav footer_nav_1">
<h4 class="footer_nav_label">More on The Blog</h4>
<ul>
<li><a href="">About MNTN</a></li>
<li><a href="">Contributors & Writers</a></li>
<li><a href="">Write For Us</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Privacy Policy</a></li>
</ul>
</nav>
<nav class="footer_nav footer_nav_2">
<h4 class="footer_nav_label">More on MNTN</h4>
<ul>
<li><a href="">The Team</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Press</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>