Webleb - UI Elements - Hotel Booking Page HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grand Hotel - Book Your Stay</title>
   </head>
<body>

<header>
        <div class="container">
            <h1><span style="color:#e74c3c;">Grand</span> Hotel</h1>
            <nav>
                <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="#contact">Contact</a></li>
                    <li><a href="#book">Book Now</a></li>
                </ul>
            </nav>
            <div style="clear:both;"></div> 
        </div>
    </header>

<section id="home" class="hero">
        <div class="hero-content">
            <h2>Your Perfect Escape Awaits</h2>
            <p>Experience unparalleled luxury and comfort at Grand Hotel.</p>
            <a href="#book" class="btn">Book Your Stay Today</a>
        </div>
    </section>

<section id="about">
        <div class="container">
            <h3>About Grand Hotel</h3>
            <div class="about-content">
                <p>
                    Nestled in the heart of the city, Grand Hotel offers a serene oasis for both business and leisure travelers.
                    With breathtaking views, elegantly appointed rooms, and world-class amenities, we are dedicated to providing
                    an unforgettable experience. Our commitment to exceptional service ensures every guest feels at home, away from home.
                </p>
                <p>
                    From our gourmet dining options to our state-of-the-art fitness center, every detail is crafted for your comfort and enjoyment.
                    Discover a sanctuary where luxury meets convenience.
                </p>
            </div>
        </div>
    </section>

<section id="rooms">
        <div class="container">
            <h3>Our Luxurious Rooms & Suites</h3>
            <div class="room-grid">
                <div class="room-card">
                    <img src="https://via.placeholder.com/350x220/87CEFA/000000?text=Standard+Room" alt="Standard Room">
                    <h4>Standard Room</h4>
                    <p>Cozy and comfortable, perfect for solo travelers or couples. Features a queen-size bed and city views.</p>
                    <p class="price">From $120/night</p>
                    <a href="#book" class="btn">View Details & Book</a>
                </div>
                <div class="room-card">
                    <img src="https://via.placeholder.com/350x220/6495ED/FFFFFF?text=Deluxe+Room" alt="Deluxe Room">
                    <h4>Deluxe Room</h4>
                    <p>Spacious and elegant, with a king-size bed, private balcony, and stunning ocean or city views.</p>
                    <p class="price">From $180/night</p>
                    <a href="#book" class="btn">View Details & Book</a>
                </div>
                <div class="room-card">
                    <img src="https://via.placeholder.com/350x220/4682B4/FFFFFF?text=Executive+Suite" alt="Executive Suite">
                    <h4>Executive Suite</h4>
                    <p>Our premium suite offers separate living and sleeping areas, ideal for extended stays or families, with luxury amenities.</p>
                    <p class="price">From $300/night</p>
                    <a href="#book" class="btn">View Details & Book</a>
                </div>
            </div>
        </div>
    </section>

<section id="book" style="background-color: #ecf0f1;">
        <div class="container">
            <h3>Book Your Room Now</h3>
            <form class="booking-form" action="#" method="POST">
                <p style="text-align: center; margin-bottom: 30px; font-size: 1.1em; color: #555;">
                    Fill out the form below to check availability and secure your reservation.
                </p>
                <label for="checkin">Check-in Date:</label>
                <input type="date" id="checkin" name="checkin" required>

<label for="checkout">Check-out Date:</label>
                <input type="date" id="checkout" name="checkout" required>

<label for="guests">Number of Guests:</label>
                <input type="number" id="guests" name="guests" min="1" max="10" value="1" required>

<label for="room-type">Preferred Room Type:</label>
                <select id="room-type" name="room-type">
                    <option value="any">Any Room Type</option>
                    <option value="standard">Standard Room</option>
                    <option value="deluxe">Deluxe Room</option>
                    <option value="executive">Executive Suite</option>
                    <option value="family">Family Suite</option>
                </select>

<button type="submit">Check Availability & Book</button>
            </form>
        </div>
    </section>

<section id="amenities">
        <div class="container">
            <h3>Hotel Amenities</h3>
            <ul class="amenities-list">
                <li>Free High-Speed Wi-Fi</li>
                <li>Outdoor Swimming Pool</li>
                <li>State-of-the-Art Fitness Center</li>
                <li>Gourmet Restaurant & Bar</li>
                <li>Full-Service Spa & Wellness Center</li>
                <li>24-Hour Room Service</li>
                <li>Modern Conference Facilities</li>
                <li>Valet Parking</li>
                <li>Concierge Services</li>
                <li>Pet-Friendly Options</li>
            </ul>
        </div>
    </section>

<section id="contact">
        <div class="container">
            <h3>Contact Us</h3>
            <div class="contact-info">
                <p>Have questions or need assistance with your booking? Our team is here to help.</p>
                <p><strong>Address:</strong> 123 Luxury Lane, Grand City, GC 98765, Country</p>
                <p><strong>Phone:</strong> +1 (555) 123-4567</p>
                <p><strong>Email:</strong> info@grandhotel.com</p>
                <p>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.259169601019!2d-73.9878426845946!3d40.75800047932675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c648029b%3A0x55194ec5a1ae072e!2sTimes%20Square!5e0!3m2!1sen!2sus!4v1678901234567!5m2!1sen!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </p>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <p>© 2023 Grand Hotel. All rights reserved.</p>
            <p>
                <a href="#">Privacy Policy</a> |
                <a href="#">Terms of Service</a> |
                <a href="#">Sitemap</a>
            </p>
        </div>
    </footer>

</body>
</html>

/* Basic Styling for Demonstration - In a real project, this would be in a separate .css file */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
            line-height: 1.6;
        }
        .container {
            width: 90%;
            max-width: 1200px;
            margin: auto;
            overflow: hidden;
            padding: 20px 0;
        }
        header {
            background: #2c3e50;
            color: #fff;
            padding: 1rem 0;
            border-bottom: 5px solid #e74c3c;
        }
        header h1 {
            float: left;
            margin: 0;
            padding: 0 20px;
            font-size: 2.2em;
        }
        header h1 span {
            color: #e74c3c;
        }
        header nav {
            float: right;
            padding: 0 20px;
            margin-top: 10px;
        }
        header ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        header li {
            display: inline;
            padding: 0 15px;
        }
        header a {
            color: #fff;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 1em;
            transition: color 0.3s ease;
        }
        header a:hover {
            color: #e74c3c;
            font-weight: bold;
        }
        .hero {
            background: url('https://via.placeholder.com/1500x600/34495e/ecf0f1?text=Grand+Hotel+Experience') no-repeat center center/cover;
            height: 500px;
            text-align: center;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }
        .hero .hero-content {
            position: relative;
            z-index: 2;
            padding: 20px;
        }
        .hero h2 {
            font-size: 3.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
        }
        .hero p {
            font-size: 1.3em;
            margin-bottom: 30px;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
        }
        .btn {
            display: inline-block;
            background: #e74c3c;
            color: #fff;
            padding: 12px 25px;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.1em;
            transition: background 0.3s ease, transform 0.2s ease;
        }
        .btn:hover {
            background: #c0392b;
            transform: translateY(-2px);
        }
        section {
            padding: 60px 0;
            background-color: #fff;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        section h3 {
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5em;
            color: #2c3e50;
            position: relative;
        }
        section h3::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background: #e74c3c;
            margin: 10px auto 0;
        }
        .about-content {
            text-align: center;
            max-width: 800px;
            margin: auto;
            font-size: 1.1em;
        }
        .room-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            text-align: center;
        }
        .room-card {
            background: #fff;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .room-card:hover {
            transform: translateY(-5px);
        }
        .room-card img {
            max-width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        .room-card h4 {
            margin-top: 0;
            font-size: 1.5em;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        .room-card p {
            font-size: 0.95em;
            color: #555;
            margin-bottom: 15px;
        }
        .room-card .price {
            font-size: 1.2em;
            font-weight: bold;
            color: #e74c3c;
            margin-bottom: 20px;
        }

/* Booking Form Specific Styles */
        .booking-form {
            max-width: 700px;
            margin: 0 auto;
            padding: 40px;
            background: #ecf0f1;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .booking-form label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #2c3e50;
            font-size: 1.1em;
        }
        .booking-form input[type="date"],
        .booking-form input[type="number"],
        .booking-form select {
            width: calc(100% - 24px); /* Account for padding and border */
            padding: 12px;
            margin-bottom: 25px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
            box-sizing: border-box; /* Include padding and border in the element's total width and height */
        }
        .booking-form button {
            width: 100%;
            padding: 15px;
            background: #e74c3c;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 1.2em;
            cursor: pointer;
            transition: background 0.3s ease, transform 0.2s ease;
        }
        .booking-form button:hover {
            background: #c0392b;
            transform: translateY(-2px);
        }

.amenities-list {
            list-style: none;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            text-align: center;
        }
        .amenities-list li {
            background: #f2f2f2;
            padding: 15px;
            border-radius: 8px;
            font-weight: bold;
            color: #555;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .contact-info {
            text-align: center;
            font-size: 1.1em;
            color: #555;
        }
        .contact-info p {
            margin-bottom: 10px;
        }
        .contact-info iframe {
            margin-top: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

footer {
            background: #2c3e50;
            color: #fff;
            text-align: center;
            padding: 30px 0;
            margin-top: 30px;
            font-size: 0.9em;
        }
        footer a {
            color: #e74c3c;
            text-decoration: none;
            margin: 0 8px;
        }
        footer a:hover {
            text-decoration: underline;
        }

@media (max-width: 768px) {
            header h1, header nav {
                float: none;
                text-align: center;
            }
            header h1 {
                margin-bottom: 10px;
            }
            header li {
                display: block;
                padding: 8px 0;
            }
            .hero h2 {
                font-size: 2.5em;
            }
            .hero p {
                font-size: 1.1em;
            }
            .container {
                width: 95%;
            }
        }

Validating your code, please wait...

HTML

CSS

<label for="checkout">Check-out Date:</label>
                <input type="date" id="checkout" name="checkout" required>

<label for="guests">Number of Guests:</label>
                <input type="number" id="guests" name="guests" min="1" max="10" value="1" required>

<button type="submit">Check Availability & Book</button>
            </form>
        </div>
    </section>

</body>
</html>