-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
318 lines (296 loc) · 11.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mountain</title>
<script src="https://cdn.tailwindcss.com"></script>
<script
src="https://kit.fontawesome.com/b875b8245f.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./styles/main.css" />
</head>
<body class="loading-active">
<div class="loading__container">
<div class="multi-ripple">
<div></div>
<div></div>
</div>
</div>
<div class="main">
<input type="checkbox" id="sidebar-checkbox" />
<label for="sidebar-checkbox" class="navbar__btn">
<div class="bg"></div>
<span></span>
</label>
<nav id="navbar">
<div class="nav__container">
<div class="left__list">
<ul>
<a href="#"><li>home</li></a>
<a href="#program"><li>destinations</li></a>
<a href="#challenge"><li>gallery</li></a>
</ul>
</div>
<div class="logo__cnt px-8 text-center">
<img class="logo" src="./assets/logo2.png" alt="logo" />
<h2>Mountain</h2>
</div>
<div class="right__list">
<ul>
<a href="#team"><li>review</li></a>
<a href="#reviews"><li>explore</li></a>
<a href="#booking"><li>contact</li></a>
</ul>
</div>
</div>
</nav>
<!--
<div class="sidebar">
<ul>
<li>azeaze</li>
<li>azeaze</li>
<li>azeaze</li>
<li>azeaze</li>
<li>azeaze</li>
</ul>
</div>
-->
<section id="header" class="header mb-40">
<div>
<span class="subtitle">Road to everest</span>
<span class="title">NEPAL</span>
<div class="map">
<img src="./assets/images/map.svg" alt="" />
<div class="area start__area">
<h2>Lukla</h2>
<h5>2860 m</h5>
</div>
<div class="area end__area">
<h2>Everest</h2>
<h5>8848 m</h5>
</div>
</div>
<button>start booking</button>
</div>
</section>
<section id="program">
<h4 class="heading__2">What should I be preapared for ?</h4>
<h1 class="heading__1">PROGRAM</h1>
<div class="slider__1">
<div class="card__list">
<button class="slide__btn left__btn">
<div class="icon">
<i class="fas fa-angle-left"></i>
</div>
</button>
<div class="cards__wrapper">
<div class="card current--card">
<div class="card__image">
<img src="./assets/images/card-1.jpg" alt="" />
</div>
</div>
<div class="card next--card">
<div class="card__image">
<img src="./assets/images/card-2.jpeg" alt="" />
</div>
</div>
<div class="card previous--card">
<div class="card__image">
<img src="./assets/images/card-3.jpg" alt="" />
</div>
</div>
</div>
<button class="slide__btn right__btn">
<div class="icon">
<i class="fas fa-angle-right"></i>
</div>
</button>
</div>
<div class="card__info">
<h2 class="text title"></h2>
<h3 class="text desc"></h3>
<div class="details">
<div class="empty__para"></div>
</div>
</div>
</div>
</section>
<section id="challenge">
<h4 class="heading__2">
Are you ready to overpass your capacities
</h4>
<h1 class="heading__1">CHALLENGE</h1>
<div
class="circles grid sm:grid-cols-2 lg:grid-cols-4 w-max mx-auto"
>
<div class="circle__wrapper">
<div class="circle">
<span class="text">8848 M</span>
</div>
<div class="circle__desc">
highest Altitude during the trip
</div>
</div>
<div class="circle__wrapper">
<div class="circle">
<span class="text">6.5 %</span>
</div>
<div class="circle__desc">of Oxygen at the summit</div>
</div>
<div class="circle__wrapper">
<div class="circle">
<span class="text">-35 °C</span>
</div>
<div class="circle__desc">
Average temperature during the climb
</div>
</div>
<div class="circle__wrapper">
<div class="circle">
<span class="text">8 H</span>
</div>
<div class="circle__desc">
of Exhausting effort to reach the summit
</div>
</div>
</div>
</section>
<section id="team">
<h4 class="heading__2">
Who is going to escort and keep you alive ?
</h4>
<h1 class="heading__1">THE TEAM</h1>
<div class="slider__2">
<div class="card__list">
<button class="slide__btn left__btn">
<div class="icon">
<i class="fas fa-angle-left"></i>
</div>
</button>
<div class="cards__wrapper">
<div class="card current--card">
<div class="card__image">
<img src="./assets/images/card-1.jpg" alt="" />
</div>
</div>
<div class="card next--card">
<div class="card__image">
<img src="./assets/images/card-2.jpeg" alt="" />
</div>
</div>
<div class="card previous--card">
<div class="card__image">
<img src="./assets/images/card-3.jpg" alt="" />
</div>
</div>
</div>
<button class="slide__btn right__btn">
<div class="icon">
<i class="fas fa-angle-right"></i>
</div>
</button>
</div>
<div class="card__info">
<h2 class="text title"></h2>
<p class="text desc"></p>
</div>
</div>
</section>
<section id="reviews">
<h4 class="heading__2">What did others thought about it ?</h4>
<h1 class="heading__1">REVIEWS</h1>
<div class="reviews__container">
<div class="reviews__item">
<h3 class="title mb-8">Awesome !</h3>
<p class="description pl-10 mb-8">
I need to make grid structure like on image enter image
description here I use this solution for 4 columns on
desktop, but for mobile I need 3 cols. And in this solution
I can't make different margins for columns
</p>
<div class="pl-10 flex items-center mb-8">
<div class="img__container">
<img
class="w-28 h-28 object-cover rounded-full mr-8"
src="./assets/images/person-1.jpg"
alt=""
/>
</div>
<span class="name">Joan Doa</span>
</div>
</div>
<div class="reviews__item">
<h3 class="title mb-8">Best Experience of my life !</h3>
<p class="description pl-10 mb-8">
desktop, but for mobile I need 3 cols. And in this solution
I can't make different margins for columns
</p>
<div class="pl-10 flex items-center mb-8">
<div class="img__container">
<img
class="w-28 h-28 object-cover rounded-full mr-8"
src="./assets/images/person-3.jpg"
alt=""
/>
</div>
<span class="name">Joan Doa</span>
</div>
</div>
<div class="reviews__item">
<h3 class="title mb-8">What a Trip !</h3>
<p class="description pl-10 mb-8">
I need to make grid structure like on image enter image
description here I use this solution for 4 columns on
desktop, but for mobile I need 3 cols. And in this solution
I can't make different margins for columns
</p>
<div class="pl-10 flex items-center mb-8">
<div class="img__container">
<img
class="w-28 h-28 object-cover rounded-full mr-8"
src="./assets/images/person-2.jpg"
alt=""
/>
</div>
<span class="name">Joan Doa</span>
</div>
</div>
</div>
</section>
<section id="booking">
<h4 class="heading__2">Want to be a part of it?</h4>
<h1 class="heading__1">BOOKING</h1>
<div class="form mb-16">
<input type="text" placeholder="Your name ..." />
<input type="text" placeholder="Your email address ..." />
<button>Book Your Trip</button>
</div>
<div class="flex justify-center">
<h6 class="title">INVITE YOUR FRIENDS</h6>
</div>
<div class="flex justify-center mb-8">
<a class="icon" href="#"> <i class="fab fa-twitter"></i></a>
<a class="icon" href="#"> <i class="fab fa-instagram"></i> </a>
<a class="icon" href="#"><i class="fab fa-facebook-f"></i></a>
</div>
<div class="w-full border-b"></div>
<div class="footer">
<p>
Mountain Adventure - All Right Reserved - Do not Copy -
Copyright 2022
</p>
</div>
</section>
</div>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"
></script>
<script src="./js/main.js"></script>
<script src="./js/slider__1.js"></script>
<script src="./js/slider__2.js"></script>
</body>
</html>