Página de destino - Hotel

1,865 Andev.web

Abrir en el editor Publica tu código

Recomendado

22 May 2025

Aplicación de voz

14 April 2023

Barra de navegación CSS responsiva

22 August 2025

Formulario de inicio de sesión y registro con autenticación biométrica

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