A Code by Metehan

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luxury Auto | Premium Car Brands</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&display=swap');
        
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #0a0a0a;
            color: #e5e5e5;
            overflow-x: hidden;
        }
        
        .carbon-fiber {
            background-image: 
                linear-gradient(135deg, #111 25%, transparent 25%),
                linear-gradient(225deg, #111 25%, transparent 25%),
                linear-gradient(45deg, #111 25%, transparent 25%),
                linear-gradient(315deg, #111 25%, #0a0a0a 25%);
            background-position:  10px 0, 10px 0, 0 0, 0 0;
            background-size: 20px 20px;
        }
        
        .car-container {
            height: 500px;
            position: relative;
        }
        
        .brand-logo {
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
            transition: all 0.3s ease;
        }
        
        .brand-logo:hover {
            transform: translateY(-5px);
            filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9));
        }
        
        .btn-gold {
            background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
            color: #111;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
        }
        
        .btn-red {
            background: linear-gradient(135deg, #ff2400 0%, #c80815 100%);
            color: white;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-red:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 36, 0, 0.4);
        }
        
        .btn-silver {
            background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
            color: #111;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-silver:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(192, 192, 192, 0.4);
        }
        
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .glow {
            box-shadow: 0 0 10px 2px rgba(255, 215, 0, 0.5);
        }
        
        .login-box {
            background: rgba(20, 20, 20, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 215, 0, 0.2);
        }
        
        .input-field {
            background: rgba(30, 30, 30, 0.8);
            border: 1px solid rgba(255, 215, 0, 0.3);
            color: white;
            transition: all 0.3s ease;
        }
        
        .input-field:focus {
            border-color: #ffd700;
            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.3);
        }
        
        .social-btn {
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .social-btn:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 215, 0, 0.5);
        }
        
        .car-card {
            transition: all 0.3s ease;
            background: rgba(20, 20, 20, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .car-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 215, 0, 0.5);
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background: #ffd700;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .active-nav::after {
            width: 100%;
        }
        
        .motor-sound {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 100;
        }
        
        @media (max-width: 768px) {
            .car-container {
                height: 300px;
            }
            
            .brand-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body class="carbon-fiber">
    
    <div class="fixed top-0 left-0 w-full h-full flex items-center justify-center z-50 bg-black bg-opacity-90" id="intro-animation">
        <div class="text-center">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="BMW Logo" class="w-64 h-64 mx-auto floating brand-logo">
            <h1 class="text-4xl md:text-6xl font-bold mt-8 text-gold-500">LUXURY AUTO</h1>
            <p class="text-xl mt-4 text-gray-300">Experience Automotive Excellence</p>
        </div>
    </div>

<nav class="fixed top-0 left-0 w-full bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg z-40 border-b border-gray-800">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="Logo" class="h-10 mr-3">
                <span class="text-xl font-bold text-gold-500">LUXURY AUTO</span>
            </div>
            
            <div class="hidden md:flex space-x-8">
                <a href="#" class="text-white nav-link active-nav">Home</a>
                <a href="#" class="text-white nav-link">Brands</a>
                <a href="#" class="text-white nav-link">Models</a>
                <a href="#" class="text-white nav-link">Technology</a>
                <a href="#" class="text-white nav-link">Contact</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <button class="bg-transparent border border-gold-500 text-gold-500 px-4 py-2 rounded-full hover:bg-gold-500 hover:text-black transition">
                    <i class="fas fa-user mr-2"></i> Login
                </button>
                <button class="md:hidden text-white">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
            </div>
        </div>
    </nav>

<section class="pt-24 pb-16 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-6xl font-bold mb-6">Experience <span class="text-gold-500">Automotive</span> Excellence</h1>
                    <p class="text-xl text-gray-300 mb-8">Discover the world's most prestigious car brands with cutting-edge technology and unparalleled luxury.</p>
                    <div class="flex flex-wrap gap-4">
                        <button class="btn-gold px-8 py-3 rounded-full">Explore Models</button>
                        <button class="btn-red px-8 py-3 rounded-full">Book Test Drive</button>
                    </div>
                </div>
                
                <div class="md:w-1/2 car-container" id="car-model">
                    
                </div>
            </div>
        </div>
    </section>

<section class="py-16 px-4 bg-black bg-opacity-50">
        <div class="container mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Premium <span class="text-gold-500">Automotive</span> Brands</h2>
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 brand-grid">
                
                <div class="car-card p-6 rounded-xl text-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="BMW" class="h-20 mx-auto mb-4 brand-logo">
                    <h3 class="text-xl font-bold mb-2">BMW</h3>
                    <p class="text-gray-400 mb-4">The Ultimate Driving Machine</p>
                    <button class="btn-silver px-6 py-2 rounded-full w-full">View Models</button>
                </div>
                
                
                <div class="car-card p-6 rounded-xl text-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/90/Mercedes-Logo.svg" alt="Mercedes" class="h-20 mx-auto mb-4 brand-logo">
                    <h3 class="text-xl font-bold mb-2">Mercedes-Benz</h3>
                    <p class="text-gray-400 mb-4">The Best or Nothing</p>
                    <button class="btn-silver px-6 py-2 rounded-full w-full">View Models</button>
                </div>
                
                
                <div class="car-card p-6 rounded-xl text-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/9/92/Audi-Logo_2016.svg" alt="Audi" class="h-20 mx-auto mb-4 brand-logo">
                    <h3 class="text-xl font-bold mb-2">Audi</h3>
                    <p class="text-gray-400 mb-4">Vorsprung durch Technik</p>
                    <button class="btn-silver px-6 py-2 rounded-full w-full">View Models</button>
                </div>
                
                
                <div class="car-card p-6 rounded-xl text-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/a/af/Porsche_logo.svg" alt="Porsche" class="h-20 mx-auto mb-4 brand-logo">
                    <h3 class="text-xl font-bold mb-2">Porsche</h3>
                    <p class="text-gray-400 mb-4">There is no substitute</p>
                    <button class="btn-red px-6 py-2 rounded-full w-full">View Models</button>
                </div>
                
                
                <div class="car-card p-6 rounded-xl text-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/d/dc/Ferrari_logo.svg" alt="Ferrari" class="h-20 mx-auto mb-4 brand-logo">
                    <h3 class="text-xl font-bold mb-2">Ferrari</h3>
                    <p class="text-gray-400 mb-4">We Are the Competition</p>
                    <button class="btn-red px-6 py-2 rounded-full w-full">View Models</button>
                </div>
                
                
                <div class="car-card p-6 rounded-xl text-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Lamborghini_Logo.svg" alt="Lamborghini" class="h-20 mx-auto mb-4 brand-logo">
                    <h3 class="text-xl font-bold mb-2">Lamborghini</h3>
                    <p class="text-gray-400 mb-4">Expect the Unexpected</p>
                    <button class="btn-red px-6 py-2 rounded-full w-full">View Models</button>
                </div>
                
                
                <div class="car-card p-6 rounded-xl text-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/52/Rolls-Royce_Motor_Cars_logo_2010.svg" alt="Rolls Royce" class="h-20 mx-auto mb-4 brand-logo">
                    <h3 class="text-xl font-bold mb-2">Rolls-Royce</h3>
                    <p class="text-gray-400 mb-4">Strive for perfection</p>
                    <button class="btn-gold px-6 py-2 rounded-full w-full">View Models</button>
                </div>
                
                
                <div class="car-card p-6 rounded-xl text-center">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/8/8a/Bentley_logo_2.svg" alt="Bentley" class="h-20 mx-auto mb-4 brand-logo">
                    <h3 class="text-xl font-bold mb-2">Bentley</h3>
                    <p class="text-gray-400 mb-4">Building a grand tradition</p>
                    <button class="btn-gold px-6 py-2 rounded-full w-full">View Models</button>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 car-container" id="featured-car">
                    
                </div>
                
                <div class="md:w-1/2 md:pl-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">2023 <span class="text-gold-500">BMW M8</span> Competition</h2>
                    <div class="flex items-center mb-6">
                        <div class="mr-8">
                            <p class="text-gray-400">0-60 mph</p>
                            <p class="text-2xl font-bold">2.9s</p>
                        </div>
                        <div class="mr-8">
                            <p class="text-gray-400">Top Speed</p>
                            <p class="text-2xl font-bold">190 mph</p>
                        </div>
                        <div>
                            <p class="text-gray-400">HP</p>
                            <p class="text-2xl font-bold">617</p>
                        </div>
                    </div>
                    
                    <p class="text-gray-300 mb-8 leading-relaxed">
                        The BMW M8 Competition Coupe is the pinnacle of BMW's luxury performance lineup. With a 4.4-liter twin-turbocharged V8 engine producing 617 horsepower, it delivers breathtaking acceleration and handling. The M8 Competition features an advanced all-wheel-drive system, carbon fiber roof, and a meticulously crafted interior with premium materials.
                    </p>
                    
                    <div class="flex flex-wrap gap-4">
                        <button class="btn-gold px-8 py-3 rounded-full">Configure</button>
                        <button class="btn-red px-8 py-3 rounded-full">Test Drive</button>
                        <button class="border border-gold-500 text-gold-500 px-8 py-3 rounded-full hover:bg-gold-500 hover:text-black transition">
                            <i class="fas fa-heart mr-2"></i> Save
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 px-4 bg-black bg-opacity-50">
        <div class="container mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Cutting-Edge <span class="text-gold-500">Automotive</span> Technology</h2>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-900 p-8 rounded-xl">
                    <div class="w-16 h-16 bg-gold-500 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-bolt text-2xl text-black"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Hybrid Powertrains</h3>
                    <p class="text-gray-400">
                        Experience the perfect balance of performance and efficiency with our advanced hybrid systems that combine electric motors with powerful combustion engines.
                    </p>
                </div>
                
                <div class="bg-gray-900 p-8 rounded-xl">
                    <div class="w-16 h-16 bg-gold-500 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-microchip text-2xl text-black"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Autonomous Driving</h3>
                    <p class="text-gray-400">
                        Our latest autonomous driving technologies provide enhanced safety and convenience, allowing you to relax while the car handles the road.
                    </p>
                </div>
                
                <div class="bg-gray-900 p-8 rounded-xl">
                    <div class="w-16 h-16 bg-gold-500 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-car text-2xl text-black"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4">Performance Engineering</h3>
                    <p class="text-gray-400">
                        From carbon fiber construction to active aerodynamics, our performance technologies are designed to deliver maximum driving pleasure.
                    </p>
                </div>
            </div>
        </div>
    </section>

<div class="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-50 hidden" id="login-modal">
        <div class="login-box p-8 rounded-xl w-full max-w-md">
            <div class="flex justify-between items-center mb-8">
                <h3 class="text-2xl font-bold">Welcome Back</h3>
                <button class="text-gray-400 hover:text-white" id="close-login">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form>
                <div class="mb-4">
                    <label class="block text-gray-400 mb-2">Email</label>
                    <input type="email" class="input-field w-full px-4 py-3 rounded-lg" placeholder="your@email.com">
                </div>
                
                <div class="mb-6">
                    <label class="block text-gray-400 mb-2">Password</label>
                    <input type="password" class="input-field w-full px-4 py-3 rounded-lg" placeholder="••••••••">
                </div>
                
                <button class="btn-gold w-full py-3 rounded-lg mb-4">Login</button>
                
                <div class="text-center mb-6">
                    <a href="#" class="text-gold-500 hover:underline">Forgot password?</a>
                </div>
                
                <div class="flex items-center mb-6">
                    <div class="flex-grow border-t border-gray-700"></div>
                    <span class="px-4 text-gray-500">or continue with</span>
                    <div class="flex-grow border-t border-gray-700"></div>
                </div>
                
                <div class="grid grid-cols-3 gap-4">
                    <button class="social-btn p-3 rounded-lg flex items-center justify-center">
                        <i class="fab fa-google text-red-500"></i>
                    </button>
                    <button class="social-btn p-3 rounded-lg flex items-center justify-center">
                        <i class="fab fa-facebook-f text-blue-500"></i>
                    </button>
                    <button class="social-btn p-3 rounded-lg flex items-center justify-center">
                        <i class="fab fa-apple"></i>
                    </button>
                </div>
            </form>
            
            <div class="text-center mt-6">
                <p class="text-gray-400">Don't have an account? <a href="#" class="text-gold-500 hover:underline">Sign up</a></p>
            </div>
        </div>
    </div>

<button class="motor-sound btn-gold rounded-full w-16 h-16 flex items-center justify-center glow" id="motor-sound-btn">
        <i class="fas fa-volume-up text-xl"></i>
    </button>

<footer class="bg-black py-12 px-4 border-t border-gray-800">
        <div class="container mx-auto">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="Logo" class="h-10 mb-4">
                    <p class="text-gray-400">
                        Luxury Auto showcases the world's finest automotive brands with cutting-edge technology and unparalleled luxury.
                    </p>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-gold-500 transition">Home</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-gold-500 transition">Brands</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-gold-500 transition">Models</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-gold-500 transition">Technology</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-gold-500 transition">Contact</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">Contact Us</h4>
                    <ul class="space-y-2">
                        <li class="flex items-center text-gray-400">
                            <i class="fas fa-map-marker-alt mr-3 text-gold-500"></i> 123 Auto Avenue, Luxury City
                        </li>
                        <li class="flex items-center text-gray-400">
                            <i class="fas fa-phone mr-3 text-gold-500"></i> +1 (555) 123-4567
                        </li>
                        <li class="flex items-center text-gray-400">
                            <i class="fas fa-envelope mr-3 text-gold-500"></i> info@luxuryauto.com
                        </li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-bold mb-4">Newsletter</h4>
                    <p class="text-gray-400 mb-4">Subscribe to our newsletter for the latest updates.</p>
                    <div class="flex">
                        <input type="email" placeholder="Your email" class="input-field px-4 py-2 rounded-l-lg w-full">
                        <button class="btn-gold px-4 py-2 rounded-r-lg">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-gold-500 transition">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gold-500 transition">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gold-500 transition">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-gold-500 transition">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 mb-4 md:mb-0">© 2023 Luxury Auto. All rights reserved.</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-gold-500 transition">Privacy Policy</a>
                    <a href="#" class="text-gray-500 hover:text-gold-500 transition">Terms of Service</a>
                    <a href="#" class="text-gray-500 hover:text-gold-500 transition">Cookie Policy</a>
                </div>
            </div>
        </div>
    </footer>

A Code by Metehan

Recommended

CSS Animated Login Form Design

Text Scramble Effect

HTML Login Page Template

HTML

CSS

JS

Recommended

CSS Animated Login Form Design

Text Scramble Effect

HTML Login Page Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS