Page de destination – Voyage

936 Andev.web

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

15 May 2025

Modèle de site Web de commerce électronique HTML CSS

10 March 2025

Barre de navigation réactive premium

9 March 2025

changer de couleur

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>

Recommandé

Modèle de site Web de commerce électronique HTML CSS

Barre de navigation réactive premium

changer de couleur

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS