Galeria de Carros de Luxo: Motores e Veículos Premium

1115 Metehan

Abrir no Editor Video Publique Seu Código

Galeria de Carros de Luxo: Motores e Veículos Premium

Recomendado

10 December 2025

Demonstração de física ragdoll em HTML5: Playground do Matter.js

21 July 2025

Portfólio de desenvolvedores: Web, aplicativos, design - Dawid Wróbel

24 September 2025

Código gráfico SVG interativo do dragão

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LUXURY MOTORS | Premium Car Gallery</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1a1a1a',
                        secondary: '#e6b800',
                        accent: '#333333',
                    },
                    fontFamily: {
                        sans: ['Montserrat', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        /* Custom CSS for animations and effects */
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Montserrat', sans-serif;
            scroll-behavior: smooth;
        }
        
        .hero {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1494972308805-463bc619d34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: #e6b800;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .car-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .mobile-menu {
            transition: all 0.5s ease;
        }
        
        .modal {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .filter-btn.active {
            background-color: #e6b800;
            color: #1a1a1a;
        }
        
        .blog-card:hover .blog-img {
            transform: scale(1.05);
        }
    </style>
</head>
<body class="bg-primary text-white">
    
    <nav class="fixed w-full bg-primary bg-opacity-90 z-50 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-2xl font-bold text-secondary">LUXURY<span class="text-white">MOTORS</span></span>
                    </div>
                    <div class="hidden md:block">
                        <div class="ml-10 flex items-baseline space-x-8">
                            <a href="#home" class="nav-link text-white hover:text-secondary px-3 py-2 rounded-md text-sm font-medium">Home</a>
                            <a href="#about" class="nav-link text-white hover:text-secondary px-3 py-2 rounded-md text-sm font-medium">About</a>
                            <a href="#gallery" class="nav-link text-white hover:text-secondary px-3 py-2 rounded-md text-sm font-medium">Gallery</a>
                            <a href="#blog" class="nav-link text-white hover:text-secondary px-3 py-2 rounded-md text-sm font-medium">Blog</a>
                            <a href="#contact" class="nav-link text-white hover:text-secondary px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                        </div>
                    </div>
                </div>
                <div class="hidden md:block">
                    <div class="ml-4 flex items-center md:ml-6">
                        <a href="#" class="text-white hover:text-secondary mx-3">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-white hover:text-secondary mx-3">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-white hover:text-secondary mx-3">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <button class="ml-6 bg-secondary text-primary px-6 py-2 rounded-md font-medium hover:bg-yellow-500 transition duration-300">
                            Book a Test Drive
                        </button>
                    </div>
                </div>
                <div class="-mr-2 flex md:hidden">
                    <button id="mobile-menu-button" class="text-white hover:text-secondary focus:outline-none">
                        <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        
        <div id="mobile-menu" class="mobile-menu hidden md:hidden bg-accent">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-secondary hover:bg-primary">Home</a>
                <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-secondary hover:bg-primary">About</a>
                <a href="#gallery" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-secondary hover:bg-primary">Gallery</a>
                <a href="#blog" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-secondary hover:bg-primary">Blog</a>
                <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-secondary hover:bg-primary">Contact</a>
                <div class="flex justify-center space-x-4 pt-4">
                    <a href="#" class="text-white hover:text-secondary">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="text-white hover:text-secondary">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-white hover:text-secondary">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
                <button class="w-full mt-4 bg-secondary text-primary px-6 py-2 rounded-md font-medium hover:bg-yellow-500 transition duration-300">
                    Book a Test Drive
                </button>
            </div>
        </div>
    </nav>

<section id="home" class="hero flex items-center justify-center text-center relative">
        <div class="px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-fade-in">EXPERIENCE AUTOMOTIVE EXCELLENCE</h1>
            <p class="text-xl md:text-2xl mb-8 text-gray-300">Discover the world's most prestigious vehicles in our exclusive gallery</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#gallery" class="bg-secondary text-primary px-8 py-3 rounded-md font-bold hover:bg-yellow-500 transition duration-300">Explore Collection</a>
                <a href="#contact" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-md font-bold hover:bg-white hover:text-primary transition duration-300">Contact Us</a>
            </div>
        </div>
        <a href="#about" class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
            <svg class="h-10 w-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
        </a>
    </section>

<section id="about" class="py-20 bg-accent">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">ABOUT LUXURY MOTORS</h2>
                <div class="w-20 h-1 bg-secondary mx-auto"></div>
            </div>
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/2">
                    <img src="https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1883&q=80" alt="About Us" class="rounded-lg shadow-2xl w-full h-auto">
                </div>
                <div class="md:w-1/2">
                    <h3 class="text-2xl font-bold mb-6">Our Passion for Automotive Excellence</h3>
                    <p class="text-gray-300 mb-6">Founded in 2005, Luxury Motors has established itself as the premier destination for automotive connoisseurs seeking the finest vehicles from around the world. Our gallery showcases an ever-evolving collection of the most prestigious, rare, and technologically advanced automobiles.</p>
                    <p class="text-gray-300 mb-8">We pride ourselves on our meticulous attention to detail, unparalleled customer service, and deep knowledge of the luxury automotive market. Our team of experts is dedicated to helping you find the perfect vehicle to match your lifestyle and aspirations.</p>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="flex items-center">
                            <div class="bg-secondary rounded-full p-2 mr-3">
                                <i class="fas fa-check text-primary"></i>
                            </div>
                            <span class="font-medium">20+ Years Experience</span>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-secondary rounded-full p-2 mr-3">
                                <i class="fas fa-check text-primary"></i>
                            </div>
                            <span class="font-medium">Global Network</span>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-secondary rounded-full p-2 mr-3">
                                <i class="fas fa-check text-primary"></i>
                            </div>
                            <span class="font-medium">Certified Vehicles</span>
                        </div>
                        <div class="flex items-center">
                            <div class="bg-secondary rounded-full p-2 mr-3">
                                <i class="fas fa-check text-primary"></i>
                            </div>
                            <span class="font-medium">Financing Options</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="gallery" class="py-20 bg-primary">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">OUR EXCLUSIVE COLLECTION</h2>
                <div class="w-20 h-1 bg-secondary mx-auto mb-8"></div>
                <div class="flex flex-wrap justify-center gap-4 mb-8">
                    <button class="filter-btn active px-6 py-2 rounded-full border border-secondary text-white hover:bg-secondary hover:text-primary transition duration-300" data-filter="all">All</button>
                    <button class="filter-btn px-6 py-2 rounded-full border border-secondary text-white hover:bg-secondary hover:text-primary transition duration-300" data-filter="sports">Sports</button>
                    <button class="filter-btn px-6 py-2 rounded-full border border-secondary text-white hover:bg-secondary hover:text-primary transition duration-300" data-filter="luxury">Luxury</button>
                    <button class="filter-btn px-6 py-2 rounded-full border border-secondary text-white hover:bg-secondary hover:text-primary transition duration-300" data-filter="classic">Classic</button>
                    <button class="filter-btn px-6 py-2 rounded-full border border-secondary text-white hover:bg-secondary hover:text-primary transition duration-300" data-filter="suv">SUV</button>
                </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="car-card bg-accent rounded-lg overflow-hidden shadow-lg transition duration-300" data-category="sports">
                    <img src="https://images.unsplash.com/photo-1493238792000-8113da705763?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Ferrari 488 GTB" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Ferrari 488 GTB</h3>
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-secondary font-bold">$350,000</span>
                            <span class="text-gray-400">2022</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">3.9L V8</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">661 HP</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">0-60 in 3.0s</span>
                        </div>
                        <button class="view-details-btn w-full bg-secondary text-primary py-2 rounded-md font-medium hover:bg-yellow-500 transition duration-300" data-car="ferrari-488">
                            View Details
                        </button>
                    </div>
                </div>
                
                
                <div class="car-card bg-accent rounded-lg overflow-hidden shadow-lg transition duration-300" data-category="luxury">
                    <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Rolls-Royce Phantom" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Rolls-Royce Phantom</h3>
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-secondary font-bold">$450,000</span>
                            <span class="text-gray-400">2023</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">6.75L V12</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">563 HP</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">Luxury</span>
                        </div>
                        <button class="view-details-btn w-full bg-secondary text-primary py-2 rounded-md font-medium hover:bg-yellow-500 transition duration-300" data-car="rolls-royce">
                            View Details
                        </button>
                    </div>
                </div>
                
                
                <div class="car-card bg-accent rounded-lg overflow-hidden shadow-lg transition duration-300" data-category="classic">
                    <img src="https://images.unsplash.com/photo-1600861195091-690c92f1d2cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Ford Mustang 1969" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Ford Mustang 1969</h3>
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-secondary font-bold">$120,000</span>
                            <span class="text-gray-400">1969</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">5.0L V8</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">290 HP</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">Classic</span>
                        </div>
                        <button class="view-details-btn w-full bg-secondary text-primary py-2 rounded-md font-medium hover:bg-yellow-500 transition duration-300" data-car="mustang-69">
                            View Details
                        </button>
                    </div>
                </div>
                
                
                <div class="car-card bg-accent rounded-lg overflow-hidden shadow-lg transition duration-300" data-category="suv">
                    <img src="https://images.unsplash.com/photo-1551836022-d5d44eef8f37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Range Rover Autobiography" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Range Rover Autobiography</h3>
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-secondary font-bold">$180,000</span>
                            <span class="text-gray-400">2023</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">4.4L V8</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">523 HP</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">Luxury SUV</span>
                        </div>
                        <button class="view-details-btn w-full bg-secondary text-primary py-2 rounded-md font-medium hover:bg-yellow-500 transition duration-300" data-car="range-rover">
                            View Details
                        </button>
                    </div>
                </div>
                
                
                <div class="car-card bg-accent rounded-lg overflow-hidden shadow-lg transition duration-300" data-category="sports">
                    <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Lamborghini Huracan" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Lamborghini Huracan</h3>
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-secondary font-bold">$280,000</span>
                            <span class="text-gray-400">2022</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">5.2L V10</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">631 HP</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">0-60 in 2.5s</span>
                        </div>
                        <button class="view-details-btn w-full bg-secondary text-primary py-2 rounded-md font-medium hover:bg-yellow-500 transition duration-300" data-car="huracan">
                            View Details
                        </button>
                    </div>
                </div>
                
                
                <div class="car-card bg-accent rounded-lg overflow-hidden shadow-lg transition duration-300" data-category="luxury">
                    <img src="https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2025&q=80" alt="Mercedes-Benz S-Class" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">Mercedes-Benz S-Class</h3>
                        <div class="flex justify-between items-center mb-4">
                            <span class="text-secondary font-bold">$120,000</span>
                            <span class="text-gray-400">2023</span>
                        </div>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">3.0L I6</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">429 HP</span>
                            <span class="bg-primary bg-opacity-50 px-3 py-1 rounded-full text-xs">Executive</span>
                        </div>
                        <button class="view-details-btn w-full bg-secondary text-primary py-2 rounded-md font-medium hover:bg-yellow-500 transition duration-300" data-car="s-class">
                            View Details
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="blog" class="py-20 bg-accent">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">LATEST AUTOMOTIVE NEWS</h2>
                <div class="w-20 h-1 bg-secondary mx-auto"></div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="blog-card bg-primary rounded-lg overflow-hidden shadow-lg transition duration-300">
                    <div class="overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1601362840469-51e4d8d58785?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Electric Future" class="blog-img w-full h-64 object-cover transition duration-500">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-400 mb-3">
                            <span>June 15, 2023</span>
                            <span class="mx-2">•</span>
                            <span>5 min read</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">The Future of Electric Supercars</h3>
                        <p class="text-gray-300 mb-4">Exploring how major manufacturers are adapting to the electric revolution while maintaining performance standards...</p>
                        <a href="#" class="text-secondary font-medium hover:underline">Read More</a>
                    </div>
                </div>
                
                
                <div class="blog-card bg-primary rounded-lg overflow-hidden shadow-lg transition duration-300">
                    <div class="overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1494905998402-395d579af36f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Car Maintenance" class="blog-img w-full h-64 object-cover transition duration-500">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-400 mb-3">
                            <span>May 28, 2023</span>
                            <span class="mx-2">•</span>
                            <span>7 min read</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Essential Maintenance for Luxury Vehicles</h3>
                        <p class="text-gray-300 mb-4">Learn the key maintenance practices that will keep your high-end vehicle performing at its peak for years to come...</p>
                        <a href="#" class="text-secondary font-medium hover:underline">Read More</a>
                    </div>
                </div>
                
                
                <div class="blog-card bg-primary rounded-lg overflow-hidden shadow-lg transition duration-300">
                    <div class="overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Investment Cars" class="blog-img w-full h-64 object-cover transition duration-500">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-400 mb-3">
                            <span>April 10, 2023</span>
                            <span class="mx-2">•</span>
                            <span>10 min read</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Classic Cars as Investments: What to Know</h3>
                        <p class="text-gray-300 mb-4">Discover which classic models are appreciating in value and how to build a profitable classic car portfolio...</p>
                        <a href="#" class="text-secondary font-medium hover:underline">Read More</a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-12">
                <a href="#" class="inline-block bg-secondary text-primary px-8 py-3 rounded-md font-bold hover:bg-yellow-500 transition duration-300">View All Articles</a>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-primary">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">CONTACT US</h2>
                <div class="w-20 h-1 bg-secondary mx-auto"></div>
            </div>
            <div class="flex flex-col lg:flex-row gap-12">
                <div class="lg:w-1/2">
                    <h3 class="text-2xl font-bold mb-6">Get In Touch</h3>
                    <p class="text-gray-300 mb-8">Our team is ready to assist you with any inquiries about our collection, services, or to schedule a private viewing. Fill out the form or contact us directly using the information below.</p>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="bg-secondary rounded-full p-3 mr-4 flex-shrink-0">
                                <i class="fas fa-map-marker-alt text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Our Showroom</h4>
                                <p class="text-gray-300">123 Luxury Avenue, Beverly Hills, CA 90210</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="bg-secondary rounded-full p-3 mr-4 flex-shrink-0">
                                <i class="fas fa-phone-alt text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Phone</h4>
                                <p class="text-gray-300">+1 (310) 555-1234</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="bg-secondary rounded-full p-3 mr-4 flex-shrink-0">
                                <i class="fas fa-envelope text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Email</h4>
                                <p class="text-gray-300">info@luxurymotors.com</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="bg-secondary rounded-full p-3 mr-4 flex-shrink-0">
                                <i class="fas fa-clock text-primary"></i>
                            </div>
                            <div>
                                <h4 class="font-bold mb-1">Hours</h4>
                                <p class="text-gray-300">Monday - Friday: 9AM - 7PM</p>
                                <p class="text-gray-300">Saturday: 10AM - 5PM</p>
                                <p class="text-gray-300">Sunday: By Appointment Only</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-8">
                        <h4 class="font-bold mb-4">Follow Us</h4>
                        <div class="flex space-x-4">
                            <a href="#" class="bg-accent hover:bg-secondary hover:text-primary w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="#" class="bg-accent hover:bg-secondary hover:text-primary w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="#" class="bg-accent hover:bg-secondary hover:text-primary w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
                                <i class="fab fa-instagram"></i>
                            </a>
                            <a href="#" class="bg-accent hover:bg-secondary hover:text-primary w-10 h-10 rounded-full flex items-center justify-center transition duration-300">
                                <i class="fab fa-youtube"></i>
                            </a>
                        </div>
                    </div>
                </div>
                
                <div class="lg:w-1/2">
                    <form class="bg-accent p-8 rounded-lg shadow-xl">
                        <div class="mb-6">
                            <label for="name" class="block text-white mb-2">Full Name</label>
                            <input type="text" id="name" class="w-full px-4 py-3 bg-primary border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary" placeholder="Your Name">
                        </div>
                        <div class="mb-6">
                            <label for="email" class="block text-white mb-2">Email Address</label>
                            <input type="email" id="email" class="w-full px-4 py-3 bg-primary border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary" placeholder="your@email.com">
                        </div>
                        <div class="mb-6">
                            <label for="phone" class="block text-white mb-2">Phone Number</label>
                            <input type="tel" id="phone" class="w-full px-4 py-3 bg-primary border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary" placeholder="(123) 456-7890">
                        </div>
                        <div class="mb-6">
                            <label for="subject" class="block text-white mb-2">Subject</label>
                            <select id="subject" class="w-full px-4 py-3 bg-primary border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary">
                                <option value="">Select a subject</option>
                                <option value="inquiry">Vehicle Inquiry</option>
                                <option value="test-drive">Test Drive Request</option>
                                <option value="service">Service Appointment</option>
                                <option value="general">General Question</option>
                            </select>
                        </div>
                        <div class="mb-6">
                            <label for="message" class="block text-white mb-2">Your Message</label>
                            <input id="message" rows="5" class="w-full px-4 py-3 bg-primary border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary" placeholder="Type your message here..."/>
                        </div>
                        <button type="submit" class="w-full bg-secondary text-primary py-3 rounded-md font-bold hover:bg-yellow-500 transition duration-300">Send Message</button>
                    </form>
                </div>
            </div>
            
            <div class="mt-16 rounded-lg overflow-hidden shadow-xl">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3304.453349800683!2d-118.39953592433179!3d34.07299607314369!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2bc85f02c7b6f%3A0x7e9a9e9e9e9e9e9e!2sBeverly%20Hills%2C%20CA%2090210!5e0!3m2!1sen!2sus!4v1689876543210!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </section>

<footer class="bg-accent py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-6">LUXURY MOTORS</h3>
                    <p class="text-gray-300 mb-4">The premier destination for automotive connoisseurs seeking the finest vehicles from around the world.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-300 hover:text-secondary transition duration-300">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-secondary transition duration-300">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-secondary transition duration-300">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-300 hover:text-secondary transition duration-300">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">Quick Links</h4>
                    <ul class="space-y-3">
                        <li><a href="#home" class="text-gray-300 hover:text-secondary transition duration-300">Home</a></li>
                        <li><a href="#about" class="text-gray-300 hover:text-secondary transition duration-300">About Us</a></li>
                        <li><a href="#gallery" class="text-gray-300 hover:text-secondary transition duration-300">Vehicle Gallery</a></li>
                        <li><a href="#blog" class="text-gray-300 hover:text-secondary transition duration-300">Blog</a></li>
                        <li><a href="#contact" class="text-gray-300 hover:text-secondary transition duration-300">Contact</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">Services</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-300 hover:text-secondary transition duration-300">Vehicle Purchase</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-secondary transition duration-300">Test Drives</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-secondary transition duration-300">Financing</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-secondary transition duration-300">Vehicle Appraisal</a></li>
                        <li><a href="#" class="text-gray-300 hover:text-secondary transition duration-300">Maintenance</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-6">Newsletter</h4>
                    <p class="text-gray-300 mb-4">Subscribe to our newsletter for the latest updates and exclusive offers.</p>
                    <form class="flex">
                        <input type="email" placeholder="Your Email" class="px-4 py-2 bg-primary text-white rounded-l-md focus:outline-none focus:ring-2 focus:ring-secondary w-full">
                        <button type="submit" class="bg-secondary text-primary px-4 py-2 rounded-r-md hover:bg-yellow-500 transition duration-300">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 mb-4 md:mb-0">© 2023 Luxury Motors. All rights reserved.</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Privacy Policy</a>
                    <a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Terms of Service</a>
                    <a href="#" class="text-gray-400 hover:text-secondary transition duration-300">Sitemap</a>
                </div>
            </div>
        </div>
    </footer>

<div id="car-modal" class="modal fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 opacity-0 invisible transition duration-300">
        <div class="bg-accent rounded-lg max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div class="relative">
                <button id="close-modal" class="absolute top-4 right-4 bg-primary bg-opacity-50 text-white rounded-full p-2 hover:bg-secondary hover:text-primary transition duration-300 z-10">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
                
                <div class="grid grid-cols-1 lg:grid-cols-2">
                    <div class="relative h-64 lg:h-full">
                        <img id="modal-car-image" src="" alt="Car Image" class="w-full h-full object-cover">
                    </div>
                    
                    <div class="p-8">
                        <h2 id="modal-car-title" class="text-3xl font-bold mb-2"></h2>
                        <div class="flex justify-between items-center mb-6">
                            <span id="modal-car-price" class="text-2xl text-secondary font-bold"></span>
                            <span id="modal-car-year" class="text-gray-400"></span>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-4 mb-8">
                            <div class="bg-primary bg-opacity-50 p-4 rounded-lg">
                                <div class="text-gray-400 mb-1">Engine</div>
                                <div id="modal-car-engine" class="font-medium"></div>
                            </div>
                            <div class="bg-primary bg-opacity-50 p-4 rounded-lg">
                                <div class="text-gray-400 mb-1">Horsepower</div>
                                <div id="modal-car-hp" class="font-medium"></div>
                            </div>
                            <div class="bg-primary bg-opacity-50 p-4 rounded-lg">
                                <div class="text-gray-400 mb-1">0-60 mph</div>
                                <div id="modal-car-acceleration" class="font-medium"></div>
                            </div>
                            <div class="bg-primary bg-opacity-50 p-4 rounded-lg">
                                <div class="text-gray-400 mb-1">Top Speed</div>
                                <div id="modal-car-speed" class="font-medium"></div>
                            </div>
                        </div>
                        
                        <h3 class="text-xl font-bold mb-3">Description</h3>
                        <p id="modal-car-description" class="text-gray-300 mb-6"></p>
                        
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button class="flex-1 bg-secondary text-primary py-3 rounded-md font-bold hover:bg-yellow-500 transition duration-300 flex items-center justify-center">
                                <i class="fas fa-car mr-2"></i> Book Test Drive
                            </button>
                            <button class="flex-1 bg-transparent border border-secondary text-secondary py-3 rounded-md font-bold hover:bg-secondary hover:text-primary transition duration-300 flex items-center justify-center">
                                <i class="fas fa-file-invoice-dollar mr-2"></i> Get Financing
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Recomendado

Demonstração de física ragdoll em HTML5: Playground do Matter.js

Portfólio de desenvolvedores: Web, aplicativos, design - Dawid Wróbel

Código gráfico SVG interativo do dragão

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS