Webleb - UI Elements - Hotel Booking Website HTML CSS Template

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hotel Booking - Luxury Stay</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
        <h1>Luxury Stay</h1>
        <nav>
            <ul>
                <li><a href="#rooms">Rooms</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

<section class="hero">
        <div class="hero-content">
            <h2>Book Your Dream Stay</h2>
            <p>Experience luxury and comfort like never before.</p>
            <form id="booking-form">
                <input type="date" id="check-in" required>
                <input type="date" id="check-out" required>
                <select id="guests">
                    <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>
                <button type="submit">Check Availability</button>
            </form>
        </div>
    </section>

<section id="rooms">
        <h2>Our Rooms</h2>
        <div class="room-list">
            <div class="room">
                <img src="room1.jpg" alt="Deluxe Room">
                <h3>Deluxe Room</h3>
                <p>$200 per night</p>
            </div>
            <div class="room">
                <img src="room2.jpg" alt="Suite">
                <h3>Suite</h3>
                <p>$350 per night</p>
            </div>
        </div>
    </section>

<section id="testimonials">
        <h2>Guest Reviews</h2>
        <div class="testimonial">
            <p>"Best hotel experience ever!" - John D.</p>
        </div>
        <div class="testimonial">
            <p>"Absolutely loved the ambiance and service." - Sarah M.</p>
        </div>
    </section>

<footer id="contact">
        <h2>Contact Us</h2>
        <p>Email: info@luxurystay.com | Phone: +123 456 7890</p>
        <p>© 2025 Luxury Stay. All rights reserved.</p>
    </footer>

</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #333;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #222;
    padding: 15px 50px;
    color: white;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.hero {
    background: url('hotel.jpg') no-repeat center center/cover;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
}

.hero-content {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 10px;
}

form {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

form input, form select, form button {
    padding: 10px;
    border: none;
    border-radius: 5px;
}

form button {
    background: gold;
    cursor: pointer;
    font-weight: bold;
}

.room-list {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.room {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    width: 200px;
}

.room img {
    width: 100%;
    border-radius: 10px;
}

.testimonial {
    background: #f8f8f8;
    padding: 20px;
    margin: 10px auto;
    width: 50%;
    text-align: center;
    border-radius: 10px;
}

footer {
    background: #222;
    color: white;
    text-align: center;
    padding: 10px 0;
}

Hotel Booking Website HTML CSS Template

Recommended

CSS Animation Container HTML Structure

Big bang html

HTML Dropdown Menu Code Snippet

HTML

CSS

JS

Recommended

CSS Animation Container HTML Structure

Big bang html

HTML Dropdown Menu Code Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS