Premium Tour And Travel
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Global Explorer | Premium Travel Experiences</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet"> </head> <body> <!-- Header --> <header> <a href="#" class="logo" onclick="showPage('home')"><i class="fas fa-globe-americas"></i>GlobalExplorer</a> <nav> <ul id="nav-menu"> <li><a href="#" class="nav-link active" onclick="showPage('home')">Home</a></li> <li><a href="#" class="nav-link" onclick="showPage('destinations')">Destinations</a></li> <li><a href="#" class="nav-link" onclick="showPage('packages')">Packages</a></li> <li><a href="#" class="nav-link" onclick="showPage('contact')">Contact</a></li> </ul> </nav> <div class="hamburger" id="hamburger"> <i class="fas fa-bars"></i> </div> </header> <!-- Home Page --> <div id="home" class="page-container active"> <section class="hero"> <div class="hero-content"> <h1>Discover the World's Beauty</h1> <p>Experience unforgettable journeys with our expertly crafted tours. From tropical beaches to majestic mountains, we'll take you to the most breathtaking destinations on Earth.</p> <div class="btn-container"> <a href="#" class="btn" onclick="showPage('destinations')">Explore Destinations</a> <a href="#" class="btn btn-accent" onclick="showPage('packages')">View Packages</a> </div> </div> </section> <section class="section destinations"> <h2 class="section-title">Popular Destinations</h2> <p class="section-subtitle">Explore our most sought-after travel destinations that offer unique experiences and unforgettable memories.</p> <div class="destination-grid"> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1537996194471-e657df975ab4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80" alt="Bali" class="destination-img"> <div class="destination-content"> <h3>Bali, Indonesia</h3> <p>Experience the perfect blend of culture, beaches, and nightlife in the Island of Gods.</p> <span class="price">From $899</span> <a href="#" class="btn" onclick="showPage('packages')">View Details</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Santorini" class="destination-img"> <div class="destination-content"> <h3>Santorini, Greece</h3> <p>Enjoy stunning sunsets, white-washed buildings, and crystal-clear waters.</p> <span class="price">From $1,199</span> <a href="#" class="btn" onclick="showPage('packages')">View Details</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1537996194471-e657df975ab4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80" alt="Swiss Alps" class="destination-img"> <div class="destination-content"> <h3>Swiss Alps</h3> <p>Breathtaking mountain views, charming villages, and world-class skiing.</p> <span class="price">From $1,499</span> <a href="#" class="btn" onclick="showPage('packages')">View Details</a> </div> </div> </div> </section> <section class="section services"> <h2 class="section-title">Our Services</h2> <p class="section-subtitle fontwhite">We offer a wide range of services to make your travel experience seamless and memorable.</p> <div class="service-grid"> <div class="service-card"> <div class="service-icon"><i class="fas fa-hotel"></i></div> <h3>Luxury Accommodations</h3> <p>Stay at the finest hotels and resorts handpicked for their exceptional service and amenities.</p> </div> <div class="service-card"> <div class="service-icon"><i class="fas fa-route"></i></div> <h3>Guided Tours</h3> <p>Explore destinations with expert guides who know the hidden gems and local secrets.</p> </div> <div class="service-card"> <div class="service-icon"><i class="fas fa-plane"></i></div> <h3>Flight Booking</h3> <p>Get the best deals on flights with our extensive network of airline partners.</p> </div> <div class="service-card"> <div class="service-icon"><i class="fas fa-car"></i></div> <h3>Transportation</h3> <p>Enjoy comfortable and reliable transportation services throughout your journey.</p> </div> </div> </section> <section class="section testimonials"> <h2 class="section-title">What Our Travelers Say</h2> <p class="section-subtitle">Hear from our satisfied customers who have experienced our exceptional travel services.</p> <div class="testimonial-grid"> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">The Bali tour was absolutely incredible! Everything was well-organized, and our guide was knowledgeable and friendly. Will definitely book again!</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sarah Johnson" class="author-img"> <div class="author-details"> <h4>Sarah Johnson</h4> <p>Bali Adventure Tour</p> </div> </div> </div> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">Santorini exceeded all my expectations. The hotels were luxurious, the views were stunning, and the food was delicious. Perfect honeymoon!</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="author-img"> <div class="author-details"> <h4>Michael Chen</h4> <p>Santorini Getaway</p> </div> </div> </div> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">The Swiss Alps tour was the adventure of a lifetime. The hiking routes were well-planned, and the scenery was absolutely breathtaking.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Emma Rodriguez" class="author-img"> <div class="author-details"> <h4>Emma Rodriguez</h4> <p>Alpine Adventure</p> </div> </div> </div> </div> </section> <section class="section stats"> <h2 class="section-title fontwhite">Our Achievements</h2> <p class="section-subtitle fontwhite">Numbers that speak about our journey and success in the travel industry.</p> <div class="stats-grid"> <div class="stat-item"> <div class="stat-number" data-count="15">0</div> <div class="stat-text">Years of Experience</div> </div> <div class="stat-item"> <div class="stat-number" data-count="120">0</div> <div class="stat-text">Destinations</div> </div> <div class="stat-item"> <div class="stat-number" data-count="3500">0</div> <div class="stat-text">Happy Travelers</div> </div> <div class="stat-item"> <div class="stat-number" data-count="85">0</div> <div class="stat-text">Tour Guides</div> </div> </div> </section> <section class="section gallery"> <h2 class="section-title">Travel Gallery</h2> <p class="section-subtitle">A glimpse of the amazing experiences and destinations we offer to our travelers.</p> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1174&q=80" alt="Nature"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1501555088652-021faa106b9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1173&q=80" alt="Mountain"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1172&q=80" alt="Coast"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1505832018823-50331d70d237?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1208&q=80" alt="City"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </section> <section class="section team"> <h2 class="section-title">Meet Our Team</h2> <p class="section-subtitle">Our dedicated team of travel experts is committed to making your journey unforgettable.</p> <div class="team-grid"> <div class="team-member"> <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Robert Johnson</h3> <p>Founder & CEO</p> <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-linkedin-in"></i></a> </div> </div> </div> <div class="team-member"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Emily Williams</h3> <p>Travel Consultant</p> <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-linkedin-in"></i></a> </div> </div> </div> <div class="team-member"> <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Michael Brown</h3> <p>Tour Guide</p> <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-linkedin-in"></i></a> </div> </div> </div> </div> </section> <section class="newsletter"> <h2>Subscribe to Our Newsletter</h2> <p>Stay updated with our latest travel offers, destination guides, and exclusive deals.</p> <form class="newsletter-form"> <input type="email" placeholder="Enter your email address" required> <button type="submit">Subscribe</button> </form> </section> </div> <!-- Destinations Page --> <div id="destinations" class="page-container"> <section class="hero" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1174&q=80');"> <div class="hero-content"> <h1>Explore Amazing Destinations</h1> <p>From tropical beaches to historic cities, we have the perfect destination for your next adventure.</p> </div> </section> <section class="section destinations"> <h2 class="section-title">Our Top Destinations</h2> <p class="section-subtitle">Discover the world's most breathtaking places with our curated selection of destinations.</p> <div class="destination-grid"> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1596436889106-be35e843f974?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Paris" class="destination-img"> <div class="destination-content"> <h3>Paris, France</h3> <p>The city of lights offers iconic landmarks, world-class cuisine, and romantic ambiance.</p> <span class="price">From $1,099</span> <a href="#" class="btn" onclick="showPage('packages')">View Packages</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Maldives" class="destination-img"> <div class="destination-content"> <h3>Maldives</h3> <p>Pristine white sand beaches, crystal clear waters, and luxurious overwater bungalows.</p> <span class="price">From $1,899</span> <a href="#" class="btn" onclick="showPage('packages')">View Packages</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1505832018823-50331d70d237?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1208&q=80" alt="Tokyo" class="destination-img"> <div class="destination-content"> <h3>Tokyo, Japan</h3> <p>Experience the perfect blend of traditional culture and cutting-edge technology.</p> <span class="price">From $1,499</span> <a href="#" class="btn" onclick="showPage('packages')">View Packages</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1172&q=80" alt="Italy" class="destination-img"> <div class="destination-content"> <h3>Italian Riviera</h3> <p>Colorful coastal villages, delicious cuisine, and stunning Mediterranean views.</p> <span class="price">From $1,299</span> <a href="#" class="btn" onclick="showPage('packages')">View Packages</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1268&q=80" alt="Iceland" class="destination-img"> <div class="destination-content"> <h3>Iceland</h3> <p>Otherworldly landscapes, geothermal spas, and the spectacular Northern Lights.</p> <span class="price">From $1,599</span> <a href="#" class="btn" onclick="showPage('packages')">View Packages</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1505832018823-50331d70d237?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1208&q=80" alt="Egypt" class="destination-img"> <div class="destination-content"> <h3>Egypt</h3> <p>Discover ancient pyramids, cruise the Nile, and explore rich historical treasures.</p> <span class="price">From $1,199</span> <a href="#" class="btn" onclick="showPage('packages')">View Packages</a> </div> </div> </div> </section> <section class="section services"> <h2 class="section-title fontwhite">Destination Services</h2> <p class="section-subtitle fontwhite">We provide comprehensive services to ensure you have the best experience at every destination.</p> <div class="service-grid"> <div class="service-card"> <div class="service-icon"><i class="fas fa-map-marked-alt"></i></div> <h3>Custom Itineraries</h3> <p>Personalized travel plans tailored to your preferences and interests.</p> </div> <div class="service-card"> <div class="service-icon"><i class="fas fa-language"></i></div> <h3>Local Guides</h3> <p>Knowledgeable guides who speak the local language and know hidden gems.</p> </div> <div class="service-card"> <div class="service-icon"><i class="fas fa-utensils"></i></div> <h3>Culinary Experiences</h3> <p>Authentic dining experiences and food tours to taste local cuisine.</p> </div> <div class="service-card"> <div class="service-icon"><i class="fas fa-camera"></i></div> <h3>Photo Services</h3> <p>Professional photographers to capture your special moments.</p> </div> </div> </section> <section class="section testimonials"> <h2 class="section-title">Destination Reviews</h2> <p class="section-subtitle">See what travelers are saying about their experiences in our featured destinations.</p> <div class="testimonial-grid"> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">Paris was even more beautiful than I imagined. The guided tour of the Louvre was exceptional, and our hotel had a perfect view of the Eiffel Tower.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Jessica Miller" class="author-img"> <div class="author-details"> <h4>Jessica Miller</h4> <p>Paris Romance Package</p> </div> </div> </div> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">The Maldives was paradise on earth. The overwater bungalow was incredible, and the snorkeling experience was out of this world!</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/74.jpg" alt="David Wilson" class="author-img"> <div class="author-details"> <h4>David Wilson</h4> <p>Maldives Luxury Escape</p> </div> </div> </div> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">Japan exceeded all expectations. The perfect blend of ancient traditions and futuristic technology. Our guide made us feel like locals.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/29.jpg" alt="Sophia Garcia" class="author-img"> <div class="author-details"> <h4>Sophia Garcia</h4> <p>Japanese Cultural Journey</p> </div> </div> </div> </div> </section> <section class="section stats"> <h2 class="section-title">Destination Stats</h2> <p class="section-subtitle">Interesting facts and figures about our most popular travel destinations.</p> <div class="stats-grid"> <div class="stat-item"> <div class="stat-number" data-count="95">0</div> <div class="stat-text">Destination Countries</div> </div> <div class="stat-item"> <div class="stat-number" data-count="1200">0</div> <div class="stat-text">Five-Star Hotels</div> </div> <div class="stat-item"> <div class="stat-number" data-count="500">0</div> <div class="stat-text">Local Guides</div> </div> <div class="stat-item"> <div class="stat-number" data-count="24">0</div> <div class="stat-text">Support Hours</div> </div> </div> </section> <section class="section gallery"> <h2 class="section-title">Destination Gallery</h2> <p class="section-subtitle">Visual journey through the stunning locations we offer to our travelers.</p> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1539650116574-75c0c6d4d795?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" alt="Beach"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1580502304784-8985b7eb7260?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Europe"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mountain"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Safari"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </section> <section class="section team"> <h2 class="section-title">Destination Experts</h2> <p class="section-subtitle">Our team of destination specialists have extensive knowledge about the places they manage.</p> <div class="team-grid"> <div class="team-member"> <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Lisa Anderson</h3> <p>European Destinations Manager</p> <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-linkedin-in"></i></a> </div> </div> </div> <div class="team-member"> <img src="https://images.unsplash.com/photo-1567532939604-b6b5b0db1604?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>James Wilson</h3> <p>Asian Destinations Specialist</p> <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-linkedin-in"></i></a> </div> </div> </div> <div class="team-member"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Maria Garcia</h3> <p>Americas Destinations Coordinator</p> <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-linkedin-in"></i></a> </div> </div> </div> </div> </section> <section class="section faq"> <h2 class="section-title">Destination FAQs</h2> <p class="section-subtitle">Common questions travelers have about our destinations and services.</p> <div class="faq-container"> <div class="faq-item"> <div class="faq-question"> What's the best time to visit Europe? <i class="fas fa-chevron-down"></i> </div> <div class="faq-answer"> <p>The best time to visit Europe is during the spring (April to June) or fall (September to October) when the weather is mild, and tourist crowds are smaller. However, the ideal time depends on your specific destination and activities planned.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Do I need a visa for the destinations you offer? <i class="fas fa-chevron-down"></i> </div> <div class="faq-answer"> <p>Visa requirements vary by destination and your nationality. We provide visa assistance services and will guide you through the process for each country you plan to visit on your journey.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Are your destinations family-friendly? <i class="fas fa-chevron-down"></i> </div> <div class="faq-answer"> <p>Yes, we offer many family-friendly destinations with activities suitable for all ages. Our travel consultants can help you choose the perfect destination based on your family's interests and needs.</p> </div> </div> </div> </section> <section class="newsletter"> <h2>Get Destination Guides</h2> <p>Subscribe to receive detailed guides for your favorite destinations, with insider tips and recommendations.</p> <form class="newsletter-form"> <input type="email" placeholder="Enter your email address" required> <button type="submit">Subscribe</button> </form> </section> </div> <!-- Packages Page --> <div id="packages" class="page-container"> <section class="hero" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1478131143081-80f7f84ca84d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"> <div class="hero-content"> <h1>Tailored Travel Packages</h1> <p>We offer a variety of packages to suit every traveler's needs and budget.</p> </div> </section> <section class="section packages"> <h2 class="section-title">Our Travel Packages</h2> <p class="section-subtitle">Choose from our carefully curated packages designed for different travel styles and preferences.</p> <div class="package-tabs"> <button class="tab-btn active" onclick="showPackage('all')">All Packages</button> <button class="tab-btn" onclick="showPackage('adventure')">Adventure</button> <button class="tab-btn" onclick="showPackage('luxury')">Luxury</button> <button class="tab-btn" onclick="showPackage('cultural')">Cultural</button> <button class="tab-btn" onclick="showPackage('family')">Family</button> </div> <div class="package-content active" id="all-packages"> <div class="destination-grid"> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1580502304784-8985b7eb7260?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="European Tour" class="destination-img"> <div class="destination-content"> <h3>European Explorer</h3> <p>14-day tour through France, Italy, and Switzerland. Visit iconic landmarks and enjoy local cuisine.</p> <span class="price">$2,499 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1505832018823-50331d70d237?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1208&q=80" alt="Tropical Paradise" class="destination-img"> <div class="destination-content"> <h3>Tropical Paradise</h3> <p>7-day all-inclusive stay in the Maldives. Enjoy pristine beaches and luxury accommodations.</p> <span class="price">$1,899 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mountain Adventure" class="destination-img"> <div class="destination-content"> <h3>Alpine Adventure</h3> <p>10-day hiking and skiing adventure in the Swiss Alps. For outdoor enthusiasts.</p> <span class="price">$1,799 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Safari" class="destination-img"> <div class="destination-content"> <h3>African Safari</h3> <p>12-day wildlife adventure in Kenya and Tanzania. Witness the great migration.</p> <span class="price">$2,899 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Private Island" class="destination-img"> <div class="destination-content"> <h3>Private Island Retreat</h3> <p>5-day exclusive private island experience in the Caribbean. Ultimate luxury and privacy.</p> <span class="price">$4,999 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1268&q=80" alt="Iceland" class="destination-img"> <div class="destination-content"> <h3>Iceland Expedition</h3> <p>8-day tour exploring glaciers, geysers, and the Northern Lights in Iceland.</p> <span class="price">$2,199 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> </div> </div> <div class="package-content" id="adventure-packages"> <div class="destination-grid"> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mountain Adventure" class="destination-img"> <div class="destination-content"> <h3>Alpine Adventure</h3> <p>10-day hiking and skiing adventure in the Swiss Alps. For outdoor enthusiasts.</p> <span class="price">$1,799 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Safari" class="destination-img"> <div class="destination-content"> <h3>African Safari</h3> <p>12-day wildlife adventure in Kenya and Tanzania. Witness the great migration.</p> <span class="price">$2,899 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1268&q=80" alt="Iceland" class="destination-img"> <div class="destination-content"> <h3>Iceland Expedition</h3> <p>8-day tour exploring glaciers, geysers, and the Northern Lights in Iceland.</p> <span class="price">$2,199 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> </div> </div> <div class="package-content" id="luxury-packages"> <div class="destination-grid"> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1539650116574-75c0c6d4d795?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80" alt="Tropical Paradise" class="destination-img"> <div class="destination-content"> <h3>Tropical Paradise</h3> <p>7-day all-inclusive stay in the Maldives. Enjoy pristine beaches and luxury accommodations.</p> <span class="price">$1,899 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Private Island" class="destination-img"> <div class="destination-content"> <h3>Private Island Retreat</h3> <p>5-day exclusive private island experience in the Caribbean. Ultimate luxury and privacy.</p> <span class="price">$4,999 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> <div class="destination-card"> <img src="https://images.unsplash.com/photo-1580502304784-8985b7eb7260?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="European Tour" class="destination-img"> <div class="destination-content"> <h3>European Explorer</h3> <p>14-day luxury tour through France, Italy, and Switzerland. Stay at 5-star hotels and enjoy fine dining.</p> <span class="price">$4,499 per person</span> <a href="#" class="btn" onclick="showPage('contact')">Book Now</a> </div> </div> </div> </div> </section> <section class="section services"> <h2 class="section-title">Package Inclusions</h2> <p class="section-subtitle fontwhite">All our packages include these premium services to ensure a seamless travel experience.</p> <div class="service-grid"> <div class="service-card"> <div class="service-icon"><i class="fas fa-concierge-bell"></i></div> <h3>Luxury Accommodations</h3> <p>Stay at carefully selected 4-star and 5-star hotels with premium amenities.</p> </div> <div class="service-card"> <div class="service-icon"><i class="fas fa-car-alt"></i></div> <h3>Airport Transfers</h3> <p>Complimentary airport transfers with professional drivers for a hassle-free arrival.</p> </div> <div class="service-card"> <div class="service-icon"><i class="fas fa-user-tie"></i></div> <h3>Dedicated Guide</h3> <p>Expert local guides to enhance your experience with insider knowledge.</p> </div> <div class="service-card"> <div class="service-icon"><i class="fas fa-utensils"></i></div> <h3>Meals & Dining</h3> <p>Enjoy curated dining experiences featuring local and international cuisine.</p> </div> </div> </section> <section class="section testimonials"> <h2 class="section-title">Package Reviews</h2> <p class="section-subtitle">See what our travelers have to say about their experiences with our packages.</p> <div class="testimonial-grid"> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">The European Explorer package was worth every penny. The accommodations were luxurious, and our guide knew all the hidden gems that aren't in guidebooks.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Amanda Roberts" class="author-img"> <div class="author-details"> <h4>Amanda Roberts</h4> <p>European Explorer Package</p> </div> </div> </div> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">Our African Safari was the adventure of a lifetime. We saw the Big Five and our guide ensured we had the best viewing spots. The lodges were incredible!</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Thomas Martin" class="author-img"> <div class="author-details"> <h4>Thomas Martin</h4> <p>African Safari Package</p> </div> </div> </div> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">The Private Island Retreat was pure paradise. The service was impeccable, and the privacy was exactly what we needed for our honeymoon.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Jennifer Lee" class="author-img"> <div class="author-details"> <h4>Jennifer Lee</h4> <p>Private Island Retreat</p> </div> </div> </div> </div> </section> <section class="section stats"> <h2 class="section-title fontwhite">Package Statistics</h2> <p class="section-subtitle">Numbers that reflect the quality and satisfaction of our travel packages.</p> <div class="stats-grid"> <div class="stat-item"> <div class="stat-number" data-count="98">0</div> <div class="stat-text">Satisfaction Rate</div> </div> <div class="stat-item"> <div class="stat-number" data-count="250">0</div> <div class="stat-text">Packages Offered</div> </div> <div class="stat-item"> <div class="stat-number" data-count="24">0</div> <div class="stat-text">Support Hours</div> </div> <div class="stat-item"> <div class="stat-number" data-count="5000">0</div> <div class="stat-text">Happy Travelers</div> </div> </div> </section> <section class="section gallery"> <h2 class="section-title">Package Experiences</h2> <p class="section-subtitle">A visual journey through the experiences our packages offer.</p> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Santorini"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Maldives"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1268&q=80" alt="Iceland"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Safari"> <div class="gallery-overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </section> <section class="section team"> <h2 class="section-title">Package Consultants</h2> <p class="section-subtitle">Our travel consultants specialize in creating perfect package experiences for our clients.</p> <div class="team-grid"> <div class="team-member"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Sophie Turner</h3> <p>Luxury Package Specialist</p> <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-linkedin-in"></i></a> </div> </div> </div> <div class="team-member"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Alex Morgan</h3> <p>Adventure Package Expert</p> <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-linkedin-in"></i></a> </div> </div> </div> <div class="team-member"> <img src="https://images.unsplash.com/photo-1614289371518-722f2615943d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Jessica Parker</h3> <p>Family Package Coordinator</p> <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-linkedin-in"></i></a> </div> </div> </div> </div> </section> <section class="section faq"> <h2 class="section-title">Package FAQs</h2> <p class="section-subtitle">Common questions about our travel packages and services.</p> <div class="faq-container"> <div class="faq-item"> <div class="faq-question"> What's included in the package price? <i class="fas fa-chevron-down"></i> </div> <div class="faq-answer"> <p>Our packages typically include accommodations, airport transfers, guided tours, entrance fees to attractions, and some meals. Specific inclusions vary by package, so please check the detailed itinerary for each package.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Can I customize a package? <i class="fas fa-chevron-down"></i> </div> <div class="faq-answer"> <p>Yes, we offer customizable packages. Our travel consultants can tailor any package to your preferences, including adjusting the itinerary, upgrading accommodations, or adding special experiences.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> What is your cancellation policy? <i class="fas fa-chevron-down"></i> </div> <div class="faq-answer"> <p>Our cancellation policy varies by package and timing. Generally, cancellations made more than 60 days before departure receive a full refund minus a processing fee. Please refer to the specific terms and conditions for your chosen package.</p> </div> </div> </div> </section> <section class="newsletter"> <h2>Get Package Deals</h2> <p>Subscribe to receive exclusive offers and early access to our new package releases.</p> <form class="newsletter-form"> <input type="email" placeholder="Enter your email address" required> <button type="submit">Subscribe</button> </form> </section> </div> <!-- Contact Page --> <div id="contact" class="page-container"> <section class="hero" style="background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"> <div class="hero-content"> <h1>Get In Touch With Us</h1> <p>Have questions about our tours? Ready to book your next adventure? Contact us today!</p> </div> </section> <section class="section contact"> <h2 class="section-title">Contact Us</h2> <p class="section-subtitle">We're here to answer any questions you may have about your travel plans.</p> <div class="contact-container"> <form id="contact-form"> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" class="form-control" placeholder="Your Name" required> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" class="form-control" placeholder="Your Email" required> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" class="form-control" placeholder="Your Phone"> </div> <div class="form-group"> <label for="interest">Interest</label> <select id="interest" class="form-control" required> <option value="">Select an option</option> <option value="europe">European Tours</option> <option value="beach">Beach Vacations</option> <option value="adventure">Adventure Travel</option> <option value="luxury">Luxury Getaways</option> <option value="cultural">Cultural Experiences</option> </select> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" class="form-control" placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn" style="width: 100%;">Send Message</button> </form> </div> </section> <section class="section" style="padding-top: 0;"> <div class="destination-grid"> <div class="destination-card"> <div class="destination-content"> <h3><i class="fas fa-map-marker-alt"></i> Our Office</h3> <p>123 Travel Street, Tourism City<br>Adventureland, 45678</p> </div> </div> <div class="destination-card"> <div class="destination-content"> <h3><i class="fas fa-phone"></i> Call Us</h3> <p>+1 (555) 123-4567<br>+1 (555) 987-6543</p> </div> </div> <div class="destination-card"> <div class="destination-content"> <h3><i class="fas fa-envelope"></i> Email Us</h3> <p>info@globalexplorer.com<br>bookings@globalexplorer.com</p> </div> </div> </div> </section> <section class="map"> <h2 class="section-title">Find Us</h2> <p class="section-subtitle">Visit our office to discuss your travel plans in person.</p> <div class="map-container"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.1840523769245!2d-73.98761458459386!3d40.75831467932678!2m3!1f0!2f0!3f0!4m13!3e0!4m5!1s0x89c25855b8fb3083%3A0xa0f9aef176042a5c!2sNew%20York%2C%20NY%2C%20USA!3m2!1d40.7127753!2d-74.0059728!4m5!1s0x89c25855b8fb3083%3A0xa0f9aef176042a5c!2sNew%20York%2C%20NY!3m2!1d40.7127753!2d-74.0059728!5e0!3m2!1sen!2s!4v1629990000000!5m2!1sen!2s" allowfullscreen="" loading="lazy"></iframe> </div> </section> <section class="section team"> <h2 class="section-title">Contact Our Team</h2> <p class="section-subtitle">Our dedicated travel consultants are ready to assist you with your travel plans.</p> <div class="team-grid"> <div class="team-member"> <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Lisa Anderson</h3> <p>Customer Relations Manager</p> <p>lisa@globalexplorer.com</p> <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-linkedin-in"></i></a> </div> </div> </div> <div class="team-member"> <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>James Wilson</h3> <p>Travel Consultant</p> <p>james@globalexplorer.com</p> <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-linkedin-in"></i></a> </div> </div> </div> <div class="team-member"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Team Member" class="team-img"> <div class="team-details"> <h3>Maria Garcia</h3> <p>Booking Coordinator</p> <p>maria@globalexplorer.com</p> <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-linkedin-in"></i></a> </div> </div> </div> </div> </section> <section class="section faq"> <h2 class="section-title">Common Questions</h2> <p class="section-subtitle">Find answers to frequently asked questions about our services and booking process.</p> <div class="faq-container"> <div class="faq-item"> <div class="faq-question"> How far in advance should I book my trip? <i class="fas fa-chevron-down"></i> </div> <div class="faq-answer"> <p>We recommend booking at least 3-6 months in advance for international trips, especially during peak travel seasons. For popular destinations and custom itineraries, even earlier booking is advised to secure the best accommodations and experiences.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Do you offer travel insurance? <i class="fas fa-chevron-down"></i> </div> <div class="faq-answer"> <p>Yes, we strongly recommend travel insurance for all trips. We offer comprehensive travel insurance policies that cover trip cancellation, medical emergencies, lost luggage, and other unforeseen circumstances. Our consultants can help you choose the right coverage for your trip.</p> </div> </div> <div class="faq-item"> <div class="faq-question"> Can you accommodate dietary restrictions? <i class="fas fa-chevron-down"></i> </div> <div class="faq-answer"> <p>Absolutely. We work with our partners to accommodate dietary restrictions and preferences. Please inform us of any dietary needs during the booking process, and we will make the necessary arrangements with hotels, restaurants, and tour providers.</p> </div> </div> </div> </section> <section class="section testimonials"> <h2 class="section-title">Client Testimonials</h2> <p class="section-subtitle">See what our clients have to say about their experience working with us.</p> <div class="testimonial-grid"> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">The customer service at GlobalExplorer is exceptional. They helped us plan our dream honeymoon and handled every detail perfectly.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Jessica Miller" class="author-img"> <div class="author-details"> <h4>Jessica Miller</h4> <p>Honeymoon to Bali</p> </div> </div> </div> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">I was impressed with how quickly the team responded to my inquiries and how they customized our family vacation to suit our needs.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/men/74.jpg" alt="David Wilson" class="author-img"> <div class="author-details"> <h4>David Wilson</h4> <p>Family Trip to Europe</p> </div> </div> </div> <div class="testimonial-card"> <div class="quote"><i class="fas fa-quote-left"></i></div> <p class="testimonial-content">The team at GlobalExplorer made our anniversary trip stress-free and memorable. Their attention to detail is remarkable.</p> <div class="testimonial-author"> <img src="https://randomuser.me/api/portraits/women/29.jpg" alt="Sophia Garcia" class="author-img"> <div class="author-details"> <h4>Sophia Garcia</h4> <p>Anniversary Celebration</p> </div> </div> </div> </div> </section> <section class="newsletter"> <h2>Stay Connected</h2> <p>Subscribe to our newsletter for travel tips, destination guides, and exclusive offers.</p> <form class="newsletter-form"> <input type="email" placeholder="Enter your email address" required> <button type="submit">Subscribe</button> </form> </section> </div> <!-- Footer --> <footer> <div class="footer-content"> <div class="footer-column"> <h3>GlobalExplorer Tours</h3> <p>Creating unforgettable travel experiences since 2005. Our mission is to provide exceptional service and unique adventures around the world.</p> <div class="social-icons"> <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-pinterest"></i></a> </div> </div> <div class="footer-column"> <h3>Quick Links</h3> <ul class="footer-links"> <li><a href="#" onclick="showPage('home')">Home</a></li> <li><a href="#" onclick="showPage('destinations')">Destinations</a></li> <li><a href="#" onclick="showPage('packages')">Packages</a></li> <li><a href="#" onclick="showPage('contact')">Contact Us</a></li> </ul> </div> <div class="footer-column"> <h3>Popular Destinations</h3> <ul class="footer-links"> <li><a href="#">Bali, Indonesia</a></li> <li><a href="#">Santorini, Greece</a></li> <li><a href="#">Swiss Alps</a></li> <li><a href="#">Maldives</a></li> <li><a href="#">Paris, France</a></li> </ul> </div> <div class="footer-column"> <h3>Newsletter</h3> <p>Subscribe to our newsletter for travel tips, new destinations, and exclusive offers.</p> <form> <div class="form-group"> <input type="email" class="form-control" placeholder="Your Email" required> </div> <button type="submit" class="btn" style="width: 100%;">Subscribe</button> </form> </div> </div> <div class="copyright"> <p>© 2023 GlobalExplorer Tours. All rights reserved.</p> </div> </footer> </body> </html>
CSS
/* CSS will be placed here */ :root { --primary: #2a9d8f; --secondary: #264653; --accent: #e9c46a; --light: #f8f9fa; --dark: #343a40; --danger: #e76f51; --success: #2a9d8f; --warning: #e9c46a; --info: #4cc9f0; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } html { scroll-behavior: smooth; } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; line-height: 1.6; } /* Header & Navigation */ header { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; z-index: 1000; padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); } header.sticky { padding: 10px 5%; background-color: var(--primary); } header.sticky .logo { color: white; } header.sticky nav ul li a { color: white; } .logo { font-size: 28px; font-weight: 700; color: var(--primary); text-decoration: none; display: flex; align-items: center; } .logo i { margin-right: 8px; color: var(--accent); } nav ul { display: flex; list-style: none; } nav ul li { margin: 0 15px; } nav ul li a { text-decoration: none; color: var(--dark); font-weight: 500; font-size: 16px; transition: var(--transition); position: relative; } nav ul li a:after { content: ''; position: absolute; width: 0; height: 2px; background: var(--accent); left: 0; bottom: -5px; transition: width 0.3s ease; } nav ul li a:hover:after { width: 100%; } nav ul li a.active { color: var(--primary); } nav ul li a.active:after { width: 100%; } .hamburger { display: none; cursor: pointer; font-size: 24px; } /* Page Container */ .page-container { display: none; animation: fadeIn 0.5s ease forwards; } .page-container.active { display: block; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover; display: flex; align-items: center; justify-content: center; text-align: center; color: white; padding: 0 20px; } .hero-content { max-width: 800px; transform: translateY(50px); opacity: 0; animation: fadeUp 1s ease forwards 0.5s; } .hero h1 { font-size: 3.5rem; margin-bottom: 20px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } .hero p { font-size: 1.2rem; margin-bottom: 30px; line-height: 1.6; } .btn { display: inline-block; padding: 12px 30px; background: var(--primary); color: white; text-decoration: none; border-radius: 50px; font-weight: 500; transition: var(--transition); border: 2px solid var(--primary); cursor: pointer; } .btn:hover { background: transparent; color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--dark); margin-left: 15px; } .btn-accent:hover { background: transparent; color: var(--accent); } /* Section Styling */ .section { padding: 80px 5%; text-align: center; } .section-title { font-size: 2.5rem; margin-bottom: 50px; color: var(--secondary); position: relative; display: inline-block; } .section-title:after { content: ''; position: absolute; width: 70px; height: 4px; background: var(--accent); bottom: -15px; left: 50%; transform: translateX(-50%); } .section-subtitle { font-size: 1.2rem; color: #666; max-width: 700px; margin: 0 auto 50px; } /* Destinations */ .destinations { background: white; } .destination-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .destination-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: var(--transition); opacity: 0; transform: translateY(50px); } .destination-card.animate { animation: fadeUp 0.5s ease forwards; } .destination-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .destination-img { height: 200px; width: 100%; object-fit: cover; } .destination-content { padding: 20px; } .destination-content h3 { font-size: 1.5rem; margin-bottom: 10px; color: var(--secondary); } .destination-content p { color: #666; margin-bottom: 15px; line-height: 1.6; } .price { font-size: 1.2rem; color: var(--primary); font-weight: 600; margin-bottom: 15px; display: block; } /* Packages */ .packages { background: #f8f9fa; } .package-tabs { display: flex; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; } .tab-btn { padding: 10px 25px; background: white; border: none; border-radius: 30px; margin: 0 10px 10px; cursor: pointer; font-weight: 500; transition: var(--transition); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } .tab-btn.active { background: var(--primary); color: white; } .package-content { display: none; } .package-content.active { display: block; } /* Testimonials */ .testimonials { background: white; } .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .testimonial-card { background: #f8f9fa; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); text-align: left; opacity: 0; transform: translateY(50px); } .testimonial-card.animate { animation: fadeUp 0.5s ease forwards; } .testimonial-card .quote { color: var(--primary); font-size: 24px; margin-bottom: 10px; } .testimonial-content { margin-bottom: 20px; line-height: 1.6; color: #555; } .testimonial-author { display: flex; align-items: center; } .author-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 15px; } .author-details h4 { color: var(--secondary); margin-bottom: 5px; } .author-details p { color: #777; font-size: 14px; } /* Services */ .services { background: linear-gradient(to right, #264653, #2a9d8f); color: white; } .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; } .service-card { background: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 10px; transition: var(--transition); backdrop-filter: blur(10px); opacity: 0; transform: translateY(50px); } .service-card.animate { animation: fadeUp 0.5s ease forwards; } .service-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.2); } .service-icon { font-size: 40px; margin-bottom: 20px; color: var(--accent); } .service-card h3 { font-size: 1.5rem; margin-bottom: 15px; } /* Stats */ .stats { background: var(--secondary); color: white; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; } .stat-item { padding: 30px; } .stat-number { font-size: 3rem; font-weight: 700; margin-bottom: 10px; color: var(--accent); } .stat-text { font-size: 1.2rem; } /* Gallery */ .gallery { background: #f8f9fa; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; } .gallery-item { height: 250px; border-radius: 10px; overflow: hidden; position: relative; opacity: 0; transform: translateY(50px); } .gallery-item.animate { animation: fadeUp 0.5s ease forwards; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-item:hover img { transform: scale(1.1); } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay i { color: white; font-size: 30px; } /* Team */ .team { background: white; } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .team-member { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: var(--transition); opacity: 0; transform: translateY(50px); } .team-member.animate { animation: fadeUp 0.5s ease forwards; } .team-member:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .team-img { height: 250px; width: 100%; object-fit: cover; } .team-details { padding: 20px; } .team-details h3 { font-size: 1.5rem; margin-bottom: 5px; color: var(--secondary); } .team-details p { color: var(--primary); margin-bottom: 15px; } .social-links { display: flex; justify-content: center; gap: 15px; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: #f8f9fa; border-radius: 50%; color: var(--dark); text-decoration: none; transition: var(--transition); } .social-links a:hover { background: var(--primary); color: white; } /* FAQ */ .faq { background: #f8f9fa; } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { background: white; border-radius: 10px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .faq-question { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; transition: var(--transition); } .faq-question:hover { background: #f8f9fa; } .faq-question i { transition: var(--transition); } .faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: var(--transition); } .faq-item.active .faq-question { background: var(--primary); color: white; } .faq-item.active .faq-question i { transform: rotate(180deg); } .faq-item.active .faq-answer { padding: 20px; max-height: 1000px; } /* Blog */ .blog { background: white; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .blog-card { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: var(--transition); opacity: 0; transform: translateY(50px); } .blog-card.animate { animation: fadeUp 0.5s ease forwards; } .blog-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .blog-img { height: 200px; width: 100%; object-fit: cover; } .blog-content { padding: 20px; } .blog-date { color: var(--primary); font-size: 14px; margin-bottom: 10px; display: block; } .blog-content h3 { font-size: 1.3rem; margin-bottom: 10px; color: var(--secondary); } .blog-content p { color: #666; margin-bottom: 15px; line-height: 1.6; } /* Newsletter */ .newsletter { background: linear-gradient(to right, #264653, #2a9d8f); color: white; text-align: center; padding: 80px 5%; } .newsletter h2 { font-size: 2.5rem; margin-bottom: 20px; } .newsletter p { max-width: 600px; margin: 0 auto 30px; font-size: 1.1rem; } .newsletter-form { display: flex; max-width: 500px; margin: 0 auto; } .newsletter-form input { flex: 1; padding: 12px 15px; border: none; border-radius: 50px 0 0 50px; font-size: 16px; } .newsletter-form button { padding: 12px 25px; background: var(--accent); color: var(--dark); border: none; border-radius: 0 50px 50px 0; font-weight: 600; cursor: pointer; transition: var(--transition); } .newsletter-form button:hover { background: #f4a261; } /* Contact Form */ .contact { background: #f8f9fa; } .contact-container { max-width: 800px; margin: 0 auto; background: white; padding: 40px; border-radius: 10px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); } .form-group { margin-bottom: 20px; text-align: left; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--secondary); } .form-control { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px; transition: var(--transition); } .form-control:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(42, 157, 143, 0.2); } textarea.form-control { min-height: 150px; resize: vertical; } /* Map */ .map { background: white; padding: 80px 5%; } .map-container { height: 400px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); } .map-container iframe { width: 100%; height: 100%; border: none; } /* Footer */ footer { background: var(--secondary); color: white; padding: 60px 5% 30px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-column h3 { font-size: 1.5rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-column h3:after { content: ''; position: absolute; width: 40px; height: 3px; background: var(--accent); bottom: 0; left: 0; } .footer-column p { line-height: 1.6; margin-bottom: 20px; color: #ccc; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: #ccc; text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--accent); padding-left: 5px; } .social-icons { display: flex; gap: 15px; margin-top: 20px; } .social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: white; text-decoration: none; transition: var(--transition); } .social-icons a:hover { background: var(--primary); transform: translateY(-3px); } .copyright { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #ccc; font-size: 14px; } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 992px) { .hero h1 { font-size: 2.8rem; } nav ul { position: fixed; top: 70px; left: -100%; background: white; height: 100vh; width: 100%; display: block; text-align: center; transition: var(--transition); } nav ul.active { left: 0; } nav ul li { margin: 30px 0; } nav ul li a { font-size: 20px; } .hamburger { display: block; } .btn { padding: 10px 20px; } } @media (max-width: 768px) { .hero h1 { font-size: 2.2rem; } .hero p { font-size: 1rem; } .section-title { font-size: 2rem; } .btn-container { display: flex; flex-direction: column; gap: 15px; } .btn { margin-left: 0; width: 100%; } .newsletter-form { flex-direction: column; } .newsletter-form input { border-radius: 50px; margin-bottom: 10px; } .newsletter-form button { border-radius: 50px; } } @media (max-width: 576px) { .hero h1 { font-size: 1.8rem; } .section { padding: 60px 20px; } .contact-container { padding: 25px; } } .fontwhite{ color: #ffffff; }
JavaScript
// JavaScript will be placed here // Navigation functionality const hamburger = document.getElementById('hamburger'); const navMenu = document.getElementById('nav-menu'); const navLinks = document.querySelectorAll('.nav-link'); hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); hamburger.innerHTML = navMenu.classList.contains('active') ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>'; }); // Page navigation function showPage(pageId) { // Hide all pages document.querySelectorAll('.page-container').forEach(page => { page.classList.remove('active'); }); // Show selected page document.getElementById(pageId).classList.add('active'); // Update navigation links navLinks.forEach(link => { link.classList.remove('active'); }); // Add active class to current page link document.querySelectorAll('.nav-link').forEach(link => { if (link.getAttribute('onclick').includes(pageId)) { link.classList.add('active'); } }); // Close mobile menu when a link is clicked if (navMenu.classList.contains('active')) { navMenu.classList.remove('active'); hamburger.innerHTML = '<i class="fas fa-bars"></i>'; } // Scroll to top window.scrollTo(0, 0); } // Package tabs functionality function showPackage(category) { // Hide all package contents document.querySelectorAll('.package-content').forEach(content => { content.classList.remove('active'); }); // Show selected package content document.getElementById(category + '-packages').classList.add('active'); // Update tab buttons document.querySelectorAll('.tab-btn').forEach(btn => { btn.classList.remove('active'); }); // Add active class to current tab button document.querySelectorAll('.tab-btn').forEach(btn => { if (btn.getAttribute('onclick').includes(category)) { btn.classList.add('active'); } }); } // Sticky header on scroll window.addEventListener('scroll', () => { const header = document.querySelector('header'); header.classList.toggle('sticky', window.scrollY > 50); }); // Animation on scroll function checkScroll() { const cards = document.querySelectorAll('.destination-card, .testimonial-card, .service-card, .gallery-item, .team-member, .blog-card'); cards.forEach(card => { const cardPosition = card.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (cardPosition < screenPosition) { card.classList.add('animate'); } }); } window.addEventListener('scroll', checkScroll); // Form submission document.getElementById('contact-form').addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! We will get back to you soon.'); this.reset(); }); // FAQ functionality const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach(item => { const question = item.querySelector('.faq-question'); question.addEventListener('click', () => { item.classList.toggle('active'); }); }); // Counter animation for stats function animateCounters() { const counters = document.querySelectorAll('.stat-number'); const speed = 200; counters.forEach(counter => { const target = +counter.getAttribute('data-count'); const count = +counter.innerText; const increment = Math.ceil(target / speed); if (count < target) { counter.innerText = count + increment; setTimeout(animateCounters, 1); } else { counter.innerText = target; } }); } // Initialize animations on page load window.addEventListener('load', () => { checkScroll(); // Animate counters when stats section is in view const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounters(); observer.unobserve(entry.target); } }); }, { threshold: 0.5 }); const statsSection = document.querySelector('.stats'); if (statsSection) { observer.observe(statsSection); } });
Output Preview
Desktop
Mobile
Fullscreen