index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Website</title>
    <link rel="stylesheet" href="styles.css">
    <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=Bungee+Tint&family=Satisfy&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 Section -->
    <header>
        
            <div class="main_box">
      <input type="checkbox" id="check" />
      <div class="btn_one">
        <label for="check" >
          <i class="fa-solid fa-bars"></i>
        </label>
      </div>

      <div class="sidebar_menu">
        <div class="logo">
          <a href="#">Dive in♨️</a>
        </div>

        <div class="btn_two">
          <label for="check" >
            <i class="fa-solid fa-xmark"></i>
          </label>
        </div>

        <div class="menu">
          <ul>
            <li>
              <i class="fa-solid fa-image"></i>
              <a href="#">Gallery</a>
            </li>
            <li>
              <i class="fa-solid fa-arrow-up-right-from-square"></i>
              <a href="#">Shortcuts</a>
            </li>
            <li>
              <i class="fa-solid fa-photo-film"></i>
              <a href="#">Exhibits</a>
            </li>
            <li>
              <i class="fa-solid fa-calendar-days"></i>
              <a href="#">Events</a>
            </li>
            <li>
              <i class="fa-solid fa-store"></i>
              <a href="#">Store</a>
            </li>
            <li>
              <i class="fa-solid fa-phone"></i>
              <a href="#">Contact</a>
            </li>
            <li>
              <i class="fa-regular fa-comments"></i>
              <a href="#">Feedback</a>
            </li>
          </ul>
        </div>

        <div class="social_media">
          <ul>
            <a href="#"><i class="fa-brands fa-facebook"></i></i></a>
            <a href="#"><i class="fa-brands fa-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-instagram"></i></i></a>
            <a href="#"><i class="fa-brands fa-youtube"></i></a>
          </ul>
        </div>
      </div>
    </div>
           
        
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <h1>Explore Mysuru</h1><br>
        <p class="boxed-text" id="nextmain">Experience Mysuru's Cultural Heritage </p><br><br>
       
         
        
    

    <!-- Destination Cards Section -->
    <section class="destinations">
        <h2>Popular in Mysuru during October</h2>
        <div class="card-container">
            <div class="card">
                <img src="chamundihill.png" alt="Chamundi Hill">
                <h3>Chamundi Hills</h3>
                <p>Rise to divine heights at Chamundi Hill, Mysuru's sacred crown, where ancient temples meet breathtaking vistas. Hike up to the majestic Chamundeshwari Temple, witness stunning sunrise views, and experience spiritual bliss amidst nature's splendor.</p>
            </div>
            <div class="card">
                <img src="dasara.png" alt="Dasara Procession">
                <h3>Dasara Procession</h3>
                <p>Experience the vibrant grandeur of Mysuru Dasara! Witness the majestic procession of decked-up elephants, resplendent royal floats, and cultural performances, culminating in a dazzling display of lights, sound, and tradition.

</p>
            </div>
            <!-- Add more cards -->
        </div>
    </section>
  </section>
</body>
</html>