Carro

Abrir no Editor Publique Seu Código

Recomendado

15 September 2024

Trecho de animação de neurônio HTML

29 April 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>

Carro

Recomendado

Tulipa Roxa

Trecho de animação de neurônio HTML

Site AI (NÃO FUNCIONA)

HTML

CSS

JS

Recomendado

Tulipa Roxa

Trecho de animação de neurônio HTML

Site AI (NÃO FUNCIONA)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS