Sunshine Family Travel Template
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>Sunshine Family Travel | Magical Family Holidays</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;800&family=Comfortaa:wght@400;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <!-- Header & Navigation --> <header id="header"> <div class="container header-container"> <a href="#" class="logo"> <div class="logo-icon"> <i class="fas fa-sun"></i> </div> <div class="logo-text"> <span class="brand">Sunshine Family</span> <span class="tagline">Travel Adventures</span> </div> </a> <ul class="nav-links"> <li><a href="#destinations">Destinations</a></li> <li><a href="#activities">Activities</a></li> <li><a href="#safety">Safety</a></li> <li><a href="#packages">Packages</a></li> <li><a href="#testimonials">Stories</a></li> </ul> <div class="mobile-menu" id="mobileMenu"> <i class="fas fa-bars"></i> </div> </div> </header> <!-- Hero Section --> <section class="hero"> <div class="container hero-content"> <div class="hero-badge"> <i class="fas fa-shield-alt"></i> Safe & Certified Family Holidays </div> <h1>Create <span>Magical Memories</span> With Your Family</h1> <p>Discover handpicked destinations and experiences designed for families. Safe, fun, and unforgettable adventures for all ages.</p> <div class="hero-actions"> <a href="#packages" class="btn-primary"> <i class="fas fa-gift"></i> View Holiday Packages </a> <a href="#enquiry" class="btn-secondary"> <i class="fas fa-calendar-check"></i> Plan Your Trip </a> </div> </div> </section> <!-- Destinations --> <section id="destinations" class="destinations"> <div class="container"> <div class="section-header"> <h2 class="section-title">Family-Friendly Destinations</h2> <p class="section-desc">From sun-kissed beaches to magical mountains, discover places where every family member can create lasting memories.</p> </div> <div class="destinations-grid"> <div class="destination-card"> <div class="destination-badge">Most Popular</div> <div class="destination-img" style="background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=1770&q=80');"></div> <div class="destination-content"> <h3 class="destination-title"> <i class="fas fa-umbrella-beach"></i> Sunny Beach Resort, Spain </h3> <p>Child-safe beaches with shallow waters, kids clubs, and family suites with kitchenettes. Perfect for toddlers to teens.</p> <div class="destination-features"> <div class="destination-feature"> <i class="fas fa-child"></i> All ages welcome </div> <div class="destination-feature"> <i class="fas fa-swimming-pool"></i> 5 pools </div> <div class="destination-feature"> <i class="fas fa-utensils"></i> Kids menus </div> </div> </div> </div> <div class="destination-card"> <div class="destination-badge">Adventure</div> <div class="destination-img" style="background-image: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1770&q=80');"></div> <div class="destination-content"> <h3 class="destination-title"> <i class="fas fa-mountain"></i> Alpine Wonderland, Switzerland </h3> <p>Gentle slopes for beginners, wildlife parks, and family-friendly hiking trails. Winter & summer activities for all.</p> <div class="destination-features"> <div class="destination-feature"> <i class="fas fa-snowflake"></i> Ski lessons </div> <div class="destination-feature"> <i class="fas fa-hiking"></i> Hiking trails </div> <div class="destination-feature"> <i class="fas fa-campground"></i> Family camping </div> </div> </div> </div> <div class="destination-card"> <div class="destination-badge">Cultural</div> <div class="destination-img" style="background-image: url('https://plus.unsplash.com/premium_photo-1661914240950-b0124f20a5c1?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dG9reW98ZW58MHx8MHx8fDA%3D');"></div> <div class="destination-content"> <h3 class="destination-title"> <i class="fas fa-theater-masks"></i> Tokyo Disney Adventure, Japan </h3> <p>Theme parks, kid-friendly cultural experiences, and safe, efficient public transport. Perfect blend of fun & culture.</p> <div class="destination-features"> <div class="destination-feature"> <i class="fas fa-monument"></i> Cultural sites </div> <div class="destination-feature"> <i class="fas fa-train"></i> Easy transport </div> <div class="destination-feature"> <i class="fas fa-gamepad"></i> Theme parks </div> </div> </div> </div> </div> </div> </section> <!-- Activities --> <section id="activities"> <div class="container"> <div class="section-header"> <h2 class="section-title">Kid-Friendly Activities</h2> <p class="section-desc">From toddlers to teens, we've curated activities that will keep every family member engaged and smiling.</p> </div> <div class="activities-grid"> <div class="activity-card"> <div class="activity-icon"> <i class="fas fa-water"></i> </div> <h3>Water Park Fun</h3> <p>Gentle slides and splash zones for toddlers and bigger thrills for older kids. Lifeguards at every attraction.</p> </div> <div class="activity-card"> <div class="activity-icon"> <i class="fas fa-hiking"></i> </div> <h3>Nature Trails</h3> <p>Guided wildlife spotting and age-appropriate hiking routes with picnic spots and educational guides.</p> </div> <div class="activity-card"> <div class="activity-icon"> <i class="fas fa-utensils"></i> </div> <h3>Cooking Classes</h3> <p>Interactive family cooking sessions with local kid-friendly recipes. Learn, cook, and enjoy together.</p> </div> <div class="activity-card"> <div class="activity-icon"> <i class="fas fa-star"></i> </div> <h3>Stargazing Nights</h3> <p>Telescope adventures with stories about constellations for all ages. Magical evenings under the stars.</p> </div> </div> </div> </section> <!-- Safety Highlights --> <section id="safety" class="safety-highlights"> <div class="container"> <div class="section-header"> <h2 class="section-title light">Your Family's Safety First</h2> <p class="section-desc" style="color: rgba(255,255,255,0.8);">We go above and beyond to ensure your family's safety at every step of your journey.</p> </div> <div class="safety-grid"> <div class="safety-card"> <div class="safety-icon"> <i class="fas fa-shield-alt"></i> </div> <h3>Certified Childcare</h3> <p>All our partners provide certified childcare staff with thorough background checks and training.</p> </div> <div class="safety-card"> <div class="safety-icon"> <i class="fas fa-first-aid"></i> </div> <h3>24/7 Medical Support</h3> <p>On-call pediatric support and nearby medical facilities at all destinations with English-speaking staff.</p> </div> <div class="safety-card"> <div class="safety-icon"> <i class="fas fa-car"></i> </div> <h3>Safe Transportation</h3> <p>Age-appropriate car seats and safety-equipped vehicles for all transfers. Drivers trained in child safety.</p> </div> <div class="safety-card"> <div class="safety-icon"> <i class="fas fa-user-check"></i> </div> <h3>Vetted Accommodations</h3> <p>All hotels and resorts are thoroughly safety-inspected for family stays with child-proofing where needed.</p> </div> </div> </div> </section> <!-- Packages --> <section id="packages"> <div class="container"> <div class="section-header"> <h2 class="section-title">Family Travel Packages</h2> <p class="section-desc">All-inclusive packages designed with families in mind. No hidden fees, no surprises.</p> </div> <div class="packages-grid"> <div class="package-card"> <div class="package-header"> <h3 class="package-title">Beach Bliss Package</h3> <p>7 days for family of 4</p> <div class="package-price">$2,499<span>/family</span></div> </div> <div class="package-details"> <div class="package-feature"><i class="fas fa-check-circle"></i> Flight & transfers included</div> <div class="package-feature"><i class="fas fa-check-circle"></i> 2 connecting rooms or family suite</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Daily kids club access (4-12 years)</div> <div class="package-feature"><i class="fas fa-check-circle"></i> All-inclusive meal plan</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Water sports & activities</div> <a href="#enquiry" class="package-cta">Book This Package</a> </div> </div> <div class="package-card popular"> <div class="package-badge">Most Popular</div> <div class="package-header"> <h3 class="package-title">Mountain Adventure</h3> <p>8 days for family of 4</p> <div class="package-price">$3,199<span>/family</span></div> </div> <div class="package-details"> <div class="package-feature"><i class="fas fa-check-circle"></i> Scenic flight & mountain transfers</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Chalet with family amenities</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Ski lessons for all levels</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Guided wildlife tours</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Indoor pool & games room</div> <a href="#enquiry" class="package-cta">Book This Package</a> </div> </div> <div class="package-card"> <div class="package-header"> <h3 class="package-title">Cultural Explorer</h3> <p>10 days for family of 4</p> <div class="package-price">$2,899<span>/family</span></div> </div> <div class="package-details"> <div class="package-feature"><i class="fas fa-check-circle"></i> Multi-city flights & bullet train</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Family rooms in central locations</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Interactive museum tickets</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Child-friendly guided tours</div> <div class="package-feature"><i class="fas fa-check-circle"></i> Theme park passes included</div> <a href="#enquiry" class="package-cta">Book This Package</a> </div> </div> </div> </div> </section> <!-- Testimonials --> <section id="testimonials" class="testimonials"> <div class="container"> <div class="section-header"> <h2 class="section-title">Share Their Stories</h2> <p class="section-desc">Don't just take our word for it. Here's what families like yours have to say about their Sunshine adventures.</p> </div> <div class="testimonials-grid"> <div class="testimonial-card"> <div class="testimonial-text"> The safety measures gave us peace of mind, and the kids had the time of their lives. Every detail was thoughtfully planned for families. We'll be back next year! </div> <div class="testimonial-author"> <div class="author-avatar">JP</div> <div class="author-info"> <h4>Jennifer & Paul Miller</h4> <p>Traveled with kids aged 6 & 9 | Beach Bliss Package</p> </div> </div> </div> <div class="testimonial-card"> <div class="testimonial-text"> Our toddler-friendly resort had everything we needed. The childcare staff were amazing, and we actually got to relax on holiday! First time we've all enjoyed a vacation equally. </div> <div class="testimonial-author"> <div class="author-avatar">RS</div> <div class="author-info"> <h4>Robert & Sarah Chen</h4> <p>Traveled with a 2-year-old | Mountain Adventure</p> </div> </div> </div> <div class="testimonial-card"> <div class="testimonial-text"> The teen activities kept our 14-year-old engaged while our younger one loved the kids club. Perfect balance for a multi-age family. Best family vacation we've ever had. </div> <div class="testimonial-author"> <div class="author-avatar">MK</div> <div class="author-info"> <h4>Michael & Karen Jones</h4> <p>Traveled with kids aged 8 & 14 | Cultural Explorer</p> </div> </div> </div> </div> </div> </section> <!-- Enquiry Form --> <section id="enquiry"> <div class="container"> <div class="section-header"> <h2 class="section-title">Plan Your Family Holiday</h2> <p class="section-desc">Tell us about your family and preferences, and we'll create a personalized travel plan just for you.</p> </div> <div class="enquiry-form-container"> <div class="form-header"> <h3>Get Your Personalized Family Travel Plan</h3> <p>Fill out the form below and our family travel experts will contact you within 24 hours.</p> </div> <form id="enquiryForm"> <div class="form-grid"> <div class="form-group"> <label for="name">Parent's Name *</label> <input type="text" id="name" required placeholder="Your full name"> </div> <div class="form-group"> <label for="email">Email Address *</label> <input type="email" id="email" required placeholder="your.email@example.com"> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" placeholder="Your contact number"> </div> <div class="form-group"> <label for="family-size">Family Size *</label> <select id="family-size" required> <option value="">Select number of travelers</option> <option value="2-3">2-3 people</option> <option value="4">4 people</option> <option value="5">5 people</option> <option value="6+">6+ people</option> </select> </div> <div class="form-group"> <label for="children-ages">Children's Ages</label> <input type="text" id="children-ages" placeholder="e.g., 4, 7, and 12"> </div> <div class="form-group"> <label for="destination">Preferred Destination</label> <select id="destination"> <option value="">Any destination</option> <option value="beach">Beach Resort</option> <option value="mountain">Mountain Adventure</option> <option value="cultural">Cultural Exploration</option> <option value="theme-park">Theme Park Fun</option> </select> </div> <div class="form-group full-width"> <label for="message">Additional Requirements</label> <textarea id="message" rows="4" placeholder="Tell us about any special needs, dietary restrictions, or specific activities you're interested in..."></textarea> </div> </div> <button type="submit" class="submit-btn"> <i class="fas fa-paper-plane"></i> Submit Enquiry & Get Your Plan </button> </form> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="footer-content"> <div class="footer-column"> <div class="footer-logo"> <div class="footer-logo-icon"> <i class="fas fa-sun"></i> </div> <div> <h3>Sunshine Family Travel</h3> <p style="opacity: 0.8; margin-top: 5px;">Creating magical family memories since 2010.</p> </div> </div> <p style="margin-bottom: 25px; opacity: 0.9;">We specialize in safe, fun, and unforgettable experiences for families of all sizes. Your happiness is our sunshine.</p> <div class="social-icons"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> </div> </div> <div class="footer-column"> <h3>Quick Links</h3> <ul class="footer-links"> <li><a href="#destinations"><i class="fas fa-map-marker-alt"></i> Destinations</a></li> <li><a href="#activities"><i class="fas fa-gamepad"></i> Activities</a></li> <li><a href="#safety"><i class="fas fa-shield-alt"></i> Safety</a></li> <li><a href="#packages"><i class="fas fa-gift"></i> Packages</a></li> <li><a href="#testimonials"><i class="fas fa-star"></i> Stories</a></li> </ul> </div> <div class="footer-column"> <h3>Contact Us</h3> <ul class="footer-links"> <li><a href="tel:1-800-SUN-FAMILY"><i class="fas fa-phone-alt"></i> 1-800-SUN-FAMILY</a></li> <li><a href="mailto:info@sunshinefamilytravel.com"><i class="fas fa-envelope"></i> info@sunshinefamilytravel.com</a></li> <li><a href="#"><i class="fas fa-map-marker-alt"></i> 123 Family Street, Sunshine City</a></li> <li><a href="#"><i class="fas fa-clock"></i> Mon-Fri: 9AM-6PM | Sat: 10AM-4PM</a></li> </ul> </div> </div> <div class="copyright"> <p>© 2023 Sunshine Family Travel. All rights reserved. | Designed with <i class="fas fa-heart" style="color: #FFC93E;"></i> for happy families.</p> </div> </div> </footer> </body> </html>
CSS
:root { --sunshine-yellow: #FFC93E; --sunshine-yellow-light: #FFE8B6; --sky-blue: #0A8BBA; --sky-blue-light: #E3F6FF; --ocean-blue: #084C61; --ocean-blue-dark: #063543; --coral: #FF6B6B; --mint: #4ECDC4; --cloud-white: #FDFDFD; --text-dark: #2D3748; --text-light: #718096; --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12); --radius-sm: 12px; --radius-md: 20px; --radius-lg: 30px; --transition-fast: 0.3s ease; --transition-slow: 0.6s cubic-bezier(0.23, 1, 0.32, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; color: var(--text-dark); background-color: var(--cloud-white); line-height: 1.7; overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: 'Comfortaa', cursive; font-weight: 700; line-height: 1.2; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; } /* Header & Navigation - Premium */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 18px 0; transition: all var(--transition-fast); background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); } header.scrolled { padding: 12px 0; box-shadow: var(--shadow-md); } .header-container { display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .logo-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--sunshine-yellow) 0%, var(--sky-blue) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; box-shadow: var(--shadow-sm); } .logo-text { display: flex; flex-direction: column; } .logo-text .brand { font-family: 'Comfortaa', cursive; font-size: 1.5rem; font-weight: 800; color: var(--ocean-blue); line-height: 1.1; } .logo-text .tagline { font-size: 0.75rem; color: var(--sky-blue); font-weight: 500; letter-spacing: 0.5px; } .nav-links { display: flex; list-style: none; gap: 40px; } .nav-links a { text-decoration: none; color: var(--ocean-blue); font-weight: 600; font-size: 1rem; position: relative; padding: 8px 0; transition: color var(--transition-fast); } .nav-links a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: linear-gradient(to right, var(--sunshine-yellow), var(--sky-blue)); border-radius: 3px; transition: width var(--transition-fast); } .nav-links a:hover { color: var(--sky-blue); } .nav-links a:hover:after { width: 100%; } .nav-cta { background: linear-gradient(135deg, var(--sunshine-yellow) 0%, #FFB347 100%); color: var(--ocean-blue); padding: 12px 28px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 0.95rem; box-shadow: var(--shadow-sm); transition: all var(--transition-fast); border: none; cursor: pointer; } .nav-cta:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .mobile-menu { display: none; width: 40px; height: 40px; background: var(--sky-blue); border-radius: 10px; align-items: center; justify-content: center; color: white; font-size: 1.3rem; cursor: pointer; box-shadow: var(--shadow-sm); } /* Hero Section - Enhanced */ .hero { padding: 160px 0 100px; background: linear-gradient(135deg, rgba(255, 200, 62, 0.582) 0%, rgba(10, 139, 186, 0.644) 100%), 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'); background-size: cover; background-position: center; position: relative; overflow: hidden; } .hero:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to top, var(--cloud-white), transparent); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 800px; text-align: center; margin: 0 auto; } .hero-badge { display: inline-block; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 10px 24px; border-radius: 50px; font-weight: 600; color: var(--sky-blue); margin-bottom: 30px; box-shadow: var(--shadow-sm); animation: float 3s ease-in-out infinite; } .hero-badge i { color: var(--sunshine-yellow); margin-right: 8px; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .hero h1 { font-size: 3.8rem; color: var(--ocean-blue); margin-bottom: 24px; line-height: 1.1; } .hero h1 span { background: linear-gradient(135deg, var(--sunshine-yellow) 0%, var(--sky-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 1.2rem; color: var(--text-dark); margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-actions { display: flex; gap: 20px; justify-content: center; margin-top: 40px; } .btn-primary { background: linear-gradient(135deg, var(--sunshine-yellow) 0%, #FFB347 100%); color: var(--ocean-blue); padding: 18px 40px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.1rem; box-shadow: var(--shadow-md); transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 10px; } .btn-primary:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .btn-secondary { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); color: var(--ocean-blue); padding: 18px 40px; border-radius: 50px; text-decoration: none; font-weight: 700; font-size: 1.1rem; box-shadow: var(--shadow-md); transition: all var(--transition-fast); display: inline-flex; align-items: center; gap: 10px; } .btn-secondary:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); background: white; } /* Section Styles */ .section-header { text-align: center; margin-bottom: 70px; position: relative; } .section-title { font-size: 2.8rem; color: var(--ocean-blue); margin-bottom: 20px; position: relative; display: inline-block; } .section-title:after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 5px; background: linear-gradient(to right, var(--sunshine-yellow), var(--sky-blue)); border-radius: 5px; } .section-desc { font-size: 1.1rem; color: var(--text-light); max-width: 600px; margin: 0 auto; } section { padding: 100px 0; position: relative; } /* Destinations - Premium Cards */ .destinations { background-color: var(--sky-blue-light); position: relative; overflow: hidden; } .destinations:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23FFC93E" fill-opacity="0.03"/></svg>'); background-size: 200px; z-index: 0; } .destinations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; position: relative; z-index: 1; } .destination-card { background: white; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--transition-fast); position: relative; } .destination-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-lg); } .destination-badge { position: absolute; top: 20px; left: 20px; background: var(--sunshine-yellow); color: var(--ocean-blue); padding: 8px 16px; border-radius: 50px; font-weight: 700; font-size: 0.85rem; z-index: 2; } .destination-img { height: 240px; background-size: cover; background-position: center; position: relative; } .destination-img:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to top, rgba(0,0,0,0.2), transparent); } .destination-content { padding: 30px; } .destination-title { font-size: 1.5rem; color: var(--ocean-blue); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .destination-title i { color: var(--sunshine-yellow); } .destination-features { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; } .destination-feature { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-light); } .destination-feature i { color: var(--mint); } /* Activities - Modern Grid */ .activities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .activity-card { background: white; padding: 40px 30px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: center; transition: all var(--transition-fast); border: 2px solid transparent; position: relative; overflow: hidden; z-index: 1; } .activity-card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--sunshine-yellow-light) 0%, var(--sky-blue-light) 100%); opacity: 0; transition: opacity var(--transition-fast); z-index: -1; } .activity-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: var(--sunshine-yellow); } .activity-card:hover:before { opacity: 0.3; } .activity-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--sunshine-yellow) 0%, var(--sky-blue) 100%); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: white; font-size: 2rem; box-shadow: var(--shadow-md); } /* Safety Highlights - Modern Design */ .safety-highlights { background: linear-gradient(135deg, var(--ocean-blue) 0%, var(--ocean-blue-dark) 100%); color: white; position: relative; overflow: hidden; } .safety-highlights:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%230A8BBA" fill-opacity="0.05"/></svg>'); background-size: 200px; } .section-title.light, .section-subtitle.light { color: white; } .section-subtitle.light:before, .section-subtitle.light:after { background: var(--sunshine-yellow); } .safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; position: relative; z-index: 1; } .safety-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: var(--radius-md); padding: 40px 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); transition: all var(--transition-fast); } .safety-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.15); border-color: var(--sunshine-yellow); } .safety-icon { width: 70px; height: 70px; background: rgba(255, 255, 255, 0.1); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; color: var(--sunshine-yellow); font-size: 1.8rem; border: 2px solid rgba(255, 255, 255, 0.2); } /* Packages - Premium Cards */ .packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .package-card { background: white; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--transition-fast); position: relative; } .package-card.popular { transform: scale(1.05); border: 2px solid var(--sunshine-yellow); z-index: 2; } .package-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-lg); } .package-card.popular:hover { transform: translateY(-15px) scale(1.05); } .package-badge { position: absolute; top: 20px; right: -30px; background: linear-gradient(135deg, var(--sunshine-yellow) 0%, #FFB347 100%); color: var(--ocean-blue); padding: 10px 40px; transform: rotate(45deg); font-weight: 800; font-size: 0.85rem; box-shadow: var(--shadow-md); z-index: 3; } .package-header { background: linear-gradient(135deg, var(--sky-blue) 0%, var(--ocean-blue) 100%); color: white; padding: 40px 30px; text-align: center; position: relative; overflow: hidden; } .package-header:before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.3; } .package-title { font-size: 1.8rem; margin-bottom: 15px; position: relative; z-index: 1; } .package-price { font-size: 3.2rem; font-weight: 800; margin: 20px 0; position: relative; z-index: 1; } .package-price span { font-size: 1rem; font-weight: 500; opacity: 0.9; } .package-details { padding: 40px 30px; } .package-feature { display: flex; align-items: center; margin-bottom: 20px; font-size: 1rem; } .package-feature i { color: var(--mint); margin-right: 15px; font-size: 1.2rem; } .package-cta { display: block; width: 100%; padding: 18px; text-align: center; background: linear-gradient(135deg, var(--sunshine-yellow) 0%, #FFB347 100%); color: var(--ocean-blue); text-decoration: none; font-weight: 700; border-radius: 12px; margin-top: 30px; transition: all var(--transition-fast); } .package-cta:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } /* Testimonials - Modern Carousel Style */ .testimonials { background-color: var(--sky-blue-light); position: relative; overflow: hidden; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .testimonial-card { background: white; padding: 40px; border-radius: var(--radius-md); box-shadow: var(--shadow-md); position: relative; transition: all var(--transition-fast); } .testimonial-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .testimonial-card:before { content: '"'; position: absolute; top: 20px; right: 30px; font-size: 6rem; color: var(--sunshine-yellow-light); font-family: Georgia, serif; line-height: 1; } .testimonial-text { font-size: 1.1rem; line-height: 1.8; color: var(--text-dark); margin-bottom: 30px; position: relative; z-index: 1; } .testimonial-author { display: flex; align-items: center; } .author-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--sunshine-yellow) 0%, var(--sky-blue) 100%); margin-right: 20px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1.3rem; box-shadow: var(--shadow-sm); } .author-info h4 { color: var(--ocean-blue); margin-bottom: 5px; } .author-info p { color: var(--text-light); font-size: 0.9rem; } /* Enquiry Form - Modern Design */ .enquiry-form-container { background: white; padding: 60px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 900px; margin: 0 auto; position: relative; overflow: hidden; } .enquiry-form-container:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 8px; background: linear-gradient(to right, var(--sunshine-yellow), var(--sky-blue)); } .form-header { text-align: center; margin-bottom: 40px; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } .form-group { margin-bottom: 25px; } .form-group.full-width { grid-column: span 2; } label { display: block; margin-bottom: 10px; color: var(--ocean-blue); font-weight: 600; font-size: 0.95rem; } input, select, textarea { width: 100%; padding: 18px 20px; border: 2px solid #E2E8F0; border-radius: 12px; font-family: 'Poppins', sans-serif; font-size: 1rem; transition: all var(--transition-fast); background: white; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sky-blue); box-shadow: 0 0 0 4px rgba(10, 139, 186, 0.1); } .submit-btn { display: block; width: 100%; padding: 20px; background: linear-gradient(135deg, var(--sunshine-yellow) 0%, #FFB347 100%); color: var(--ocean-blue); border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all var(--transition-fast); margin-top: 20px; box-shadow: var(--shadow-md); } .submit-btn:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } /* Footer - Premium */ footer { background: linear-gradient(135deg, var(--ocean-blue) 0%, var(--ocean-blue-dark) 100%); color: white; padding: 80px 0 30px; position: relative; overflow: hidden; } footer:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23FFC93E" fill-opacity="0.03"/></svg>'); background-size: 200px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 50px; margin-bottom: 60px; position: relative; z-index: 1; } .footer-column h3 { color: var(--sunshine-yellow); margin-bottom: 25px; font-size: 1.4rem; } .footer-logo { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } .footer-logo-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--sunshine-yellow) 0%, var(--sky-blue) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem; } .footer-links { list-style: none; } .footer-links li { margin-bottom: 15px; } .footer-links a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: all var(--transition-fast); display: flex; align-items: center; gap: 10px; } .footer-links a:hover { color: white; transform: translateX(5px); } .footer-links a i { color: var(--sunshine-yellow); width: 20px; } .social-icons { display: flex; gap: 15px; margin-top: 25px; } .social-icons a { width: 44px; height: 44px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.1rem; transition: all var(--transition-fast); } .social-icons a:hover { background: var(--sunshine-yellow); color: var(--ocean-blue); transform: translateY(-5px); } .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: 1100px) { .package-card.popular { transform: scale(1); } .package-card.popular:hover { transform: translateY(-15px); } } @media (max-width: 992px) { .hero h1 { font-size: 3rem; } .section-title { font-size: 2.4rem; } .form-grid { grid-template-columns: 1fr; } .form-group.full-width { grid-column: span 1; } } @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } .mobile-menu { display: flex; } .hero { padding: 140px 0 80px; } .hero h1 { font-size: 2.5rem; } .hero-actions { flex-direction: column; align-items: center; } .btn-primary, .btn-secondary { width: 100%; justify-content: center; } .enquiry-form-container { padding: 40px 30px; } .destinations-grid, .packages-grid { grid-template-columns: 1fr; } } @media (max-width: 576px) { .hero h1 { font-size: 2rem; } .section-title { font-size: 2rem; } .destination-card, .package-card { max-width: 100%; } .enquiry-form-container { padding: 30px 20px; } }
JavaScript
// Mobile menu toggle document.getElementById('mobileMenu').addEventListener('click', function() { const navLinks = document.querySelector('.nav-links'); const navCta = document.querySelector('.nav-cta'); navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; if (navCta) navCta.style.display = navCta.style.display === 'block' ? 'none' : 'block'; // Adjust mobile menu layout if (navLinks.style.display === 'flex') { navLinks.style.flexDirection = 'column'; navLinks.style.position = 'absolute'; navLinks.style.top = '100%'; navLinks.style.left = '0'; navLinks.style.width = '100%'; navLinks.style.background = 'rgba(255, 255, 255, 0.98)'; navLinks.style.backdropFilter = 'blur(10px)'; navLinks.style.padding = '30px'; navLinks.style.gap = '20px'; navLinks.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)'; if (navCta) { navCta.style.marginTop = '20px'; navCta.style.width = '100%'; navCta.style.textAlign = 'center'; } } }); // Header scroll effect window.addEventListener('scroll', function() { const header = document.getElementById('header'); if (window.scrollY > 50) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // Form submission document.getElementById('enquiryForm').addEventListener('submit', function(e) { e.preventDefault(); // Get form data const name = document.getElementById('name').value; const email = document.getElementById('email').value; // Create a modal-like confirmation const confirmation = document.createElement('div'); confirmation.innerHTML = ` <div style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(8, 76, 97, 0.9); display:flex; align-items:center; justify-content:center; z-index:2000;"> <div style="background:white; padding:50px; border-radius:20px; max-width:500px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3);"> <div style="width:80px; height:80px; background:linear-gradient(135deg, #FFC93E 0%, #0A8BBA 100%); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 30px; color:white; font-size:2rem;"> <i class="fas fa-check"></i> </div> <h3 style="color:#084C61; margin-bottom:15px;">Thank You, ${name}!</h3> <p style="color:#666; margin-bottom:25px;">We've received your enquiry and our family travel experts will contact you at <strong>${email}</strong> within 24 hours with a personalized travel plan.</p> <button id="closeModal" style="background:linear-gradient(135deg, #FFC93E 0%, #FFB347 100%); color:#084C61; border:none; padding:15px 40px; border-radius:50px; font-weight:700; cursor:pointer; font-size:1rem;">Continue Exploring</button> </div> </div> `; document.body.appendChild(confirmation); // Close modal document.getElementById('closeModal').addEventListener('click', function() { document.body.removeChild(confirmation); }); // Reset form this.reset(); }); // Animate elements on scroll function animateOnScroll() { const elements = document.querySelectorAll('.destination-card, .activity-card, .safety-card, .package-card, .testimonial-card'); elements.forEach(element => { const elementTop = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementTop < windowHeight - 100) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); } // Set initial state for animation document.querySelectorAll('.destination-card, .activity-card, .safety-card, .package-card, .testimonial-card').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; }); // Run animation on load and scroll window.addEventListener('load', animateOnScroll); window.addEventListener('scroll', animateOnScroll); // Package card hover effect enhancement document.querySelectorAll('.package-card').forEach(card => { card.addEventListener('mouseenter', function() { this.style.zIndex = '10'; }); card.addEventListener('mouseleave', function() { this.style.zIndex = '1'; }); });
Output Preview
Desktop
Mobile
Fullscreen