Webleb - Snippet di Codice - Un codice di 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 codice di bachir123

Consigliato

lun

Schede di collegamento ai social media HTML

Un codice di sahrawilouay

HTML

CSS

JS

Consigliato

lun

Schede di collegamento ai social media HTML

Un codice di sahrawilouay

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS