Página de destino: viajes

2,303 Andev.web

Abrir en el editor Publica tu código

Recomendado

22 November 2025

Plantilla HTML de formulario de inicio de sesión de Cyberpunk

20 September 2025

Plantilla HTML de portafolio de desarrollador

4 October 2025

Fragmento de animación de carga de CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dream Stay - Travel Experiences</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

:root {
            --orange: #ff6b00;
            --orange-light: #ff8533;
        }

body {
            background-color: #f8f9fa;
        }

.header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 1rem 2rem;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            z-index: 1000;
            animation: slideDown 0.5s ease-out;
        }

.nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            font-size: 1.5rem;
            color: var(--orange);
        }

.logo-dot {
            width: 10px;
            height: 10px;
            background-color: var(--orange);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

.nav-links {
            display: flex;
            gap: 2rem;
        }

.nav-links a {
            text-decoration: none;
            color: #333;
            position: relative;
            transition: color 0.3s;
            font-weight: 500;
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--orange);
            transition: width 0.3s;
        }

.nav-links a:hover::after {
            width: 100%;
        }

.hero {
            padding: 8rem 2rem 4rem;
            text-align: center;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
                        url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80') center/cover;
            background-attachment: fixed;
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUpIn 0.8s ease-out forwards;
        }

.hero p {
            font-size: 1.2rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto 3rem;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUpIn 0.8s ease-out 0.2s forwards;
        }

.search-container {
            background: white;
            padding: 1rem;
            border-radius: 50px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            gap: 1rem;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUpIn 0.8s ease-out 0.4s forwards;
        }

.search-input {
            flex: 1;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 25px;
            background: #f8f9fa;
            transition: background 0.3s, box-shadow 0.3s;
            font-size: 1rem;
        }

.search-input:focus {
            outline: none;
            background: #fff;
            box-shadow: inset 0 0 0 2px var(--orange);
        }

.search-btn {
            background: var(--orange);
            color: white;
            border: none;
            padding: 0.8rem 2rem;
            border-radius: 25px;
            cursor: pointer;
            transition: transform 0.3s, background 0.3s;
            font-size: 1rem;
            font-weight: 500;
        }

.search-btn:hover {
            background: var(--orange-light);
            transform: translateY(-2px);
        }

.cards-container {
            max-width: 1200px;
            margin: 4rem auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

.card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            opacity: 0;
            transform: translateY(30px);
        }

.card.animate {
            animation: fadeUpIn 0.8s ease-out forwards;
        }

.card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

.card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.5s;
        }

.card:hover img {
            transform: scale(1.1);
        }

.card-content {
            padding: 1.5rem;
        }

.card-title {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

.card-location {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

.card-price {
            color: var(--orange);
            font-weight: 600;
            font-size: 1.5rem;
        }

@keyframes slideDown {
            from {
                transform: translateY(-100%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

@keyframes fadeUpIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.2);
                opacity: 0.7;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

@media (max-width: 768px) {
            .nav-links {
                display: none;
            }

.hero h1 {
                font-size: 2.5rem;
            }

.search-container {
                flex-direction: column;
                border-radius: 20px;
            }

.search-input, .search-btn {
                width: 100%;
            }
        }

@media (max-width: 480px) {
            .hero h1 {
                font-size: 2rem;
            }

.hero p {
                font-size: 1rem;
            }

.card-title {
                font-size: 1.1rem;
            }

.card-price {
                font-size: 1.3rem;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav-container">
            <div class="logo">
                <div class="logo-dot"></div>
                <span>DreamStay</span>
            </div>
            <div class="nav-links">
                <a href="#stays">Stays</a>
                <a href="#experiences">Experiences</a>
                <a href="#transport">Transport</a>
                <a href="#about">About</a>
            </div>
        </nav>
    </header>

<section class="hero">
        <h1>Unforgettable stays await on <span style="color: var(--orange)">dream stay</span></h1>
        <p>Discover unique stays and experiences around the world. Book your next adventure with confidence.</p>
        <div class="search-container">
            <input type="text" class="search-input" placeholder="Where would you like to go?">
            <input type="text" class="search-input" placeholder="Check in - Check out">
            <input type="text" class="search-input" placeholder="2 guests">
            <button class="search-btn">Search</button>
        </div>
    </section>

<div class="cards-container">
        <div class="card">
            <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80" alt="Luxury Villa">
            <div class="card-content">
                <h3 class="card-title">Luxury Villa Retreat</h3>
                <p class="card-location">Bali, Indonesia</p>
                <p class="card-price">$299/night</p>
            </div>
        </div>
        <div class="card">
            <img src="https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?auto=format&fit=crop&q=80" alt="Urban Hotel">
            <div class="card-content">
                <h3 class="card-title">Urban Boutique Hotel</h3>
                <p class="card-location">New York, USA</p>
                <p class="card-price">$199/night</p>
            </div>
        </div>
        <div class="card">
            <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?auto=format&fit=crop&q=80" alt="Beach Resort">
            <div class="card-content">
                <h3 class="card-title">Beachfront Paradise</h3>
                <p class="card-location">Maldives</p>
                <p class="card-price">$499/night</p>
            </div>
        </div>
    </div>

cards.forEach(card => observer.observe(card));

// Smooth scroll for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

// Add parallax effect to hero section
        window.addEventListener('scroll', () => {
            const hero = document.querySelector('.hero');
            const scrolled = window.pageYOffset;
            hero.style.backgroundPositionY = scrolled * 0.5 + 'px';
        });

// Add hover animation to search button
        const searchBtn = document.querySelector('.search-btn');
        searchBtn.addEventListener('mouseover', () => {
            searchBtn.style.transform = 'translateY(-5px) scale(1.05)';
        });
        searchBtn.addEventListener('mouseout', () => {
            searchBtn.style.transform = 'translateY(0) scale(1)';
        });

// Add typing animation to search input
        const searchInputs = document.querySelectorAll('.search-input');
        searchInputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.style.transition = 'all 0.3s ease';
                input.style.transform = 'scale(1.05)';
            });
            input.addEventListener('blur', () => {
                input.style.transform = 'scale(1)';
            });
        });
    </script>
</body>
</html>

CSS