Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Andaman Bliss | Your Tropical Paradise Awaits</title> | |
| <meta name="description" content="Explore the pristine beaches and vibrant culture of the Andaman Islands. Book tours, rentals, and luxury resorts."> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <!-- FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CSS VARIABLES & RESET --- */ | |
| :root { | |
| --primary-color: #006D77; /* Deep Teal */ | |
| --secondary-color: #83C5BE; /* Soft Cyan */ | |
| --accent-color: #E29578; /* Terracotta/Coral */ | |
| --bg-color: #EDF6F9; /* Very Light Blue */ | |
| --text-dark: #2D3436; | |
| --text-light: #636E72; | |
| --white: #ffffff; | |
| --glass-bg: rgba(255, 255, 255, 0.85); | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-dark); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Playfair Display', serif; | |
| color: var(--primary-color); | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| img { | |
| max-width: 100%; | |
| display: block; | |
| } | |
| /* --- UTILITY CLASSES --- */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .section-padding { | |
| padding: 80px 0; | |
| } | |
| .text-center { | |
| text-align: center; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 12px 30px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| border: none; | |
| font-size: 1rem; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: var(--white); | |
| box-shadow: 0 4px 15px rgba(0, 109, 119, 0.3); | |
| } | |
| .btn-primary:hover { | |
| background-color: #005056; | |
| transform: translateY(-2px); | |
| } | |
| .btn-outline { | |
| border: 2px solid var(--white); | |
| color: var(--white); | |
| background: transparent; | |
| } | |
| .btn-outline:hover { | |
| background: var(--white); | |
| color: var(--primary-color); | |
| } | |
| .section-title { | |
| margin-bottom: 50px; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| display: block; | |
| width: 60px; | |
| height: 3px; | |
| background-color: var(--accent-color); | |
| margin: 0 auto; | |
| } | |
| /* --- HEADER & NAV --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| transition: var(--transition); | |
| background: transparent; | |
| } | |
| header.scrolled { | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 2px 20px rgba(0,0,0,0.05); | |
| padding: 15px 0; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| font-family: 'Playfair Display', serif; | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--white); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo i { | |
| color: var(--secondary-color); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 30px; | |
| } | |
| .nav-links a { | |
| color: var(--white); | |
| font-weight: 500; | |
| position: relative; | |
| transition: var(--transition); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--secondary-color); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-cta { | |
| background-color: var(--white); | |
| color: var(--primary-color); | |
| padding: 8px 20px; | |
| border-radius: 20px; | |
| font-weight: 600; | |
| } | |
| .nav-cta:hover { | |
| background-color: var(--secondary-color); | |
| color: var(--white); | |
| } | |
| /* Mobile Menu */ | |
| .hamburger { | |
| display: none; | |
| color: var(--white); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* --- HERO SECTION --- */ | |
| #home { | |
| height: 100vh; | |
| background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), url('https://picsum.photos/seed/andamanbeach/1920/1080'); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| color: var(--white); | |
| position: relative; | |
| } | |
| .hero-content { | |
| max-width: 800px; | |
| padding: 20px; | |
| animation: fadeIn Up 1s ease-out; | |
| } | |
| .hero-content h1 { | |
| font-size: 4rem; | |
| margin-bottom: 20px; | |
| color: var(--white); | |
| text-shadow: 2px 2px 10px rgba(0,0,0,0.3); | |
| } | |
| .hero-content p { | |
| font-size: 1.2rem; | |
| margin-bottom: 40px; | |
| opacity: 0.9; | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 20px; | |
| justify-content: center; | |
| } | |
| /* --- STATS BAR --- */ | |
| .stats-bar { | |
| background-color: var(--white); | |
| padding: 40px 0; | |
| margin-top: -50px; | |
| position: relative; | |
| z-index: 10; | |
| border-radius: var(--shadow); | |
| display: flex; | |
| justify-content: space-around; | |
| box-shadow: var(--shadow); | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| flex: 1; | |
| min-width: 150px; | |
| } | |
| .stat-item i { | |
| font-size: 2rem; | |
| color: var(--primary-color); | |
| margin-bottom: 10px; | |
| } | |
| .stat-item h3 { | |
| font-size: 1.5rem; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .stat-item p { | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| } | |
| /* --- PACKAGES --- */ | |
| #packages { | |
| background-color: var(--white); | |
| } | |
| .package-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .package-card { | |
| background: var(--white); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 20px rgba(0,0,0,0.05); | |
| transition: var(--transition); | |
| position: relative; | |
| border: 1px solid #eee; | |
| } | |
| .package-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(0, 109, 119, 0.15); | |
| } | |
| .card-image { | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .card-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.5s ease; | |
| } | |
| .package-card:hover .card-image img { | |
| transform: scale(1.1); | |
| } | |
| .card-content { | |
| padding: 25px; | |
| } | |
| .card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .card-header h3 { | |
| font-size: 1.4rem; | |
| } | |
| .price { | |
| color: var(--accent-color); | |
| font-weight: 700; | |
| font-size: 1.2rem; | |
| } | |
| .duration { | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| margin-bottom: 15px; | |
| display: block; | |
| } | |
| .card-features { | |
| margin-bottom: 20px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .feature-tag { | |
| background-color: var(--bg-color); | |
| padding: 5px 12px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| color: var(--primary-color); | |
| } | |
| .card-footer { | |
| border-top: 1px solid #eee; | |
| padding-top: 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| /* --- ACTIVITIES --- */ | |
| #activities { | |
| background-color: var(--bg-color); | |
| } | |
| .activity-slider { | |
| display: flex; | |
| overflow-x: auto; | |
| gap: 20px; | |
| padding-bottom: 20px; | |
| scroll-snap-type: x mandatory; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .activity-item { | |
| min-width: 280px; | |
| scroll-snap-align: center; | |
| position: relative; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| height: 350px; | |
| cursor: pointer; | |
| } | |
| .activity-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: var(--transition); | |
| } | |
| .activity-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 20px; | |
| background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); | |
| color: var(--white); | |
| } | |
| .activity-item:hover img { | |
| transform: scale(1.1); | |
| } | |
| /* --- BOOKING WIDGET --- */ | |
| #booking { | |
| background: var(--primary-color); | |
| color: var(--white); | |
| padding: 60px 0; | |
| } | |
| .booking-container { | |
| background: var(--white); | |
| border-radius: 20px; | |
| padding: 40px; | |
| color: var(--text-dark); | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 40px; | |
| box-shadow: 0 20px 50px rgba(0,0,0,0.2); | |
| } | |
| .booking-info h2 { | |
| color: var(--primary-color); | |
| margin-bottom: 15px; | |
| } | |
| .booking-info p { | |
| margin-bottom: 30px; | |
| color: var(--text-light); | |
| } | |
| .booking-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .form-group { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .form-group input, .form-group select { | |
| flex: 1; | |
| padding: 12px 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| font-family: inherit; | |
| outline: none; | |
| } | |
| .form-group input:focus, .form-group select:focus { | |
| border-color: var(--primary-color); | |
| } | |
| /* --- BLOG --- */ | |
| #blog { | |
| background-color: var(--white); | |
| } | |
| .blog-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .blog-card { | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.05); | |
| transition: var(--transition); | |
| } | |
| .blog-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .blog-img { | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .blog-img img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .blog-content { | |
| padding: 20px; | |
| } | |
| .blog-meta { | |
| font-size: 0.8rem; | |
| color: var(--text-light); | |
| margin-bottom: 10px; | |
| } | |
| .blog-content h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 10px; | |
| } | |
| .read-more { | |
| color: var(--primary-color); | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| /* --- CONTACT & ABOUT --- */ | |
| #contact { | |
| background-color: var(--bg-color); | |
| } | |
| .contact-wrapper { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 50px; | |
| } | |
| .about-card { | |
| background: var(--white); | |
| padding: 40px; | |
| border-radius: 20px; | |
| box-shadow: var(--shadow); | |
| } | |
| .contact-form { | |
| background: var(--white); | |
| padding: 40px; | |
| border-radius: 20px; | |
| box-shadow: var(--shadow); | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .contact-item i { | |
| background-color: var(--secondary-color); | |
| color: var(--primary-color); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| background-color: #1a2631; | |
| color: #dfe6e9; | |
| padding: 60px 0 20px; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-col h4 { | |
| color: var(--white); | |
| margin-bottom: 20px; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .footer-col ul li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-col ul li a { | |
| color: #b2bec3; | |
| transition: var(--transition); | |
| } | |
| .footer-col ul li a:hover { | |
| color: var(--secondary-color); | |
| padding-left: 5px; | |
| } | |
| .footer-bottom { | |
| border-top: 1px solid rgba(255,255,255,0.1); | |
| padding-top: 20px; | |
| text-align: center; | |
| font-size: 0.9rem; | |
| } | |
| /* --- TOAST NOTIFICATION --- */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background-color: var(--white); | |
| padding: 15px 25px; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 40px rgba(0,0,0,0.2); | |
| border-left: 5px solid var(--primary-color); | |
| transform: translateX(200%); | |
| transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); | |
| z-index: 2000; | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast i { | |
| color: var(--primary-color); | |
| font-size: 1.2rem; | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 992px) { | |
| .hero-content h1 { | |
| font-size: 3rem; | |
| } | |
| .booking-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .contact-wrapper { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hamburger { | |
| display: block; | |
| z-index: 1001; | |
| } | |
| .nav-links { | |
| position: fixed; | |
| top: 0; | |
| right: -100%; | |
| width: 70%; | |
| height: 100vh; | |
| background-color: var(--white); | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| transition: var(--transition); | |
| box-shadow: -5px 0 15px rgba(0,0,0,0.1); | |
| } | |
| .nav-links.active { | |
| right: 0; | |
| } | |
| .nav-links a { | |
| color: var(--text-dark); | |
| font-size: 1.2rem; | |
| } | |
| .hero-content h1 { | |
| font-size: 2.5rem; | |
| } | |
| .form-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .stats-bar { | |
| flex-direction: column; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header id="header"> | |
| <div class="container"> | |
| <nav> | |
| <a href="#" class="logo"> | |
| <i class="fa-solid fa-umbrella-beach"></i> Andaman Bliss | |
| </a> | |
| <div class="hamburger" id="hamburger"> | |
| <i class="fa-solid fa-bars"></i> | |
| </div> | |
| <ul class="nav-links" id="nav-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#packages">Packages</a></li> | |
| <li><a href="#activities">Activities</a></li> | |
| <li><a href="#blog">Blog</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="#booking" class="nav-cta">Book Now</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home"> | |
| <div class="hero-content"> | |
| <h1>Discover the Paradise of the Andamans</h1> | |
| <p>Experience pristine beaches, crystal clear waters, and unforgettable adventures in one of India's most stunning archipelagos.</p> | |
| <div class="hero-buttons"> | |
| <a href="#packages" class="btn btn-primary">Explore Tours</a> | |
| <a href="#about" class="btn btn-outline">Learn More</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Bar --> | |
| <div class="container"> | |
| <div class="stats-bar"> | |
| <div class="stat-item"> | |
| <i class="fa-solid fa-map-location-dot"></i> | |
| <h3>57</h3> | |
| <p>Islands</p> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fa-solid fa-umbrella-beach"></i> | |
| <h3>100+</h3> | |
| <p>Tours</p> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fa-solid fa-users"></i> | |
| <h3>10k+</h3> | |
| <p>Happy Travelers</p> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fa-solid fa-medal"></i> | |
| <h3>5 Star</h3> | |
| <p>Rating</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Packages Section --> | |
| <section id="packages" class="section-padding"> | |
| <div class="container"> | |
| <div class="text-center"> | |
| <div class="section-title"> | |
| <h2>Popular Packages</h2> | |
| </div> | |
| </div> | |
| <div class="package-grid"> | |
| <!-- Package 1 --> | |
| <div class="package-card"> | |
| <div class="card-image"> | |
| <img src="https://picsum.photos/seed/andaman1/400/300" alt="Havelock Tour"> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-header"> | |
| <h3>Havelock Escape</h3> | |
| <span class="price">$450</span> | |
| </div> | |
| <span class="duration"><i class="fa-regular fa-clock"></i> 4 Days / 3 Nights</span> | |
| <div class="card-features"> | |
| <span class="feature-tag">Transfer</span> | |
| <span class="feature-tag">Stay</span> | |
| <span class="feature-tag">Breakfast</span> | |
| </div> | |
| <div class="card-footer"> | |
| <a href="#booking" onclick="prefillBooking('Havelock Escape')" class="btn btn-primary" style="padding: 8px 20px; font-size: 0.9rem;">Book Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Package 2 --> | |
| <div class="package-card"> | |
| <div class="card-image"> | |
| <img src="https://picsum.photos/seed/andaman2/400/300" alt="Andaman Cruise"> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-header"> | |
| <h3>Island Hopper</h3> | |
| <span class="price">$680</span> | |
| </div> | |
| <span class="duration"><i class="fa-regular fa-clock"></i> 6 Days / 5 Nights</span> | |
| <div class="card-features"> | |
| <span class="feature-tag">Cruise</span> | |
| <span class="feature-tag">Snorkeling</span> | |
| <span class="feature-tag">Dinner</span> | |
| </div> | |
| <div class="card-footer"> | |
| <a href="#booking" onclick="prefillBooking('Island Hopper')" class="btn btn-primary" style="padding: 8px 20px; font-size: 0.9rem;">Book Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Package 3 --> | |
| <div class="package-card"> | |
| <div class="card-image"> | |
| <img src="https://picsum.photos/seed/andaman3/400/300" alt="Scuba Diving"> | |
| </div> | |
| <div class="card-content"> | |
| <div class="card-header"> | |
| <h3>Deep Blue Dive</h3> | |
| <span class="price">$320</span> | |
| </div> | |
| <span class="duration"><i class="fa-regular fa-clock"></i> 3 Days / 2 Nights</span> | |
| <div class="card-features"> | |
| <span class="feature-tag">Diving</span> | |
| <span class="feature-tag">Resort</span> | |
| <span class="feature-tag">Breakfast</span> | |
| </div> | |
| <div class="card-footer"> | |
| <a href="#booking" onclick="prefillBooking('Deep Blue Dive')" class="btn btn-primary" style="padding: 8px 20px; font-size: 0.9rem;">Book Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Activities Section --> | |
| <section id="activities" class="section-padding"> | |
| <div class="container"> | |
| <div class="text-center"> | |
| <div class="section-title"> | |
| <h2>Adventures Await</h2> | |
| </div> | |
| </div> | |
| <div class="activity-slider"> | |
| <div class="activity-item"> | |
| <img src="https://picsum.photos/seed/snorkel/400/500" alt="Snorkeling"> | |
| <div class="activity-overlay"> | |
| <h3>Snorkeling</h3> | |
| <p>Explore the coral reefs</p> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <img src="https://picsum.photos/seed/diving/400/500" alt="Scuba Diving"> | |
| <div class="activity-overlay"> | |
| <h3>Scuba Diving</h3> | |
| <p>Dive deep into the blue</p> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <img src="https://picsum.photos/seed/jet/400/500" alt="Jet Skiing"> | |
| <div class="activity-overlay"> | |
| <h3>Jet Skiing</h3> | |
| <p>Feel the adrenaline rush</p> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <img src="https://picsum.photos/seed/fishing/400/500" alt="Fishing"> | |
| <div class="activity-overlay"> | |
| <h3>Deep Sea Fishing</h3> | |
| <p>Catch the big one</p> | |
| </div> | |
| </div> | |
| <div class="activity-item"> | |
| <img src="https://picsum.photos/seed/camping/400/500" alt="Beach Camping"> | |
| <div class="activity-overlay"> | |
| <h3>Beach Camping</h3> | |
| <p>Under the stars</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About & Trust Section --> | |
| <section id="about" class="section-padding" style="background-color: var(--white);"> | |
| <div class="container"> | |
| <div class="text-center"> | |
| <div class="section-title"> | |
| <h2>Why Choose Us</h2> | |
| </div> | |
| </div> | |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px;"> | |
| <div class="about-card text-center"> | |
| <i class="fa-solid fa-shield-halved" style="font-size: 3rem; color: var(--primary-color); margin-bottom: 20px;"></i> | |
| <h3>Safe Travel</h3> | |
| <p style="margin-top: 10px; color: var(--text-light);">We prioritize your safety with licensed guides and high-quality equipment.</p> | |
| </div> | |
| <div class="about-card text-center"> | |
| <i class="fa-solid fa-headset" style="font-size: 3rem; color: var(--primary-color); margin-bottom: 20px;"></i> | |
| <h3>24/7 Support</h3> | |
| <p style="margin-top: 10px; color: var(--text-light);">Our team is available around the clock to assist you during your trip.</p> | |
| </div> | |
| <div class="about-card text-center"> | |
| <i class="fa-solid fa-hand-holding-dollar" style="font-size: 3rem; color: var(--primary-color); margin-bottom: 20px;"></i> | |
| <h3>Best Prices</h3> | |
| <p style="margin-top: 10px; color: var(--text-light);">Competitive pricing with no hidden charges for a transparent experience.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Booking Section --> | |
| <section id="booking"> | |
| <div class="container"> | |
| <div class="booking-container"> | |
| <div class="booking-info"> | |
| <h2>Start Your Journey</h2> | |
| <p>Ready to escape to the Andamans? Fill out the form and our travel experts will curate the perfect itinerary for you.</p> | |
| <div style="display: flex; gap: 20px; margin-top: 30px;"> | |
| <div> | |
| <h4 style="color: var(--primary-color);">Call Us</h4> | |
| <p>+91 98765 43210</p> | |
| </div> | |
| <div> | |
| <h4 style="color: var(--primary-color);">Email Us</h4> | |
| <p>hello@andamanbliss.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="booking-form"> | |
| <form id="bookingForm" onsubmit="handleBooking(event)"> | |
| <div class="form-group"> | |
| <input type="text" placeholder="Your Name" required> | |
| </div> | |
| <div class="form-group"> | |
| <input type="email" placeholder="Your Email" required> | |
| </div> | |
| <div class="form-group"> | |
| <select required> | |
| <option value="">Select Package</option> | |
| <option value="Havelock Escape">Havelock Escape</option> | |
| <option value="Island Hopper">Island Hopper</option> | |
| <option value="Deep Blue Dive">Deep Blue Dive</option> | |
| <option value="Custom">Custom Plan</option> | |
| </select> | |
| </div> | |
| <div class="form-row"> | |
| <input type="date" required> | |
| <input type="number" placeholder="Guests" min="1" max="10" required> | |
| </div> | |
| <button type="submit" class="btn btn-primary" style="width: 100%;">Confirm Booking</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section id="blog" class="section-padding"> | |
| <div class="container"> | |
| <div class="text-center"> | |
| <div class="section-title"> | |
| <h2>Travel Blog</h2> | |
| </div> | |
| </div> | |
| <div class="blog-grid"> | |
| <article class="blog-card"> | |
| <div class="blog-img"> | |
| <img src="https://picsum.photos/seed/blog1/400/300" alt="Best time to visit"> | |
| </div> | |
| <div class="blog-content"> | |
| <div class="blog-meta">Oct 12, 2023 • Tips</div> | |
| <h3>Best Time to Visit Andaman</h3> | |
| <p style="font-size: 0.9rem; color: var(--text-light); margin-bottom: 15px;">Discover the optimal season for clear skies and calm waters.</p> | |
| <a href="#" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a> | |
| </div> | |
| </article> | |
| <article class="blog-card"> | |
| <div class="blog-img"> | |
| <img src="https://picsum.photos/seed/blog2/400/300" alt="Local food"> | |
| </div> | |
| <div class="blog-content"> | |
| <div class="blog-meta">Sep 28, 2023 • Food</div> | |
| <h3>Top Local Dishes to Try</h3> | |
| <p style="font-size: 0.9rem; color: var(--text-light); margin-bottom: 15px;">From crab curry to coconut sweets, taste the island's flavor.</p> | |
| <a href="#" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a> | |
| </div> | |
| </article> | |
| <article class="blog-card"> | |
| <div class="blog-img"> | |
| <img src="https://picsum.photos/seed/blog3/400/300" alt="Itinerary"> | |
| </div> | |
| <div class="blog-content"> | |
| <div class="blog-meta">Sep 15, 2023 • Itinerary</div> | |
| <h3>7-Day Perfect Itinerary</h3> | |
| <p style="font-size: 0.9rem; color: var(--text-light); margin-bottom: 15px;">A detailed guide on how to cover the best spots in a week.</p> | |
| <a href="#" class="read-more">Read More <i class="fa-solid fa-arrow-right"></i></a> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="section-padding"> | |
| <div class="container"> | |
| <div class="contact-wrapper"> | |
| <div class="about-card"> | |
| <h3 style="margin-bottom: 20px;">Get in Touch</h3> | |
| <p style="margin-bottom: 30px; color: var(--text-light);">Have questions about our packages or need assistance? Reach out to us.</p> | |
| <div class="contact-item"> | |
| <i class="fa-solid fa-location-dot"></i> | |
| <div> | |
| <h4>Location</h4> | |
| <p>Port Blair, Andaman & Nicobar Islands</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fa-solid fa-envelope"></i> | |
| <div> | |
| <h4>Email</h4> | |
| <p>support@andamanbliss.com</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fa-solid fa-phone"></i> | |
| <div> | |
| <h4>Phone</h4> | |
| <p>+91 98765 43210</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-form"> | |
| <h3 style="margin-bottom: 20px;">Send a Message</h3> | |
| <form onsubmit="handleContact(event)"> | |
| <div class="form-row"> | |
| <input type="text" placeholder="Name" required> | |
| <input type="email" placeholder="Email" required> | |
| </div> | |
| <input type="text" placeholder="Subject" required> | |
| <textarea rows="5" placeholder="Your Message" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; font-family: inherit;" required></textarea> | |
| <button type="submit" class="btn btn-primary">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-col"> | |
| <div class="logo" style="margin-bottom: 20px;"> | |
| <i class="fa-solid fa-umbrella-beach"></i> Andaman Bliss | |
| </div> | |
| <p style="font-size: 0.9rem; color: #b2bec3;">Your gateway to the most beautiful islands in the Bay of Bengal. Experience luxury and adventure combined.</p> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Quick Links</h4> | |
| <ul> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#packages">Packages</a></li> | |
| <li><a href="#activities">Activities</a></li> | |
| <li><a href="#blog">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Legal</h4> | |
| <ul> | |
| <li><a href="#">Privacy Policy</a></li> | |
| <li><a href="#">Terms of Service</a></li> | |
| <li><a href="#">Refund Policy</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Follow Us</h4> | |
| <div style="display: flex; gap: 15px;"> | |
| <a href="#"><i class="fa-brands fa-facebook fa-lg"></i></a> | |
| <a href="#"><i class="fa-brands fa-instagram fa-lg"></i></a> | |
| <a href="#"><i class="fa-brands fa-twitter fa-lg"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 Andaman Bliss. All rights reserved.</p> | |
| <p style="margin-top: 5px; font-size: 0.8rem;"> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: var(--secondary-color);">anycoder</a> | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Toast Notification --> | |
| <div class="toast" id="toast"> | |
| <i class="fa-solid fa-circle-check"></i> | |
| <div> | |
| <h4 style="margin: 0; font-size: 1rem;">Success!</h4> | |
| <p style="margin: 0; font-size: 0.85rem; color: var(--text-light);" id="toastMessage">Action completed successfully.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // --- Mobile Menu Toggle --- | |
| const hamburger = document.getElementById('hamburger'); | |
| const navLinks = document.getElementById('nav-links'); | |
| const navItems = document.querySelectorAll('.nav-links a'); | |
| hamburger.addEventListener('click', () => { | |
| navLinks.classList.toggle('active'); | |
| const icon = hamburger.querySelector('i'); | |
| if (navLinks.classList.contains('active')) { | |
| icon.classList.remove('fa-bars'); | |
| icon.classList.add('fa-xmark'); | |
| } else { | |
| icon.classList.remove('fa-xmark'); | |
| icon.classList.add('fa-bars'); | |
| } | |
| }); | |
| // Close mobile menu when a link is clicked | |
| navItems.forEach(item => { | |
| item.addEventListener('click', () => { | |
| navLinks.classList.remove('active'); | |
| hamburger.querySelector('i').classList.remove('fa-xmark'); | |
| hamburger.querySelector('i').classList.add('fa-bars'); | |
| }); | |
| }); | |
| // --- Sticky Header Effect --- | |
| const header = document.getElementById('header'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // --- Booking Interaction --- | |
| function prefillBooking(packageName) { | |
| const select = document.querySelector('#booking select'); | |
| select.value = packageName; | |
| } | |
| function showToast(message) { | |
| const toast = document.getElementById('toast'); | |
| const toastMsg = document.getElementById('toastMessage'); | |
| toastMsg.textContent = message; | |
| toast.classList.add('show'); | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| function handleBooking(e) { | |
| e.preventDefault(); | |
| // Simulate API call | |
| const btn = e.target.querySelector('button'); | |
| const originalText = btn.textContent; | |
| btn.textContent = 'Processing...'; | |
| btn.disabled = true; | |
| setTimeout(() => { | |
| showToast('Booking request sent! We will contact you shortly.'); | |
| e.target.reset(); | |
| btn.textContent = originalText; | |
| btn.disabled = false; | |
| }, 1500); | |
| } | |
| function handleContact(e) { | |
| e.preventDefault(); | |
| showToast('Message sent successfully!'); | |
| e.target.reset(); | |
| } | |
| </script> | |
| </body> | |
| </html> |