-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
409 lines (382 loc) · 21.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
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
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML CSS Project</title>
<!-- Linking CSS File Here -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/mediaqueries.css">
<link rel="stylesheet" href="css/popular-tour.css">
<link rel="stylesheet" href="css/destination.css">
<link rel="stylesheet" href="css/about.css">
<link rel="stylesheet" href="css/discount.css">
<link rel="stylesheet" href="css/best-place.css">
<link rel="stylesheet" href="css/contact.css">
<!-- Adding Google Fonts : Mulish Font -->
<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=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
<!-- Adding Font Awesome -->
<script src="https://kit.fontawesome.com/dd1db64a49.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Header Section here -->
<header>
<!-- Navigation Section Start -->
<section class="navigation">
<!-- Logo Section -->
<div class="logo">
<img src="assets/Group 40071 (2).png" alt="Travel">
<h3>Travel <span>Today</span></h3>
</div>
<!-- Navbar Here -->
<div class="navbar">
<nav class="nav">
<ul>
<li><a href="#header" class="active">Home</a></li>
<li><a href="#choose-here">Destination</a></li>
<li><a href="#about">About</a></li>
<li><a href="#discount">Discounts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- Navbar End -->
</section>
<!-- Navigation End -->
<!-- Hero Section Start -->
<section class="hero">
<video src="assets/touring.mp4" autoplay muted loop class="video-player"></video>
<div class="overlay"></div>
<!-- Hero Article Here -->
<div class="hero-article">
<h1>Explore the Beauty</h1>
<p>Life is about the adventures you take and the memories you make & Live your life by a compass not a clock</p>
<!-- Selection Group Here -->
<div class="selection">
<div class="from-group">
<select name="from" id="from" class="from">
<option value="" disabled selected>From</option>
<option value="Dhaka">Dhaka</option>
<option value="Faridpur">Faridpur</option>
<option value="Gazipur">Gazipur</option>
<option value="Gopalganj">Gopalganj</option>
<option value="Jamalpur">Jamalpur</option>
<option value="Kishoreganj">Kishoreganj</option>
<option value="Madaripur">Madaripur</option>
<option value="Manikganj">Manikganj</option>
<option value="Munshiganj">Munshiganj</option>
<option value="Mymensingh">Mymensingh</option>
<option value="Narayanganj">Narayanganj</option>
<option value="Narsingdi">Narsingdi</option>
<option value="Netrokona">Netrokona</option>
<option value="Rajbari">Rajbari</option>
<option value="Shariatpur">Shariatpur</option>
<option value="Sherpur">Sherpur</option>
<option value="Tangail">Tangail</option>
<option value="Bogra">Bogra</option>
<option value="Joypurhat">Joypurhat</option>
<option value="Naogaon">Naogaon</option>
<option value="Natore">Natore</option>
<option value="Nawabganj">Nawabganj</option>
<option value="Pabna">Pabna</option>
<option value="Rajshahi">Rajshahi</option>
<option value="Sirajgonj">Sirajgonj</option>
<option value="Dinajpur">Dinajpur</option>
<option value="Gaibandha">Gaibandha</option>
<option value="Kurigram">Kurigram</option>
<option value="Lalmonirhat">Lalmonirhat</option>
<option value="Nilphamari">Nilphamari</option>
<option value="Panchagarh">Panchagarh</option>
<option value="Rangpur">Rangpur</option>
<option value="Thakurgaon">Thakurgaon</option>
<option value="Barguna">Barguna</option>
<option value="Barisal">Barisal</option>
<option value="Bhola">Bhola</option>
<option value="Jhalokati">Jhalokati</option>
<option value="Patuakhali">Patuakhali</option>
<option value="Pirojpur">Pirojpur</option>
<option value="Bandarban">Bandarban</option>
<option value="Brahmanbaria">Brahmanbaria</option>
<option value="Chandpur">Chandpur</option>
<option value="Chittagong">Chittagong</option>
<option value="Comilla">Comilla</option>
<option value="Cox's Bazar">Cox's Bazar</option>
<option value="Feni">Feni</option>
<option value="Khagrachari">Khagrachari</option>
<option value="Lakshmipur">Lakshmipur</option>
<option value="Noakhali">Noakhali</option>
<option value="Rangamati">Rangamati</option>
<option value="Habiganj">Habiganj</option>
<option value="Maulvibazar">Maulvibazar</option>
<option value="Sunamganj">Sunamganj</option>
<option value="Sylhet">Sylhet</option>
<option value="Bagerhat">Bagerhat</option>
<option value="Chuadanga">Chuadanga</option>
<option value="Jessore">Jessore</option>
<option value="Jhenaidah">Jhenaidah</option>
<option value="Khulna">Khulna</option>
<option value="Kushtia">Kushtia</option>
<option value="Magura">Magura</option>
<option value="Meherpur">Meherpur</option>
<option value="Narail">Narail</option>
<option value="Satkhira">Satkhira</option>
</select>
</div>
<div class="to-group">
<select name="destination" id="to-group" class="destination">
<option value="" disabled selected>Destination</option>
<option value="paris">Paris, France</option>
<option value="new_york">New York City, USA</option>
<option value="tokyo">Tokyo, Japan</option>
<option value="london">London, UK</option>
<option value="rome">Rome, Italy</option>
<option value="bali">Bali, Indonesia</option>
<option value="dubai">Dubai, UAE</option>
<option value="barcelona">Barcelona, Spain</option>
<option value="istanbul">Istanbul, Turkey</option>
<option value="sydney">Sydney, Australia</option>
<option value="singapore">Singapore</option>
<option value="cairo">Cairo, Egypt</option>
<option value="bangkok">Bangkok, Thailand</option>
<option value="amsterdam">Amsterdam, Netherlands</option>
<option value="rio">Rio de Janeiro, Brazil</option>
<option value="cape_town">Cape Town, South Africa</option>
<option value="venice">Venice, Italy</option>
<option value="machu_picchu">Machu Picchu, Peru</option>
<option value="los_angeles">Los Angeles, USA</option>
<option value="prague">Prague, Czech Republic</option>
<option value="santorini">Santorini, Greece</option>
<option value="honolulu">Honolulu, Hawaii, USA</option>
<option value="lisbon">Lisbon, Portugal</option>
<option value="seoul">Seoul, South Korea</option>
<option value="maldives">Maldives</option>
<option value="madrid">Madrid, Spain</option>
<option value="vienna">Vienna, Austria</option>
<option value="berlin">Berlin, Germany</option>
<option value="cancun">Cancun, Mexico</option>
<option value="las_vegas">Las Vegas, USA</option>
</select>
</div>
<div class="date-fix">
<input type="date" name="date" id="date">
</div>
<div class="search-info">
<a href="https://www.linkedin.com/in/mdashrafuddintanvir/" target="_blank"><input type="submit" value="Search Now" class="search"></a>
</div>
</div>
<!-- selection end here -->
</div>
<!-- Hero Article End -->
</section>
<!-- Hero Section End -->
</header>
<main>
<!-- Popular Tour section -->
<section class="popular-tour">
<div class="popular-text">
<h2 class="heading-text">Our Popular Tour</h2>
<p class="p-text">
Explore the vibrant city of Tokyo, Japan, where tradition meets modernity. This tour plan covers iconic landmarks, local culture, and exquisite cuisine.
</p>
<ul class="p-text">
<li>Visit historical sites like Senso-ji Temple and Meiji Shrine.</li>
<li>Experience the bustling Shibuya Crossing and Tokyo Skytree.</li>
<li>Indulge in authentic sushi and ramen at Tsukiji Market.</li>
</ul>
<p class="p-text">
This Tokyo tour offers a perfect blend of culture and modern attractions, making it a memorable experience. Discover the best of Japan in a seamless and exciting journey!
</p>
</div>
<div class="popular-image">
<img src="assets/popular tour.png" alt="">
</div>
</section>
<!-- Choose Destination Section -->
<section class="choose-destination" id="choose-here">
<div class="destination-text">
<h2 class="heading-text">Choose Your Destination</h2>
<p class="p-text">
The sea, once it casts its spell, holds one in its net of wonder forever. Remember that happiness is a way of travel – not a destination.
</p>
</div>
<div class="different-destination">
<div class="choose choose1">
<img src="assets/maldives.png" alt="">
<h3>Maldives</h3>
</div>
<div class="choose choose2">
<img src="assets/indonesia.png" alt="">
<h3>Indonesia</h3>
</div>
<div class="choose choose3">
<img src="assets/srilanka.png" alt="">
<h3>Srilanka</h3>
</div>
<div class="choose choose4">
<img src="assets/north america.png" alt="">
<h3>North America</h3>
</div>
<div class="choose choose5">
<img src="assets/kashmir.png" alt="">
<h3>Kashmir</h3>
</div>
<div class="choose choose6">
<img src="assets/bangladesh.png" alt="">
<h3>Bangladesh</h3>
</div>
<div class="choose choose7">
<img src="assets/bandarban.png" alt="">
<h3>Bandarban</h3>
</div>
</div>
</section>
<!-- About Section Start Here -->
<section class="about" id="about">
<div class="about-article">
<h2 class="heading-text">
Why Choose Us
</h2>
<p class="p-text">
Let's Make your journey memoriable and take a good memories for your long life.The world is a book and those who do not travel read only one page.
</p>
</div>
<div class="about-content">
<div class="about-content-no about-content1">
<img src="assets/hotel 1.svg" alt="">
<h3>Handpicked Hotels</h3>
<p class="p-text">Welcome to Hand Picked Hotels! We are a collection of 21 privately-owned country house hotels and coastal retreats in the UK & Channel Islands.</p>
</div>
<div class="about-content-no about-content2">
<img src="assets/map 1.svg" alt="">
<h3>World Class Service</h3>
<p class="p-text">Guests staying in luxury or five-star hotels are treated to an excellent experience with regard to room service, food and many other amenities.</p>
</div>
<div class="about-content-no about-content3">
<img src="assets/price-tag 1.svg" alt="">
<h3>Best Price Guarantee</h3>
<p class="p-text">Our Mega Deals section is a treasure trove of incredible offers, where you can enjoy significant discounts on a wide range of products</p>
</div>
</div>
</section>
<!-- Discount Section Start From Here -->
<section class="discount" id="discount">
<div class="discount-article">
<h2 class="heading-text">
Deals & Discounts
</h2>
<p class="p-text">
Travel with up to 50% discount. to hundreds of destinations. In January, buy your pass for 3 or 4 trips. Keep moving! Your pass will be valid until December 30
</p>
</div>
<div class="discount-content">
<!-- div.discount-content$*3>ul>li*3^h3+p+h4+btn -->
<div class="discount-content1">
<div class="dis-content1 dis">
<ul>
<li><i class="fa-solid fa-clock"></i> 7 Night / 6 Day</li>
<li><i class="fa-solid fa-person-walking-luggage"></i> Max: 6</li>
<li><i class="fa-solid fa-map-location-dot"></i> Paris, France</li>
</ul>
<h3>Tour to Paris</h3>
<p class="p-text">Paris, France's capital, is a major European city and a global center for art, fashion, gastronomy and culture.</p>
<h4>Price: $399 - $1199</h4>
<a href="https://www.linkedin.com/in/mdashrafuddintanvir/" target="_blank"><button>Book Now</button></a>
</div>
</div>
<div class="discount-content2 dis">
<div class="dis-content2">
<ul>
<li><i class="fa-solid fa-clock"></i> 3 Night / 2 Day</li>
<li><i class="fa-solid fa-person-walking-luggage"></i> Max: 8</li>
<li><i class="fa-solid fa-map-location-dot"></i> New York, USA</li>
</ul>
<h3>Tour to New York</h3>
<p class="p-text">New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean.</p>
<h4>Price: $399 - $1299</h4>
<a href="https://www.linkedin.com/in/mdashrafuddintanvir/" target="_blank"><button>Book Now</button></a>
</div>
</div>
<div class="discount-content3 dis">
<div class="dis-content3">
<ul>
<li><i class="fa-solid fa-clock"></i> 4 Night / 3 Day</li>
<li><i class="fa-solid fa-person-walking-luggage"></i> Max: 8</li>
<li><i class="fa-solid fa-map-location-dot"></i> Maldives</li>
</ul>
<h3>Tour to Maldives</h3>
<p class="p-text">The Maldives, officially the Republic of Maldives, and historically known as the Maldive Islands, is a country and archipelagic state in South Asia in the Indian Ocean.</p>
<h4>Price: $199 - $499</h4>
<a href="https://www.linkedin.com/in/mdashrafuddintanvir/" target="_blank"><button>Book Now</button></a>
</div>
</div>
</div>
<div class="discount-offer">
<a href="https://www.linkedin.com/in/mdashrafuddintanvir/" target="_blank"><button>See All Packages</button></a>
</div>
</section>
<!-- Discount Section End -->
<!-- Best Place section Start -->
<section class="best-place">
<div class="best1">
<h2>A Simple Perfect Place To Get Lost</h2>
<p class="p-text">Explore the captivating beauty of Paris, a global hub for art, fashion, and culture. Discover famous landmarks and indulge in the rich history and vibrant city life</p>
<ul>
<li>Visit the Eiffel Tower and Louvre Museum</li>
<li>Enjoy authentic French cuisine along the Seine River</li>
</ul>
<a href="https://www.linkedin.com/in/mdashrafuddintanvir/" target="_blank">Know More</a>
</div>
<div class="best2">
<video src="assets/paris.mp4" muted autoplay loop controls></video>
<h3>Explore the captivating beauty of Paris</h3>
</div>
</section>
<!-- Best place section End Here -->
<!-- Contact Section Start Here -->
<section class="contact" id="contact">
<div class="contact-content c-content1">
<h3>Newsletter</h3>
<p class="p-text">
Get your daily dose of travel news & tips. Sign up today!
</p>
<form action="#">
<input type="text" name="name" id="name" placeholder="Enter Your Full Name">
<input type="email" name="email" id="email" placeholder="Enter Your Email">
<a href="https://www.linkedin.com/in/mdashrafuddintanvir/" target="_blank"><input type="submit" value="Subscribe"></a>
</form>
</div>
<div class="contact-content c-content2">
<div class="c-content2-text">
<p>TravelToday.COM</p>
<h4>Upto 70% Discount</h4>
</div>
</div>
</section>
</main>
<!-- Footer Start Here -->
<footer>
<div class="footer-article">
<div class="logo">
<img src="assets/Group 40071 (2).png" alt="Travel">
<h3>Travel <span>Today</span></h3>
</div>
<p class="p-text">
Discover the world's most stunning destinations, where every view calms your mind and lifts your soul. Escape to paradise and immerse yourself in the tranquility you've been craving.
</p>
<div class="footer-icon">
<ul>
<li><a href="https://www.linkedin.com/in/mdashrafuddintanvir/" target="_blank"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://www.instagram.com/ashraftanv1r/" target="_blank"><i class="fa-brands fa-square-instagram"></i></a></li>
<li><a href="https://www.facebook.com/tanvir.ashraf.7965/" target="_blank"><i class="fa-brands fa-facebook"></i></a></li>
<li><a href="https://github.com/MDASHRAFUDDINTANVIR1" target="_blank"><i class="fa-brands fa-github"></i></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>