-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (156 loc) · 5.97 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Hike Happy Trails</title>
</head>
<body>
<header class="header" id="home">
<nav>
<div class="nav__bar">
<div class="logo nav__logo">
<a href="#">Hike Happy Trails</a>
</div>
<ul class="nav__links" id="nav-links">
<li><a href="#about">About Us</a></li>
<li><a href="#equipment">Equipment</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
<div class="nav__menu__btn" id="menu-btn">
<i class="ri-menu-line"></i>
</div>
<div class="nav__action__btn">
<button class="btn">
<span><i class="ri-user-line"></i></span> Account
</button>
</div>
</div>
</nav>
<div class="section__container header__container">
<div class="header__content">
<h3 class="section__subheader">A HIKING GUIDE</h3>
<h1 class="section__header">
Be Prepared For The Mountains And Beyond!
</h1>
<div class="scroll__btn">
<a href="#about">
Scroll down
<span><i class="ri-arrow-down-line"></i></span>
</a>
</div>
</div>
<div class="header__socials">
<span>Follow us</span>
<a href="#"><i class="ri-instagram-line" ></i></a>
<a href="#"><i class="ri-twitter-fill"></i></a>
</div>
</div>
</header>
<section class="about">
<div class="section__container about__container">
<div class="about__image about__image-1" id="about">
<img src="assets/about-1.jpg" alt="about" />
</div>
<div class="about__content about__content-1">
<h3 class="section__subheader">GET STARTED</h3>
<h2 class="section__header">What level of hiker are you?</h2>
<p>
Whether you're a novice seeking scenic strolls or an experienced
trekker craving challenging ascents, we've curated a diverse range
of trails to cater to every adventurer. Uncover your hiking
identity, explore tailored recommendations, and embrace the great
outdoors with a newfound understanding of your capabilities.
</p>
<div class="about__btn">
<a href="#">
Read more
<span><i class="ri-arrow-right-line"></i></span>
</a>
</div>
</div>
<div class="about__image about__image-2" id="equipment">
<img src="assets/about-2.jpg" alt="about" />
</div>
<div class="about__content about__content-2">
<h3 class="section__subheader">HIKING ESSENTIALS</h3>
<h2 class="section__header">Picking the right hiking gear!</h2>
<p>
From durable footwear that conquers rugged trails to lightweight
backpacks that carry your essentials with ease, we navigate the
intricacies of gear selection to ensure you're geared up for success
on every hike. Lace up your boots and let the journey begin with
confidence, knowing you've chosen the right gear for the trail
ahead!
</p>
<div class="about__btn">
<a href="#">
Read more
<span><i class="ri-arrow-right-line"></i></span>
</a>
</div>
</div>
<div class="about__image about__image-3" id="blog">
<img src="assets/about-3.jpg" alt="about" />
</div>
<div class="about__content about__content-3">
<h3 class="section__subheader">WHERE YOU GO IS THE KEY</h3>
<h2 class="section__header">Understanding your map & timing</h2>
<p>
Knowing when to start and anticipating the changing conditions
ensures a safe and enjoyable journey. So, dive into the details,
grasp the contours, and synchronize your steps with the rhythm of
nature. It's not just a hike; it's a journey orchestrated by your
map and timed to perfection.
</p>
<div class="about__btn">
<a href="#">
Read more
<span><i class="ri-arrow-right-line"></i></span>
</a>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="section__container footer__container">
<div class="footer__col">
<div class="logo footer__logo">
<a href="#">HikeHappy Trails</a>
</div>
<p>
Get out there & discover your next slope, mountains & destination!
</p>
</div>
<div class="footer__col">
<h4>More on The Blog</h4>
<ul class="footer__links">
<li><a href="#">About HikeHappy Trails</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>
</div>
<div class="footer__col">
<h4>More on HikeHappy Trails</h4>
<ul class="footer__links">
<li><a href="#">The Team</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
</div>
<div class="footer__bar">
Copyright © 2024 Web Design. All rights reserved.
</div>
</footer>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="main.js"></script>
</body>
</html>