Responsive Car Showroom
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
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 Showroom</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Animate.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand fw-bold" href="#">LUXURY MOTORS</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"> <a class="nav-link active" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#vehicles">Vehicles</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#mission">Mission</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </div> </div> </nav> <!-- Hero Section --> <section class="hero"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-7"> <div class="hero-content"> <h1 class="animate__animated animate__fadeInDown"> <span id="typed-text"></span><span class="typed-cursor">|</span> </h1> <p class="lead mb-4 animate__animated animate__fadeInUp animate__delay-1s">Discover the finest collection of luxury and performance vehicles curated for discerning drivers.</p> <a href="#vehicles" class="btn btn-primary btn-lg hero-btn animate__animated animate__fadeInUp animate__delay-2s">Explore Vehicles</a> </div> </div> </div> </div> </section> <!-- Cards Section --> <section class="cards-section" id="vehicles"> <div class="container"> <div class="row mb-5"> <div class="col-12 text-center"> <h2 class="fw-bold">Our Featured Vehicles</h2> <p class="text-muted">Explore our premium selection of luxury automobiles</p> </div> </div> <div class="row"> <div class="col-md-4 animate-slide-in" style="animation-delay: 0.2s;"> <div class="card"> <img src="https://images.unsplash.com/photo-1548618607-fe992dd33eff?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8Y2FyJTIwc2hvd3Jvb218ZW58MHx8MHx8fDA%3D" class="card-img-top" alt="Sports Car"> <div class="card-body"> <h5 class="card-title">2023 Ferrari SF90</h5> <p class="card-text">The SF90 Stradale is Ferrari's first series production PHEV (Plug-in Hybrid Electric Vehicle).</p> <a href="#" class="btn btn-primary">View Details</a> </div> </div> </div> <div class="col-md-4 animate-slide-in" style="animation-delay: 0.4s;"> <div class="card"> <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" class="card-img-top" alt="Luxury Sedan"> <div class="card-body"> <h5 class="card-title">2023 Mercedes S-Class</h5> <p class="card-text">The epitome of luxury, combining cutting-edge technology with unparalleled comfort.</p> <a href="#" class="btn btn-primary">View Details</a> </div> </div> </div> <div class="col-md-4 animate-slide-in" style="animation-delay: 0.6s;"> <div class="card"> <img src="https://images.unsplash.com/photo-1541899481282-d53bffe3c35d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" class="card-img-top" alt="SUV"> <div class="card-body"> <h5 class="card-title">2023 Range Rover</h5> <p class="card-text">The ultimate luxury SUV with legendary off-road capability and refined elegance.</p> <a href="#" class="btn btn-primary">View Details</a> </div> </div> </div> </div> </div> </section> <!-- About Section --> <section class="about-section" id="about"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 mb-4 mb-lg-0"> <img src="https://images.unsplash.com/photo-1485291571150-772bcfc10da5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1528&q=80" alt="About Us" class="img-fluid about-img animate__animated animate__fadeInLeft"> </div> <div class="col-lg-6"> <h2 class="fw-bold mb-4">About Luxury Motors</h2> <p class="text-muted mb-4">Founded in 2005, Luxury Motors has established itself as the premier destination for discerning automotive enthusiasts seeking the finest vehicles from around the world.</p> <h3 class="tagline animate__animated animate__fadeInRight animate__delay-1s">Redefining <span class="text-primary">Automotive Excellence</span></h3> <p class="mt-4">Our team of experts meticulously selects each vehicle in our inventory, ensuring only the highest quality automobiles bearing prestigious marques grace our showroom floor.</p> <a href="#" class="btn btn-outline-primary mt-3">Learn More</a> </div> </div> </div> </section> <!-- Mission Section --> <section class="mission-section" id="mission"> <div class="container"> <div class="row"> <div class="col-lg-8 mx-auto text-center"> <h2 class="mission-headline animate__animated animate__fadeInDown">Our Mission</h2> <p class="lead mb-0 animate__animated animate__fadeInUp animate__delay-1s">To provide an unparalleled automotive experience by offering the world's most exceptional vehicles, coupled with white-glove service that exceeds every expectation. We are committed to building lasting relationships with our clients through transparency, expertise, and an unwavering dedication to excellence in all aspects of our business.</p> </div> </div> </div> </section> <!-- Vision Section --> <section class="vision-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6 order-lg-2 mb-4 mb-lg-0"> <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Vision" class="img-fluid vision-img animate__animated animate__fadeInRight"> </div> <div class="col-lg-6 order-lg-1"> <h2 class="vision-headline animate__animated animate__fadeInLeft">Our Vision</h2> <p class="text-muted mb-4 animate__animated animate__fadeInLeft animate__delay-1s">We envision a future where automotive passion meets sustainable innovation without compromising performance or luxury.</p> <div class="vision-content animate__animated animate__fadeInLeft animate__delay-2s"> <p>As the automotive landscape evolves, Luxury Motors will remain at the forefront, embracing new technologies while maintaining our commitment to the timeless values of craftsmanship, performance, and exclusivity that define the world's greatest automobiles.</p> <ul class="list-unstyled"> <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Leading the transition to premium electric vehicles</li> <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Expanding our global network of luxury showrooms</li> <li class="mb-2"><i class="fas fa-check-circle text-primary me-2"></i> Pioneering sustainable luxury in the automotive sector</li> </ul> </div> </div> </div> </div> </section> <!-- Counter Section --> <section class="counter-section"> <div class="container"> <div class="row text-center"> <div class="col-md-3"> <div class="counter-box"> <div class="counter" data-count="250">0</div> <p>Vehicles in Stock</p> </div> </div> <div class="col-md-3"> <div class="counter-box"> <div class="counter" data-count="18">0</div> <p>Years Experience</p> </div> </div> <div class="col-md-3"> <div class="counter-box"> <div class="counter" data-count="5000">0</div> <p>Satisfied Clients</p> </div> </div> <div class="col-md-3"> <div class="counter-box"> <div class="counter" data-count="25">0</div> <p>Brands Available</p> </div> </div> </div> </div> </section> <!-- Contact Form --> <section class="contact-section" id="contact"> <div class="container"> <div class="row"> <div class="col-lg-6 mx-auto"> <div class="contact-form animate-pop-in"> <h2 class="text-center mb-4">Contact Us</h2> <form> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" placeholder="First Name" required> </div> <div class="col-md-6"> <input type="text" class="form-control" placeholder="Last Name" required> </div> </div> <input type="email" class="form-control" placeholder="Email Address" required> <input type="tel" class="form-control" placeholder="Phone Number"> <select class="form-control"> <option selected disabled>I'm interested in...</option> <option>New Vehicles</option> <option>Pre-Owned Vehicles</option> <option>Test Drive</option> <option>Financing</option> <option>General Inquiry</option> </select> <textarea class="form-control" rows="5" placeholder="Your Message"></textarea> <div class="text-center"> <button type="submit" class="btn submit-btn">Send Message</button> </div> </form> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-lg-4 mb-5 mb-lg-0"> <div class="footer-logo">LUXURY MOTORS</div> <p>Your premier destination for luxury and performance vehicles from around the world.</p> <div class="social-icons mt-4"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-linkedin-in"></i></a> </div> </div> <div class="col-lg-2 col-md-6 mb-5 mb-md-0"> <div class="footer-links"> <h5>Quick Links</h5> <ul> <li><a href="#">Home</a></li> <li><a href="#vehicles">Vehicles</a></li> <li><a href="#about">About Us</a></li> <li><a href="#mission">Our Mission</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-6 mb-5 mb-md-0"> <div class="footer-links"> <h5>Vehicles</h5> <ul> <li><a href="#">New Arrivals</a></li> <li><a href="#">Luxury Sedans</a></li> <li><a href="#">Sports Cars</a></li> <li><a href="#">SUVs</a></li> <li><a href="#">Electric Vehicles</a></li> </ul> </div> </div> <div class="col-lg-4"> <div class="footer-links"> <h5>Contact Info</h5> <ul class="contact-info"> <li><i class="fas fa-map-marker-alt me-2"></i> 123 Premium Drive, Beverly Hills, CA 90210</li> <li><i class="fas fa-phone-alt me-2"></i> (310) 555-LUXURY</li> <li><i class="fas fa-envelope me-2"></i> info@luxurymotors.com</li> <li><i class="fas fa-clock me-2"></i> Mon-Sat: 9:00 AM - 7:00 PM</li> </ul> </div> </div> </div> <div class="row copyright"> <div class="col-12 text-center"> <p class="mb-0">© 2023 Luxury Motors. All Rights Reserved.</p> </div> </div> </div> </footer> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Typed.js --> <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> <!-- Custom JS --> </body> </html>
CSS
:root { --primary: #0d6efd; --dark: #212529; --light: #f8f9fa; } body { font-family: 'Poppins', sans-serif; overflow-x: hidden; } /* Hero Section */ .hero { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://plus.unsplash.com/premium_photo-1682089485470-4d575051f326?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-size: cover; background-position: center; background-attachment: fixed; min-height: 100vh; display: flex; align-items: center; color: white; position: relative; } .hero-content h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 20px; } .typed-cursor { font-size: 3.5rem; color: var(--primary); } .hero-btn { background-color: var(--primary); border: none; padding: 12px 30px; font-weight: 600; transition: all 0.3s; } .hero-btn:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3); } /* Cards Section */ .cards-section { padding: 100px 0; background-color: var(--light); } .card { border: none; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.5s; margin-bottom: 30px; } .card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .card-img-top { height: 200px; object-fit: cover; } .card-body { padding: 25px; } .card-title { font-weight: 700; margin-bottom: 15px; } /* About Section */ .about-section { padding: 100px 0; background-color: white; } .about-img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s; } .about-img:hover { transform: scale(1.02); } .tagline { font-size: 2.5rem; font-weight: 700; line-height: 1.3; position: relative; display: inline-block; } .tagline::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 80px; height: 4px; background-color: var(--primary); } /* Mission Section */ .mission-section { padding: 100px 0; background: linear-gradient(rgba(13, 110, 253, 0.9), rgba(13, 110, 253, 0.9)), url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1583&q=80'); background-size: cover; background-position: center; color: white; } .mission-headline { font-size: 2.5rem; font-weight: 700; margin-bottom: 30px; } /* Vision Section */ .vision-section { padding: 100px 0; background-color: var(--light); } .vision-img { border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.5s; } .vision-img:hover { transform: scale(1.05); } .vision-headline { font-size: 2.5rem; font-weight: 700; margin-bottom: 30px; position: relative; display: inline-block; } .vision-headline::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 80px; height: 4px; background-color: var(--primary); } /* Counter Section */ .counter-section { padding: 80px 0; background-color: var(--dark); color: white; } .counter-box { text-align: center; padding: 30px; transition: all 0.3s; } .counter-box:hover { transform: translateY(-10px); } .counter { font-size: 3rem; font-weight: 700; margin-bottom: 10px; color: var(--primary); } /* Contact Form */ .contact-section { padding: 100px 0; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1493238792000-8113da705763?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-position: center; color: white; } .contact-form { background-color: rgba(255, 255, 255, 0.9); padding: 40px; border-radius: 10px; color: var(--dark); } .form-control { height: 50px; margin-bottom: 20px; border: 1px solid #ddd; } textarea.form-control { height: auto; } .submit-btn { background-color: var(--primary); color: white; border: none; padding: 12px 30px; font-weight: 600; transition: all 0.3s; } .submit-btn:hover { background-color: #0b5ed7; transform: translateY(-3px); } /* Footer */ .footer { padding: 80px 0 30px; background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); background-size: cover; background-position: center; color: white; position: relative; } .footer-logo { font-size: 2rem; font-weight: 700; margin-bottom: 20px; } .footer-links h5 { font-weight: 700; margin-bottom: 20px; position: relative; } .footer-links h5::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 50px; height: 2px; background-color: var(--primary); } .footer-links ul { list-style: none; padding: 0; } .footer-links li { margin-bottom: 10px; } .footer-links a { color: #adb5bd; text-decoration: none; transition: all 0.3s; } .footer-links a:hover { color: white; padding-left: 5px; } .social-icons a { display: inline-block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); color: white; border-radius: 50%; text-align: center; line-height: 40px; margin-right: 10px; transition: all 0.3s; } .social-icons a:hover { background-color: var(--primary); transform: translateY(-5px); } .copyright { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; margin-top: 50px; } /* Animations */ .animate-slide-in { animation: slideIn 1s ease-out forwards; } @keyframes slideIn { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } .animate-pop-in { animation: popIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; } @keyframes popIn { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } /* Responsive Adjustments */ @media (max-width: 992px) { .hero-content h1 { font-size: 2.5rem; } .tagline, .mission-headline, .vision-headline { font-size: 2rem; } } @media (max-width: 768px) { .hero-content h1 { font-size: 2rem; } .typed-cursor { font-size: 2rem; } .tagline, .mission-headline, .vision-headline { font-size: 1.8rem; } .about-img, .vision-img { margin-bottom: 30px; } }
JavaScript
// Typed.js Animation document.addEventListener('DOMContentLoaded', function() { var typed = new Typed('#typed-text', { strings: ["Premium Automotive Excellence", "Unmatched Luxury Selection", "Your Dream Car Awaits"], typeSpeed: 50, backSpeed: 30, loop: true, showCursor: true }); // Counter Animation const counters = document.querySelectorAll('.counter'); const speed = 200; function animateCounters() { counters.forEach(counter => { const target = +counter.getAttribute('data-count'); const count = +counter.innerText; const increment = target / speed; if (count < target) { counter.innerText = Math.ceil(count + increment); setTimeout(animateCounters, 1); } else { counter.innerText = target; } }); } // Intersection Observer for counter animation const counterSection = document.querySelector('.counter-section'); const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { animateCounters(); } }, {threshold: 0.5}); observer.observe(counterSection); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Navbar background change on scroll window.addEventListener('scroll', function() { const navbar = document.querySelector('.navbar'); if (window.scrollY > 50) { navbar.classList.add('bg-dark', 'shadow'); } else { navbar.classList.remove('bg-dark', 'shadow'); } }); });
Output Preview
Desktop
Mobile
Fullscreen