LUXE Hotels Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LUXE Hotels - Luxury Redefined</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    
    <header>
        <nav id="navbar">
            <a href="#" class="logo">LUXE<span>Hotels</span></a>
            <div class="menu-toggle">
                <i class="fas fa-bars"></i>
            </div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</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="#contact">Contact</a></li>
            </ul>
        </nav>
        <div class="header-content">
            <h1 class="floating">Experience Luxury Redefined</h1>
            <p>Discover unparalleled comfort and world-class service at our award-winning luxury hotel. Your perfect getaway starts here.</p>
            <div>
                <a href="#booking" class="btn">Book Now</a>
                <a href="#rooms" class="btn btn-outline">Explore Rooms</a>
            </div>
        </div>
    </header>

<section class="about" id="about">
        <div class="about-img">
            <img src="https://images.unsplash.com/photo-1564501049412-61c2a3083791?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80" alt="Luxury Hotel Lobby">
        </div>
        <div class="about-content">
            <h2 class="section-title">Our Story</h2>
            <p>Founded in 1995, LUXE Hotels has been setting the standard for luxury hospitality for over 25 years. Our commitment to excellence has earned us numerous awards and the loyalty of discerning travelers worldwide.</p>
            <p>Every detail at LUXE Hotels is carefully curated to provide an unforgettable experience. From our hand-selected furnishings to our personalized service, we strive to create moments that last a lifetime.</p>
            <p>Our properties are located in the world's most desirable destinations, each offering a unique sense of place while maintaining the impeccable standards that define the LUXE brand.</p>
            <a href="#" class="btn">Learn More</a>
        </div>
    </section>

<section class="rooms" id="rooms">
        <h2 class="section-title">Our Rooms & Suites</h2>
        <p>Each of our accommodations is designed to provide the ultimate in comfort and style</p>
        <div class="rooms-grid">
            <div class="room-card">
                <div class="room-img">
                    <img src="https://images.unsplash.com/photo-1631049307264-da0ec9d70304?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Deluxe Room">
                </div>
                <div class="room-info">
                    <h3>Deluxe Room</h3>
                    <p>Spacious room with premium amenities and stunning city views</p>
                    <div class="room-price">
                        <span class="price">$299/night</span>
                        <a href="#" class="btn">Book Now</a>
                    </div>
                </div>
            </div>
            <div class="room-card">
                <div class="room-img">
                    <img src="https://images.unsplash.com/photo-1566669437685-2c987f937b73?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Executive Suite">
                </div>
                <div class="room-info">
                    <h3>Executive Suite</h3>
                    <p>Luxurious suite with separate living area and premium services</p>
                    <div class="room-price">
                        <span class="price">$499/night</span>
                        <a href="#" class="btn">Book Now</a>
                    </div>
                </div>
            </div>
            <div class="room-card">
                <div class="room-img">
                    <img src="https://images.unsplash.com/photo-1596178065887-1198b6148b2b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Presidential Suite">
                </div>
                <div class="room-info">
                    <h3>Presidential Suite</h3>
                    <p>The ultimate in luxury with panoramic views and butler service</p>
                    <div class="room-price">
                        <span class="price">$999/night</span>
                        <a href="#" class="btn">Book Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="amenities" id="amenities">
        <h2 class="section-title">World-Class Amenities</h2>
        <p>We provide exceptional facilities to make your stay unforgettable</p>
        <div class="amenities-grid">
            <div class="amenity-card">
                <div class="amenity-icon">
                    <i class="fas fa-utensils"></i>
                </div>
                <h3>Gourmet Dining</h3>
                <p>Experience award-winning cuisine at our Michelin-starred restaurants</p>
            </div>
            <div class="amenity-card">
                <div class="amenity-icon">
                    <i class="fas fa-spa"></i>
                </div>
                <h3>Luxury Spa</h3>
                <p>Rejuvenate with our signature treatments and therapies</p>
            </div>
            <div class="amenity-card">
                <div class="amenity-icon">
                    <i class="fas fa-swimming-pool"></i>
                </div>
                <h3>Infinity Pool</h3>
                <p>Stunning rooftop pool with panoramic city views</p>
            </div>
            <div class="amenity-card">
                <div class="amenity-icon">
                    <i class="fas fa-dumbbell"></i>
                </div>
                <h3>Fitness Center</h3>
                <p>State-of-the-art equipment with personal trainers available</p>
            </div>
        </div>
    </section>

<section class="gallery" id="gallery">
        <h2 class="section-title">Our Gallery</h2>
        <p>Take a visual journey through our exquisite property</p>
        <div class="gallery-grid">
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Hotel Lobby">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Hotel Restaurant">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1571896349842-33c89424de2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80" alt="Hotel Spa">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
            <div class="gallery-item">
                <img src="https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Hotel Bar">
                <div class="gallery-overlay">
                    <i class="fas fa-search-plus"></i>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials">
        <h2 class="section-title">What Our Guests Say</h2>
        <p>Hear from our valued guests about their experiences</p>
        <div class="testimonials-container">
            <div class="testimonial active">
                <p class="testimonial-content">"The service at LUXE Hotels is unparalleled. From the moment we arrived, every detail was taken care of with impeccable attention. The room was stunning, and the views took our breath away. We can't wait to return!"</p>
                <div class="testimonial-author">
                    <div class="author-img">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Sarah Johnson">
                    </div>
                    <div class="author-info">
                        <h4>Sarah Johnson</h4>
                        <p>New York, USA</p>
                    </div>
                </div>
            </div>
            <div class="testimonial">
                <p class="testimonial-content">"This was our third stay at LUXE Hotels, and they continue to exceed our expectations. The staff remembers our preferences from previous visits, making us feel truly valued. The spa treatments are the best we've experienced anywhere in the world."</p>
                <div class="testimonial-author">
                    <div class="author-img">
                        <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80" alt="Michael Chen">
                    </div>
                    <div class="author-info">
                        <h4>Michael Chen</h4>
                        <p>London, UK</p>
                    </div>
                </div>
            </div>
            <div class="testimonial">
                <p class="testimonial-content">"We celebrated our anniversary at LUXE Hotels, and they made it magical. From the champagne on arrival to the rose petals on our bed, every detail was perfect. The concierge arranged a private yacht tour that was the highlight of our trip."</p>
                <div class="testimonial-author">
                    <div class="author-img">
                        <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2066&q=80" alt="Emma Rodriguez">
                    </div>
                    <div class="author-info">
                        <h4>Emma Rodriguez</h4>
                        <p>Madrid, Spain</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-nav">
                <div class="nav-dot active"></div>
                <div class="nav-dot"></div>
                <div class="nav-dot"></div>
            </div>
        </div>
    </section>

<section class="booking" id="booking">
        <h2 class="section-title">Book Your Stay</h2>
        <p>Ready to experience luxury? Reserve your room today</p>
        <form class="booking-form">
            <div class="form-group">
                <div class="input-group">
                    <label for="check-in">Check-In Date</label>
                    <input type="date" id="check-in" required>
                </div>
                <div class="input-group">
                    <label for="check-out">Check-Out Date</label>
                    <input type="date" id="check-out" required>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <label for="adults">Adults</label>
                    <select id="adults" required>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                </div>
                <div class="input-group">
                    <label for="children">Children</label>
                    <select id="children">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="input-group">
                    <label for="room-type">Room Type</label>
                    <select id="room-type" required>
                        <option value="deluxe">Deluxe Room</option>
                        <option value="executive">Executive Suite</option>
                        <option value="presidential">Presidential Suite</option>
                    </select>
                </div>
            </div>
            <button type="submit" class="btn">Check Availability</button>
        </form>
    </section>

<footer id="contact">
        <div class="footer-content">
            <div class="footer-column">
                <h3>LUXE Hotels</h3>
                <p>Redefining luxury hospitality with exceptional service, stunning design, and unforgettable experiences at prime locations worldwide.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>
            <div class="footer-column">
                <h3>Quick Links</h3>
                <ul class="footer-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#rooms">Rooms & Suites</a></li>
                    <li><a href="#amenities">Amenities</a></li>
                    <li><a href="#gallery">Gallery</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Contact Us</h3>
                <p><i class="fas fa-map-marker-alt"></i> 123 Luxury Avenue, Premium District, Global City</p>
                <p><i class="fas fa-phone"></i> +1 (555) 123-4567</p>
                <p><i class="fas fa-envelope"></i> info@luxehotels.com</p>
                <p><i class="fas fa-clock"></i> 24/7 Reception</p>
            </div>
            <div class="footer-column">
                <h3>Newsletter</h3>
                <p>Subscribe to our newsletter for exclusive offers and updates.</p>
                <form>
                    <div class="input-group">
                        <input type="email" placeholder="Your Email" required>
                    </div>
                    <button type="submit" class="btn">Subscribe</button>
                </form>
            </div>
        </div>
        <div class="footer-bottom">
            <p>&copy; 2023 LUXE Hotels. All Rights Reserved. | Designed with <i class="fas fa-heart"></i> by LUXE Design Team</p>
        </div>
    </footer>

CSS

:root {
            --primary: #c19a6b;
            --dark: #222;
            --light: #f9f9f9;
            --shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            color: var(--dark);
            overflow-x: hidden;
        }

h1, h2, h3, h4 {
            font-family: 'Playfair Display', serif;
        }

/* Header Section */
        header {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                        url('https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            color: white;
            position: relative;
            overflow: hidden;
        }

.header-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            width: 80%;
            z-index: 2;
            opacity: 0;
            animation: fadeIn 1.5s forwards 0.5s;
        }

@keyframes fadeIn {
            to { opacity: 1; }
        }

nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2rem 5%;
            position: fixed;
            width: 100%;
            z-index: 1000;
            transition: all 0.3s ease;
        }

nav.scrolled {
            background: rgba(0,0,0,0.9);
            padding: 1rem 5%;
        }

.logo {
            font-size: 2rem;
            font-weight: 700;
            color: white;
            text-decoration: none;
            font-family: 'Playfair Display', serif;
        }

.logo span {
            color: var(--primary);
        }

.nav-links {
            display: flex;
            list-style: none;
        }

.nav-links li {
            margin-left: 2rem;
        }

.nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 300;
            transition: all 0.3s ease;
            position: relative;
        }

.nav-links a:hover {
            color: var(--primary);
        }

.nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--primary);
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }

.nav-links a:hover:after {
            width: 100%;
        }

.header-content h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
        }

.header-content p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

.btn {
            display: inline-block;
            background: var(--primary);
            color: white;
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 30px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            box-shadow: var(--shadow);
        }

.btn:hover {
            background: #a5825a;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

.btn-outline {
            background: transparent;
            border: 2px solid white;
            margin-left: 1rem;
        }

.btn-outline:hover {
            background: white;
            color: var(--dark);
        }

/* Floating Animation */
        .floating {
            animation: floating 3s ease-in-out infinite;
        }

@keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

/* About Section */
        .about {
            padding: 8rem 5%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            background: var(--light);
        }

.about-img {
            flex: 1;
            min-width: 300px;
            position: relative;
            opacity: 0;
            transform: translateX(-50px);
            transition: all 1s ease;
        }

.about-img.animated {
            opacity: 1;
            transform: translateX(0);
        }

.about-img img {
            width: 100%;
            border-radius: 10px;
            box-shadow: var(--shadow);
        }

.about-img:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 5px solid var(--primary);
            border-radius: 10px;
            top: -20px;
            left: -20px;
            z-index: -1;
        }

.about-content {
            flex: 1;
            min-width: 300px;
            padding-left: 5rem;
            opacity: 0;
            transform: translateX(50px);
            transition: all 1s ease;
        }

.about-content.animated {
            opacity: 1;
            transform: translateX(0);
        }

.section-title {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            position: relative;
            display: inline-block;
        }

.section-title:after {
            content: '';
            position: absolute;
            width: 50%;
            height: 3px;
            background: var(--primary);
            bottom: -10px;
            left: 0;
        }

.about-content p {
            margin-bottom: 1.5rem;
            line-height: 1.8;
        }

/* Rooms Section */
        .rooms {
            padding: 8rem 5%;
            background: white;
            text-align: center;
        }

.rooms .section-title {
            margin-bottom: 5rem;
        }

.rooms-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.room-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.5s ease;
            opacity: 0;
            transform: translateY(50px);
        }

.room-card.animated {
            opacity: 1;
            transform: translateY(0);
        }

.room-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
        }

.room-img {
            height: 250px;
            overflow: hidden;
        }

.room-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.room-card:hover .room-img img {
            transform: scale(1.1);
        }

.room-info {
            padding: 1.5rem;
            text-align: left;
        }

.room-info h3 {
            margin-bottom: 0.5rem;
        }

.room-info p {
            margin-bottom: 1rem;
            color: #666;
        }

.room-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem;
        }

.price {
            font-weight: 600;
            color: var(--primary);
            font-size: 1.2rem;
        }

/* Amenities Section */
        .amenities {
            padding: 8rem 5%;
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                       url('https://images.unsplash.com/photo-1571896349842-33c89424de2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80') no-repeat center center/cover;
            color: white;
            text-align: center;
            background-attachment: fixed;
        }

.amenities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.amenity-card {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 10px;
            transition: all 0.3s ease;
            opacity: 0;
            transform: scale(0.8);
        }

.amenity-card.animated {
            opacity: 1;
            transform: scale(1);
        }

.amenity-card:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-10px);
        }

.amenity-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--primary);
        }

/* Gallery Section */
        .gallery {
            padding: 8rem 5%;
            background: var(--light);
            text-align: center;
        }

.gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-top: 3rem;
        }

.gallery-item {
            height: 250px;
            overflow: hidden;
            border-radius: 10px;
            position: relative;
            opacity: 0;
            transform: scale(0.9);
            transition: all 0.5s ease;
        }

.gallery-item.animated {
            opacity: 1;
            transform: scale(1);
        }

.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.gallery-item:hover img {
            transform: scale(1.1);
        }

.gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

.gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

.gallery-overlay i {
            color: white;
            font-size: 2rem;
        }

/* Testimonials Section */
        .testimonials {
            padding: 8rem 5%;
            background: white;
            text-align: center;
        }

.testimonials-container {
            max-width: 1000px;
            margin: 3rem auto 0;
            position: relative;
        }

.testimonial {
            background: var(--light);
            padding: 2rem;
            border-radius: 10px;
            box-shadow: var(--shadow);
            margin: 0 1rem;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

.testimonial.active {
            opacity: 1;
        }

.testimonial-content {
            font-style: italic;
            margin-bottom: 1.5rem;
            line-height: 1.8;
        }

.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
        }

.author-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 1rem;
        }

.author-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.author-info h4 {
            margin-bottom: 0.2rem;
        }

.author-info p {
            color: #666;
            font-size: 0.9rem;
        }

.testimonial-nav {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }

.nav-dot {
            width: 12px;
            height: 12px;
            background: #ddd;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.nav-dot.active {
            background: var(--primary);
            transform: scale(1.2);
        }

/* Booking Section */
        .booking {
            padding: 8rem 5%;
            background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), 
                       url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;
            color: white;
            text-align: center;
        }

.booking-form {
            max-width: 800px;
            margin: 3rem auto 0;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            padding: 3rem;
            border-radius: 10px;
            opacity: 0;
            transform: translateY(50px);
            transition: all 1s ease;
        }

.booking-form.animated {
            opacity: 1;
            transform: translateY(0);
        }

.form-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

.input-group {
            text-align: left;
        }

.input-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 300;
        }

.input-group input, 
        .input-group select {
            width: 100%;
            padding: 0.8rem;
            border: none;
            border-radius: 5px;
            background: rgba(255,255,255,0.9);
        }

.input-group input:focus, 
        .input-group select:focus {
            outline: 2px solid var(--primary);
        }

/* Footer Section */
        footer {
            background: var(--dark);
            color: white;
            padding: 5rem 5% 2rem;
        }

.footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

.footer-column h3 {
            margin-bottom: 1.5rem;
            position: relative;
            display: inline-block;
        }

.footer-column h3:after {
            content: '';
            position: absolute;
            width: 50%;
            height: 2px;
            background: var(--primary);
            bottom: -8px;
            left: 0;
        }

.footer-column p {
            margin-bottom: 1rem;
            color: #aaa;
            line-height: 1.8;
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 0.8rem;
        }

.footer-links a {
            color: #aaa;
            text-decoration: none;
            transition: all 0.3s ease;
        }

.footer-links a:hover {
            color: var(--primary);
            padding-left: 5px;
        }

.social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

.social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            color: white;
            transition: all 0.3s ease;
        }

.social-links a:hover {
            background: var(--primary);
            transform: translateY(-5px);
        }

.footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: #aaa;
            font-size: 0.9rem;
        }

/* Mobile Menu */
        .menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
        }

/* Responsive Styles */
        @media (max-width: 992px) {
            .header-content h1 {
                font-size: 3rem;
            }

.about-content {
                padding-left: 0;
                margin-top: 3rem;
            }
        }

@media (max-width: 768px) {
            .menu-toggle {
                display: block;
                z-index: 1001;
            }

.nav-links {
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                height: 100vh;
                background: rgba(0,0,0,0.9);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: all 0.5s ease;
                z-index: 1000;
            }

.nav-links.active {
                right: 0;
            }

.nav-links li {
                margin: 1rem 0;
            }

.header-content h1 {
                font-size: 2.5rem;
            }

.btn {
                display: block;
                margin: 1rem auto;
                width: 80%;
            }

.btn-outline {
                margin-left: 0;
            }
        }

@media (max-width: 576px) {
            .header-content h1 {
                font-size: 2rem;
            }

.section-title {
                font-size: 2rem;
            }

.booking-form {
                padding: 2rem 1rem;
            }
        }

JavaScript

// Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

// Mobile menu toggle
        const menuToggle = document.querySelector('.menu-toggle');
        const navLinks = document.querySelector('.nav-links');

menuToggle.addEventListener('click', function() {
            navLinks.classList.toggle('active');
            menuToggle.innerHTML = navLinks.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });

// Close mobile menu when clicking a link
        document.querySelectorAll('.nav-links a').forEach(link => {
            link.addEventListener('click', function() {
                navLinks.classList.remove('active');
                menuToggle.innerHTML = '<i class="fas fa-bars"></i>';
            });
        });

// Scroll animation
        function animateOnScroll() {
            const elements = document.querySelectorAll('.about-img, .about-content, .room-card, .amenity-card, .gallery-item, .booking-form');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if (elementPosition < screenPosition) {
                    element.classList.add('animated');
                }
            });
        }

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);

// Testimonial slider
        let currentTestimonial = 0;
        const testimonials = document.querySelectorAll('.testimonial');
        const dots = document.querySelectorAll('.nav-dot');

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));
        });

// Auto-rotate testimonials
        setInterval(() => {
            currentTestimonial = (currentTestimonial + 1) % testimonials.length;
            showTestimonial(currentTestimonial);
        }, 5000);

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

// Form submission
        const bookingForm = document.querySelector('.booking-form');
        bookingForm.addEventListener('submit', function(e) {
            e.preventDefault();
            alert('Thank you for your booking request! Our team will contact you shortly to confirm your reservation.');
            this.reset();
        });

LUXE Hotels Template Preview

Download Options