Page de destination - Hôtel

1,973 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 July 2024

Formulaire de paiement HTML et CSS

28 March 2025

Commutateur d'animation de sprite CSS

13 July 2024

Modèle de formulaire de connexion le plus simple

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunset Paradise Beach Resort</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Quicksand', sans-serif;
            min-height: 100vh;
            color: #333;
        }

/* Header styles */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1.5rem 2rem;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1a5f7a;
            text-decoration: none;
        }

nav {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

nav a {
            text-decoration: none;
            color: #666;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

nav a:hover {
            color: #1a5f7a;
        }

.book-btn {
            background: #1a5f7a;
            color: #fff;
            padding: 0.75rem 1.5rem;
            border-radius: 2rem;
            text-decoration: none;
            font-size: 0.9rem;
            transition: background-color 0.3s ease;
        }

.book-btn:hover {
            background: #13455a;
        }

/* Main content styles */
        .hero {
            padding-top: 5rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 100vh;
        }

.hero-content {
            background: #e6f3ff;
            padding: 4rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            gap: 2rem;
        }

.icon-container {
            width: 4rem;
            height: 4rem;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.icon-container svg {
            width: 2rem;
            height: 2rem;
            fill: #1a5f7a;
        }

h1 {
            font-size: 3.5rem;
            line-height: 1.1;
            color: #1a5f7a;
            font-weight: 700;
        }

.hero-content p {
            color: #666;
            font-size: 1.1rem;
            line-height: 1.6;
            max-width: 500px;
        }

.hero-image {
            background-image: url('https://img.freepik.com/foto-gratis/pareja-hablando-bebiendo-leche-coco-junto-piscina-vacaciones_23-2149369768.jpg?t=st=1732306777~exp=1732310377~hmac=bee4da4f9ac4457ed289011b09b63be6e74c0e39ecc21dbb75c677d5571f4a82&w=360');
            background-size: cover;
            background-position: center;
        }

/* Email form styles */
        .email-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            width: 100%;
            max-width: 400px;
        }

.email-form input {
            padding: 0.75rem;
            border: 1px solid #ccc;
            border-radius: 2rem;
            font-size: 1rem;
            font-family: 'Quicksand', sans-serif;
        }

.email-form button {
            background: #1a5f7a;
            color: #fff;
            border: none;
            padding: 0.75rem;
            border-radius: 2rem;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-family: 'Quicksand', sans-serif;
            font-weight: 600;
        }

.email-form button:hover {
            background: #13455a;
        }

/* Responsive styles */
        @media (max-width: 768px) {
            .hero {
                grid-template-columns: 1fr;
            }

.hero-content {
                padding: 2rem;
            }

h1 {
                font-size: 2.5rem;
            }

nav {
                display: none;
            }

.mobile-menu {
                display: block;
            }
        }

/* Animation classes */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

.fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <header>
        <a href="/" class="logo">Sunset Paradise</a>
        <nav>
            <a href="#about">About</a>
            <a href="#rooms">Rooms</a>
            <a href="#amenities">Amenities</a>
            <a href="#dining">Dining</a>
            <a href="#contact" class="book-btn">Book Now</a>
        </nav>
    </header>

<main class="hero">
        <div class="hero-content">
            <div class="icon-container fade-in">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 5.28c-1.23-.37-2.22-1.17-2.8-2.18l-1-1.6c-.41-.65-1.11-1-1.84-1-.78 0-1.59.5-1.78 1.44S7 23 7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3c1 1.15 2.41 2.01 4 2.34V23h2V9h-2v1.78zM6 7V4H4v3H1v2h3v3h2V9h3V7H6z"/>
                </svg>
            </div>
            <h1 class="fade-in">Discover Paradise</h1>
            <p class="fade-in">
                Experience luxury and tranquility at Sunset Paradise Beach Resort. 
                Immerse yourself in crystal-clear waters, pristine beaches, and world-class amenities. 
                Your dream vacation awaits in our oceanfront oasis.
            </p>
            <form class="email-form fade-in" id="bookingForm">
                <input type="email" placeholder="Enter your email" required>
                <button type="submit">Get Exclusive Offers</button>
            </form>
        </div>
        <div class="hero-image"></div>
    </main>

fadeElements.forEach(element => {
                observer.observe(element);
            });

// Handle form submission
            const bookingForm = document.getElementById('bookingForm');
            bookingForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const email = e.target.querySelector('input[type="email"]').value;
                alert(`Thank you for your interest! We'll send exclusive offers to ${email} soon.`);
                e.target.reset();
            });
        });
    </script>
</body>
</html>

CSS