Webleb - Snippets de Código - Um código por 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;
}

Um código por bachir123

Recomendado

Um código por ytr3d3

Um código por parajulisanket2

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um código por ytr3d3

Um código por parajulisanket2

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS