Un code par bachir123

2,744 bachir123

Ouvrir dans l'éditeur Publiez votre code

Recommandé

30 July 2025

Modèle HTML de page de paiement par carte Visa

10 February 2025

Code du formulaire de connexion HTML CSS

22 August 2025

Commentaire d'espace réservé au code HTML

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