Pagina di destinazione - Viaggio

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

17 April 2025

Carosello di carte 3D HTML CSS JavaScript

1 October 2024

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

Pagina di destinazione - Viaggio

Consigliato

Un codice di Mete Han

Carosello di carte 3D HTML CSS JavaScript

richiesta di appuntamenti

HTML

CSS

JS

Consigliato

Un codice di Mete Han

Carosello di carte 3D HTML CSS JavaScript

richiesta di appuntamenti

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS