Página de destino - Hotel

1,532 Andev.web

Abrir en el editor Publica tu código

Recomendado

30 June 2025

danza de formas interactiva

13 July 2024

Botón de luciérnagas

28 July 2023

Animación de color de texto con CSS

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