-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
478 lines (467 loc) · 22.3 KB
/
index.html
File metadata and controls
478 lines (467 loc) · 22.3 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wanderlust Travels - Explore the World</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar" id="navbar">
<div class="container">
<a href="#" class="logo">
<i class="fas fa-plane-departure"></i>
Wanderlust
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#destinations">Destinations</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-overlay"></div>
<div class="hero-content">
<h1 class="hero-title">Discover Your Next Adventure</h1>
<p class="hero-subtitle">Explore breathtaking destinations, create unforgettable memories, and experience the world like never before.</p>
<div class="hero-buttons">
<a href="#destinations" class="btn btn-primary">Explore Destinations</a>
<a href="#contact" class="btn btn-secondary">Book Now</a>
</div>
</div>
<div class="scroll-indicator">
<i class="fas fa-chevron-down"></i>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="container">
<div class="stats-grid">
<div class="stat-item">
<i class="fas fa-users"></i>
<h3 class="counter" data-target="50000">0</h3>
<p>Happy Travelers</p>
</div>
<div class="stat-item">
<i class="fas fa-globe-americas"></i>
<h3 class="counter" data-target="120">0</h3>
<p>Destinations</p>
</div>
<div class="stat-item">
<i class="fas fa-award"></i>
<h3 class="counter" data-target="15">0</h3>
<p>Years Experience</p>
</div>
<div class="stat-item">
<i class="fas fa-star"></i>
<h3 class="counter" data-target="4.9">0</h3>
<p>Average Rating</p>
</div>
</div>
</div>
</section>
<!-- Destinations Section -->
<section id="destinations" class="destinations">
<div class="container">
<div class="section-header">
<h2>Popular Destinations</h2>
<p>Handpicked locations for your next unforgettable journey</p>
</div>
<div class="destinations-grid">
<div class="destination-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=600&h=400&fit=crop" alt="Kyoto, Japan">
<div class="card-badge">Popular</div>
</div>
<div class="card-content">
<h3>Kyoto, Japan</h3>
<p>Experience ancient temples, traditional tea ceremonies, and stunning cherry blossoms.</p>
<div class="card-footer">
<span class="price">$1,299</span>
<span class="rating"><i class="fas fa-star"></i> 4.9</span>
</div>
</div>
</div>
<div class="destination-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1533105079780-92b9be482077?w=600&h=400&fit=crop" alt="Santorini, Greece">
</div>
<div class="card-content">
<h3>Santorini, Greece</h3>
<p>White-washed buildings, crystal-clear waters, and breathtaking Mediterranean sunsets.</p>
<div class="card-footer">
<span class="price">$1,599</span>
<span class="rating"><i class="fas fa-star"></i> 4.8</span>
</div>
</div>
</div>
<div class="destination-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1518684079-3c830dcef090?w=600&h=400&fit=crop" alt="Dubai, UAE">
<div class="card-badge">Trending</div>
</div>
<div class="card-content">
<h3>Dubai, UAE</h3>
<p>Luxury shopping, ultramodern architecture, and vibrant nightlife in the desert oasis.</p>
<div class="card-footer">
<span class="price">$1,899</span>
<span class="rating"><i class="fas fa-star"></i> 4.7</span>
</div>
</div>
</div>
<div class="destination-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?w=600&h=400&fit=crop" alt="Bali, Indonesia">
</div>
<div class="card-content">
<h3>Bali, Indonesia</h3>
<p>Tropical paradise with lush rice terraces, sacred temples, and pristine beaches.</p>
<div class="card-footer">
<span class="price">$999</span>
<span class="rating"><i class="fas fa-star"></i> 4.8</span>
</div>
</div>
</div>
<div class="destination-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?w=600&h=400&fit=crop" alt="New York, USA">
</div>
<div class="card-content">
<h3>New York, USA</h3>
<p>The city that never sleeps. Iconic landmarks, Broadway shows, and world-class dining.</p>
<div class="card-footer">
<span class="price">$1,499</span>
<span class="rating"><i class="fas fa-star"></i> 4.6</span>
</div>
</div>
</div>
<div class="destination-card">
<div class="card-image">
<img src="https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?w=600&h=400&fit=crop" alt="Venice, Italy">
<div class="card-badge">Romantic</div>
</div>
<div class="card-content">
<h3>Venice, Italy</h3>
<p>Romantic gondola rides through historic canals and stunning Renaissance architecture.</p>
<div class="card-footer">
<span class="price">$1,399</span>
<span class="rating"><i class="fas fa-star"></i> 4.9</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services">
<div class="container">
<div class="section-header">
<h2>Our Services</h2>
<p>We provide everything you need for the perfect trip</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-plane"></i>
</div>
<h3>Flight Booking</h3>
<p>Best deals on international and domestic flights with 24/7 support.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-hotel"></i>
</div>
<h3>Hotel Reservations</h3>
<p>Handpicked hotels from budget-friendly to luxury resorts worldwide.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-route"></i>
</div>
<h3>Custom Tours</h3>
<p>Personalized itineraries tailored to your preferences and schedule.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-passport"></i>
</div>
<h3>Visa Assistance</h3>
<p>Expert guidance for visa applications and travel documentation.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Travel Insurance</h3>
<p>Comprehensive coverage for medical emergencies and trip cancellations.</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-headset"></i>
</div>
<h3>24/7 Support</h3>
<p>Round-the-clock assistance wherever you are in the world.</p>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="gallery">
<div class="container">
<div class="section-header">
<h2>Travel Gallery</h2>
<p>Moments captured from around the globe</p>
</div>
<div class="gallery-grid">
<div class="gallery-item large">
<img src="https://images.unsplash.com/photo-1504609773096-104ff1051045?w=800&h=600&fit=crop" alt="Mountain Adventure">
<div class="gallery-overlay">
<h4>Mountain Adventure</h4>
<p>Swiss Alps</p>
</div>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=300&fit=crop" alt="Beach Paradise">
<div class="gallery-overlay">
<h4>Beach Paradise</h4>
<p>Maldives</p>
</div>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1548013146-72479768bada?w=400&h=300&fit=crop" alt="Historical Sites">
<div class="gallery-overlay">
<h4>Historical Sites</h4>
<p>India</p>
</div>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=400&h=300&fit=crop" alt="Nature Escape">
<div class="gallery-overlay">
<h4>Nature Escape</h4>
<p>Canada</p>
</div>
</div>
<div class="gallery-item">
<img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?w=400&h=300&fit=crop" alt="Luxury Resort">
<div class="gallery-overlay">
<h4>Luxury Resort</h4>
<p>Thailand</p>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="about-grid">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=600&h=500&fit=crop" alt="About Wanderlust Travels">
</div>
<div class="about-content">
<h2>About Wanderlust Travels</h2>
<p>Founded in 2009, Wanderlust Travels has been helping adventurers explore the world's most captivating destinations. We believe travel is the only thing you buy that makes you richer.</p>
<p>Our team of experienced travel consultants crafts personalized experiences that go beyond typical tourism. From hidden gems to iconic landmarks, we ensure every journey is unique.</p>
<div class="about-features">
<div class="feature">
<i class="fas fa-check-circle"></i>
<span>Expert Local Guides</span>
</div>
<div class="feature">
<i class="fas fa-check-circle"></i>
<span>Best Price Guarantee</span>
</div>
<div class="feature">
<i class="fas fa-check-circle"></i>
<span>Flexible Booking</span>
</div>
<div class="feature">
<i class="fas fa-check-circle"></i>
<span>Sustainable Tourism</span>
</div>
</div>
<a href="#contact" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials">
<div class="container">
<div class="section-header">
<h2>What Travelers Say</h2>
<p>Real stories from real adventurers</p>
</div>
<div class="testimonials-slider">
<div class="testimonial-card active">
<div class="testimonial-text">
<i class="fas fa-quote-left"></i>
<p>The trip to Kyoto was absolutely magical. Every detail was perfectly planned, from the tea ceremony to the temple visits. Best travel experience ever!</p>
</div>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
<div>
<h4>Sarah Johnson</h4>
<span>Travel Blogger</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
<i class="fas fa-quote-left"></i>
<p>Professional service from start to finish. The custom tour of Greece exceeded all expectations. Already booking our next adventure with Wanderlust!</p>
</div>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
<div>
<h4>Michael Chen</h4>
<span>Business Executive</span>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-text">
<i class="fas fa-quote-left"></i>
<p>Amazing value for money. The visa assistance and 24/7 support gave us peace of mind throughout our family vacation to Dubai.</p>
</div>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma Williams">
<div>
<h4>Emma Williams</h4>
<span>Family Traveler</span>
</div>
</div>
</div>
<div class="testimonial-nav">
<button class="prev-btn" title="Previous testimonial"><i class="fas fa-chevron-left"></i></button>
<button class="next-btn" title="Next testimonial"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<div class="section-header">
<h2>Contact Us</h2>
<p>Ready to start your adventure? Get in touch with us</p>
</div>
<div class="contact-grid">
<div class="contact-info">
<div class="info-card">
<i class="fas fa-map-marker-alt"></i>
<h3>Visit Us</h3>
<p>123 Adventure Street<br>New York, NY 10001</p>
</div>
<div class="info-card">
<i class="fas fa-phone"></i>
<h3>Call Us</h3>
<p>+1 (555) 123-4567<br>Mon - Sat: 9AM - 7PM</p>
</div>
<div class="info-card">
<i class="fas fa-envelope"></i>
<h3>Email Us</h3>
<p>info@wanderlust.com<br>bookings@wanderlust.com</p>
</div>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="contact-form-wrapper">
<form class="contact-form" id="contactForm">
<div class="form-group">
<input type="text" id="name" placeholder="Your Name" required>
</div>
<div class="form-group">
<input type="email" id="email" placeholder="Your Email" required>
</div>
<div class="form-group">
<input type="tel" id="phone" placeholder="Phone Number">
</div>
<div class="form-group">
<select id="destination" title="Select your travel destination">
<option value="">Select Destination</option>
<option value="kyoto">Kyoto, Japan</option>
<option value="santorini">Santorini, Greece</option>
<option value="dubai">Dubai, UAE</option>
<option value="bali">Bali, Indonesia</option>
<option value="newyork">New York, USA</option>
<option value="venice">Venice, Italy</option>
</select>
</div>
<div class="form-group">
<textarea id="message" rows="5" placeholder="Your Message" required></textarea>
</div>
<button type="submit" class="btn btn-primary btn-full">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="logo">
<i class="fas fa-plane-departure"></i>
Wanderlust
</a>
<p>Your trusted partner in creating unforgettable travel experiences around the world.</p>
</div>
<div class="footer-links">
<h4>Quick Links</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#destinations">Destinations</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<div class="footer-links">
<h4>Destinations</h4>
<ul>
<li><a href="#">Asia</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Americas</a></li>
<li><a href="#">Africa</a></li>
</ul>
</div>
<div class="footer-links">
<h4>Support</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Help Center</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Wanderlust Travels. All rights reserved. | Made with <i class="fas fa-heart"></i> for travelers</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button class="back-to-top" id="backToTop" title="Back to top">
<i class="fas fa-arrow-up"></i>
</button>
<script src="js/main.js"></script>
</body>
</html>