WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Luxury Car Gallery: Premium Motors & Vehicles
27
Metehan
Open In Editor
Publish Your Code
Recommended
3 July 2025
Web Tasarım, Yazılım & Dijital Çözümler | Power Nova
8 July 2025
Character choose with preview card animation (CSS sprites)
5 August 2024
Card Product auto
HTML
Copy
<!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"> <!-- Navigation --> <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> <!-- Mobile menu --> <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> <!-- Hero Section --> <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> <!-- About 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> <!-- Gallery 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"> <!-- Car Item 1 --> <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> <!-- Car Item 2 --> <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> <!-- Car Item 3 --> <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> <!-- Car Item 4 --> <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> <!-- Car Item 5 --> <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> <!-- Car Item 6 --> <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> <!-- Blog 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"> <!-- Blog Post 1 --> <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> <!-- Blog Post 2 --> <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> <!-- Blog Post 3 --> <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> <!-- Contact 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 --> <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> <!-- Car Details Modal --> <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> <script> // Mobile menu toggle const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { // Close mobile menu if open if (!mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); } window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); // Gallery filtering const filterButtons = document.querySelectorAll('.filter-btn'); const carCards = document.querySelectorAll('.car-card'); filterButtons.forEach(button => { button.addEventListener('click', () => { // Update active button filterButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); const filterValue = button.getAttribute('data-filter'); // Filter cards carCards.forEach(card => { if (filterValue === 'all' || card.getAttribute('data-category') === filterValue) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }); }); // Car modal functionality const modal = document.getElementById('car-modal'); const closeModal = document.getElementById('close-modal'); const viewDetailsButtons = document.querySelectorAll('.view-details-btn'); // Sample car data (in a real app, this would come from a database) const cars = { 'ferrari-488': { title: 'Ferrari 488 GTB', price: '$350,000', year: '2022', engine: '3.9L Twin-Turbo V8', hp: '661 HP @ 8,000 RPM', acceleration: '3.0 seconds', speed: '205 mph', image: 'https://images.unsplash.com/photo-1493238792000-8113da705763?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', description: 'The Ferrari 488 GTB is a mid-engine sports car produced by the Italian automobile manufacturer Ferrari. The car is an update to the 458 with notable exterior and performance changes. It was unveiled at the Geneva Motor Show in 2015 and is the successor to the 458. The 488 GTB name denotes the engine displacement of a single cylinder in cubic centimeters, while the GTB stands for Gran Turismo Berlinetta.' }, 'rolls-royce': { title: 'Rolls-Royce Phantom', price: '$450,000', year: '2023', engine: '6.75L Twin-Turbo V12', hp: '563 HP @ 5,000 RPM', acceleration: '5.3 seconds', speed: '155 mph (limited)', image: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', description: 'The Rolls-Royce Phantom is a full-sized luxury saloon manufactured by Rolls-Royce Motor Cars. The Phantom is the flagship model of Rolls-Royce, with the current generation being the eighth model to bear the Phantom name. The Phantom is known for its silent operation, handcrafted luxury, and bespoke customization options that allow owners to personalize nearly every aspect of their vehicle.' }, 'mustang-69': { title: 'Ford Mustang 1969', price: '$120,000', year: '1969', engine: '5.0L V8', hp: '290 HP @ 4,800 RPM', acceleration: '6.5 seconds', speed: '125 mph', image: 'https://images.unsplash.com/photo-1600861195091-690c92f1d2cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', description: 'The 1969 Ford Mustang represents the first major redesign of the original model. This second-generation Mustang was larger than the first with more engine options and styling variations. The 1969 model introduced several new features including quad headlamps, a more aggressive grille, and a wider body. This particular model is a numbers-matching example with its original 5.0L V8 engine, making it a highly sought-after collector\'s item.' }, 'range-rover': { title: 'Range Rover Autobiography', price: '$180,000', year: '2023', engine: '4.4L Twin-Turbo V8', hp: '523 HP @ 5,500 RPM', acceleration: '4.6 seconds', speed: '155 mph (limited)', image: 'https://images.unsplash.com/photo-1551836022-d5d44eef8f37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', description: 'The Range Rover Autobiography represents the pinnacle of Land Rover\'s luxury SUV lineup. Packed with premium features and cutting-edge technology, this vehicle combines off-road capability with limousine-like comfort. The Autobiography trim includes exclusive interior materials, advanced driver assistance systems, and bespoke customization options. The powerful 4.4L V8 engine delivers effortless acceleration while maintaining the refined character expected from a Range Rover.' }, 'huracan': { title: 'Lamborghini Huracan', price: '$280,000', year: '2022', engine: '5.2L Naturally Aspirated V10', hp: '631 HP @ 8,000 RPM', acceleration: '2.5 seconds', speed: '202 mph', image: 'https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', description: 'The Lamborghini Huracán is a sports car manufactured by Italian automotive manufacturer Lamborghini. Replacing the Gallardo, the Huracán was unveiled at the 2014 Geneva Auto Show. The Huracán\'s name is derived from a Spanish word meaning "hurricane" and continues Lamborghini\'s tradition of naming cars after famous fighting bulls. This particular model features the naturally aspirated 5.2L V10 engine that delivers an exhilarating driving experience with its high-revving character and intoxicating exhaust note.' }, 's-class': { title: 'Mercedes-Benz S-Class', price: '$120,000', year: '2023', engine: '3.0L Turbocharged I6 with EQ Boost', hp: '429 HP @ 6,100 RPM', acceleration: '4.8 seconds', speed: '155 mph (limited)', image: 'https://images.unsplash.com/photo-1553440569-bcc63803a83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2025&q=80', description: 'The Mercedes-Benz S-Class has long been the benchmark for luxury sedans, combining cutting-edge technology with unparalleled comfort. The current generation continues this tradition with innovations like rear-axle steering, E-Active Body Control, and an augmented reality head-up display. The interior features premium materials throughout with options for massaging seats, fragrance systems, and a 30-speaker Burmester audio system. The S-Class remains the choice for executives and heads of state who demand the very best in automotive luxury.' } }; viewDetailsButtons.forEach(button => { button.addEventListener('click', () => { const carId = button.getAttribute('data-car'); const car = cars[carId]; if (car) { document.getElementById('modal-car-title').textContent = car.title; document.getElementById('modal-car-price').textContent = car.price; document.getElementById('modal-car-year').textContent = car.year; document.getElementById('modal-car-engine').textContent = car.engine; document.getElementById('modal-car-hp').textContent = car.hp; document.getElementById('modal-car-acceleration').textContent = car.acceleration; document.getElementById('modal-car-speed').textContent = car.speed; document.getElementById('modal-car-description').textContent = car.description; document.getElementById('modal-car-image').src = car.image; document.getElementById('modal-car-image').alt = car.title; modal.classList.remove('invisible', 'opacity-0'); modal.classList.add('opacity-100', 'visible'); document.body.style.overflow = 'hidden'; } }); }); closeModal.addEventListener('click', () => { modal.classList.remove('opacity-100', 'visible'); modal.classList.add('invisible', 'opacity-0'); document.body.style.overflow = 'auto'; }); // Close modal when clicking outside content modal.addEventListener('click', (e) => { if (e.target === modal) { modal.classList.remove('opacity-100', 'visible'); modal.classList.add('invisible', 'opacity-0'); document.body.style.overflow = 'auto'; } }); // Sticky navigation on scroll window.addEventListener('scroll', () => { const nav = document.querySelector('nav'); if (window.scrollY > 100) { nav.classList.add('shadow-xl'); nav.classList.add('bg-opacity-95'); } else { nav.classList.remove('shadow-xl'); nav.classList.remove('bg-opacity-95'); } }); </script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
