Premium Travel Landingpage Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beach Paradise | Luxury Beach Holidays & Getaways</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
    
</head>
<body>
    
    <header id="header">
        <div class="container header-container">
            <a href="#" class="logo">
                <div class="logo-icon">
                    <i class="fas fa-umbrella-beach"></i>
                </div>
                <div class="logo-text">Beach<span>Paradise</span></div>
            </a>
            
            <button class="mobile-menu-btn" id="mobileMenuBtn">
                <i class="fas fa-bars"></i>
            </button>
            
            <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="#packages">Packages</a></li>
                <li><a href="#activities">Activities</a></li>
                <li><a href="#gallery">Gallery</a></li>
            </ul>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-background"></div>
        <div class="hero-wave"></div>
        <div class="container hero-content">
            <h1 class="fade-in">Discover Paradise on Earth</h1>
            <p class="fade-in">Experience the world's most breathtaking beaches, luxury resorts, and unforgettable moments. Your perfect holiday starts here.</p>
            <div class="hero-cta fade-in">
                <a href="#destinations" class="btn">Explore Destinations</a>
                <a href="#enquiry" class="btn btn-secondary">Plan Your Trip</a>
            </div>
        </div>
    </section>

<section class="destinations" id="destinations">
        <div class="container">
            <div class="section-title">
                <h2>Top Beach Destinations</h2>
                <p class="section-subtitle">Discover our curated selection of the world's most beautiful beaches and luxury resorts</p>
            </div>
            <div class="destination-grid">
                <div class="destination-card fade-in">
                    <div class="destination-img" style="background-image: url('https://images.unsplash.com/photo-1518638150340-f706e86654de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');">
                        <div class="destination-overlay"></div>
                        <div class="destination-price">From $2,899</div>
                    </div>
                    <div class="destination-content">
                        <h3>Maldives Paradise</h3>
                        <p>Crystal clear waters, private overwater bungalows, and world-class diving in the Indian Ocean's most pristine atolls.</p>
                        <div class="destination-features">
                            <div class="destination-feature">
                                <i class="fas fa-water"></i>
                                <span>Overwater Villas</span>
                            </div>
                            <div class="destination-feature">
                                <i class="fas fa-snorkeling"></i>
                                <span>Coral Reefs</span>
                            </div>
                            <div class="destination-feature">
                                <i class="fas fa-utensils"></i>
                                <span>Gourmet Dining</span>
                            </div>
                        </div>
                        <a href="#enquiry" class="btn">Book Now</a>
                    </div>
                </div>
                
                <div class="destination-card fade-in">
                    <div class="destination-img" style="background-image: url('https://images.unsplash.com/photo-1537996194471-e657df975ab4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');">
                        <div class="destination-overlay"></div>
                        <div class="destination-price">From $1,999</div>
                    </div>
                    <div class="destination-content">
                        <h3>Bali, Indonesia</h3>
                        <p>Vibrant culture, ancient temples, and world-class surfing spots on the Island of the Gods.</p>
                        <div class="destination-features">
                            <div class="destination-feature">
                                <i class="fas fa-spa"></i>
                                <span>Luxury Spas</span>
                            </div>
                            <div class="destination-feature">
                                <i class="fas fa-surfing"></i>
                                <span>Surfing</span>
                            </div>
                            <div class="destination-feature">
                                <i class="fas fa-mountain"></i>
                                <span>Volcano Views</span>
                            </div>
                        </div>
                        <a href="#enquiry" class="btn">Book Now</a>
                    </div>
                </div>
                
                <div class="destination-card fade-in">
                    <div class="destination-img" style="background-image: url('https://images.unsplash.com/photo-1551641506-ee5bf4cb45f1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHRva3lvfGVufDB8fDB8fHww');">
                        <div class="destination-overlay"></div>
                        <div class="destination-price">From $2,499</div>
                    </div>
                    <div class="destination-content">
                        <h3>Phuket, Thailand</h3>
                        <p>Turquoise waters, limestone cliffs, and vibrant nightlife in Thailand's most famous island paradise.</p>
                        <div class="destination-features">
                            <div class="destination-feature">
                                <i class="fas fa-ship"></i>
                                <span>Island Hopping</span>
                            </div>
                            <div class="destination-feature">
                                <i class="fas fa-utensils"></i>
                                <span>Street Food</span>
                            </div>
                            <div class="destination-feature">
                                <i class="fas fa-theater-masks"></i>
                                <span>Night Markets</span>
                            </div>
                        </div>
                        <a href="#enquiry" class="btn">Book Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="packages" id="packages">
        <div class="container">
            <div class="section-title">
                <h2>Exclusive Holiday Packages</h2>
                <p class="section-subtitle">Tailored experiences for every type of traveler, from romantic getaways to family adventures</p>
            </div>
            
            <div class="package-tabs">
                <button class="tab-btn active" data-tab="luxury">Luxury</button>
                <button class="tab-btn" data-tab="family">Family</button>
                <button class="tab-btn" data-tab="honeymoon">Honeymoon</button>
                <button class="tab-btn" data-tab="adventure">Adventure</button>
            </div>
            
            <div class="package-cards">
                <div class="package-card fade-in" data-tab="luxury">
                    <div class="package-badge">Most Popular</div>
                    <div class="package-header">
                        <h3>Oceanfront Villa Experience</h3>
                        <div class="package-price">$4,200<span>/week</span></div>
                        <p>All-inclusive luxury beachfront living</p>
                    </div>
                    <ul class="package-features">
                        <li><i class="fas fa-check-circle"></i> Private beachfront villa with infinity pool</li>
                        <li><i class="fas fa-check-circle"></i> Gourmet dining with private chef</li>
                        <li><i class="fas fa-check-circle"></i> Personal butler and concierge service</li>
                        <li><i class="fas fa-check-circle"></i> Daily spa treatments (60 mins)</li>
                        <li><i class="fas fa-check-circle"></i> Water sports equipment included</li>
                    </ul>
                    <div class="package-footer">
                        <a href="#enquiry" class="btn">Book This Package</a>
                    </div>
                </div>
                
                <div class="package-card fade-in" data-tab="family">
                    <div class="package-header">
                        <h3>Family Paradise Package</h3>
                        <div class="package-price">$2,800<span>/week</span></div>
                        <p>Fun-filled vacation for the whole family</p>
                    </div>
                    <ul class="package-features">
                        <li><i class="fas fa-check-circle"></i> Connecting rooms or family suite</li>
                        <li><i class="fas fa-check-circle"></i> Kids club with daily activities</li>
                        <li><i class="fas fa-check-circle"></i> Family-friendly excursions</li>
                        <li><i class="fas fa-check-circle"></i> All meals with kid's menu options</li>
                        <li><i class="fas fa-check-circle"></i> Babysitting services (4 hours daily)</li>
                    </ul>
                    <div class="package-footer">
                        <a href="#enquiry" class="btn">Book This Package</a>
                    </div>
                </div>
                
                <div class="package-card fade-in" data-tab="honeymoon">
                    <div class="package-header">
                        <h3>Romantic Getaway</h3>
                        <div class="package-price">$3,500<span>/week</span></div>
                        <p>Intimate and romantic beach experience</p>
                    </div>
                    <ul class="package-features">
                        <li><i class="fas fa-check-circle"></i> Secluded overwater bungalow</li>
                        <li><i class="fas fa-check-circle"></i> Couples massage and spa access</li>
                        <li><i class="fas fa-check-circle"></i> Romantic candlelight dinner on the beach</li>
                        <li><i class="fas fa-check-circle"></i> Sunset cruise with champagne</li>
                        <li><i class="fas fa-check-circle"></i> Private photo session</li>
                    </ul>
                    <div class="package-footer">
                        <a href="#enquiry" class="btn">Book This Package</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="activities" id="activities">
        <div class="container">
            <div class="section-title">
                <h2>Beach Activities & Experiences</h2>
                <p class="section-subtitle">From adrenaline-pumping water sports to relaxing wellness activities</p>
            </div>
            
            <div class="activity-grid">
                <div class="activity-card fade-in">
                    <div class="activity-icon">
                        <i class="fas fa-snorkeling"></i>
                    </div>
                    <h3>Snorkeling & Diving</h3>
                    <p>Explore vibrant coral reefs and marine life with certified guides.</p>
                </div>
                
                <div class="activity-card fade-in">
                    <div class="activity-icon">
                        <i class="fas fa-ship"></i>
                    </div>
                    <h3>Sunset Cruises</h3>
                    <p>Enjoy breathtaking ocean sunsets on a luxury catamaran with cocktails.</p>
                </div>
                
                <div class="activity-card fade-in">
                    <div class="activity-icon">
                        <i class="fas fa-umbrella-beach"></i>
                    </div>
                    <h3>Beach Yoga</h3>
                    <p>Morning and evening yoga sessions on the beach for relaxation.</p>
                </div>
                
                <div class="activity-card fade-in">
                    <div class="activity-icon">
                        <i class="fas fa-fish"></i>
                    </div>
                    <h3>Seafood Feasts</h3>
                    <p>Freshly caught seafood prepared by expert local chefs on the beach.</p>
                </div>
                
                <div class="activity-card fade-in">
                    <div class="activity-icon">
                        <i class="fas fa-water"></i>
                    </div>
                    <h3>Jet Ski Tours</h3>
                    <p>Adventure along the coastline with guided jet ski excursions.</p>
                </div>
                
                <div class="activity-card fade-in">
                    <div class="activity-icon">
                        <i class="fas fa-spa"></i>
                    </div>
                    <h3>Beachside Spa</h3>
                    <p>Luxury treatments in open-air pavilions with ocean views.</p>
                </div>
            </div>
        </div>
    </section>

<section class="gallery" id="gallery">
        <div class="container">
            <div class="section-title">
                <h2>Gallery</h2>
                <p class="section-subtitle">Moments of paradise captured by our guests and photographers</p>
            </div>
            
            <div class="gallery-container">
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1506953823976-52e1fdc0149a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
                        <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
                        <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1505142468610-359e7d316be0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
                        <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
                        <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1573843989-c9d483f5b85a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                
                <div class="gallery-nav">
                    <button class="gallery-nav-btn swiper-button-prev">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="gallery-nav-btn swiper-button-next">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

<section class="enquiry" id="enquiry">
        <div class="container">
            <div class="section-title">
                <h2>Plan Your Dream Vacation</h2>
                <p class="section-subtitle">Get in touch with our travel experts to create your perfect beach holiday</p>
            </div>
            
            <div class="enquiry-form fade-in">
                <form id="enquiryForm">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="name">Full Name *</label>
                            <input type="text" id="name" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">Email Address *</label>
                            <input type="email" id="email" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone">
                        </div>
                        
                        <div class="form-group">
                            <label for="guests">Number of Guests</label>
                            <select id="guests">
                                <option value="1">1 Guest</option>
                                <option value="2" selected>2 Guests</option>
                                <option value="3">3 Guests</option>
                                <option value="4">4 Guests</option>
                                <option value="5+">5+ Guests</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="destination">Preferred Destination</label>
                            <select id="destination">
                                <option value="">Select Destination</option>
                                <option value="maldives">Maldives</option>
                                <option value="bali">Bali, Indonesia</option>
                                <option value="phuket">Phuket, Thailand</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="package">Package Interest</label>
                            <select id="package">
                                <option value="">Select Package</option>
                                <option value="luxury">Luxury - Oceanfront Villa</option>
                                <option value="family">Family Paradise Package</option>
                                <option value="honeymoon">Romantic Getaway</option>
                                <option value="custom">Custom Package</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Additional Requirements</label>
                        <textarea id="message" placeholder="Tell us about your dream vacation, special requests, or any questions you may have..."></textarea>
                    </div>
                    
                    <div class="form-submit">
                        <button type="submit" class="btn">Submit Enquiry</button>
                    </div>
                </form>
            </div>
        </div>
    </section>

<footer>
        <div class="footer-wave"></div>
        <div class="container">
            <div class="footer-container">
                <div class="footer-about">
                    <div class="footer-logo">
                        <div class="logo-icon">
                            <i class="fas fa-umbrella-beach"></i>
                        </div>
                        <div class="footer-logo-text">Beach<span>Paradise</span></div>
                    </div>
                    <p>Creating unforgettable beach holiday experiences since 2010. We specialize in luxury beach getaways to the world's most beautiful destinations.</p>
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-pinterest"></i></a>
                    </div>
                </div>
                
                <div class="footer-links">
                    <h3 class="footer-heading">Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#destinations">Destinations</a></li>
                        <li><a href="#packages">Packages</a></li>
                        <li><a href="#activities">Activities</a></li>
                        <li><a href="#gallery">Gallery</a></li>
                        <li><a href="#testimonials">Reviews</a></li>
                    </ul>
                </div>
                
                <div class="contact-info">
                    <h3 class="footer-heading">Contact Us</h3>
                    <p><i class="fas fa-map-marker-alt"></i> 123 Beachfront Avenue, Miami, FL</p>
                    <p><i class="fas fa-phone"></i> +1 (800) 555-OCEAN</p>
                    <p><i class="fas fa-envelope"></i> info@beachparadise.com</p>
                    <p><i class="fas fa-clock"></i> Mon-Fri: 9am-7pm EST</p>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 Beach Paradise. All rights reserved. | Designed for a refreshing holiday experience</p>
            </div>
        </div>
    </footer>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    
</body>
</html>

CSS

:root {
            --aqua-light: #E1F5FE;
            --aqua-medium: #4FC3F7;
            --aqua-dark: #0288D1;
            --aqua-deep: #01579B;
            --white: #FFFFFF;
            --sand: #FFF8E1;
            --text-dark: #263238;
            --text-light: #546E7A;
            --shadow-light: rgba(2, 136, 209, 0.08);
            --shadow-medium: rgba(2, 136, 209, 0.15);
            --gradient-aqua: linear-gradient(135deg, #4FC3F7 0%, #01579B 100%);
            --gradient-beach: linear-gradient(135deg, #4FC3F7 0%, #26A69A 50%, #FFD54F 100%);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: 'Montserrat', sans-serif;
            color: var(--text-dark);
            background-color: var(--white);
            line-height: 1.7;
            overflow-x: hidden;
        }

h1, h2, h3, h4, h5 {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            color: var(--aqua-deep);
            line-height: 1.3;
        }

.container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

section {
            padding: 100px 0;
            position: relative;
        }

.section-title {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

.section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
            display: inline-block;
            position: relative;
        }

.section-title h2:after {
            content: '';
            position: absolute;
            width: 60px;
            height: 4px;
            background: var(--gradient-aqua);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }

.section-subtitle {
            color: var(--text-light);
            font-size: 1.1rem;
            max-width: 700px;
            margin: 0 auto;
        }

.btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 16px 36px;
            background: var(--gradient-aqua);
            color: var(--white);
            border: none;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.9rem;
            position: relative;
            overflow: hidden;
            z-index: 1;
            box-shadow: 0 8px 20px rgba(2, 136, 209, 0.2);
        }

.btn:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: 0.5s;
            z-index: -1;
        }

.btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(2, 136, 209, 0.3);
        }

.btn:hover:before {
            left: 100%;
        }

.btn-secondary {
            background: transparent;
            border: 2px solid var(--aqua-medium);
            color: var(--aqua-dark);
            box-shadow: none;
        }

.btn-secondary:hover {
            background: var(--aqua-light);
        }

/* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 0;
            transition: all 0.4s ease;
            background: transparent;
        }

header.scrolled {
            background: rgba(255, 255, 255, 0.98);
            padding: 15px 0;
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
            backdrop-filter: blur(10px);
        }

.header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            gap: 10px;
        }

.logo-icon {
            width: 40px;
            height: 40px;
            background: var(--gradient-aqua);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }

.logo-text {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 700;
            color: var(--white);
            letter-spacing: -0.5px;
        }

header.scrolled .logo-text {
            color: var(--aqua-deep);
        }

.logo-text span {
            color: var(--aqua-medium);
        }

.nav-links {
            display: flex;
            list-style: none;
            gap: 30px;
        }

.nav-links a {
            color: var(--white);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            transition: color 0.3s ease;
            position: relative;
            padding: 5px 0;
        }

.nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--aqua-medium);
            bottom: 0;
            left: 0;
            transition: width 0.3s ease;
        }

.nav-links a:hover:after,
        .nav-links a.active:after {
            width: 100%;
        }

header.scrolled .nav-links a {
            color: var(--text-dark);
        }

.nav-links a:hover,
        .nav-links a.active {
            color: var(--aqua-medium);
        }

.header-actions {
            display: flex;
            align-items: center;
            gap: 20px;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--white);
            font-size: 24px;
            cursor: pointer;
            z-index: 1001;
        }

header.scrolled .mobile-menu-btn {
            color: var(--aqua-deep);
        }

/* Hero Section */
        .hero {
            height: 100vh;
            min-height: 800px;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
        }

.hero-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), 
                        url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');
            background-size: cover;
            background-position: center;
            z-index: -2;
        }

.hero-content {
            max-width: 800px;
            color: var(--white);
            position: relative;
            z-index: 2;
        }

.hero h1 {
            font-size: 4rem;
            color: var(--white);
            margin-bottom: 20px;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
            line-height: 1.2;
        }

.hero p {
            font-size: 1.3rem;
            margin-bottom: 40px;
            color: rgba(255, 255, 255, 0.9);
            max-width: 600px;
        }

.hero-cta {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

/* Destinations Section */
        .destinations {
            background-color: var(--white);
        }

.destination-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }

.destination-card {
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px var(--shadow-light);
            transition: all 0.4s ease;
            position: relative;
        }

.destination-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 50px var(--shadow-medium);
        }

.destination-img {
            height: 250px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

.destination-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.7) 100%);
        }

.destination-price {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--gradient-aqua);
            color: white;
            padding: 8px 15px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
        }

.destination-content {
            padding: 30px;
        }

.destination-content h3 {
            margin-bottom: 10px;
            font-size: 1.5rem;
        }

.destination-content p {
            color: var(--text-light);
            margin-bottom: 20px;
        }

.destination-features {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

.destination-feature {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.9rem;
            color: var(--aqua-dark);
        }

.destination-feature i {
            color: var(--aqua-medium);
        }

/* Packages Section */
        .packages {
            background-color: var(--aqua-light);
        }

.package-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 50px;
            flex-wrap: wrap;
            gap: 10px;
        }

.tab-btn {
            padding: 12px 30px;
            background: transparent;
            border: 2px solid transparent;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-light);
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            border-radius: 50px;
        }

.tab-btn.active {
            color: var(--aqua-deep);
            border-color: var(--aqua-medium);
            background: rgba(79, 195, 247, 0.1);
        }

.package-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }

.package-card {
            background: var(--white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px var(--shadow-light);
            transition: all 0.4s ease;
            position: relative;
        }

.package-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px var(--shadow-medium);
        }

.package-badge {
            position: absolute;
            top: 20px;
            left: -5px;
            background: var(--gradient-beach);
            color: white;
            padding: 8px 20px;
            font-weight: 600;
            font-size: 0.8rem;
            border-radius: 0 20px 20px 0;
            z-index: 2;
        }

.package-header {
            padding: 40px 30px 30px;
            background: var(--aqua-light);
            text-align: center;
            position: relative;
        }

.package-header:after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            background: var(--aqua-light);
            border-radius: 50%;
            z-index: -1;
        }

.package-price {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--aqua-deep);
            margin: 15px 0;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

.package-price span {
            font-size: 1rem;
            color: var(--text-light);
            margin-top: 8px;
            margin-left: 5px;
        }

.package-features {
            padding: 30px;
            list-style: none;
        }

.package-features li {
            padding: 12px 0;
            border-bottom: 1px solid rgba(128, 222, 234, 0.2);
            display: flex;
            align-items: center;
        }

.package-features li i {
            color: var(--aqua-medium);
            margin-right: 12px;
            font-size: 1.1rem;
        }

.package-footer {
            padding: 0 30px 30px;
            text-align: center;
        }

/* Activities Section */
        .activities {
            background-color: var(--white);
        }

.activity-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 30px;
        }

.activity-card {
            text-align: center;
            padding: 40px 30px;
            background: var(--white);
            border-radius: 20px;
            box-shadow: 0 15px 30px var(--shadow-light);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

.activity-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: var(--gradient-aqua);
            z-index: 2;
        }

.activity-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px var(--shadow-medium);
        }

.activity-icon {
            width: 80px;
            height: 80px;
            background: var(--aqua-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2.5rem;
            color: var(--aqua-deep);
            transition: all 0.4s ease;
        }

.activity-card:hover .activity-icon {
            background: var(--gradient-aqua);
            color: white;
            transform: scale(1.1);
        }

.activity-card h3 {
            margin-bottom: 15px;
            font-size: 1.3rem;
        }

/* Gallery Section */
        .gallery {
            background-color: var(--aqua-light);
            overflow: hidden;
        }

.gallery-container {
            position: relative;
            max-width: 1000px;
            margin: 0 auto;
        }

.swiper {
            width: 100%;
            height: 500px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

.swiper-slide {
            background-size: cover;
            background-position: center;
        }

.gallery-nav {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }

.gallery-nav-btn {
            width: 50px;
            height: 50px;
            background: var(--white);
            border: none;
            border-radius: 50%;
            color: var(--aqua-deep);
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

.gallery-nav-btn:hover {
            background: var(--aqua-medium);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

/* Testimonials Section */
        .testimonials {
            background-color: var(--white);
        }

.testimonial-slider {
            max-width: 800px;
            margin: 0 auto;
        }

.testimonial-card {
            background: var(--white);
            padding: 50px;
            border-radius: 20px;
            box-shadow: 0 20px 40px var(--shadow-light);
            position: relative;
            margin: 30px 20px;
        }

.testimonial-card:before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 30px;
            font-size: 100px;
            font-family: 'Playfair Display', serif;
            color: var(--aqua-light);
            line-height: 1;
            z-index: 0;
        }

.testimonial-content {
            position: relative;
            z-index: 1;
        }

.testimonial-text {
            font-size: 1.2rem;
            font-style: italic;
            margin-bottom: 30px;
            color: var(--text-light);
            line-height: 1.8;
        }

.testimonial-author {
            display: flex;
            align-items: center;
        }

.author-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            margin-right: 20px;
            border: 3px solid var(--aqua-light);
        }

.author-info h4 {
            margin-bottom: 5px;
            font-size: 1.2rem;
        }

.author-info p {
            color: var(--text-light);
            font-size: 0.95rem;
        }

.testimonial-rating {
            color: #FFC107;
            margin-bottom: 10px;
        }

.swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: var(--aqua-medium);
            opacity: 0.5;
        }

.swiper-pagination-bullet-active {
            opacity: 1;
            background: var(--aqua-deep);
        }

/* Enquiry Section */
        .enquiry {
            background: var(--gradient-aqua);
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

.enquiry:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%2301579b' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 0.1;
        }

.enquiry .section-title h2,
        .enquiry .section-subtitle {
            color: var(--white);
        }

.enquiry-form {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            padding: 50px;
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }

.form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 25px;
        }

.form-row .form-group {
            flex: 1;
        }

.form-group {
            margin-bottom: 25px;
        }

label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--text-dark);
        }

input, select, textarea {
            width: 100%;
            padding: 18px 20px;
            border: 1px solid rgba(79, 195, 247, 0.3);
            border-radius: 10px;
            font-family: 'Montserrat', sans-serif;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: white;
        }

input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--aqua-medium);
            box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
        }

textarea {
            min-height: 150px;
            resize: vertical;
        }

.form-submit {
            text-align: center;
            margin-top: 30px;
        }

/* Footer */
        footer {
            background-color: var(--aqua-deep);
            color: var(--white);
            padding: 80px 0 30px;
            position: relative;
        }

.footer-wave {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%2301579b'%3E%3C/path%3E%3C/svg%3E");
            background-size: 1200px 100px;
            transform: rotate(180deg);
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 50px;
            margin-bottom: 50px;
            position: relative;
            z-index: 1;
        }

.footer-logo {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
        }

.footer-logo-text {
            font-family: 'Playfair Display', serif;
            font-size: 28px;
            font-weight: 700;
        }

.footer-logo-text span {
            color: var(--aqua-medium);
        }

.footer-about p {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 25px;
        }

.social-links {
            display: flex;
            gap: 15px;
        }

.social-link {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            text-decoration: none;
            transition: all 0.3s ease;
        }

.social-link:hover {
            background: var(--aqua-medium);
            transform: translateY(-5px);
        }

.footer-heading {
            font-size: 1.2rem;
            margin-bottom: 25px;
            color: var(--white);
        }

.footer-links ul {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 12px;
        }

.footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.3s ease;
        }

.footer-links a:hover {
            color: var(--aqua-medium);
        }

.contact-info p {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            color: rgba(255, 255, 255, 0.8);
        }

.contact-info i {
            margin-right: 12px;
            color: var(--aqua-medium);
            width: 20px;
        }

.copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9rem;
            position: relative;
            z-index: 1;
        }

/* Responsive Styles */
        @media (max-width: 1024px) {
            .hero h1 {
                font-size: 3.2rem;
            }
            
            .section-title h2 {
                font-size: 2.2rem;
            }
        }

@media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
            
            .nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 300px;
                height: 100vh;
                background: var(--white);
                flex-direction: column;
                padding: 100px 40px 40px;
                transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
                z-index: 999;
            }
            
            .nav-links.active {
                right: 0;
            }
            
            .nav-links a {
                color: var(--text-dark);
                font-size: 1.1rem;
                padding: 10px 0;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero p {
                font-size: 1.1rem;
            }
            
            section {
                padding: 80px 0;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .enquiry-form {
                padding: 30px;
            }
            
            .testimonial-card {
                padding: 40px 30px;
            }
        }

@media (max-width: 576px) {
            .hero h1 {
                font-size: 2.2rem;
            }
            
            .package-cards,
            .destination-grid {
                grid-template-columns: 1fr;
            }
            
            .activity-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
            
            .activity-card {
                padding: 30px 20px;
            }
            
            .hero-cta {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .section-title h2 {
                font-size: 1.8rem;
            }
        }

/* Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

.fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

/* Floating animation */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }

.floating {
            animation: float 6s ease-in-out infinite;
        }

JavaScript

// Initialize Swiper for gallery
        const gallerySwiper = new Swiper('.swiper', {
            loop: true,
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

// Initialize Swiper for testimonials
        const testimonialSwiper = new Swiper('.testimonialSwiper', {
            loop: true,
            autoplay: {
                delay: 7000,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                640: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
                1024: {
                    slidesPerView: 1,
                    spaceBetween: 40,
                },
            },
        });

// Header scroll effect
        window.addEventListener('scroll', function() {
            const header = document.getElementById('header');
            if (window.scrollY > 100) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
            
            // Scroll animations
            const fadeElements = document.querySelectorAll('.fade-in');
            fadeElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;
                const elementVisible = 150;
                
                if (elementTop < window.innerHeight - elementVisible) {
                    element.classList.add('visible');
                }
            });
        });

// Mobile menu toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const navLinks = document.getElementById('navLinks');
        
        mobileMenuBtn.addEventListener('click', function() {
            navLinks.classList.toggle('active');
            const icon = mobileMenuBtn.querySelector('i');
            if (navLinks.classList.contains('active')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
                document.body.style.overflow = 'hidden';
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
                document.body.style.overflow = 'auto';
            }
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                mobileMenuBtn.querySelector('i').classList.remove('fa-times');
                mobileMenuBtn.querySelector('i').classList.add('fa-bars');
                document.body.style.overflow = 'auto';
                
                // Update active nav link
                document.querySelectorAll('.nav-links a').forEach(a => a.classList.remove('active'));
                link.classList.add('active');
            });
        });

// Package tabs functionality
        const tabBtns = document.querySelectorAll('.tab-btn');
        const packageCards = document.querySelectorAll('.package-card');
        
        tabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                // Update active tab button
                tabBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                
                const tab = this.getAttribute('data-tab');
                
                // Show/hide package cards
                packageCards.forEach(card => {
                    if (tab === 'all' || card.getAttribute('data-tab') === tab) {
                        card.style.display = 'block';
                        setTimeout(() => {
                            card.style.opacity = '1';
                            card.style.transform = 'translateY(0)';
                        }, 10);
                    } else {
                        card.style.opacity = '0';
                        card.style.transform = 'translateY(20px)';
                        setTimeout(() => {
                            card.style.display = 'none';
                        }, 300);
                    }
                });
            });
        });

// Form submission
        const enquiryForm = document.getElementById('enquiryForm');
        
        enquiryForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form data
            const formData = {
                name: document.getElementById('name').value,
                email: document.getElementById('email').value,
                phone: document.getElementById('phone').value,
                guests: document.getElementById('guests').value,
                destination: document.getElementById('destination').value,
                package: document.getElementById('package').value,
                message: document.getElementById('message').value
            };
            
            // In a real application, this would submit to a server
            // Here we just show a confirmation message
            const submitBtn = enquiryForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            
            submitBtn.textContent = 'Sending...';
            submitBtn.disabled = true;
            
            setTimeout(() => {
                // Show success message
                alert(`Thank you ${formData.name}! Your enquiry has been submitted. Our travel experts will contact you within 24 hours to plan your dream vacation.`);
                
                // Reset form
                enquiryForm.reset();
                
                // Reset button
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
                
                // Scroll to top of form
                document.getElementById('enquiry').scrollIntoView({ behavior: 'smooth' });
            }, 1500);
        });

// Initialize fade-in elements on page load
        document.addEventListener('DOMContentLoaded', function() {
            const fadeElements = document.querySelectorAll('.fade-in');
            fadeElements.forEach(element => {
                if (element.getBoundingClientRect().top < window.innerHeight - 100) {
                    element.classList.add('visible');
                }
            });
            
            // Add floating animation to some elements
            const floatingElements = document.querySelectorAll('.destination-card, .package-card, .activity-card');
            floatingElements.forEach((el, index) => {
                el.style.animationDelay = `${index * 0.1}s`;
                el.classList.add('floating');
            });
        });

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

Premium Travel Landingpage Template Preview

Download Options