Voiture

1,652 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 November 2025

Chargeur de jeu HTML5 avec le SDK Yandex Games

18 May 2025

Un code par youssefdahroug2005

15 January 2026

Five Nights at Baldi's : Jeu WebGL refait

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AutoLuxe - Luxury Cars</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Outfit', sans-serif;
        }

:root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --glass: rgba(255, 255, 255, 0.1);
            --glass-border: rgba(255, 255, 255, 0.2);
        }

body {
            background: #0f172a;
            color: white;
            overflow-x: hidden;
        }

.navbar {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            z-index: 1000;
            transition: all 0.3s ease;
        }

.logo {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(to right, var(--primary), #a855f7);
            -webkit-background-clip: text;
            color: transparent;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

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

.nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

.nav-links a:hover {
            color: var(--primary);
        }

.hero {
            height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)),
                        url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

.hero-content {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 2rem;
            border: 1px solid var(--glass-border);
            transform: translateY(50px);
            opacity: 0;
            animation: fadeUp 1s ease forwards;
        }

@keyframes fadeUp {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

.hero h1 {
            font-size: 4rem;
            margin-bottom: 1rem;
            background: linear-gradient(to right, #fff, #ccc);
            -webkit-background-clip: text;
            color: transparent;
        }

.hero p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            color: #e2e8f0;
        }

.cta-buttons {
            display: flex;
            gap: 1rem;
        }

.btn {
            padding: 1rem 2rem;
            border-radius: 2rem;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.btn-primary {
            background: var(--primary);
            color: white;
        }

.btn-primary:hover {
            background: var(--primary-dark);
            transform: scale(1.05);
        }

.btn-secondary {
            background: var(--glass);
            color: white;
            border: 1px solid var(--glass-border);
        }

.btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }

.features {
            padding: 5rem 2rem;
            background: linear-gradient(to bottom, #0f172a, #1e293b);
        }

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

.feature-card {
            background: var(--glass);
            padding: 2rem;
            border-radius: 1.5rem;
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease;
            cursor: pointer;
        }

.feature-card:hover {
            transform: translateY(-10px);
        }

.feature-icon {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }

.floating {
            animation: floating 3s ease-in-out infinite;
        }

@keyframes floating {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

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

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

.cta-buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            ???? AutoLuxe
        </div>
        <div class="nav-links">
            <a href="#home">Home</a>
            <a href="#models">Models</a>
            <a href="#services">Services</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </div>
    </nav>

<section class="hero" id="home">
        <div class="hero-content">
            <h1>Drive Your Dreams</h1>
            <p>Experience luxury and performance like never before. Discover our exclusive collection of premium vehicles.</p>
            <div class="cta-buttons">
                <button class="btn btn-primary">
                    Explore Models
                    <span>→</span>
                </button>
                <button class="btn btn-secondary">Book Test Drive</button>
            </div>
        </div>
    </section>

<section class="features">
        <div class="features-grid">
            <div class="feature-card floating">
                <div class="feature-icon">????️</div>
                <h3>Safety First</h3>
                <p>Advanced safety features to protect you and your loved ones.</p>
            </div>
            <div class="feature-card floating" style="animation-delay: 0.2s">
                <div class="feature-icon">⏰</div>
                <h3>24/7 Support</h3>
                <p>Round-the-clock assistance whenever you need it.</p>
            </div>
            <div class="feature-card floating" style="animation-delay: 0.4s">
                <div class="feature-icon">????</div>
                <h3>Premium Quality</h3>
                <p>Only the finest vehicles in our exclusive collection.</p>
            </div>
            <div class="feature-card floating" style="animation-delay: 0.6s">
                <div class="feature-icon">❤️</div>
                <h3>Customer Care</h3>
                <p>Dedicated service that goes above and beyond.</p>
            </div>
        </div>
    </section>

// Navbar transparency on scroll
        window.addEventListener('scroll', () => {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.style.background = 'rgba(255, 255, 255, 0.2)';
            } else {
                navbar.style.background = 'rgba(255, 255, 255, 0.1)';
            }
        });

// 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'
                });
            });
        });

// Animation on scroll for feature cards
        const observerOptions = {
            threshold: 0.1
        };

document.querySelectorAll('.feature-card').forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(50px)';
            card.style.transition = 'all 0.5s ease';
            observer.observe(card);
        });
    </script>
</body>
</html>

CSS