<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Snow Lion Hotel and Restaurant</title>
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f6f1eb;
      color: #000000;
    }
    header {
      background-color: #5c3a21;
      color: white;
      padding: 1rem 2rem;
      display: flex;
      align-items: center;
    }
    header img {
      height: 60px;
      margin-right: 20px;
    }
    .hero {
      position: relative;
      text-align: center;
      color: white;
    }
    .hero img {
      width: 100%;
      height: 300px; /* or 250px, adjust as needed */
      object-fit: cover;
      filter: brightness(65%);
    }
    .hero-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2.8rem;
      font-weight: bold;
      text-shadow: 2px 2px 4px #000;
    }
    section {
      padding: 3rem 2rem;
    }
    .split-section {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      margin-bottom: 3rem;
    }
    .split-half {
      width: 50%;
      padding: 1rem;
      box-sizing: border-box;
    }
    .image-grid-4 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .image-grid-2 {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    .image-grid-4 img,
    .image-grid-2 img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      border-radius: 6px;
    }
    .activities {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
    }
    .activity {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    .activity img {
      width: 100%;
      height: 150px;
      object-fit: cover;
    }
    .activity p {
      padding: 1rem;
    }
    footer {
      background: #1b263b;
      color: white;
      text-align: center;
      padding: 2rem 1rem;
    }
    a {
      color: #ffd700;
      text-decoration: none;
    }
    @media (max-width: 768px) {
     .split-section {
      flex-direction: column;
    }
    .split-half {
      width: 100%;
    }

    .hero-text {
      font-size: 1.8rem;
      padding: 0 1rem;
    }
 
     .image-grid-4,
     .image-grid-2 {
     grid-template-columns: 1fr !important;
    }

  </style>
  </head>
  <body>
   <div id="snow-container">
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Winter Snow Effect</title>
    <style>
        /* Part 1: Your existing website styles will go here */
        body {
            font-family: sans-serif;
            background-color: #f0f0f0; /* Example background */
            color: #333;
            margin: 0;
            padding: 2em;
            position: relative; /* Needed for the overlay */
            min-height: 100vh;
        }

        h1 {
            color: #111;
        }


        /* --- WINTER EFFECT CODE STARTS HERE --- */

        /* Part 2: The Darkening Overlay */
        body::before {
            content: '';
            position: fixed; /* Covers the entire screen */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3); /* Black with 30% opacity. Adjust 0.3 to make it darker or lighter. */
            z-index: 1; /* Sits on top of your content but below the snow */
            pointer-events: none; /* Allows you to click through the overlay */
        }
        
        /* Part 3: The Snow Container and Snowflake Style */
        #snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Makes the container unclickable */
            z-index: 2; /* Ensures snow is on top of the dark overlay and content */
            overflow: hidden;
        }

        .snowflake {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            opacity: 0.8;
            animation: fall linear infinite;
        }

        /* The falling animation */
        @keyframes fall {
            0% {
                transform: translateY(-10vh); /* Start above the screen */
                opacity: 1;
            }
            100% {
                transform: translateY(110vh); /* End below the screen */
                opacity: 0;
            }
        }
        
        /* --- WINTER EFFECT CODE ENDS HERE --- */

    </style>
</head>
<body>

    <div id="snow-container"></div>

  
    <script>
        // --- JAVASCRIPT FOR SNOWFALL STARTS HERE ---
        
        document.addEventListener('DOMContentLoaded', function() {
            const snowContainer = document.getElementById('snow-container');
            const snowflakesCount = 100; // Number of snowflakes to create

            for (let i = 0; i < snowflakesCount; i++) {
                let snowflake = document.createElement('div');
                snowflake.className = 'snowflake';
                
                // Random size
                const size = Math.random() * 5 + 2; // size between 2px and 7px
                snowflake.style.width = `${size}px`;
                snowflake.style.height = `${size}px`;

                // Random horizontal position
                snowflake.style.left = `${Math.random() * 100}vw`;

                // Random animation duration
                const duration = Math.random() * 10 + 5; // duration between 5s and 15s
                snowflake.style.animationDuration = `${duration}s`;

                // Random animation delay (so they don't all start at once)
                const delay = Math.random() * -10; // negative delay starts them partway through
                snowflake.style.animationDelay = `${delay}s`;

                snowContainer.appendChild(snowflake);
            }
        });

        // --- JAVASCRIPT FOR SNOWFALL ENDS HERE ---
    </script>

</body>
</html>
</div>
  <header style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem;">
    <div style="display: flex; align-items: center;">
      <img src="your-logo.png" alt="Snow Lion Logo" id="logo" />
      <h1 style="margin-left: 10px;">Snow Lion Hotel and Restaurant</h1>
   </div>
   <a href="mailto:loteytenzinl@gmail.com" style="background-color: #b30000; color: white; padding: 0.5rem 1rem; text-decoration: none; border-radius: 6px;">Enquire / Book</a>
     
 </header>
    <div style="display: flex; align-items: center; justify-content: space-between; padding: 1rem;">
    <div style="display: flex; align-items: center;"> 
      <h1 style="margin: 0;">Snow Lion Hotel</h1>
    </div>
    <nav>
     <a href="loteytenzinl@gmail.com" style="background-color: #0a3d62; color: white; padding: 8px 12px; border-radius: 4px; text-decoration: none;">Enquire</a>
    </nav>
  </div>

  <div class="hero">
    <img src="your-hero-image.jpg" alt="Spiti View" />
    <div class="hero-text">Stay in Spiti – Experience the Marvel</div>
  </div>

  <section>
    <h2>Welcome to Snow Lion Hotel, Kaza</h2>
    <p>In the heart of the Himalayas lies a peaceful, luxurious stay – perfect for business or adventure travellers. Located centrally in Kaza, our hotel offers a tranquil blend of culture, comfort, and stunning mountain views.</p>
  </section>
  <section class="split-section">
    <div class="split-half image-grid-4">
      <img src="about1.jpg" alt="About 1">
      <img src="about2.jpg" alt="About 2">
      <img src="about3.jpg" alt="About 3">
     <img src="about4.jpg" alt="About 4">
   </div>
   <div class="split-half">
    <h3>About Our Hotel</h3>
    <p>
      Snow Lion Hotel is not just a stay, it’s an experience. Nestled in the beautiful Spiti Valley, our hotel reflects traditional Tibetan warmth, clean luxury, and an eco-conscious approach. Whether you're seeking tranquility or adventure, this is your perfect Himalayan base.
    </p>
    </div>
   </section>
  <section class="split-section">
    <div class="split-half image-grid-4">
      <img src="room1.jpg" alt="Room 1">
      <img src="room2.jpg" alt="Room 2">
      <img src="room3.jpg" alt="Room 3">
      <img src="room4.jpg" alt="Room 4">
    </div>
    <div class="split-half">
      <h3>Rooms & Comfort</h3>
      <p>We offer 14 clean, pet-friendly rooms with cozy interiors, electric kettles, warm bedding, and free Wi-Fi. Designed for maximum relaxation, perfect after your adventurous days in the Himalayas.</p>
    </div>
  </section>

  <section class="split-section">
    <div class="split-half">
      <h3>Modern Bathrooms</h3>
      <p>Our bathrooms offer hot running water, fresh towels, and complimentary toiletries including soap, shampoo, and shower gel – everything you need to refresh after a day in the mountains.</p>
    </div>
    <div class="split-half image-grid-4">
      <img src="bathroom1.jpg" alt="Bathroom 1">
      <img src="bathroom2.jpg" alt="Bathroom 2">
    </div>
  </section>

  <section class="split-section">
    <div class="split-half image-grid-4">
      <img src="restaurant1.jpg" alt="Restaurant 1">
      <img src="restaurant2.jpg" alt="Restaurant 2">
      <img src="restaurant3.jpg" alt="Restaurant 3">
      <img src="restaurant4.jpg" alt="Restaurant 4">
 
    </div>
    <div class="split-half">
      <h3>Restaurant & Rooftop Dining</h3>
      <p>Enjoy local and international cuisine in our spacious restaurant or soak in panoramic mountain views with a hot beverage at our rooftop dining area. Taste meets tradition in every dish.</p>
    </div>
  </section>

  <section>
    <h2>Activities We Offer</h2>
    <div class="activities">
      <div class="activity">
        <img src="stargazing.jpg" alt="Stargazing" />
        <p>Stargazing Adventures</p>
      </div>
      <div class="activity">
        <img src="trekking.jpg" alt="Trekking" />
        <p>High Altitude Trekking</p>
      </div>
      <div class="activity">
        <img src="yak-safari.jpg" alt="Yak Safari" />
        <p>Ice Hockey Experiences</p>
      </div>
      <div class="activity">
        <img src="culture-tour.jpg" alt="Cultural Tour" />
        <p>Cultural Tours & Village Walks</p>
      </div>
    </div>
  </section>

  <footer>
    <p>Contact us: +91 7876874671</p>
    <p>
      <a href="https://wa.me/917876874671" target="_blank">WhatsApp</a> |
      <a href="https://instagram.com/ snow.lionkaza>Instagram</a>
    </p>
    <p>&copy; 2025 Snow Lion Hotel and Restaurant, Kaza</p>
    <p>
     📞 Call us: <a href="tel:+917876874671">+91 78768 74671</a><br />
     📧 Email: <a href="loteytenzinl@gmail.com">loteytenzinl@gmail.com</a>
   </p>

  </footer>
</body>
</html>