Auto

1,745 Andev.web

Abrir en el editor Publica tu código

Recomendado

15 May 2025

Botones de neón

29 August 2025

Fragmento de animación de memoria CSS

16 October 2025

Ejemplo de elemento de carga animado CSS

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