Page de destination – Voyage

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

12 August 2025

Extrait de code d'animation CSS Heart

4 June 2025

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

Page de destination – Voyage

Recommandé

Extrait de code d'animation CSS Heart

Un code par chinoos

Basculement des émoticônes

HTML

CSS

JS

Recommandé

Extrait de code d'animation CSS Heart

Un code par chinoos

Basculement des émoticônes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS