<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Travel Website - Tour Packages</title>
  <style>
    /* Basic Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Body Styles */
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      line-height: 1.6;
    }

    header {
      background-color:  #8df227;
      color: white;
      text-align: center;
      padding: 20px;
    }

    /* Sticky Navigation Bar */
    nav {
      position: sticky;
      top: 0;
      background-color: #faaf2d;
      overflow: hidden;
      z-index: 1000; /* Ensures the nav stays above other elements */
      box-shadow: 0 4px 2px -2px gray;
    }

    /* Logo Style */
    .logo {
      float: left;
      margin-left: 20px;
      font-size: 1.5em;
      color: white;
      padding: 10px;
    }

    nav a {
      float: left;
      display: block;
      color: white;
      padding: 14px 20px;
      text-align: center;
      text-decoration: none;
    }

    nav a:hover {
      background-color: #575757;
    }

    /* Carousel Section */
    .carousel {
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: auto;
      overflow: hidden;
    }

    .carousel-images {
      display: flex;
      transition: transform 1s ease;
    }

    .carousel-image {
      min-width: 100%;
      box-sizing: border-box;
    }

    .carousel img {
      width: 100%;
      height: 400px;
      object-fit: cover;
    }

    .prev, .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
    }

    .prev {
      left: 10px;
    }

    .next {
      right: 10px;
    }

    .container {
      padding: 20px;
    }

    /* Tour Packages */
    .tour-packages, .testimonials {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .tour-package, .testimonial {
      background-color: white;
      padding: 20px;
      margin: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      width: 28%;
      min-width: 250px;
    }

    .tour-package img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .tour-package h3 {
      margin: 10px 0;
    }

    .tour-package .price {
      text-decoration: line-through;
      color: red;
    }

    .tour-package .discount-price {
      font-size: 1.2em;
      color: green;
    }

    .testimonial img {
      border-radius: 50%;
      width: 60px;
      height: 60px;
    }

    .testimonial .stars {
      color: gold;
    }

    /* Contact Form */
    .contact-form input, .contact-form select, .contact-form textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
    }

    .contact-form button {
      background-color: #333;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }

    .footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
    }

    /* Social Media Icons */
    .social-media a {
      margin: 10px;
      color: #333;
      text-decoration: none;
      font-size: 24px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .tour-packages, .testimonials {
        flex-direction: column;
        align-items: center;
      }

      .tour-package, .testimonial {
        width: 90%;
      }
    }

  </style>
</head>
<body>

<header>
  <h1>High Fly Tours and Travels Adimali</h1>
</header>

<!-- Navigation Bar with Logo -->
<nav>
  <div class="logo">
    <span><!--Travel Logo--> <img src="https://highflyadimali.com/wp-content/uploads/2024/03/Logo.png"></span>
  </div>
 <!-- <a href="#">Explore</a>-->
 <!-- <a href="#">Destinations</a>-->
 <!-- <a href="#">Premium Packages at</a>-->
 <a href="#">Explore the Premium Packages at Affordable Price</a>
 <!-- <a href="#">About Us</a>-->
 <!-- <a href="#">Affordable Price</a>-->
</nav>

<!-- Carousel Section -->
<div class="carousel">
  <div class="carousel-images">
    <div class="carousel-image">
      <img src="https://highflyadimali.com/wp-content/uploads/2018/04/swimming.jpg" alt="Destination 1">
    </div>
    <div class="carousel-image">
      <img src="https://highflyadimali.com/wp-content/uploads/2018/04/mykonos.jpg" alt="Destination 2">
    </div>
    <div class="carousel-image">
      <img src="https://highflyadimali.com/wp-content/uploads/2018/04/spa.jpg" alt="Destination 3">
    </div>
  </div>
  <button class="prev" onclick="moveSlide(-1)">&#10094;</button>
  <button class="next" onclick="moveSlide(1)">&#10095;</button>
</div>

<div class="container">
  <!-- Tour Packages Section -->
  <h2>Our Tour Packages</h2>
  <div class="tour-packages">
    <div class="tour-package">
      <img src="https://highflyadimali.com/wp-content/uploads/2018/02/4-8.jpg" alt="Package 1">
      <h3>Adimali Adventure</h3>
      <p>Explore the beauty of Adimali</p>
      <p class="price">$1000</p>
      <p class="discount-price">$500</p>
    </div>
    <div class="tour-package">
      <img src="https://highflyadimali.com/wp-content/uploads/2018/02/1-1.jpg" alt="Package 2">
      <h3>Beach Paradise</h3>
      <p>Relax on exotic beaches</p>
      <p class="price">$1200</p>
      <p class="discount-price">$600</p>
    </div>
    <div class="tour-package">
      <img src="https://highflyadimali.com/wp-content/uploads/2018/02/6.jpg" alt="Package 3">
      <h3>Mountain Trek</h3>
      <p>Adventure through the mountains</p>
      <p class="price">$1500</p>
      <p class="discount-price">$750</p>
    </div>
  </div>

  <!-- Testimonials Section -->
  <h2>What Our Clients Say</h2>
  <div class="testimonials">
    <div class="testimonial">
      <img src="https://img.freepik.com/free-photo/young-girl-showing-thumb-up-stretching-hand-light-gray-t-shirt-dark-grey-zip-front-hoodie-looking-cute_176474-18795.jpg?ga=GA1.1.513521823.1739976686&semt=ais_hybrid/60x60" alt="Client 1">
      <h3>John Doe</h3>
      <p>"Amazing experience!"</p>
      <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    </div>
    <div class="testimonial">
      <img src="https://img.freepik.com/free-photo/what-great-idea-portrait-beautiful-emotional-african-girl-exclaiming-excitedly-making-thumbs-up-sign-approving-offer-go-cinema-with-friends-having-happy-facial-expression_344912-1032.jpg?ga=GA1.1.513521823.1739976686&semt=ais_hybrid/60x60" alt="Client 2">
      <h3>Jane Smith</h3>
      <p>"Best vacation ever!"</p>
      <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    </div>
    <div class="testimonial">
      <img src="https://img.freepik.com/free-photo/smiling-young-beautiful-girl-wearing-olive-green-t-shirt-showing-thumbs-up-isolated-yellow-wall_141793-82354.jpg?ga=GA1.1.513521823.1739976686&semt=ais_hybrid/60x60" alt="Client 3">
      <h3>Mark Johnson</h3>
      <p>"Great customer service!"</p>
      <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    </div>
    <div class="testimonial">
      <img src="https://img.freepik.com/free-photo/smiling-brunette-woman-yellow-sweater-pointing-finger-up-happy-female-model-showing-advertisement-top-indicating-copy-space-standing-white-background_176420-53284.jpg?ga=GA1.1.513521823.1739976686&semt=ais_hybrid/60x60" alt="Client 4">
      <h3>Emily Davis</h3>
      <p>"I’ll be back for more trips!"</p>
      <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    </div>
    <div class="testimonial">
      <img src="https://img.freepik.com/free-photo/joyful-young-pretty-woman-doing-you-gesture-camera-isolated-orange-background-with-copy-space_141793-31633.jpg?ga=GA1.1.513521823.1739976686&semt=ais_hybrid/60x60" alt="Client 5">
      <h3>Chris Lee</h3>
      <p>"Absolutely loved it!"</p>
      <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    </div>

<div class="testimonial">
      <img src="https://img.freepik.com/free-photo/smiling-young-beautiful-girl-wearing-olive-green-t-shirt-showing-thumbs-up-isolated-yellow-wall_141793-82354.jpg?ga=GA1.1.513521823.1739976686&semt=ais_hybrid/60x60" alt="Client 3">
      <h3>Mark Johnson</h3>
      <p>"Great customer service!"</p>
      <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
    </div>

  </div>


</div>

<!-- Contact Form -->
<div class="container">
  <h2>Contact Us</h2>
  <form class="contact-form" onsubmit="sendWhatsapp(event)">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="number" name="passengers" placeholder="Number of Passengers" min="1" required>
    <input type="number" name="children" placeholder="Number of Children" min="0">
    <input type="text" name="destination" placeholder="Destination" required>
    <input type="date" name="startDate" placeholder="Travel Start Date" required>
    <input type="date" name="endDate" placeholder="Travel End Date" required>
    <input type="text" name="address" placeholder="Your Address" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <input type="text" name="country" placeholder="Your Country" required>
    <input type="text" name="pincode" placeholder="Your Pincode" required>
    <button type="submit">Submit</button>
  </form>
</div>




<!-- Google Map Embed -->
<div class="container">
  <h2>Our Location</h2>
  <div>




<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fhighflyadimali%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

 <br>
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/_high_fly_tours_/" data-instgrm-version="14">
  <a href="https://www.instagram.com/_high_fly_tours_/">Instagram post</a>
</blockquote>
<script async src="https://www.instagram.com/embed.js"></script>
 


    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.088746067045!2d76.9594554224886!3d10.009528109735884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b0797a66e719545%3A0xeeeb0a5e18799f9a!2sAIM%20SHOPPING%20COMPLEX!5e0!3m2!1sen!2sin!4v1739913959702!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>


  </div>




</div>






<!-- Footer with Social Media Links -->
<div class="footer">
  <p>&copy;  Brilliant Web Solutions. All rights reserved.</p>
  <p>Contact us: +91-96 56 10 7777 | +91-97 44 31 7777 | Email: highflyadimali@gmail.com</p>
  <div class="social-media">
    <a href="https://facebook.com" target="_blank">Facebook</a>
    <a href="https://instagram.com" target="_blank">Instagram</a>
  </div>
</div>

<script>
// Carousel functionality
let currentSlide = 0;

function moveSlide(step) {
  const slides = document.querySelectorAll('.carousel-image');
  const totalSlides = slides.length;

  currentSlide = (currentSlide + step + totalSlides) % totalSlides;
  const offset = -currentSlide * 100;
  document.querySelector('.carousel-images').style.transform = `translateX(${offset}%)`;
}

// Auto slide every 3 seconds
setInterval(() => moveSlide(1), 3000);

// WhatsApp Form Submission
function sendWhatsapp(event) {
  event.preventDefault();
  
  const formData = new FormData(event.target);
  let message = 'Tour Booking Details:\n';
  
  formData.forEach((value, key) => {
    message += `${key}: ${value}\n`;
  });
  
  const whatsappNumber = '9656107777';  // Replace with the sample number
  const whatsappURL = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`;
  
  window.open(whatsappURL, '_blank');
}
</script>

</body>
</html>