Webleb - Extraits de Code - Un code par bachir123

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

Un code par bachir123

Recommandé

Code CSS pour cartes animées

code bloom

Un code par ashimadison8

HTML

CSS

JS

Recommandé

Code CSS pour cartes animées

code bloom

Un code par ashimadison8

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS