Auto

Abrir en el editor Publica tu código

Recomendado

4 January 2025

Página de inicio de Matriz Roja

10 February 2025

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

Auto

Recomendado

Página de inicio de Matriz Roja

Un código de bachir123

Cómo animar el color de fondo

HTML

CSS

JS

Recomendado

Página de inicio de Matriz Roja

Un código de bachir123

Cómo animar el color de fondo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS