Pagina di destinazione - Hotel

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

10 January 2025

<!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>

Pagina di destinazione - Hotel

Consigliato

Un codice di Mikeykun

Modulo di accesso

Un codice per neumorfismo

HTML

CSS

JS

Consigliato

Un codice di Mikeykun

Modulo di accesso

Un codice per neumorfismo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS