Boys Hostel Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Adventure Boys Hostel - Comfortable Student Accommodation</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <!-- Top Bar --> <div class="top-bar"> <div class="container"> <div class="top-bar-content"> <div class="contact-info"> <span><i class="fas fa-phone-alt"></i> +91 98765 43210</span> <span><i class="fas fa-envelope"></i> info@adventurehostel.com</span> </div> <div class="social-links"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-whatsapp"></i></a> </div> </div> </div> </div> <!-- Navigation --> <nav id="navbar"> <div class="container"> <div class="logo">Adventure <span>Boys Hostel</span></div> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#facilities">Facilities</a></li> <li><a href="#rooms">Rooms</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#location">Location</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="hamburger"> <span></span> <span></span> <span></span> </div> </div> </nav> <!-- Hero Section --> <section id="home" class="hero"> <div class="hero-overlay"></div> <div class="container"> <div class="hero-content"> <h1>Your <span>Adventure</span> Begins Here</h1> <p>Safe, comfortable and affordable accommodation for students and working professionals</p> <div class="hero-buttons"> <a href="#contact" class="btn">Book Now</a> <a href="#rooms" class="btn-outline">View Rooms</a> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="about-image"> <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Adventure Boys Hostel"> </div> <div class="about-content"> <h2>About <span>Adventure Hostel</span></h2> <p>Established in 2012, Adventure Boys Hostel has been providing quality accommodation for male students and young professionals in a secure and vibrant environment.</p> <p>Our mission is to create a community that supports academic success while fostering friendships and personal growth.</p> <div class="about-features"> <div class="feature"> <i class="fas fa-shield-alt"></i> <h3>24/7 Security</h3> <p>CCTV surveillance and security personnel</p> </div> <div class="feature"> <i class="fas fa-utensils"></i> <h3>Healthy Meals</h3> <p>Nutritious meals included in the package</p> </div> <div class="feature"> <i class="fas fa-wifi"></i> <h3>High-Speed WiFi</h3> <p>Uninterrupted internet access</p> </div> </div> </div> </div> </section> <!-- Facilities Section --> <section id="facilities" class="facilities"> <div class="container"> <h2>Our <span>Facilities</span></h2> <p class="section-subtitle">We provide all essential amenities for comfortable living</p> <div class="facilities-grid"> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-bed"></i> </div> <h3>Comfortable Beds</h3> <p>Quality mattresses and bedding for good sleep</p> </div> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-book"></i> </div> <h3>Study Room</h3> <p>Quiet study area with ample lighting</p> </div> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-dumbbell"></i> </div> <h3>Gym Area</h3> <p>Basic fitness equipment available</p> </div> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-tshirt"></i> </div> <h3>Laundry</h3> <p>Weekly laundry service included</p> </div> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-tv"></i> </div> <h3>TV Lounge</h3> <p>Common area with TV for relaxation</p> </div> <div class="facility-card"> <div class="facility-icon"> <i class="fas fa-parking"></i> </div> <h3>Bike Parking</h3> <p>Secure parking for bicycles and scooters</p> </div> </div> </div> </section> <!-- Rooms Section --> <section id="rooms" class="rooms"> <div class="container"> <h2>Our <span>Rooms</span></h2> <p class="section-subtitle">Choose the accommodation that suits your needs</p> <div class="rooms-grid"> <div class="room-card"> <div class="room-image"> <img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Single Room"> <div class="room-badge">Single Occupancy</div> </div> <div class="room-details"> <h3>Single Room</h3> <p><i class="fas fa-bed"></i> 1 Single Bed</p> <p><i class="fas fa-ruler-combined"></i> 120 sq.ft.</p> <p><i class="fas fa-wifi"></i> Free WiFi</p> <div class="room-price">₹7,500/month</div> <a href="#contact" class="btn-outline">Book Now</a> </div> </div> <div class="room-card"> <div class="room-image"> <img src="https://images.unsplash.com/photo-1554469384-e58fac16e23a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Double Room"> <div class="room-badge">Double Occupancy</div> </div> <div class="room-details"> <h3>Shared Room</h3> <p><i class="fas fa-bed"></i> 2 Single Beds</p> <p><i class="fas fa-ruler-combined"></i> 180 sq.ft.</p> <p><i class="fas fa-wifi"></i> Free WiFi</p> <div class="room-price">₹5,500/month</div> <a href="#contact" class="btn-outline">Book Now</a> </div> </div> <div class="room-card"> <div class="room-image"> <img src="https://images.unsplash.com/photo-1560448204-603b3fc33ddc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Triple Room"> <div class="room-badge">Triple Occupancy</div> </div> <div class="room-details"> <h3>Triple Room</h3> <p><i class="fas fa-bed"></i> 3 Single Beds</p> <p><i class="fas fa-ruler-combined"></i> 220 sq.ft.</p> <p><i class="fas fa-wifi"></i> Free WiFi</p> <div class="room-price">₹4,500/month</div> <a href="#contact" class="btn-outline">Book Now</a> </div> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery"> <div class="container"> <h2>Hostel <span>Gallery</span></h2> <p class="section-subtitle">Take a virtual tour of our facilities</p> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1584622650111-993a426fbf0a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Hostel Room"> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1554469384-e58fac16e23a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Study Room"> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1560448204-603b3fc33ddc?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Dining Area"> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Common Area"> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1558036117-15d82a90b9b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gym Area"> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1560448205-4d9b39e0a7df?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Hostel Exterior"> </div> </div> <div class="modal"> <span class="close">×</span> <img class="modal-content" id="modal-image"> <div class="caption"></div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <h2>What Our <span>Residents</span> Say</h2> <p class="section-subtitle">Hear from students who call Adventure Hostel their home</p> <div class="testimonial-slider"> <div class="testimonial active"> <div class="quote"> <i class="fas fa-quote-left"></i> <p>Living at Adventure Hostel has been great. The environment is perfect for studies with good facilities and the warden is very supportive.</p> <div class="author"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Rahul Sharma"> <div class="author-info"> <h4>Rahul Sharma</h4> <span>Engineering Student, Resident since 2020</span> <div class="rating"> <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"></i> </div> </div> </div> </div> </div> <div class="testimonial"> <div class="quote"> <i class="fas fa-quote-left"></i> <p>The gym and study room facilities are excellent. I've made good friends here and the location is convenient for my college.</p> <div class="author"> <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Vikram Patel"> <div class="author-info"> <h4>Vikram Patel</h4> <span>Medical Student, Resident since 2019</span> <div class="rating"> <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> </div> </div> </div> </div> </div> <div class="testimonial"> <div class="quote"> <i class="fas fa-quote-left"></i> <p>As a working professional new to the city, I appreciate the security and cleanliness. The WiFi is reliable for my work needs.</p> <div class="author"> <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="Arjun Reddy"> <div class="author-info"> <h4>Arjun Reddy</h4> <span>Software Engineer, Resident since 2021</span> <div class="rating"> <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"></i> </div> </div> </div> </div> </div> <div class="slider-controls"> <button class="prev"><i class="fas fa-chevron-left"></i></button> <div class="dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> <button class="next"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- Location Section --> <section id="location" class="location"> <div class="container"> <h2>Our <span>Location</span></h2> <p class="section-subtitle">Conveniently located near educational institutions and transportation</p> <div class="location-content"> <div class="location-info"> <h3>Adventure Boys Hostel</h3> <p><i class="fas fa-map-marker-alt"></i> 123 Student Lane, University Road, Delhi - 110001</p> <h4>Nearby Landmarks</h4> <ul> <li><i class="fas fa-university"></i> Delhi University - 1.5 km</li> <li><i class="fas fa-bus"></i> Metro Station - 1 km</li> <li><i class="fas fa-hospital"></i> City Hospital - 2.5 km</li> <li><i class="fas fa-shopping-bag"></i> Shopping Complex - 800 m</li> </ul> <h4>Transportation</h4> <p>Easy access to public transport with bus stops within 300m and metro station within walking distance.</p> </div> <div class="location-map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3501.715209803518!2d77.2088643150831!3d28.63264498241568!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd5b347eb62d%3A0x52c2b7494e204dce!2sNew%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1620000000000!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <h2>Contact <span>Us</span></h2> <p class="section-subtitle">Get in touch for bookings or inquiries</p> <div class="contact-content"> <div class="contact-form"> <form id="booking-form"> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" name="email" required> </div> <div class="form-group"> <label for="phone">Phone</label> <input type="tel" id="phone" name="phone" required> </div> <div class="form-group"> <label for="room-type">Room Type</label> <select id="room-type" name="room-type" required> <option value="">Select Room Type</option> <option value="single">Single Room</option> <option value="double">Shared Room</option> <option value="triple">Triple Room</option> </select> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" name="message" rows="5"></textarea> </div> <button type="submit" class="btn">Submit Booking Request</button> </form> </div> <div class="contact-info"> <div class="info-card"> <i class="fas fa-map-marker-alt"></i> <h3>Address</h3> <p>123 Student Lane, University Road<br>Delhi - 110001</p> </div> <div class="info-card"> <i class="fas fa-phone-alt"></i> <h3>Phone</h3> <p>+91 98765 43210</p> <p>+91 11 2345 6789</p> </div> <div class="info-card"> <i class="fas fa-envelope"></i> <h3>Email</h3> <p>info@adventurehostel.com</p> <p>bookings@adventurehostel.com</p> </div> <div class="info-card"> <i class="fas fa-clock"></i> <h3>Visiting Hours</h3> <p>Monday-Saturday: 9AM - 7PM</p> <p>Sunday: 10AM - 4PM</p> </div> </div> </div> </div> </section> <!-- Footer --> <footer> <div class="container"> <div class="footer-content"> <div class="footer-col"> <h3>Adventure <span>Boys Hostel</span></h3> <p>Providing quality accommodation for students and young professionals since 2012.</p> <div class="footer-social"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-whatsapp"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#facilities">Facilities</a></li> <li><a href="#rooms">Rooms</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Policies</h3> <ul> <li><a href="#">Safety Policy</a></li> <li><a href="#">Rules & Regulations</a></li> <li><a href="#">Refund Policy</a></li> <li><a href="#">Privacy Policy</a></li> </ul> </div> <div class="footer-col"> <h3>Newsletter</h3> <p>Subscribe to get updates on vacancies and events.</p> <form id="newsletter-form"> <input type="email" placeholder="Your email address" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="footer-bottom"> <p>© 2023 Adventure Boys Hostel. All rights reserved.</p> <div class="footer-links"> <a href="#">Privacy Policy</a> <a href="#">Terms & Conditions</a> </div> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #2196F3; --secondary-color: #FF9800; --accent-color: #4CAF50; --dark-color: #1976D2; --light-color: #E3F2FD; --text-color: #333; --text-light: #777; --white: #fff; --black: #000; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; } .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; line-height: 1.2; } p { margin-bottom: 1rem; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; } ul { list-style: none; } span { color: var(--primary-color); } .btn { display: inline-block; background-color: var(--primary-color); color: var(--white); padding: 12px 30px; border-radius: 30px; font-weight: 600; transition: var(--transition); border: 2px solid var(--primary-color); } .btn:hover { background-color: transparent; color: var(--primary-color); } .btn-outline { display: inline-block; background-color: transparent; color: var(--primary-color); padding: 10px 25px; border-radius: 30px; font-weight: 600; transition: var(--transition); border: 2px solid var(--primary-color); } .btn-outline:hover { background-color: var(--primary-color); color: var(--white); } .section-subtitle { color: var(--text-light); margin-bottom: 2rem; text-align: center; } /* Top Bar */ .top-bar { background-color: var(--dark-color); color: var(--white); padding: 10px 0; font-size: 0.9rem; } .top-bar-content { display: flex; justify-content: space-between; align-items: center; } .contact-info span { margin-right: 20px; } .contact-info i { margin-right: 5px; color: var(--secondary-color); } .social-links a { color: var(--white); margin-left: 15px; transition: var(--transition); } .social-links a:hover { color: var(--secondary-color); } /* Navigation */ nav { position: sticky; top: 0; left: 0; width: 100%; padding: 20px 0; z-index: 1000; background-color: var(--white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } nav.scrolled { padding: 15px 0; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } nav .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--dark-color); } .logo span { color: var(--primary-color); } .nav-links { display: flex; } .nav-links li { margin-left: 30px; } .nav-links a { color: var(--dark-color); font-weight: 500; transition: var(--transition); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .nav-links a:hover::after { width: 100%; } .hamburger { display: none; cursor: pointer; width: 30px; height: 20px; flex-direction: column; justify-content: space-between; } .hamburger span { display: block; width: 100%; height: 3px; background-color: var(--dark-color); transition: var(--transition); } /* Hero Section */ .hero { height: 100vh; min-height: 600px; background: url('https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; display: flex; align-items: center; position: relative; color: var(--white); text-align: center; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); } .hero .container { position: relative; z-index: 1; } .hero-content { max-width: 800px; margin: 0 auto; } .hero h1 { font-size: 3.5rem; margin-bottom: 1.5rem; animation: fadeInDown 1s ease; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; animation: fadeInUp 1s ease; } .hero-buttons { display: flex; justify-content: center; gap: 20px; animation: fadeIn 1.5s ease; } /* About Section */ .about { padding: 100px 0; } .about .container { display: flex; align-items: center; gap: 50px; } .about-image { flex: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .about-image img { display: block; transition: var(--transition); } .about-image:hover img { transform: scale(1.05); } .about-content { flex: 1; } .about h2 { font-size: 2.5rem; margin-bottom: 1.5rem; } .about p { margin-bottom: 1.5rem; color: var(--text-light); } .about-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 30px; } .feature { text-align: center; padding: 20px; background-color: var(--light-color); border-radius: 10px; transition: var(--transition); } .feature:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .feature i { font-size: 2rem; color: var(--primary-color); margin-bottom: 15px; } .feature h3 { font-size: 1.1rem; margin-bottom: 10px; } .feature p { font-size: 0.9rem; margin-bottom: 0; } /* Facilities Section */ .facilities { padding: 100px 0; background-color: var(--light-color); text-align: center; } .facilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .facility-card { background-color: var(--white); padding: 40px 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .facility-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .facility-icon { width: 80px; height: 80px; background-color: rgba(33, 150, 243, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .facility-icon i { font-size: 2rem; color: var(--primary-color); } .facility-card h3 { margin-bottom: 15px; } .facility-card p { color: var(--text-light); font-size: 0.9rem; } /* Rooms Section */ .rooms { padding: 100px 0; text-align: center; } .rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .room-card { background-color: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .room-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .room-image { height: 250px; position: relative; overflow: hidden; } .room-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .room-card:hover .room-image img { transform: scale(1.1); } .room-badge { position: absolute; top: 20px; right: 20px; background-color: var(--primary-color); color: var(--white); padding: 5px 15px; border-radius: 30px; font-size: 0.8rem; font-weight: 600; } .room-details { padding: 20px; text-align: left; } .room-details h3 { margin-bottom: 15px; } .room-details p { margin-bottom: 10px; display: flex; align-items: center; } .room-details i { margin-right: 10px; color: var(--primary-color); } .room-price { font-size: 1.3rem; font-weight: 700; color: var(--primary-color); margin: 15px 0; } .room-details .btn-outline { width: 100%; text-align: center; } /* Gallery Section */ .gallery { padding: 100px 0; background-color: var(--light-color); text-align: center; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 50px; } .gallery-item { border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; height: 200px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-item:hover img { transform: scale(1.1); } .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); overflow: auto; } .modal-content { display: block; margin: auto; max-width: 80%; max-height: 80%; margin-top: 5%; } .close { position: absolute; top: 20px; right: 30px; color: var(--white); font-size: 40px; font-weight: bold; cursor: pointer; } .caption { color: var(--white); text-align: center; padding: 20px; font-size: 1.1rem; } /* Testimonials Section */ .testimonials { padding: 100px 0; text-align: center; } .testimonial-slider { max-width: 800px; margin: 50px auto 0; position: relative; } .testimonial { display: none; background-color: var(--white); padding: 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); } .testimonial.active { display: block; animation: fadeIn 0.5s ease; } .quote { position: relative; } .quote i { font-size: 2rem; color: var(--primary-color); opacity: 0.3; position: absolute; top: -10px; left: -10px; } .quote p { font-size: 1.1rem; font-style: italic; margin-bottom: 30px; } .author { display: flex; align-items: center; justify-content: center; } .author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-right: 15px; } .author-info h4 { margin-bottom: 5px; font-size: 1.1rem; text-align: left; } .author-info span { font-size: 0.9rem; color: var(--text-light); text-align: left; display: block; } .rating { color: var(--secondary-color); text-align: left; margin-top: 5px; } .slider-controls { display: flex; justify-content: center; align-items: center; margin-top: 30px; } .slider-controls button { background: none; border: none; font-size: 1.5rem; color: var(--primary-color); cursor: pointer; padding: 0 15px; } .dots { display: flex; } .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ccc; margin: 0 5px; cursor: pointer; transition: var(--transition); } .dot.active { background-color: var(--primary-color); } /* Location Section */ .location { padding: 100px 0; text-align: center; } .location-content { display: flex; gap: 50px; margin-top: 50px; text-align: left; } .location-info { flex: 1; } .location-map { flex: 1; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .location-map iframe { width: 100%; height: 100%; min-height: 400px; border: none; } .location-info h3 { font-size: 1.5rem; margin-bottom: 20px; } .location-info p { margin-bottom: 15px; display: flex; align-items: center; } .location-info i { margin-right: 10px; color: var(--primary-color); } .location-info h4 { margin: 25px 0 15px; font-size: 1.2rem; } .location-info ul { margin-left: 20px; } .location-info ul li { margin-bottom: 10px; position: relative; padding-left: 25px; display: flex; align-items: center; } .location-info ul li i { position: absolute; left: 0; } /* Contact Section */ .contact { padding: 100px 0; background-color: var(--light-color); text-align: center; } .contact-content { display: flex; gap: 50px; margin-top: 50px; text-align: left; } .contact-form { flex: 1; background-color: var(--white); padding: 40px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 500; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit; font-size: 1rem; transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2); } .contact-info { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .info-card { background-color: var(--white); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .info-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .info-card i { font-size: 2rem; color: var(--primary-color); margin-bottom: 20px; } .info-card h3 { margin-bottom: 15px; } .info-card p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 5px; } /* Footer */ footer { background-color: var(--dark-color); color: var(--white); padding: 60px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 60px; } .footer-col h3 { font-size: 1.3rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50px; height: 2px; background-color: var(--primary-color); } .footer-col p { color: #bbb; font-size: 0.9rem; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: #bbb; font-size: 0.9rem; transition: var(--transition); } .footer-col ul li a:hover { color: var(--secondary-color); padding-left: 5px; } .footer-social { display: flex; gap: 15px; margin-top: 20px; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: var(--white); transition: var(--transition); } .footer-social a:hover { background-color: var(--primary-color); transform: translateY(-3px); } #newsletter-form { position: relative; margin-top: 20px; } #newsletter-form input { width: 100%; padding: 12px 50px 12px 15px; border: none; border-radius: 30px; font-family: inherit; } #newsletter-form button { position: absolute; right: 5px; top: 5px; background: none; border: none; color: var(--primary-color); font-size: 1.2rem; cursor: pointer; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; color: #bbb; font-size: 0.9rem; } .footer-links a { color: #bbb; margin-left: 20px; transition: var(--transition); } .footer-links a:hover { color: var(--secondary-color); } /* Animations */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Styles */ @media (max-width: 992px) { .about .container, .location-content, .contact-content { flex-direction: column; } .about-image, .location-map { margin-top: 40px; } .hero h1 { font-size: 2.8rem; } } @media (max-width: 768px) { .hamburger { display: flex; } .nav-links { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--white); flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 40px; transition: var(--transition); } .nav-links.active { left: 0; } .nav-links li { margin: 15px 0; } .hero h1 { font-size: 2.5rem; } .hero-buttons { flex-direction: column; gap: 15px; } .contact-info { grid-template-columns: 1fr; } } @media (max-width: 576px) { .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .section-subtitle { font-size: 0.9rem; } .footer-bottom { flex-direction: column; gap: 15px; text-align: center; } .footer-links a { margin: 0 10px; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Navigation const hamburger = document.querySelector('.hamburger'); const navLinks = document.querySelector('.nav-links'); const navItems = document.querySelectorAll('.nav-links li'); hamburger.addEventListener('click', function() { this.classList.toggle('active'); navLinks.classList.toggle('active'); }); navItems.forEach(item => { item.addEventListener('click', function() { hamburger.classList.remove('active'); navLinks.classList.remove('active'); }); }); // Sticky Navigation on Scroll window.addEventListener('scroll', function() { const navbar = document.getElementById('navbar'); if (window.scrollY > 100) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // Smooth Scrolling for Navigation Links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Testimonial Slider const testimonials = document.querySelectorAll('.testimonial'); const dots = document.querySelectorAll('.dot'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let currentTestimonial = 0; function showTestimonial(index) { testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); testimonials[index].classList.add('active'); dots[index].classList.add('active'); currentTestimonial = index; } dots.forEach((dot, index) => { dot.addEventListener('click', () => showTestimonial(index)); }); prevBtn.addEventListener('click', () => { currentTestimonial = (currentTestimonial - 1 + testimonials.length) % testimonials.length; showTestimonial(currentTestimonial); }); nextBtn.addEventListener('click', () => { currentTestimonial = (currentTestimonial + 1) % testimonials.length; showTestimonial(currentTestimonial); }); // Auto-rotate testimonials let testimonialInterval = setInterval(() => { currentTestimonial = (currentTestimonial + 1) % testimonials.length; showTestimonial(currentTestimonial); }, 5000); // Pause auto-rotation on hover const testimonialSlider = document.querySelector('.testimonial-slider'); testimonialSlider.addEventListener('mouseenter', () => { clearInterval(testimonialInterval); }); testimonialSlider.addEventListener('mouseleave', () => { testimonialInterval = setInterval(() => { currentTestimonial = (currentTestimonial + 1) % testimonials.length; showTestimonial(currentTestimonial); }, 5000); }); // Image Gallery Modal const galleryItems = document.querySelectorAll('.gallery-item'); const modal = document.querySelector('.modal'); const modalImg = document.getElementById('modal-image'); const captionText = document.querySelector('.caption'); const closeBtn = document.querySelector('.close'); galleryItems.forEach(item => { item.addEventListener('click', function() { modal.style.display = 'block'; modalImg.src = this.querySelector('img').src; captionText.innerHTML = this.querySelector('img').alt; }); }); closeBtn.addEventListener('click', function() { modal.style.display = 'none'; }); window.addEventListener('click', function(e) { if (e.target === modal) { modal.style.display = 'none'; } }); // Form Validation const bookingForm = document.getElementById('booking-form'); if (bookingForm) { bookingForm.addEventListener('submit', function(e) { e.preventDefault(); // Simple validation const name = document.getElementById('name').value; const email = document.getElementById('email').value; const phone = document.getElementById('phone').value; const roomType = document.getElementById('room-type').value; if (!name || !email || !phone || !roomType) { alert('Please fill in all required fields'); return; } // Here you would typically send the form data to a server alert('Thank you for your booking request! We will contact you shortly to confirm your reservation.'); this.reset(); }); } // Newsletter Form const newsletterForm = document.getElementById('newsletter-form'); if (newsletterForm) { newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const emailInput = this.querySelector('input[type="email"]'); if (emailInput.value) { alert('Thank you for subscribing to our newsletter!'); emailInput.value = ''; } }); } // Intersection Observer for Animations const observerOptions = { threshold: 0.1 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('animated'); observer.unobserve(entry.target); } }); }, observerOptions); // Observe sections const sections = document.querySelectorAll('section'); sections.forEach(section => { observer.observe(section); }); });
Output Preview
Desktop
Mobile
Fullscreen
