Página de reserva de hotel HTML: habitaciones, servicios y contacto

Abrir en el editor Publica tu código

Recomendado

25 May 2025

Plantilla Gratuita de Página de Aterrizaje

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>

CSS

/* 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%;
            }
        }

Página de reserva de hotel HTML: habitaciones, servicios y contacto

Recomendado

Clon de Pinterest

Carrusel de imágenes de Lume

Plantilla Gratuita de Página de Aterrizaje

HTML

CSS

JS

Recomendado

Clon de Pinterest

Carrusel de imágenes de Lume

Plantilla Gratuita de Página de Aterrizaje

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS