-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
536 lines (528 loc) · 49.1 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
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>travel</title>
<link rel="stylesheet" href="css/output.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body class="font-primary">
<main class="w-full">
<section class="w-full h-[100vh] bg-header bg-cover bg-no-repeat bg-center bg-color1 bg-blend-multiply bg-opacity-60 " >
<section class="w-full flex flex-wrap justify-center ">
<header
class="w-[85%] xl:w-[73%] container hidden lg:flex justify-between h-[60px] items-center py-[45px] border-b-[1px] border-white border-opacity-40">
<figure class="w-[140px]">
<img src="img/logo-light.png" alt="" class="w-[100%]">
</figure>
<nav class="h-[100%] md:w-[70%]">
<ul class="h-[100%] flex items-center gap-8 justify-end">
<li class="list-none "><a class="decoration-none text-white hover:text-color3 transition-all duration-500"
href="">Home</a></li>
<li class="list-none"><a class="decoration-none text-white hover:text-color3 transition-all duration-500"
href="">About</a></li>
<li class="list-none "><a class="decoration-none text-white hover:text-color3 transition-all duration-500"
href="">Tours</a></li>
<li class="list-none"><a class="decoration-none text-white hover:text-color3 transition-all duration-500"
href="">Destination</a></li>
<li class="list-none "><a class="decoration-none text-white hover:text-color3 transition-all duration-500"
href="">Blog</a></li>
<li class="list-none"><a class="decoration-none text-white hover:text-color3 transition-all duration-500"
href="">Gallery</a></li>
<li class="list-none"><a class="decoration-none text-white hover:text-color3 transition-all duration-500"
href="">Contact</a></li>
</ul>
</nav>
</header>
<!-- header for mobile -->
<header
class="w-[95%] sm:w-[70%] md:w-[80%] container flex h-[60px] justify-between items-center lg:hidden py-[45px] relative border-b-[1px] border-white border-opacity-40 ">
<figure class="w-[140px]">
<img src="img/logo-light.png" alt="" class="w-[100%]">
</figure>
<div class=" w-1/2 h-full flex justify-end items-center ">
<i class="bi bi-list text-3xl text-white cursor-pointer ham-menu-icon"></i>
</div>
<nav class="menu hidden h-[400px] w-full absolute bg-white left-0 top-[90px] z-30 ">
<ul class="h-full w-full flex flex-col justify-center ms-6">
<li class="list-none my-3"><a
class="decoration-none text-color2 flex hover:text-color4 transition-all duration-600"
href="">Home</a></li>
<li class="list-none my-3"><a
class="decoration-none text-color2 flex hover:text-color4 transition-all duration-600"
href="">About</a></li>
<li class="list-none my-3"><a
class="decoration-none text-color2 flex hover:text-color4 transition-all duration-600"
href="">Tours</a></li>
<li class="list-none my-3"><a
class="decoration-none text-color2 flex hover:text-color4 transition-all duration-600"
href="">Destination</a></li>
<li class="list-none my-3"><a
class="decoration-none text-color2 flex hover:text-color4 transition-all duration-600"
href="">Blog</a></li>
<li class="list-none my-3"><a
class="decoration-none text-color2 flex hover:text-color4 transition-all duration-600"
href="">Gallery</a></li>
<li class="list-none my-3"><a
class="decoration-none text-color2 flex hover:text-color4 transition-all duration-600"
href="">Contact</a></li>
</ul>
</nav>
</header>
<!-- end header mobile -->
</section>
<section class="w-full flex justify-center mt-[180px]">
<div class="w-[700px] md:w-[900px] container h-auto ">
<p class="w-full text-center uppercase text-white tracking-widest [word-spacing:8px] mb-4">Lets travel the world with us</p>
<h1 class="w-full text-center text-white text-5xl md:text-7xl font-secondary uppercase tracking-widest">Explore The World With <span class="travol">Travol</span></h1>
</div>
</section>
<section class="w-full justify-center mt-[80px] hidden lg:flex relative">
<div class=" bg-white bg-opacity-40 container absolute w-[1000px] xl:w-[1200px] h-[100px] flex justify-center items-center backdrop-blur-lg">
<div class="w-[950px] xl:w-[1100px] container h-auto absolute m-[10px] ">
<form action="" class="flex font-primary">
<input type="text" placeholder="where to?" class="py-[15px] ps-5 w-[25%] outline-none focus:outline-none">
<select name="" id="" class="w-[25%] py-[15px] bg-white ps-5" id="target">
<option value="dest" selected class="bg-color1 text-white">Destination</option>
<option value="it" class="text-stone-600" >Italy</option>
<option value="fr" class="text-stone-600">France</option>
<option value="mal" class="text-stone-600" >Maldives</option>
<option value="gr" class="text-stone-600" >Greece</option>
<option value="ca" class="text-stone-600" >Canada</option>
<option value="du" class="text-stone-600"> Dubai</option>
</select>
<select name="" id="" class="w-[25%] py-[15px] bg-white ps-5" id="target">
<option value="du" selected class="bg-color1 text-white">Deuration</option>
<option value="it" class="text-stone-600" >1 Day Tour</option>
<option value="fr" class="text-stone-600">2-4 Days Tour</option>
<option value="mal" class="text-stone-600" >5-7 Days Tour</option>
<option value="gr" class="text-stone-600" >7+ Days Tour</option>
</select>
<a href="" role="button" class="bg-color1 w-[25%] text-white flex items-center justify-center text-[18px] hover:bg-color3 transition-all duration-500" ><i class="bi bi-search me-2"></i>Find Now</a>
</form>
</div>
</div>
</section>
</section>
<section class="w-full flex lg:hidden justify-center bg-color5">
<div class="w-full container flex justify-center py-10">
<form action="" class="w-[80%] " >
<input type="text" placeholder="where to?" class="w-full py-5 ps-5"><br>
<select name="" id="" class="w-full py-5 bg-white ps-5" >
<option value="dest" selected class="bg-color1 text-white">Destination</option>
<option value="it" class="text-stone-600" >Italy</option>
<option value="fr" class="text-stone-600">France</option>
<option value="mal" class="text-stone-600" >Maldives</option>
<option value="gr" class="text-stone-600" >Greece</option>
<option value="ca" class="text-stone-600" >Canada</option>
<option value="du" class="text-stone-600"> Dubai</option>
</select><br>
<select name="" id="" class="w-full py-5 bg-white ps-5" >
<option value="du" selected class="bg-color1 text-white">Deuration</option>
<option value="it" class="text-stone-600" >1 Day Tour</option>
<option value="fr" class="text-stone-600">2-4 Days Tour</option>
<option value="mal" class="text-stone-600" >5-7 Days Tour</option>
<option value="gr" class="text-stone-600" >7+ Days Tour</option>
</select><br>
<a href="" role="button" class="bg-color1 py-5 w-full text-white flex items-center justify-center text-[18px] hover:bg-color3 transition-all duration-500" ><i class="bi bi-search me-2"></i>Find Now</a>
</form>
</div>
</section>
<section class="w-full flex justify-center bg-color5 h-auto">
<div class="w-full container flex justify-between flex-wrap px-0 2xl:px-36 h-auto py-16 ">
<div class="w-full lg:w-[50%] bg-color px-5 ">
<p class="text-color4 uppercase">The best travel agency</p>
<p class="text-color3 text-5xl font-bold uppercase font-secondary my-4" >Discover the <span class="text-color1"> world</span> with our guide</p>
<p class="text-color6">You can choose any country with good tourism. Agency elementum sesue the aucan vestibulum aliquam justo in sapien rutrum volutpat. Donec in quis the pellentesque velit. Donec id velit ac arcu posuere blane.</p>
<p class="text-color6 my-4">Hotel ut nisl quam nestibulum ac quam nec odio elementum ceisue the miss varius natoque penatibus et magnis dis parturient monte.</p>
<div class="flex items-center"> <i class="bi bi-check text-white bg-color4 rounded-[50%] px-2 py-1 me-3"></i> <p class="text-color6">20 Years of Experience</p></div>
<div class="flex items-center my-4"> <i class="bi bi-check text-white bg-color4 rounded-[50%] px-2 py-1 me-3"></i> <p class="text-color6">150+ Tour Destinations</p></div>
<div class="flex items-center"><i class="bi bi-telephone-forward text-color1 text-2xl me-3"></i><div><p class="text-color6 ">For information</p><p class="text-color6 text-2xl">09188085590</p></div></div>
</div>
<div class=" w-full lg:w-[50%] flex flex-col justify-center items-center bg-color5 h-auto pb-8 lg:pb-0 mt-10 lg:mt-0 ">
<figure class="w-[70%] h-[500px] relative">
<div class="w-[100%] h-[100%] bg-color4 absolute left-8 top-8"></div>
<img src="img/about.jpeg" alt="" class="w-[100%] h-[100%] absolute z-10 object-cover hover:scale-[.95] transition-all duration-500">
</figure>
</div>
</div>
</section>
<section class="w-full flex justify-center bg-color7 py-8 ">
<div class="w-full container 2xl:px-36">
<div>
<p class="text-color4 uppercase px-5">Choose your place</p>
<p class="text-5xl font-secondary text-color3 px-5">Popular <span class="text-color1">Tours</span></p>
<div class="flex flex-wrap md:justify-between gap-10 px-6 xl:px-0 py-8 lg:px-3 ">
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative photo transition-all duration-1000 ">
<div class="w-[100%] h-[100%] bottom-photo absolute bg-white flex flex-col justify-center px-5">
<p class="text-3xl text-color3 capitalize font-secondary">Maldives tour</p>
<p class="text-color1 mb-4">$2.500 / per persons</p>
<p class="text-color6">Travel non lorem ac erat susce bibendum nulla facilisi. Sedeuter nunc voluat miss conse viventa amet vestibulum.</p>
<div class="flex flex-wrap my-4">
<div class="w-[50%] flex"><i class="bi bi-clock text-color4"></i><p class="text-color6 ms-2">12 Days</p></div>
<div class="w-[50%] flex"><i class="bi bi-geo-alt text-color4"></i><p class="text-color6 ms-2">Maldives</p></div>
<div class="w-[50%] flex"><i class="bi bi-person text-color4"></i></i><p class="text-color6 ms-2">12+</p></div>
<div class="w-[50%] flex"><i class="bi bi-emoji-smile text-color4"></i></i><p class="text-color6 ms-2">9.8 Superb</p></div>
</div>
<a href="" class="underline decoration-color1 text-color6 flex mb-2">Tour details</a>
</div>
<img src="img/maldives1.jpg" alt="" class="w-[100%] h-[100%] object-cover brightness-75 absolute">
<p class="absolute uppercase text-white bg-color3 px-4 py-1 right-1 top-12 rotate-[-90deg] ">Maldives</p>
<figcaption class="absolute text-white bottom-8 right-10 fig">
<p class="capitalize font-secondary text-3xl">Maldives tours</p>
<p class="text-right">$2500 / per persons</p>
</figcaption>
</figure>
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative photo transition-all duration-1000 ">
<div class="w-[100%] h-[100%] bottom-photo absolute bg-white flex flex-col justify-center px-5">
<p class="text-3xl text-color3 capitalize font-secondary">Roma</p>
<p class="text-color1 mb-4">$1.300 / per persons</p>
<p class="text-color6">Travel non lorem ac erat susce bibendum nulla facilisi. Sedeuter nunc voluat miss conse viventa amet vestibulum.</p>
<div class="flex flex-wrap my-4">
<div class="w-[50%] flex"><i class="bi bi-clock text-color4"></i><p class="text-color6 ms-2">6 Days</p></div>
<div class="w-[50%] flex"><i class="bi bi-geo-alt text-color4"></i><p class="text-color6 ms-2">Italy</p></div>
<div class="w-[50%] flex"><i class="bi bi-person text-color4"></i></i><p class="text-color6 ms-2">10+</p></div>
<div class="w-[50%] flex"><i class="bi bi-emoji-smile text-color4"></i></i><p class="text-color6 ms-2"> 9.5 Superb</p></div>
</div>
<a href="" class="underline decoration-color1 text-color6 flex mb-2">Tour details</a>
</div>
<img src="img/2.jpg" alt="" class="w-[100%] h-[100%] object-cover brightness-75 absolute">
<p class="absolute uppercase text-white bg-color3 px-4 py-1 right-1 top-12 rotate-[-90deg] ">italy</p>
<figcaption class="absolute text-white bottom-8 right-10 fig">
<p class="capitalize font-secondary text-3xl">Roma</p>
<p class="text-right">$1.300 / per persons</p>
</figcaption>
</figure>
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative photo transition-all duration-1000">
<div class="w-[100%] h-[100%] bottom-photo absolute bg-white flex flex-col justify-center px-5">
<p class="text-3xl text-color3 capitalize font-secondary">France</p>
<p class="text-color1 mb-4">$400 / per persons</p>
<p class="text-color6">Travel non lorem ac erat susce bibendum nulla facilisi. Sedeuter nunc voluat miss conse viventa amet vestibulum.</p>
<div class="flex flex-wrap my-4">
<div class="w-[50%] flex"><i class="bi bi-clock text-color4"></i><p class="text-color6 ms-2">10 Days</p></div>
<div class="w-[50%] flex"><i class="bi bi-geo-alt text-color4"></i><p class="text-color6 ms-2">France</p></div>
<div class="w-[50%] flex"><i class="bi bi-person text-color4"></i></i><p class="text-color6 ms-2">6+</p></div>
<div class="w-[50%] flex"><i class="bi bi-emoji-smile text-color4"></i></i><p class="text-color6 ms-2">9.5 Superb</p></div>
</div>
<a href="" class="underline decoration-color1 text-color6 flex mb-2">Tour details</a>
</div>
<img src="img/france1.jpg" alt="" class="w-[100%] h-[100%] object-cover brightness-75 absolute">
<p class="absolute uppercase text-white bg-color3 px-4 py-1 right-1 top-12 rotate-[-90deg] ">France</p>
<figcaption class="absolute text-white bottom-8 right-10 fig">
<p class="capitalize font-secondary text-3xl">France</p>
<p class="text-right">$400 / per persons</p>
</figcaption>
</figure>
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative photo transition-all duration-1000 ">
<div class="w-[100%] h-[100%] bottom-photo absolute bg-white flex flex-col justify-center px-5">
<p class="text-3xl text-color3 capitalize font-secondary">greece tour</p>
<p class="text-color1 mb-4">$500 / per persons</p>
<p class="text-color6">Travel non lorem ac erat susce bibendum nulla facilisi. Sedeuter nunc voluat miss conse viventa amet vestibulum.</p>
<div class="flex flex-wrap my-4">
<div class="w-[50%] flex"><i class="bi bi-clock text-color4"></i><p class="text-color6 ms-2">10 Days</p></div>
<div class="w-[50%] flex"><i class="bi bi-geo-alt text-color4"></i><p class="text-color6 ms-2">greece</p></div>
<div class="w-[50%] flex"><i class="bi bi-person text-color4"></i></i><p class="text-color6 ms-2">12+</p></div>
<div class="w-[50%] flex"><i class="bi bi-emoji-smile text-color4"></i></i><p class="text-color6 ms-2">9.3 Superb</p></div>
</div>
<a href="" class="underline decoration-color1 text-color6 flex mb-2">Tour details</a>
</div>
<img src="img/greece1.jpg" alt="" class="w-[100%] h-[100%] object-cover brightness-75 absolute">
<p class="absolute uppercase text-white bg-color3 px-4 py-1 right-[-15px] top-12 rotate-[-90deg] ">greece</p>
<figcaption class="absolute text-white bottom-8 right-10 fig">
<p class="capitalize font-secondary text-3xl">greece tours</p>
<p class="text-right">$500 / per persons</p>
</figcaption>
</figure>
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative photo transition-all duration-1000 ">
<div class="w-[100%] h-[100%] bottom-photo absolute bg-white flex flex-col justify-center px-5">
<p class="text-3xl text-color3 capitalize font-secondary">Canada tour</p>
<p class="text-color1 mb-4">$300 / per persons</p>
<p class="text-color6">Travel non lorem ac erat susce bibendum nulla facilisi. Sedeuter nunc voluat miss conse viventa amet vestibulum.</p>
<div class="flex flex-wrap my-4">
<div class="w-[50%] flex"><i class="bi bi-clock text-color4"></i><p class="text-color6 ms-2">7 Days</p></div>
<div class="w-[50%] flex"><i class="bi bi-geo-alt text-color4"></i><p class="text-color6 ms-2">canada</p></div>
<div class="w-[50%] flex"><i class="bi bi-person text-color4"></i></i><p class="text-color6 ms-2">10+</p></div>
<div class="w-[50%] flex"><i class="bi bi-emoji-smile text-color4"></i></i><p class="text-color6 ms-2"> 9.3 Superb</p></div>
</div>
<a href="" class="underline decoration-color1 text-color6 flex mb-2">Tour details</a>
</div>
<img src="img/canada1.jpg" alt="" class="w-[100%] h-[100%] object-cover brightness-75 absolute">
<p class="absolute uppercase text-white bg-color3 px-4 py-1 right-[-15px] top-12 rotate-[-90deg] ">canada</p>
<figcaption class="absolute text-white bottom-8 right-10 fig">
<p class="capitalize font-secondary text-3xl">canada tours</p>
<p class="text-right">$300 / per persons</p>
</figcaption>
</figure>
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative photo transition-all duration-1000 ">
<div class="w-[100%] h-[100%] bottom-photo absolute bg-white flex flex-col justify-center px-5">
<p class="text-3xl text-color3 capitalize font-secondary">dubai</p>
<p class="text-color1 mb-4">$200 / per persons</p>
<p class="text-color6">Travel non lorem ac erat susce bibendum nulla facilisi. Sedeuter nunc voluat miss conse viventa amet vestibulum.</p>
<div class="flex flex-wrap my-4">
<div class="w-[50%] flex"><i class="bi bi-clock text-color4"></i><p class="text-color6 ms-2">7 Days</p></div>
<div class="w-[50%] flex"><i class="bi bi-geo-alt text-color4"></i><p class="text-color6 ms-2">dubai</p></div>
<div class="w-[50%] flex"><i class="bi bi-person text-color4"></i></i><p class="text-color6 ms-2">10+</p></div>
<div class="w-[50%] flex"><i class="bi bi-emoji-smile text-color4"></i></i><p class="text-color6 ms-2">9.8 Superb</p></div>
</div>
<a href="" class="underline decoration-color1 text-color6 flex mb-2">Tour details</a>
</div>
<img src="img/44-1.jpg" alt="" class="w-[100%] h-[100%] object-cover brightness-75 absolute">
<p class="absolute uppercase text-white bg-color3 px-4 py-1 right-[-15px] top-12 rotate-[-90deg] ">dubai</p>
<figcaption class="absolute text-white bottom-8 right-10 fig">
<p class="capitalize font-secondary text-3xl">dubai</p>
<p class="text-right">$200 / per persons</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="w-full bg-sea py-32 relative bg-cover bg-fixed flex justify-center after:content-[''] after:absolute after:w-[100%] after:h-[100%] after:bg-black after:bg-opacity-50 after:top-0">
<div class="w-full container 2xl:px-36 flex flex-wrap relative z-10 justify-center md:justify-between">
<div class="w-full md:w-[20%] my-5 ">
<figure class="flex flex-col items-center group">
<div class="bg-white bg-opacity-50 rounded-[50%] p-5 flex items-center relative overflow-hidden outline outline-8 outline-offset-8 out "><i class="bi bi-airplane text-5xl text-white absolute ms-[-100%] group-hover:ms-[0%] transition-all duration-300"></i><i class="bi bi-airplane text-5xl text-white group-hover:ms-[200%] transition-all duration-300"></i></div>
<figcaption class="text-center text-white font-secondary mt-10"><p class="text-3xl">600</p><p class="text-xl">Flight Booking</p></figcaption>
</figure>
</div>
<div class="w-full md:w-[20%] my-5">
<figure class="flex flex-col items-center group">
<div class="bg-white bg-opacity-50 rounded-[50%] p-5 flex items-center relative overflow-hidden outline outline-8 outline-offset-8 out "><i class="bi bi-house-heart text-5xl text-white absolute ms-[-100%] group-hover:ms-[0%] transition-all duration-300"></i><i class="bi bi-house-heart text-5xl text-white group-hover:ms-[200%] transition-all duration-300"></i></div>
<figcaption class="text-center text-white font-secondary mt-10"><p class="text-3xl">250</p><p class="text-xl">Amazing Tour</p></figcaption>
</figure>
</div>
<div class="w-full md:w-[20%] my-5">
<figure class="flex flex-col items-center group">
<div class="bg-white bg-opacity-50 rounded-[50%] p-5 flex items-center relative overflow-hidden outline outline-8 outline-offset-8 out "><i class="bi bi-rocket text-5xl text-white absolute ms-[-100%] group-hover:ms-[0%] transition-all duration-300"></i><i class="bi bi-rocket text-5xl text-white group-hover:ms-[200%] transition-all duration-300"></i></div>
<figcaption class="text-center text-white font-secondary mt-10"><p class="text-3xl">100</p><p class="text-xl">Cruises Booking</p></figcaption>
</figure>
</div>
<div class="w-full md:w-[20%] my-5">
<figure class="flex flex-col items-center group">
<div class="bg-white bg-opacity-50 rounded-[50%] p-5 flex items-center relative overflow-hidden outline outline-8 outline-offset-8 out "><i class="bi bi-postage-heart text-5xl text-white absolute ms-[-100%] group-hover:ms-[0%] transition-all duration-300"></i><i class="bi bi-postage-heart text-5xl text-white group-hover:ms-[200%] transition-all duration-300"></i></div>
<figcaption class="text-center text-white font-secondary mt-10"><p class="text-3xl">100</p><p class="text-xl">Hotel Booking</p></figcaption>
</figure>
</div>
</div>
</section>
<section class="w-full flex justify-center bg-color7 lg:h-[800px]">
<div class="w-full container 2xl:px-36 py-16 bg-color7 ">
<p class="text-color4 uppercase px-5">TOP DESTINATION</p>
<p class="text-3xl sm:text-5xl font-secondary text-color1 px-5">Travel <span class=" text-color3">Countries</span></p>
<div class="w-full flex lg:relative py-10 flex-wrap lg:px-3 xl:px-0 px-6">
<figure class="w-full lg:w-[70%] lg:absolute">
<img src="img/2.jpg" alt="" class="w-[100%]">
</figure>
<div class="w-full lg:w-[50%] lg:absolute lg:h-[400px] bg-map bg-no-repeat bg-center z-10 lg:right-0 xl:top-[170%] md:top-20 px-10 py-16 bg-white" >
<p class="uppercase text-color1">Travel Countries</p>
<p class="uppercase text-3xl font-secondary text-color3 pb-4">ITALy, Europe</p>
<p class="text-color6">You can choose any country with good tourism. Agency elementum sesue the aucan vestibulum aliquam justo in sapien rutrum volutpat. Donec in quis the pellentesque velit. Donec id velit ac arcu posuere blane.</p>
<div class=" flex flex-wrap py-4 ">
<div class="flex w-[33%]"><i class="bi bi-geo-alt text-color1"></i><p class="text-color6">Roma</p></div>
<div class="flex w-[33%]"><i class="bi bi-geo-alt text-color1"></i><p class="text-color6">Italy</p></div>
<div class="flex w-[33%]"><i class="bi bi-geo-alt text-color1"></i><p class="text-color6">Venise</p></div>
<div class="flex w-[33%]"><i class="bi bi-geo-alt text-color1"></i><p class="text-color6">Milano</p></div>
<div class="flex w-[33%]"><i class="bi bi-geo-alt text-color1"></i><p class="text-color6">Perugia</p></div>
<div class="flex w-[33%]"><i class="bi bi-geo-alt text-color1"></i><p class="text-color6">Parma</p></div>
</div>
<a href="" class="capitalize flex py-4 relative text-color1 before:content-[''] before:h-[1px] before:absolute before:w-[100%] before:bg-color6 before:bg-opacity-50 before:top-0"><p>view all places</p><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<section class="w-full bg-boat bg-cover bg-bottom bg-no-repeat h-[50vh] flex justify-center bg-color2 bg-blend-multiply bg-opacity-50">
<div class="w-full container flex justify-center items-center flex-col">
<p class="text-white font-secondary text-3xl 2xl:text-6xl">Costa Victoria Cochin</p>
<div class="flex mt-5 gap-5">
<div class="flex items-center"><i class="bi bi-geo-alt text-white text-2xl me-2"></i><p class="text-white">Maldives</p></div>
<div class="flex items-center"><i class="bi bi-clock text-white text-2xl me-2"></i><p class="text-white"> 4 Days + 3 Nights </p></div>
</div>
</div>
</section>
<section class="w-full flex justify-center bg-color7 py-8 ">
<div class="w-full container 2xl:px-36">
<div>
<p class="text-color4 uppercase px-5">MOST POPULAR</p>
<p class="text-5xl font-secondary text-color3 px-5">Popular <span class="text-color1">Destination</span></p>
<div class="flex flex-wrap justify-center xl:justify-between gap-10 px-6 xl:px-0 py-8 lg:px-3 ">
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative transition-all duration-1000 overflow-hidden group ">
<img src="img/canada1-1.jpeg" alt="" class="w-[100%] h-[100%] object-cover group-hover:brightness-75 group-hover:scale-[1.2] absolute transition-all duration-1000">
<p class="absolute uppercase text-white bg-color1 px-4 py-1 right-1 top-12 rotate-[-90deg] ">2 Tours</p>
<figcaption class="absolute text-white bottom-[20px] left-5 group-hover:bottom-[50px] transition-all duration-700 w-full ">
<div class="flex after:contetn-[''] after:h-[1px] after:bg-op-50 after:w-[20%] after:bg-white after:absolute after:bottom-[-8px] group-hover:after:w-[90%] after:transition-all after:duration-1000" ><i class="bi bi-geo-alt text-2xl text-white me-2"></i> <p class="capitalize font-secondary text-3xl">Canada</p></div>
<div class="flex justify-between absolute mt-5 w-full ">
<p>2 Tours Package</p>
<a href="" class="flex me-9 " >Explore<i class="bi bi-arrow-right"></i></a>
</div>
</figcaption>
</figure>
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative transition-all duration-1000 overflow-hidden group ">
<img src="img/maldives1-1.jpeg" alt="" class="w-[100%] h-[100%] object-cover group-hover:brightness-75 group-hover:scale-[1.2] absolute transition-all duration-1000">
<p class="absolute uppercase text-white bg-color1 px-4 py-1 right-1 top-12 rotate-[-90deg] ">2 Tours</p>
<figcaption class="absolute text-white bottom-[20px] left-5 group-hover:bottom-[50px] transition-all duration-700 w-full ">
<div class="flex after:contetn-[''] after:h-[1px] after:bg-op-50 after:w-[20%] after:bg-white after:absolute after:bottom-[-8px] group-hover:after:w-[90%] after:transition-all after:duration-1000" ><i class="bi bi-geo-alt text-2xl text-white me-2"></i> <p class="capitalize font-secondary text-3xl">Maldives</p></div>
<div class="flex justify-between absolute mt-5 w-full ">
<p>2 Tours Package</p>
<a href="" class="flex me-9 " >Explore<i class="bi bi-arrow-right"></i></a>
</div>
</figcaption>
</figure>
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative transition-all duration-1000 overflow-hidden group ">
<img src="img/italy1.jpeg" alt="" class="w-[100%] h-[100%] object-cover group-hover:brightness-75 group-hover:scale-[1.2] absolute transition-all duration-1000">
<p class="absolute uppercase text-white bg-color1 px-4 py-1 right-1 top-12 rotate-[-90deg] ">6 Tours</p>
<figcaption class="absolute text-white bottom-[20px] left-5 group-hover:bottom-[50px] transition-all duration-700 w-full ">
<div class="flex after:contetn-[''] after:h-[1px] after:bg-op-50 after:w-[20%] after:bg-white after:absolute after:bottom-[-8px] group-hover:after:w-[90%] after:transition-all after:duration-1000" ><i class="bi bi-geo-alt text-2xl text-white me-2"></i> <p class="capitalize font-secondary text-3xl">Italy</p></div>
<div class="flex justify-between absolute mt-5 w-full ">
<p>6 Tours Package</p>
<a href="" class="flex me-9 " >Explore<i class="bi bi-arrow-right"></i></a>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="w-full flex justify-center bg-color3 py-8 h-auto">
<div class="w-full container 2xl:px-36 h-auto">
<div>
<p class="text-color4 uppercase px-5">TRAVEL BLOG</p>
<p class="text-5xl font-secondary text-color4 px-5">Travel<span class="text-white"> Experience</span></p>
<div class="flex flex-wrap justify-center xl:justify-between gap-10 px-6 xl:px-0 py-8 lg:px-3 ">
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative transition-all duration-1000 group mb-20 ">
<div class="w-[100%] h-[100%] overflow-hidden group transition-all duration-1000 relative"> <img src="img/22.jpeg" alt="" class="w-[100%] h-[100%] object-cover group-hover:brightness-75 group-hover:scale-[1.2] absolute transition-all duration-1000"></div>
<div class="absolute uppercase text-white bg-color1 px-2 left-3 top-12 flex flex-col items-center "><p>Aug</p><p class="font-bold">02</p></div>
<figcaption class=" absolute h-[150px] w-[85%] bg-white bottom-[-80px] left-[8%] flex flex-col justify-center px-8 group-hover:bottom-10 transition-all duration-1000 ">
<p class="uppercase text-color4">Tours</p>
<p class="capitalize text-color3 font-secondary text-2xl">most popular yacht charter routes </p>
</figcaption>
</figure>
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative transition-all duration-1000 group mb-20 ">
<div class="w-[100%] h-[100%] overflow-hidden group transition-all duration-1000 relative"> <img src="img/11.jpeg" alt="" class="w-[100%] h-[100%] object-cover group-hover:brightness-75 group-hover:scale-[1.2] absolute transition-all duration-1000"></div>
<div class="absolute uppercase text-white bg-color1 px-2 left-3 top-12 flex flex-col items-center "><p>Aug</p><p class="font-bold">07</p></div>
<figcaption class=" absolute h-[150px] w-[85%] bg-white bottom-[-80px] left-[8%] flex flex-col justify-center px-3 group-hover:bottom-10 transition-all duration-1000 ">
<p class="uppercase text-color4">travel</p>
<p class="capitalize text-color3 font-secondary text-2xl">practical information for travelling to egypt</p>
</figcaption>
</figure>
<figure class="w-full md:w-[45%] xl:w-[30%] h-[450px] relative transition-all duration-1000 group mb-20 ">
<div class="w-[100%] h-[100%] overflow-hidden group transition-all duration-1000 relative"> <img src="img/18-1.jpeg" alt="" class="w-[100%] h-[100%] object-cover group-hover:brightness-75 group-hover:scale-[1.2] absolute transition-all duration-1000"></div>
<div class="absolute uppercase text-white bg-color1 px-2 left-3 top-12 flex flex-col items-center "><p>Aug</p><p class="font-bold">02</p></div>
<figcaption class=" absolute h-[150px] w-[85%] bg-white bottom-[-80px] left-[8%] flex flex-col justify-center px-5 group-hover:bottom-10 transition-all duration-1000 ">
<p class="uppercase text-color4">Destinations</p>
<p class="capitalize text-color3 font-secondary text-2xl">tips towards a flawless honeymoon </p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<section class="w-full flex justify-center bg-color7 overflow-hidden ">
<div class="w-full container flex whitespace-nowrap overflow-hidden group ">
<div class="flex logos-slide animate-anime w-full flex-wrap whitespace-nowrap group-hover:pause ">
<figure class="w-[25%] "><img src="img/1.png" alt="" w-[100%]></figure>
<figure class="w-[25%] "><img src="img/2.png" alt="" w-[100%]></figure>
<figure class="w-[25%] "><img src="img/3.png" alt="" w-[100%]></figure>
<figure class="w-[25%] "><img src="img/4.png" alt="" w-[100%]></figure>
</div>
<div class="flex logos-slide w-full flex-wrap whitespace-nowrap ms-[-200%] animate-anime group-hover:pause ">
<figure class="w-[25%] "><img src="img/1.png" alt="" w-[100%]></figure>
<figure class="w-[25%] "><img src="img/2.png" alt="" w-[100%]></figure>
<figure class="w-[25%] "><img src="img/3.png" alt="" w-[100%]></figure>
<figure class="w-[25%] "><img src="img/4.png" alt="" w-[100%]></figure>
</div>
</div>
</section>
<section class="w-full flex justify-center h-auto">
<div class="w-full container h-auto flex flex-wrap 2xl:px-36 py-16 justify-between" >
<div class="w-[100%] lg:w-[50%] bg-color px-5 py-5">
<h2 class="text-3xl font-bold">Travel Agency Inc.</h2>
<p class="my-5">Travel duru nisl quam nestibulum ac quam nec odio elementum sceisue the aucan ligula.Orci varius natoque penatibus et magins dis parturient monte nascete ridiculus mun nellentesque habitant morbine.</p>
<div class="flex items-center w-full">
<i class="bi bi-telephone-outbound me-4 text-color4 text-xl"></i>
<div>
<p>Phone</p>
<p class="text-color4 text-xl">09188085590</p>
</div>
</div>
<div class="flex items-center w-full my-5">
<i class="bi bi-envelope-paper me-4 text-color4 text-xl"></i>
<div>
<p>e-Mail Address</p>
<p class="text-color4 text-xl">[email protected]</p>
</div>
</div>
<div class="flex items-center w-full">
<i class="bi bi-geo-alt me-4 text-color4 text-xl"></i>
<div>
<p>Location</p>
<p>Tehran , Iran</p>
</div>
</div>
</div>
<div class="w-full lg:w-[50%] bg-color px-5 py-5">
<form action="" class="w-full text-gray-100 ">
<p class="bg-color1 w-full text-center text-white py-5 text-xl font-bold">Get in touch</p>
<div class="px-5 py-8 bg-color7">
<div class="flex justify-between mx-5 ">
<input type="text" placeholder="Your Name *" required class="w-[50%] py-2 px-4 me-3 focus:outline-none ">
<input type="email" placeholder="Your Email *" required class="w-[50%] py-2 px-4 focus:outline-none">
</div>
<input type="text" placeholder="Subject *" class="w-[100%] py-2 my-5 px-4 focus:outline-none" required><br>
<textarea name="" id="" placeholder="Message *" required class="w-[100%] h-[200px] py-4 px-4 focus:outline-none"></textarea>
<button class="bg-color1 text-white py-2 px-4 my-5">Send Message</button>
</div>
</form>
</div>
</div>
</section>
<section class="w-full flex justify-center h-auto bg-color3">
<footer class="w-full container h-auto flex flex-col 2xl:px-36 ">
<div class="flex justify-center border items-center boder-1 border-color5 my-10 flex-wrap mx-6 ">
<div class="w-full lg:w-[30%] flex items-center py-2 lg:border-r-2 lg:border-r-color5 my-5 ps-8 lg:ps-0" >
<i class="bi bi-telephone-outbound text-4xl me-4 text-white bg-color1 p-3"></i>
<div class="w-full text-white"><p class="font-secondary">Call me</p><p>09188085590</p></div>
</div>
<div class="w-full lg:w-[35%] flex items-center py-2 lg:border-r-2 lg:border-r-color5 my-5 ps-8" >
<i class="bi-envelope-paper text-4xl me-4 text-white bg-color1 p-3"></i>
<div class="w-full text-white"><p class="font-secondary">Write to me</p><p>[email protected]</p></div>
</div>
<div class="w-full lg:w-[30%] flex items-center py-2 my-5 ps-8" >
<i class="bi bi-map text-4xl me-4 text-white bg-color1 p-3 "></i>
<div class="w-full text-white"><p class="font-secondary">Address</p><p>Tehran , Iran</p></div>
</div>
</div>
<div class="flex justify-between my-10 flex-wrap ">
<div class="w-full md:w-[30%] flex flex-col py-2 my-5 px-6 " >
<figure class="w-[80%]">
<img src="img/logo-light.png" alt="" class="w-[100%]">
</figure>
<p class="text-color6 my-5">Quisque imperdiet sapien porttito the bibendum sellentesque the commodo erat acar accumsa lobortis, enim diam the nesuen.</p>
<ul class="flex ">
<li class="me-5"><a href=""><i class="bi bi-instagram text-white bg-color1 p-3 rounded-[50%]"></i></a></li>
<li class="me-5"><a href=""><i class="bi bi-github text-white bg-color1 p-3 rounded-[50%]"></i></a></li>
<li class="me-5"><a href=""><i class="bi bi-linkedin text-white bg-color1 p-3 rounded-[50%]"></i></a></li>
</ul>
</div>
<div class="w-full md:w-[30%] flex flex-col py-2 my-5 md:ps-20 px-6 " >
<p class="font-secondary text-white text-xl xl:text-2xl">Quick Links</p>
<ul class="mt-7 px-6">
<li class="my-2 list-disc marker:text-color1"><a href="" class="text-color6">About</a></li>
<li class="list-disc marker:text-color1"><a href="" class="text-color6">Tours</a></li>
<li class="my-2 list-disc marker:text-color1"><a href="" class="text-color6">Blog</a></li>
</ul>
</div>
<div class="w-full md:w-[28%] flex flex-col py-2 my-5 px-6 md:px-0 " >
<p class="font-secondary text-2xl text-white ">Subscribe</p>
<p class="text-color6 mt-5">Sign up for our monthly blogletter to stay informed about travel and tours</p>
<form action="" class="mt-5 flex w-full flex-wrap"><input type="email" placeholder="Email Address" class="px-2 py-5">
<a href="" class="text-white bg-color4 py-5 px-3 flex mt-0 md:mt-2 lg:mt-0">Send</a></form>
</div>
</div>
<p class="text-stone-300 text-left py-5 text-[14px] relative before:content-[''] before:h-[3px] before:w-[100%] before:bg-stone-400 before:absolute before:top-0 before:bg-opacity-50">©2023 Ladan Hazrati. All rights reserved.</p>
</footer>
</section>
</main>
</body>
<script src="js/master.js"></script>
</html>