-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
282 lines (282 loc) · 10.5 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
<!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/remixicon@4.2.0/fonts/remixicon.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>|| Epic Escape ||</title>
</head>
<body>
<nav>
<div class="nav__header">
<div class="nav__logo">
<a href="#" class="logo">Epic<span>Escape</span></a>
</div>
<div class="nav__menu__btn" id="menu-btn">
<i class="ri-menu-line"></i>
</div>
</div>
<ul class="nav__links" id="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#service">Services</a></li>
<li><a href="#destination">Destinations</a></li>
<li><a href="#trip">Trips</a></li>
<li><a href="#client">Clients</a></li>
</ul>
</nav>
<header class="section__container header__container" id="home">
<div class="header__image">
<img src="Pics/header.png" alt="header" />
</div>
<div class="header__content">
<h3 class="section__subheader">BEST DESTINATIONS AROUND THE WORLD</h3>
<h1>Embark on adventures, savor experiences, and embrace a vibrant new existence.</h1>
<p>
You're invited to step out of your usual routine, explore different cultures, and appreciate the beauty of the world. Each trip can be a new part of your exciting life story.
</p>
<div class="header__btns">
<button class="btn">Find out more</button>
<a href="#">
<span><i class="ri-play-fill"></i></span>
Play Demo
</a>
</div>
</div>
</header>
<section class="section__container service__container" id="service">
<h3 class="section__subheader">CATEGORY</h3>
<h2 class="section__header">We Offer Best Services</h2>
<div class="service__grid">
<div class="service__card">
<img src="Pics/weather.png" alt="service" />
<h4>Calculated Weather</h4>
<p>
Get accurate weather forecasts for your travels that match the conditions at your destination.
</p>
</div>
<div class="service__card">
<img src="Pics/plane.png" alt="service" />
<h4>Best Flights</h4>
<p>
Get special access to the best flight choices that fit what you like and what you can afford.
</p>
</div>
<div class="service__card">
<img src="Pics/event.png" alt="service" />
<h4>Local Events</h4>
<p>
Learn about what's going on locally when you travel to really get into the vibe of the place.
</p>
</div>
<div class="service__card">
<img src="Pics/customisation.png" alt="service" />
<h4>Customizations</h4>
<p>
We'll customize your trip to match exactly what you like, so every part of it suits you perfectly.
</p>
</div>
</div>
</section>
<section class="section__container destination__container" id="destination">
<h3 class="section__subheader">TOP SELLING</h3>
<h2 class="section__header">Top Destinations</h2>
<div class="destination__grid">
<div class="destination__card">
<img src="Pics/destination-1.jpg" alt="destination" />
<div class="destination__details">
<div>
<h4>Rome, Italy</h4>
<h4>$6.42k</h4>
</div>
<p>
<span><i class="ri-navigation-fill"></i></span>
15 Days Trip
</p>
</div>
</div>
<div class="destination__card">
<img src="Pics/destination-2.jpg" alt="destination" />
<div class="destination__details">
<div>
<h4>London, UK</h4>
<h4>$5.2k</h4>
</div>
<p>
<span><i class="ri-navigation-fill"></i></span>
12 Days Trip
</p>
</div>
</div>
<div class="destination__card">
<img src="Pics/destination-3.jpg" alt="destination" />
<div class="destination__details">
<div>
<h4>Full Europe</h4>
<h4>$15k</h4>
</div>
<p>
<span><i class="ri-navigation-fill"></i></span>
28 Days Trip
</p>
</div>
</div>
</div>
</section>
<section class="section__container trip__container" id="trip">
<div class="trip__image">
<img src="Pics/trip.png" alt="trip" />
</div>
<div class="trip__content">
<h3 class="section__subheader">EASY & FAST</h3>
<h2 class="section__header">Book Your Next Trip In 3 Easy Steps</h2>
<ul class="trip__list">
<li>
<span><i class="ri-signpost-line"></i></span>
<div>
<h4>Choose Destination</h4>
<p>
Choose your dream destination from our curated selection of
exotic locales, bustling cities, and serene getaways.
</p>
</div>
</li>
<li>
<span><i class="ri-secure-payment-line"></i></span>
<div>
<h4>Make Payment</h4>
<p>
Secure your adventure with ease through our streamlined payment
process, ensuring a hassle-free booking experience.
</p>
</div>
</li>
<li>
<span><i class="ri-flight-takeoff-line"></i></span>
<div>
<h4>Reach Airport on Selected Date</h4>
<p>
Get ready to fly as you finish up your travel plans, reaching the airport on the day you've chosen, all set to start your exciting adventure.
</p>
</div>
</li>
</ul>
</div>
</section>
<section class="section__container client__container" id="client">
<div class="client__content">
<h3 class="section__subheader">TESTIMONIALS</h3>
<h2 class="section__header">What People Say About Us</h2>
</div>
<div class="client__swiper">
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<div class="client__card">
<img src="Pics/client-1.jpg" alt="client" />
<div class="client__card__content">
<p>
Using this platform to book my trips has completely changed the game! Everything is so easy to understand, and booking is smooth. I'm super pumped to explore new places!
</p>
<h4>Jennie Kim</h4>
<h5>Travel Enthusiast</h5>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="client__card">
<img src="Pics/client-2.jpg" alt="client" />
<div class="client__card__content">
<p>
As a busy professional, time is of the essence. This website
made planning my vacation a breeze, allowing me to focus on
what matters most: making memories with my family.
</p>
<h4>Johnny Depp</h4>
<h5>Business Executive</h5>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="client__card">
<img src="Pics/client-3.jpg" alt="client" />
<div class="client__card__content">
<p>
I've been using this service for years, and it never
disappoints. The convenience of booking my flights,
accommodations, and activities all in one place saves me
time and stress every trip.
</p>
<h4>Michael Johnson</h4>
<h5>Frequent Flyer</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="section__container footer__container">
<div class="footer__col">
<div class="footer__logo">
<a href="#" class="logo">Epic<span>Escape</span>.</a>
</div>
<p>
Our site is your ticket to easy travels, with a handpicked list of places and a simple booking process.
</p>
</div>
<div class="footer__col">
<h4>Company</h4>
<ul class="footer__links">
<li><a href="#">About</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Mobile</a></li>
</ul>
</div>
<div class="footer__col">
<h4>Contact</h4>
<ul class="footer__links">
<li><a href="#">Help/FAQ</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Affiliates</a></li>
</ul>
</div>
<div class="footer__col">
<ul class="footer__socials">
<li>
<a href="#"><i class="ri-facebook-fill"></i></a>
</li>
<li>
<a href="#"><i class="ri-instagram-line"></i></a>
</li>
<li>
<a href="#"><i class="ri-twitter-fill"></i></a>
</li>
</ul>
<h5>Discover our app</h5>
<div class="footer__discover">
<a href="#"><img src="Pics/google-play.jpg" alt="discover" /></a>
<a href="#"><img src="Pics/app-store.jpg" alt="discover" /></a>
</div>
</div>
</div>
<div class="footer__bar">
Copyright © 2024 Web Design. All rights reserved.
</div>
</footer>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="main.js"></script>
</body>
</html>