PATH:
home
/
u865795251
/
domains
/
whatisnewis.com
/
public_html
/
homestays
/
Editing: index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homestays Ludhiana – Premium Rooms for the Perfect Stay</title> <meta name="description" content="Experience comfort and luxury at Homestays Ludhiana. Premium rooms designed for relaxation with modern amenities, free WiFi, and 24/7 support. Book your stay now!"> <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=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" /> <link rel="stylesheet" href="css/style.css?v=2.0"> <style> @media (max-width: 400px) { .form-row-2 input, .form-row-2 select { padding-left: 10px !important; padding-right: 10px !important; font-size: 13px !important; } } </style> </head> <body> <!-- Top Bar --> <div class="top-bar"> <div class="container top-bar-inner"> <div style="width: 100%; text-align: center;"> Welcome to Homestays Ludhiana! Book directly with us for the best rates. Premium rooms with modern amenities await you. </div> </div> </div> <!-- Header --> <header class="site-header" id="header"> <div class="container header-inner"> <div class="logo"> <a href="#home"> <img src="images/White LOGO.png" alt="Homestays Ludhiana Logo" class="site-logo"> </a> </div> <nav class="main-nav"> <ul> <li><a href="#home" class="active">Home</a></li> <li><a href="#rooms">Rooms</a></li> <li><a href="#amenities">Amenities</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#location">Location</a></li> <li><a href="#inquiry">Contact</a></li> </ul> <a href="#inquiry" class="btn btn-outline">BOOK NOW</a> </nav> <button class="mobile-menu-btn" id="mobileMenuBtn"><i class="fas fa-bars"></i></button> </div> <!-- Mobile Nav --> <div class="mobile-nav" id="mobileNav"> <ul> <li><a href="#home">Home</a></li> <li><a href="#rooms">Rooms</a></li> <li><a href="#amenities">Amenities</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#location">Location</a></li> <li><a href="#inquiry">Contact</a></li> </ul> <a href="#inquiry" class="btn btn-bronze" style="margin-top:15px; display:block; width:100%; text-align:center;">BOOK NOW</a> </div> </header> <!-- ============================== --> <!-- 1. HERO SECTION --> <!-- ============================== --> <section class="hero" id="home"> <div class="hero-slider"> <div class="hero-slide active" style="background-image: url('images/1920 x 1020.jpg.jpeg')"></div> <div class="hero-slide" style="background-image: url('images/2.jpg\ \(3\).jpeg')"></div> <!-- <div class="hero-slide" style="background-image: url('images/7.jpg\ \(1\).jpeg')"></div> --> </div> <div class="hero-overlay"></div> <div class="hero-content-wrapper container"> <div class="hero-text animate-ready"> <p class="hero-badge luxury-blink-accent" style="color:white;"><i class="fas fa-map-marker-alt"></i> Ludhiana, Punjab</p> <!-- Banner Text Group 1 --> <div class="hero-text-group active"> <h1 class="hero-title text-reveal-ready logo-shimmer-text">Experience Comfort<br>& Luxury Stay </h1> <p class="hero-subtitle text-reveal-ready stagger-1">Premium Rooms Designed for Your Complete Relaxation</p> <div class="hero-cta-group stagger-1"> <a href="#rooms" class="btn btn-bronze">VIEW ROOMS</a> <a href="#inquiry" class="btn btn-primary">Book Your Stay</a> </div> </div> <!-- Banner Text Group 2 --> <div class="hero-text-group"> <h1 class="hero-title text-reveal-ready logo-shimmer-text">Your Perfect Home<br>Away From Home</h1> <p class="hero-subtitle text-reveal-ready stagger-1">Elegantly Furnished Suites with Modern Amenities</p> <div class="hero-cta-group stagger-1"> <a href="#rooms" class="btn btn-bronze">VIEW ROOMS</a> <a href="#inquiry" class="btn btn-primary">Book Your Stay</a> </div> </div> <!-- Banner Text Group 3 --> <!-- <div class="hero-text-group"> <h1 class="hero-title text-reveal-ready logo-shimmer-text">Stay In The Heart<br>Of Ludhiana</h1> <p class="hero-subtitle text-reveal-ready stagger-1">Comfortable and Secure Living for Modern Travelers</p> <div class="hero-cta-group stagger-1"> <a href="#rooms" class="btn btn-bronze">VIEW ROOMS</a> <a href="#inquiry" class="btn btn-primary">Book Your Stay</a> </div> </div> --> <div class="hero-trust stagger-2" style="display: flex; flex-direction: column; gap: 15px; width: 100%;"> <div style="display: flex; justify-content: flex-start; gap: 20px; flex-wrap: wrap; align-items: center;"> <span style="display: flex; align-items: center; gap: 6px;"> <i class="fas fa-shield-alt"></i> Verified Host on <span style="background: white; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center; margin-left: 2px;"> <img src="https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg" alt="Airbnb" style="height: 14px;"> </span> </span> <span><i class="fas fa-award"></i> Top Rated</span> </div> <div class="platform-ratings" style="display: flex; justify-content: flex-start; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 0.9em; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.2);"> <span style="display: flex; align-items: center; gap: 6px;"> <span style="font-weight: bold; font-size: 1.1em;">4.8</span> as per <span style="background: white; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center;"> <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="Google" style="height: 14px;"> </span> </span> <span style="display: flex; align-items: center; gap: 6px;"> <span style="font-weight: bold; font-size: 1.1em;">4.8</span> on <span style="background: white; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center;"> <img src="images/makemytrip-logo-scaled.jpg" alt="MakeMyTrip" style="height: 14px;"> </span> </span> <span style="display: flex; align-items: center; gap: 6px;"> <span style="font-weight: bold; font-size: 1.1em;">4.7</span> on <span style="background: white; padding: 2px 6px; border-radius: 4px; display: inline-flex; align-items: center;"> <img src="images/images.png" alt="Booking.com" style="height: 14px;"> </span> </span> </div> </div> </div> <div class="hero-form-card animate-ready stagger-3"> <h3>Quick Inquiry</h3> <form class="quick-inquiry-form" id="heroInquiryForm"> <input type="text" name="name" placeholder="Your Name" required> <input type="tel" name="phone" placeholder="Phone Number" class="phone-input" required> <div class="form-row-2"> <div class="form-group"> <label style="color: #fff; font-size: 11px; display: block; margin-bottom: 5px; margin-left: 2px; text-transform: uppercase; text-align: left;">Check-in</label> <input type="date" name="checkin" required> </div> <div class="form-group"> <label style="color: #fff; font-size: 11px; display: block; margin-bottom: 5px; margin-left: 2px; text-transform: uppercase; text-align: left;">Check-out</label> <input type="date" name="checkout" required> </div> </div> <div class="form-row-2"> <select name="guests" required> <option value="" disabled selected>Guests</option> <option value="1">1 Guest</option> <option value="2">2 Guests</option> <option value="3">3 Guests</option> <option value="4">4+ Guests</option> </select> <input type="number" name="rooms_count" placeholder="Rooms" min="1" required> </div> <button type="submit" class="btn btn-bronze full-width">CHECK AVAILABILITY</button> <div class="form-status" style="margin-top: 10px; font-size: 14px; display: none;"></div> <input type="hidden" name="room" value="Not specified (Hero Form)"> <input type="hidden" name="message" value="Quick inquiry from the Hero section."> </form> </div> <div class="scroll-indicator-luxury animate-ready stagger-5" style="grid-column: 1 / -1;"></div> </div> </div> </section> <!-- ============================== --> <!-- 2. ROOMS SECTION --> <!-- ============================== --> <section class="rooms-section section-padding" id="rooms"> <div class="container"> <div class="section-header text-center animate-ready"> <!--<p class="section-subtitle text-reveal-ready">OUR ACCOMMODATIONS</p>--> <h2 class="section-title text-reveal-ready stagger-1" style="color: black !important;">OUR ACCOMMODATIONS </h2> <p class="section-desc stagger-2">Explore two well-designed rooms offering the ideal combination of comfort, style, and modern amenities.</p> </div> <div class="rooms-grid"> <!-- Room 1 --> <div class="room-card-new animate-ready stagger-1"> <div class="room-card-img"> <img class="room-main-img" src="images/1.jpg (5).jpeg" alt="Deluxe twin - Homestays Ludhiana"> <div class="room-price-badge"> <span class="from">FROM</span> <span class="amount">₹2,264</span> <span class="per">/night</span> </div> <div class="room-tag luxury-blink-accent">Popular</div> </div> <div class="room-thumbs"> <div class="room-thumb active animate-ready stagger-1" onclick="switchRoomImage(this)"> <img src="images/1.jpg (5).jpeg" alt="Room View 1"> </div> <div class="room-thumb animate-ready stagger-2" onclick="switchRoomImage(this)"> <img src="images/2.jpg (3).jpeg" alt="Room View 2"> </div> <div class="room-thumb animate-ready stagger-3" onclick="switchRoomImage(this)"> <img src="images/3.jpg (1).jpeg" alt="Room View 3"> </div> <div class="room-thumb animate-ready stagger-4" onclick="switchRoomImage(this)"> <img src="images/4.jpg (1).jpeg" alt="Bathroom"> </div> </div> <div class="room-card-body"> <h3 style="color: black !important;">Deluxe Twin</h3> <p class="room-size"><i class="fas fa-expand-arrows-alt"></i> 350 sq ft</p> <div class="room-features"> <span><i class="fas fa-bed"></i> King Size Bed</span> <span><i class="fas fa-wifi"></i> Free High Speed WiFi</span> <span><i class="fas fa-snowflake"></i> Air Conditioning</span> <span><i class="fas fa-tv"></i> Smart TV</span> <span><i class="fas fa-shower"></i> Hot Water</span> <span><i class="fas fa-lock"></i> Safe Lock</span> </div> <div class="room-card-footer"> <a href="#inquiry" class="btn btn-bronze" onclick="selectRoom('Twin Bed room')">CHECK AVAILABILITY</a> </div> </div> </div> <!-- Room 2 --> <div class="room-card-new animate-ready stagger-2"> <div class="room-card-img"> <img class="room-main-img" src="images/king size room1.jpeg" alt="king size room - Homestays Ludhiana"> <div class="room-price-badge"> <span class="from">FROM</span> <span class="amount">₹2,264</span> <span class="per">/night</span> </div> <div class="room-tag premium luxury-blink-accent">Premium</div> </div> <div class="room-thumbs"> <div class="room-thumb active animate-ready stagger-1" onclick="switchRoomImage(this)"> <img src="images/king size room1.jpeg" alt="Suite View 1"> </div> <div class="room-thumb animate-ready stagger-2" onclick="switchRoomImage(this)"> <img src="images/king size room.jpg" alt="Suite View 2"> </div> <div class="room-thumb animate-ready stagger-3" onclick="switchRoomImage(this)"> <img src="images/room_image (2).jpg" alt="Suite View 3"> </div> <div class="room-thumb animate-ready stagger-4" onclick="switchRoomImage(this)"> <img src="images/washroom.jpg" alt="Suite View 4"> </div> </div> <div class="room-card-body"> <h3 style="color: black !important;">Deluxe king</h3> <p class="room-size"><i class="fas fa-expand-arrows-alt"></i> 500 sq ft</p> <div class="room-features"> <span><i class="fas fa-bed"></i> King Bed + Sofa</span> <span><i class="fas fa-wifi"></i> Free High Speed WiFi</span> <span><i class="fas fa-mountain"></i> Balcony View</span> <span><i class="fas fa-tv"></i> Smart TV</span> <span><i class="fas fa-shower"></i> Hot Water</span> <span><i class="fas fa-lock"></i> safe lock</span> <span><i class="fas fa-snowflake"></i> AC</span> </div> <div class="room-card-footer"> <a href="#inquiry" class="btn btn-bronze" onclick="selectRoom('Deluxe king')">CHECK AVAILABILITY</a> </div> </div> </div> </div> </div> </section> <!-- ============================== --> <!-- 3. AMENITIES SECTION --> <!-- ============================== --> <section class="amenities-section" id="amenities"> <div class="container"> <div class="section-header text-center animate-ready"> <p class="section-subtitle text-reveal-ready" style="color: white !important;">WHAT WE OFFER</p> <h2 class="section-title white text-reveal-ready stagger-1" style="color: white !important;">Amenities & Services</h2> <p class="section-desc stagger-2" style="color: rgba(255,255,255,0.85) !important;">Everything you need for a comfortable and memorable stay, all under one roof.</p> </div> <div class="amenities-grid"> <div class="amenity-card animate-ready stagger-1"> <div class="amenity-icon"><i class="fas fa-wifi"></i></div> <h4>Free High Speed WiFi</h4> <p>High-speed internet throughout the property</p> </div> <div class="amenity-card animate-ready stagger-2"> <div class="amenity-icon"><i class="fas fa-snowflake"></i></div> <h4>Air Conditioning</h4> <p>Climate-controlled rooms for perfect comfort</p> </div> <div class="amenity-card animate-ready stagger-3"> <div class="amenity-icon"><i class="fas fa-tv"></i></div> <h4>Smart TV</h4> <p>Netflix, YouTube & streaming-ready TVs in every room</p> </div> <div class="amenity-card animate-ready stagger-4"> <div class="amenity-icon"><i class="fas fa-location"></i></div> <h4>Primely located</h4> <p>Primely located in a convenient and well-connected area for easy access.</p> </div> <div class="amenity-card animate-ready stagger-5"> <div class="amenity-icon"><i class="fas fa-car"></i></div> <h4>On-site Free Parking</h4> <p>Dedicated secure parking for all guests</p> </div> <div class="amenity-card animate-ready stagger-6"> <div class="amenity-icon"><i class="fas fa-headset"></i></div> <h4>24/7 Support</h4> <p>Round-the-clock assistance for all your needs</p> </div> <div class="amenity-card animate-ready stagger-7"> <div class="amenity-icon"><i class="fas fa-utensils"></i></div> <h4>Homemade Cooked Food</h4> <p>Homemade cooked meals customized to your taste</p> </div> <div class="amenity-card animate-ready stagger-8"> <div class="amenity-icon"><i class="fas fa-shield-alt"></i></div> <h4>Safe & Secure</h4> <p>24/7 security and in-room safe lockers</p> </div> </div> </div> </section> <!-- ============================== --> <!-- 4. GALLERY SECTION --> <!-- ============================== --> <section class="gallery-section section-padding" id="gallery"> <div class="container"> <div class="section-header text-center animate-ready"> <!-- <p class="section-subtitle text-reveal-ready">TAKE A LOOK</p> --> <h2 class="section-title text-reveal-ready stagger-1">Photo Gallery</h2> <p class="section-desc stagger-2">Take a virtual tour of our property and rooms through our curated gallery.</p> </div> <div class="gallery-grid"> <div class="gallery-item gallery-item-large animate-ready stagger-1"> <img src="images/7.jpg (1).jpeg" alt="Room Interior"> <div class="gallery-overlay"> <!-- <span>Room Interior</span> --> </div> </div> <div class="gallery-item animate-ready stagger-2"> <img src="images/balcony1.jpeg" alt="Modern Bathroom"> <div class="gallery-overlay"> <!-- <span>Modern Bathroom</span> --> </div> </div> <div class="gallery-item animate-ready stagger-3"> <img src="images/8.jpg.jpeg" alt="king size room"> <div class="gallery-overlay"> <!-- <span>king size room</span> --> </div> </div> <div class="gallery-item animate-ready stagger-4"> <img src="images/washroom.jpg" alt="Balcony View"> <div class="gallery-overlay"> <!-- <span>Balcony View</span> --> </div> </div> <div class="gallery-item gallery-item-large"> <img src="images/6.jpg (1).jpeg" alt="Hotel Exterior"> <div class="gallery-overlay"> <!-- <span>Hotel Exterior</span> --> </div> </div> <div class="gallery-item"> <img src="images/kitchen.jpg" alt="Dining Area"> <div class="gallery-overlay"> <!-- <span>Dining Area</span> --> </div> </div> <div class="gallery-item"> <img src="images/5.jpg (1).jpeg" alt="Cozy Corner"> <div class="gallery-overlay"> <!-- <span>Cozy Corner</span> --> </div> </div> <div class="gallery-item"> <img src="images/IMG_4408.jpg" alt="Lounge Area"> <div class="gallery-overlay"> <!-- <span>Lounge Area</span> --> </div> </div> <div class="gallery-item"> <img src="images/1.jpg (5).jpeg" alt="Deluxe Twin Room Interior"> <div class="gallery-overlay"></div> </div> <div class="gallery-item"> <img src="images/2.jpg (3).jpeg" alt="Deluxe Twin Room Detail"> <div class="gallery-overlay"></div> </div> <div class="gallery-item"> <img src="images/king size room1.jpeg" alt="Deluxe King Room Interior"> <div class="gallery-overlay"></div> </div> <div class="gallery-item"> <img src="images/room_image (2).jpg" alt="Deluxe King Room Detail"> <div class="gallery-overlay"></div> </div> <div class="gallery-item"> <img src="images/room_image (1).jpg" alt="Additional Room Interior"> <div class="gallery-overlay"></div> </div> <div class="gallery-item"> <img src="images/room_badroom.jpg" alt="Room Interior Detail"> <div class="gallery-overlay"></div> </div> </div> </div> </section> <!-- ============================== --> <!-- AWARDS & ACHIEVEMENTS SECTION --> <!-- ============================== --> <section class="awards-section section-padding" id="awards"> <div class="container awards-grid"> <div class="awards-content animate-ready stagger-1"> <p class="section-subtitle text-reveal-ready">OUR EXCELLENCE</p> <h2 class="section-title text-reveal-ready stagger-1">Awards & Achievements</h2> <p class="desc" style="color: #555; line-height: 1.8; font-size: 1.05rem; margin-bottom: 20px;"> We are incredibly honored to be recognized by leading travel platforms for our exceptional hospitality. These awards are a testament to our dedication to providing an unforgettable, premium experience for every guest at Homestays Ludhiana. </p> <p class="desc" style="color: #555; line-height: 1.8; font-size: 1.05rem; margin-bottom: 30px;"> Our commitment to comfort, impeccable service, and a home-like atmosphere continues to earn us top ratings and the trust of travelers worldwide. Thank you for making us your preferred choice! </p> </div> <div class="awards-img animate-ready"> <img src="Awards/Awards.png" alt="Awards and Achievements"> </div> </div> </section> <!-- ============================== --> <!-- 5. ABOUT / WHY CHOOSE US --> <!-- ============================== --> <section class="why-choose-section section-padding" id="about"> <div class="container why-choose-grid"> <div class="why-choose-img animate-ready"> <img src="images/1.jpg (5).jpeg" alt="About Homestays Ludhiana"> <div class="experience-badge animate-ready stagger-2 luxury-blink-accent"> <span class="exp-number">5+</span> <span class="exp-text">Years of<br>Hospitality</span> </div> </div> <div class="why-choose-content animate-ready stagger-1"> <p class="section-subtitle text-reveal-ready">WHY CHOOSE US</p> <h2 class="section-title text-reveal-ready stagger-1">Homestays Ludhiana</h2> <p class="desc" style="color: #555; line-height: 1.8; font-size: 1.05rem; margin-bottom: 30px;"> Homestays Ludhiana offers the modern business traveler the perfect balance of private comfort and professional hospitality. Through thoughtful design, prime location, and seamless service, we ensure a premium, effortless stay. With private balconies, customized "good food," and a focus on convenience, we provide a home-like atmosphere with the reliability of a high-end stay. </p> <div class="why-features"> <div class="why-feature-item"> <i class="fas fa-check-circle"></i> <span>Prime city location</span> </div> <div class="why-feature-item"> <i class="fas fa-check-circle"></i> <span>Home-cooked meals</span> </div> <div class="why-feature-item"> <i class="fas fa-check-circle"></i> <span>Private balconies</span> </div> <div class="why-feature-item"> <i class="fas fa-check-circle"></i> <span>Verified & trusted host</span> </div> <div class="why-feature-item"> <i class="fas fa-check-circle"></i> <span>Direct booking — best rates</span> </div> <div class="why-feature-item"> <i class="fas fa-check-circle"></i> <span>Flexible check-in/out</span> </div> </div> <a href="#inquiry" class="btn btn-bronze" style="margin-top: 30px;">BOOK YOUR STAY</a> </div> </div> </section> <!-- ============================== --> <!-- 6. LOCATION SECTION --> <!-- ============================== --> <section class="location-section-new section-padding" id="location"> <div class="container"> <div class="section-header text-center animate-ready"> <!-- <p class="section-subtitle text-reveal-ready">FIND US</p> --> <h2 class="section-title text-reveal-ready stagger-1">Our Location</h2> <p class="section-desc stagger-2">Conveniently located near major attractions, shopping areas, and transport hubs in Ludhiana.</p> </div> <div class="location-grid"> <div class="map-container animate-ready"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3424.155551278144!2d75.78847637508398!3d30.882324678833912!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a8175fbf648e7%3A0x23597cb7059080e2!2sHomestays%20Ludhiana!5e0!3m2!1sen!2sin!4v1741587686561!5m2!1sen!2sin" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"> </iframe> </div> <div class="location-info-cards"> <div class="location-info-card animate-ready stagger-1"> <div class="loc-icon"><i class="fas fa-map-marker-alt"></i></div> <div> <h4>Address</h4> <p>31, HJ-Block Rd, New BRS Nagar, Housing Board Colony, Bhai Randhir Singh Nagar, Ludhiana, Punjab 141012</p> </div> </div> <a href="tel:+919878789031" class="location-info-card" style="text-decoration: none; color: inherit; display: flex;"> <div class="loc-icon"><i class="fas fa-phone-alt"></i></div> <div> <h4>Phone</h4> <p>+91 98787 89031</p> </div> </a> <a href="mailto:contact@homestaysludhiana.com" class="location-info-card" style="text-decoration: none; color: inherit; display: flex;"> <div class="loc-icon"><i class="fas fa-envelope"></i></div> <div> <h4>Email</h4> <p>contact@homestaysludhiana.com</p> </div> </a> <div class="location-info-card"> <div class="loc-icon"><i class="fas fa-clock"></i></div> <div> <h4>Check-in / Check-out</h4> <p>Check-in: 12:00 PM | Check-out: 11:00 AM</p> </div> </div> <div class="location-nearby animate-ready stagger-3 luxury-blink-accent"> <h4>Nearby Landmarks</h4> <div class="nearby-items"> <span><i class="fas fa-train"></i> Railway Station – 3 km</span> <span><i class="fas fa-shopping-bag"></i> Shopping Mall – 1 km</span> <span><i class="fas fa-hospital"></i> Hospital – 2 km</span> <span><i class="fas fa-bus"></i> Bus Stand – 4 km</span> </div> </div> </div> </div> </div> </section> <!-- ============================== --> <!-- 7. MAIN INQUIRY FORM (Conversion) --> <!-- ============================== --> <section class="inquiry-section" id="inquiry"> <div class="inquiry-bg"></div> <div class="container inquiry-container"> <div class="inquiry-left animate-ready"> <!-- <p class="section-subtitle white text-reveal-ready">GET IN TOUCH</p> --> <h2 class="section-title white text-reveal-ready stagger-1">Book Your Perfect<br>Stay Today</h2> <p class="inquiry-desc stagger-2">Limited Rooms Available – Reserve Now and get the best rates when you book directly with us.</p> <div class="inquiry-trust-badges stagger-2"> <div class="trust-badge"> <i class="fas fa-percent"></i> <span>Best Price<br>Guarantee</span> </div> <div class="trust-badge"> <i class="fas fa-undo"></i> <span>Free<br>Cancellation</span> </div> <div class="trust-badge"> <i class="fas fa-lock"></i> <span>Secure<br>Booking</span> </div> </div> <a href="https://www.google.com/travel/search?q=homestays%20ludhiana&g2lb=4965990%2C72471280%2C72560029%2C72573224%2C72647020%2C72686036%2C72803964%2C72882230%2C72958624%2C73059275%2C73064764%2C121529349%2C121584153&hl=en-IN&gl=in&ssta=1&ts=CAEaSQopEicyJTB4MzkxYTgxNzVmYmY2NDhlNzoweDIzNTk3Y2I3MDU5MDgwZTISHBIUCgcI6g8QAxgaEgcI6g8QAxgbGAEyBAgAEAAqBwoFOgNJTlI&qs=CAEyE0Nnb0k0b0hDclBDVzM2d2pFQUU4AkIJCeKAkAW3fFkjQgkJ4oCQBbd8WSNIAA&ap=MAC6AQdyZXZpZXdz&ictx=111" class="inquiry-reviews stagger-3" target="_blank" style="display: block; text-decoration: none;"> <div class="review-stars"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <span>4.8 / 5</span> </div> <p>Based on 377+ Google Reviews</p> </a> </div> <div class="inquiry-form-card"> <h3>Book Your Stay</h3> <form class="inquiry-form" id="mainInquiryForm"> <input type="text" name="name" placeholder="Full Name" required> <input type="tel" name="phone" placeholder="Phone Number" class="phone-input" required> <input type="email" name="email" placeholder="Email Address"> <div class="form-row-2"> <div class="form-group"> <label style="color: #666; font-size: 11px; display: block; margin-bottom: 5px; margin-left: 2px; text-transform: uppercase; text-align: left;">Check-in</label> <input type="date" name="checkin" required> </div> <div class="form-group"> <label style="color: #666; font-size: 11px; display: block; margin-bottom: 5px; margin-left: 2px; text-transform: uppercase; text-align: left;">Check-out</label> <input type="date" name="checkout" required> </div> </div> <div class="form-row-2"> <select name="guests" required> <option value="" disabled selected>Guests</option> <option value="1">1 Guest</option> <option value="2">2 Guests</option> <option value="3">3 Guests</option> <option value="4">4+ Guests</option> </select> <input type="number" name="rooms_count" placeholder="Rooms" min="1" required> </div> <textarea name="message" placeholder="Any special requests or message..." rows="3"></textarea> <button type="submit" class="btn btn-bronze full-width">Book Now</button> <div class="form-status" style="margin-top: 10px; font-size: 14px; display: none;"></div> <p class="form-note"><i class="fas fa-bolt"></i> We respond within 30 minutes</p> </form> </div> </div> </section> <!-- ============================== --> <!-- CTA BANNER --> <!-- ============================== --> <section class="cta-banner animate-ready"> <div class="container cta-inner"> <div class="cta-text"> <h2 class="gold-shimmer-text">Ready for a Comfortable Stay?</h2> <p>Book directly and save. Limited availability – reserve your room today.</p> </div> <div class="cta-buttons stagger-1"> <a href="#inquiry" class="btn btn-bronze">RESERVE NOW</a> <a href="https://wa.me/919878789031?text=Hi%2C%20I%20want%20to%20book%20a%20room%20at%20Homestays%20Ludhiana" class="btn btn-whatsapp" target="_blank"><i class="fab fa-whatsapp"></i> CHAT ON WHATSAPP</a> </div> </div> </section> <!-- ============================== --> <!-- FOOTER --> <!-- ============================== --> <footer class="site-footer"> <div class="container footer-grid-new"> <div class="footer-col-new animate-ready stagger-1"> <h4>Homestays Ludhiana</h4> <p style="color:#888; font-size:14px; line-height:1.8; margin-top:15px;"> Premium rooms designed for the modern traveler. Experience comfort, convenience, and hospitality at its best. </p> <div class="social-links" style="margin-top:20px;"> <a href="https://www.instagram.com/homestaysludhiana/"><i class="fab fa-instagram"></i></a> <a href="https://www.facebook.com/homestayludhiana/"><i class="fab fa-facebook-f"></i></a> <!-- <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> --> </div> </div> <div class="footer-col-new animate-ready stagger-2"> <h4>Quick Links</h4> <ul class="footer-links"> <li><a href="#home">Home</a></li> <li><a href="#rooms">Our Rooms</a></li> <li><a href="#amenities">Amenities</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#inquiry">Book Now</a></li> </ul> </div> <div class="footer-col-new animate-ready stagger-3"> <h4>Contact Info</h4> <div class="footer-contact-items"> <p><i class="fas fa-map-marker-alt"></i> Near City Center, Ludhiana, Punjab</p> <p> <i class="fas fa-phone-alt"></i> <a href="tel:+919878789031">+91 98787 89031</a> </p> <p> <i class="fas fa-envelope"></i> <a href="mailto:contact@homestaysludhiana.com">contact@homestaysludhiana.com</a> </p> <p><i class="fas fa-clock"></i> Check-in: 12 PM | Check-out: 11 AM</p> </div> </div> <div class="footer-col-new animate-ready stagger-4"> <h4>Newsletter</h4> <p style="color:#888; font-size:14px; margin-top:15px;">Sign up for exclusive offers and travel tips. </p> <form class="newsletter-form" style="margin-top:20px;"> <input type="email" placeholder="Your email address"> <button type="submit" class="btn btn-bronze">GO</button> </form> </div> </div> <div class="footer-bottom"> <div class="container footer-bottom-inner"> <p style="color:#666; font-size:13px;">© 2026 Homestays Ludhiana. All rights reserved.</p> <div class="payment-methods"> <span><i class="fab fa-cc-visa"></i></span> <span><i class="fab fa-cc-mastercard"></i></span> <span><i class="fab fa-cc-paypal"></i></span> <span><i class="fab fa-google-pay"></i></span> </div> </div> </div> </footer> <!-- ============================== --> <!-- FLOATING ACTION BUTTONS --> <!-- ============================== --> <div class="floating-actions"> <a href="#inquiry" class="float-btn float-enquiry luxury-blink-accent" title="Book Now"> <i class="far fa-calendar-check"></i> </a> <a href="tel:+919878789031" class="float-btn float-call" title="Call Us"> <i class="fas fa-phone-alt"></i> </a> <a href="https://wa.me/919878789031?text=Hi%2C%20I%20want%20to%20book%20a%20room%20at%20Homestays%20Ludhiana" class="float-btn float-whatsapp luxury-blink-accent" title="Chat With Us" target="_blank"> <i class="fab fa-whatsapp"></i> </a> </div> <!-- Sticky Book Now Bar (Mobile) --> <div class="sticky-book-bar" id="stickyBar"> <a href="#inquiry" class="sticky-book-btn"> <i class="far fa-calendar-check"></i> BOOK NOW – Limited Rooms </a> </div> <!-- Enquiry Modal (From Room Cards) --> <div id="enquiryModal" class="modal-overlay"> <div class="modal-box"> <span class="close-btn" id="closeModal">×</span> <h2>Enquire Now</h2> <form class="enquiry-form" id="modalEnquiryForm"> <input type="text" name="name" placeholder="Your Name" required> <input type="email" name="email" placeholder="Email Address"> <input type="tel" name="phone" placeholder="Phone Number" class="phone-input" required> <div class="form-row-2"> <select id="modalRoomSelect" name="room" required> <option value="" disabled selected>Select a Room</option> <option value="Deluxe Twin">Deluxe Twin</option> <option value="Deluxe king">Deluxe king</option> </select> <input type="number" name="rooms_count" placeholder="Rooms" min="1" required> </div> <div class="form-row-2"> <div class="form-group"> <label style="color: #666; font-size: 11px; display: block; margin-bottom: 5px; margin-left: 2px; text-transform: uppercase; text-align: left;">Check-in</label> <input type="date" name="checkin" required> </div> <div class="form-group"> <label style="color: #666; font-size: 11px; display: block; margin-bottom: 5px; margin-left: 2px; text-transform: uppercase; text-align: left;">Check-out</label> <input type="date" name="checkout" required> </div> </div> <textarea name="message" placeholder="Message" rows="3"></textarea> <button type="submit" class="btn btn-bronze full-width">Book Your stay</button> <div class="form-status" style="margin-top: 10px; font-size: 14px; display: none;"></div> </form> </div> </div> <!-- Intl Tel Input JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script> <script> // Room selection function function selectRoom(roomName) { const sel = document.getElementById('inquiryRoomSelect'); if (sel) sel.value = roomName; } // Switch room main image when thumbnail is clicked function switchRoomImage(thumbEl) { const card = thumbEl.closest('.room-card-new'); const mainImg = card.querySelector('.room-main-img'); const thumbImg = thumbEl.querySelector('img'); // Get the high-res URL from thumbnail (swap w=200 to w=800) let newSrc = thumbImg.src.replace('w=200', 'w=800').replace('q=60', 'q=80'); // Fade out, swap, fade in mainImg.style.opacity = '0'; setTimeout(() => { mainImg.src = newSrc; mainImg.style.opacity = '1'; }, 250); // Update active state card.querySelectorAll('.room-thumb').forEach(t => t.classList.remove('active')); thumbEl.classList.add('active'); } // Open modal with pre-selected room window.openRoomModal = function (roomName) { const modal = document.getElementById('enquiryModal'); const selectField = document.getElementById('modalRoomSelect'); if (selectField) selectField.value = roomName; if (modal) modal.classList.add('active'); }; document.addEventListener('DOMContentLoaded', () => { // Modal const modal = document.getElementById('enquiryModal'); const closeBtn = document.getElementById('closeModal'); if (closeBtn) { closeBtn.addEventListener('click', () => modal.classList.remove('active')); } window.addEventListener('click', (e) => { if (e.target === modal) modal.classList.remove('active'); }); // Mobile menu toggle const mobileMenuBtn = document.getElementById('mobileMenuBtn'); const mobileNav = document.getElementById('mobileNav'); if (mobileMenuBtn && mobileNav) { mobileMenuBtn.addEventListener('click', () => { mobileNav.classList.toggle('active'); }); // Close mobile nav on link click mobileNav.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => mobileNav.classList.remove('active')); }); } // Sticky book bar on scroll (show after hero) const stickyBar = document.getElementById('stickyBar'); const hero = document.querySelector('.hero'); if (stickyBar && hero) { window.addEventListener('scroll', () => { if (window.scrollY > hero.offsetHeight) { stickyBar.classList.add('visible'); } else { stickyBar.classList.remove('visible'); } }); } // Active nav link on scroll const sections = document.querySelectorAll('section[id]'); const navLinks = document.querySelectorAll('.main-nav ul li a'); window.addEventListener('scroll', () => { let current = ''; sections.forEach(section => { const top = section.offsetTop - 120; if (window.scrollY >= top) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); } }); }); // Header shadow on scroll const header = document.getElementById('header'); window.addEventListener('scroll', () => { if (window.scrollY > 10) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // Gallery lightbox document.querySelectorAll('.gallery-item').forEach(item => { item.addEventListener('click', () => { const img = item.querySelector('img'); if (img) { const overlay = document.createElement('div'); overlay.className = 'lightbox-overlay'; overlay.innerHTML = `<img src="${img.src}" alt="${img.alt}"><span class="lightbox-close">×</span>`; document.body.appendChild(overlay); requestAnimationFrame(() => overlay.classList.add('active')); overlay.addEventListener('click', () => { overlay.classList.remove('active'); setTimeout(() => overlay.remove(), 300); }); } }); }); // 1. Animate elements on scroll FIRST (most important for visibility) const observerOptions = { threshold: 0.15, rootMargin: '0px 0px -100px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animate-in'); } }); }, observerOptions); document.querySelectorAll('.animate-ready, .text-reveal-ready').forEach(el => { observer.observe(el); }); // 2. Initialize Intl Tel Input later safely const phoneInputs = document.querySelectorAll('.phone-input'); phoneInputs.forEach(input => { try { if (window.intlTelInput) { window.intlTelInput(input, { initialCountry: "in", geoIpLookup: function (success, failure) { fetch("https://ipapi.co/json") .then(res => res.json()) .then(data => success(data.country_code)) .catch(() => success("in")); }, utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js", }); } } catch (err) { console.error("intlTelInput initialization error:", err); } }); // 3. PHPMailer Form Handler via AJAX const forms = ['#heroInquiryForm', '#mainInquiryForm', '#modalEnquiryForm']; forms.forEach(selector => { const f = document.querySelector(selector); if (f) { f.addEventListener('submit', async function (e) { e.preventDefault(); const btn = f.querySelector('button[type="submit"]'); const statusDiv = f.querySelector('.form-status'); const originalText = btn.innerText; // Reset status message if (statusDiv) { statusDiv.style.display = 'none'; statusDiv.innerText = ''; } // Show loading state btn.disabled = true; btn.innerText = "SENDING..."; const formData = new FormData(f); try { const response = await fetch('send_mail.php', { method: 'POST', body: formData }); const text = await response.text(); let result; try { result = JSON.parse(text); } catch (e) { console.error('Parsed text:', text); if (statusDiv) { statusDiv.style.display = 'block'; statusDiv.style.color = '#fe4a49'; statusDiv.innerText = 'Server Error: ' + text.substring(0, 100); } return; } if (statusDiv) { statusDiv.style.display = 'block'; statusDiv.style.color = result.status === 'success' ? '#25d366' : '#fe4a49'; statusDiv.innerText = result.message; } if (result.status === 'success') { f.reset(); } } catch (error) { console.error('Fetch Error:', error); if (statusDiv) { statusDiv.style.display = 'block'; statusDiv.style.color = '#fe4a49'; statusDiv.innerText = 'Network Error. Check your connection.'; } } finally { btn.disabled = false; btn.innerText = originalText; } }); } }); // Hero Slider & Text Sync Logic const slides = document.querySelectorAll('.hero-slide'); const textGroups = document.querySelectorAll('.hero-text-group'); let currentSlide = 0; function nextSlide() { if (slides.length === 0) return; // Remove active classes based on actual array length if (slides[currentSlide]) slides[currentSlide].classList.remove('active'); if (textGroups[currentSlide]) textGroups[currentSlide].classList.remove('active'); // Move to next currentSlide = (currentSlide + 1) % slides.length; // Add active classes safely if (slides[currentSlide]) slides[currentSlide].classList.add('active'); if (textGroups[currentSlide]) textGroups[currentSlide].classList.add('active'); } if (slides.length > 1) { setInterval(nextSlide, 5000); // Change image and text every 5 seconds } }); </script> </body> </html>
SAVE
CANCEL