Free Car Dealer Website Template (HTML & Bootstrap 5)

Faraz

By Faraz - Last Updated:

Get a free, responsive car dealer website template. Built with HTML, Bootstrap 5, and JavaScript. Includes AOS animations and Swiper slider. Download the code today!

Join us on Telegram
free-car-dealer-website-template-html-and-bootstrap-5.webp
Read Alsoswinging-photo-gallery-using-html-css-and-javascript.webpSwinging Pinned Photo Gallery with Scroll Animation using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Are you looking to build a website for a car dealership? A professional-looking website can be expensive. But what if you could get started for free?

Today, I am giving you a free homepage template for a car dealer website. This template is modern, clean, and looks great on all devices (it's responsive!).

It is built using the most popular and easy-to-use tools:

  • HTML: The standard building block of all websites.
  • Bootstrap 5: A popular framework for making responsive (mobile-friendly) layouts quickly.
  • JavaScript: To add cool features.

This free version also includes two powerful plugins:

  1. AOS (Animate On Scroll): Makes elements fade in or slide in as you scroll.
  2. Swiper: A beautiful, touch-friendly slider for your hero section.

Prerequisites

To use this template, you only need a few basic things:

  • A code editor (like VS Code, which is free).
  • A basic understanding of HTML and CSS.
  • A web browser to see your work.

That's it! Let's get started.

Source Code

Step 1 (HTML Code):

This is the main file for your website's content and structure. Copy all the code below and paste it into your index.html file.

Notice in the <head> section, we are linking to our styles.css file. And at the bottom, before the </body> tag, we are linking to our script.js file.

Read Alsocopy text to clipboard with a simple line of javascript.jpgCopy Text to Clipboard with a Simple Line of JavaScript

Step 2 (CSS Code):

This file will hold all your custom styles. This keeps your index.html file clean. Copy this code into your styles.css file.

:root {
    --primary-color: #0A2463;
    --secondary-color: #D9A273;
    --bg-color: #F8F9FA;
    --surface-color: #FFFFFF;
    --heading-color: #1a202c;
    --text-color: #4a5568;
    --border-color: #e2e8f0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 95px;
}

body {
    font-family: 'Lexend', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.7;
    overflow-x: hidden;
    padding-top: 95px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lexend', sans-serif;
    color: var(--heading-color);
    font-weight: 600;
}

.btn {
    transition: all 0.3s ease;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-radius: 8px;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 12px 30px;
    font-size: 0.95rem;
    box-shadow: 0 4px 6px rgba(10, 36, 99, 0.1);
}

.btn-primary:hover {
    background-color: #081c4a;
    border-color: #081c4a;
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(10, 36, 99, 0.2);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    padding: 10px 28px;
    font-size: 0.95rem;
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
    color: white;
    transform: translateY(-3px);
}

.section-padding {
    padding: 100px 0;
}

.section-title {
    margin-bottom: 60px;
}
.section-title h2 {
    font-size: 2.5rem;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
    line-height: 1.3;
}
.section-title h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 5px;
}
.section-title.text-center h2::after {
    left: 50%;
    transform: translateX(-50%);
}
.section-title p {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.05rem;
}

/* Navbar Styling */
.navbar {
    padding: 15px 0;
    transition: all 0.4s ease-in-out;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color);
    z-index: 1040;
    height: 85px;
}
.navbar-brand {
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--heading-color) !important;
}

.navbar-brand span {
    color: var(--secondary-color);
}

.navbar-nav .nav-link {
    color: var(--heading-color) !important;
    font-weight: 500;
    margin: 0 10px;
    position: relative;
    transition: all 0.3s ease;
    padding: 8px 5px;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after {
    width: 100%;
}

.navbar-collapse {
    align-items: center;
}

@media (max-width: 991px) {
     body { padding-top: 72px; }
    .navbar { height: 72px; }
    .navbar-collapse {
        background: var(--surface-color);
        padding: 20px;
        margin-top: 15px;
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
}

/* Custom Hamburger Menu */
.navbar-toggler {
    border: none;
    padding: 0;
    width: 30px;
    height: 24px;
    position: relative;
    background: transparent;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.navbar-toggler .line {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}
.navbar-toggler .line:nth-child(1) { top: 0px; }
.navbar-toggler .line:nth-child(2) { top: 10px; }
.navbar-toggler .line:nth-child(3) { top: 20px; }
.navbar-toggler[aria-expanded="true"] .line:nth-child(1) {
    top: 10px;
    transform: rotate(135deg);
}
.navbar-toggler[aria-expanded="true"] .line:nth-child(2) {
    opacity: 0;
    left: -60px;
}
.navbar-toggler[aria-expanded="true"] .line:nth-child(3) {
    top: 10px;
    transform: rotate(-135deg);
}

/* Hero Section */
.hero-section {
    padding-bottom: 80px;
    min-height: calc(100vh - 95px);
    display: flex;
    align-items: center;
    background-color: var(--surface-color);
    overflow: hidden;
}
.hero-content h1 {
    font-size: 3.2rem;
    font-weight: 600;
    margin-bottom: 25px;
    line-height: 1.25;
}
.hero-content h1 span {
    color: var(--primary-color);
}
.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 35px;
    color: var(--text-color);
    font-weight: 300;
}

.hero-slider-container {
    position: relative;
}
.hero-car-slider {
    width: 100%;
    padding: 20px 0 50px;
}
.hero-car-slider .swiper-slide {
    width: 320px;
    background: var(--surface-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hero-car-slider .swiper-slide-active {
    transform: scale(1.1);
    box-shadow: 0 20px 40px rgba(10, 36, 99, 0.15);
}
.hero-car-slider .slide-content {
    padding: 20px;
}
.hero-car-slider .slide-content h5 {
    margin-bottom: 5px;
    font-size: 1.1rem;
}
.hero-car-slider .slide-content p {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
}

.hero-slider-nav {
    display: flex;
    gap: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.hero-slider-nav .swiper-button {
    position: static;
    width: 45px;
    height: 45px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.hero-slider-nav .swiper-button:hover {
    background: var(--primary-color);
    color: white;
}
.hero-slider-nav .swiper-button::after {
    font-size: 1rem;
    font-weight: bold;
}

@media (max-width: 991px) {
    .hero-section {
        padding-bottom: 60px;
        min-height: auto;
    }
    .hero-content {
        text-align: center;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .section-padding {
        padding: 80px 0;
    }
    .section-title h2 {
        font-size: 2.2rem;
    }
}

/* About Section */
#about {
    position: relative;
}
#about .about-image {
    position: relative;
}
#about .about-image img {
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
#about .about-image::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    width: 80%;
    height: 80%;
    border: 10px solid var(--secondary-color);
    border-radius: 12px;
    z-index: -1;
    opacity: 0.5;
}

#why-choose-us {
    background-color: var(--surface-color);
}
.counter-box {
    text-align: center;
}
.counter-box h3 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--primary-color);
}
.counter-box p {
    font-weight: 600;
}

.car-card {
    background: var(--surface-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    height: 100%;
}

.car-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    height: 100%;
}
.car-card-link:hover .car-card {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
}

.car-card .img-container {
    position: relative;
    overflow: hidden;
}

.car-card img {
    transition: transform 0.4s ease;
}

.car-card-link:hover .car-card img {
    transform: scale(1.05);
}

.car-card .card-body {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.car-card .car-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.car-card .car-name h5 {
    margin-bottom: 0;
    font-size: 1.25rem;
}

.car-card .car-name .year {
    background-color: var(--primary-color);
    color: white;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.car-card .price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 15px 0;
}

.car-card .features {
    list-style: none;
    padding: 20px 0 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.car-card .features li {
    font-size: 0.9rem;
    text-align: center;
}
.car-card .features i {
    color: var(--secondary-color);
    margin-bottom: 5px;
    font-size: 1.5rem;
    display: block;
}

#services {
    background-color: var(--surface-color);
}
.service-item {
    display: flex;
    gap: 25px;
    background: transparent;
    padding: 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
}
.service-item:hover {
     background-color: var(--bg-color);
     transform: scale(1.02);
}
.service-item .icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    background: linear-gradient(135deg, rgba(10, 36, 99, 0.1), rgba(217, 162, 115, 0.1));
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-item h3 {
    margin-bottom: 10px;
    font-size: 1.4rem;
}

.testimonial-card {
    background: var(--surface-color);
    padding: 40px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    margin: 15px;
}
.testimonial-card .quote-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    opacity: 0.5;
}
.testimonial-card p {
    margin: 20px 0;
}
.testimonial-card .author {
    display: flex;
    align-items: center;
}
.testimonial-card .author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    border: 3px solid var(--primary-color);
}

#testimonials .swiper-pagination-bullet {
    background-color: var(--text-color);
}
#testimonials .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
    width: 20px;
    border-radius: 5px;
}

#blog {
    background-color: var(--surface-color);
}
.blog-post {
     background: var(--surface-color);
}

#cta {
    background: var(--primary-color);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}
#cta::before {
    content: '\f22b';
    font-family: "bootstrap-icons";
    font-size: 20rem;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%) rotate(-15deg);
    color: white;
    opacity: 0.05;
}
#cta h2 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: white;
}
#cta p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.8);
}
#cta .btn-light {
     background-color: white;
     border-color: white;
     color: var(--primary-color);
     padding: 14px 35px;
     font-weight: 600;
     border-radius: 8px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
#cta .btn-light:hover {
    background-color: var(--bg-color);
    border-color: var(--bg-color);
    transform: translateY(-3px);
}


.form-control {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--heading-color);
    padding: 15px;
    border-radius: 8px;
}
.form-control:focus {
    background-color: var(--surface-color);
    border-color: var(--primary-color);
    color: var(--heading-color);
    box-shadow: 0 0 0 0.25rem rgba(10, 36, 99, 0.25);
}
.form-control::placeholder {
    color: var(--text-color);
}

footer {
    background-color: var(--bg-color);
    color: var(--text-color);
    padding-top: 80px;
    border-top: 1px solid var(--border-color);
}
footer h5 {
    color: var(--heading-color);
    margin-bottom: 20px;
}
.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    margin-right: 10px;
    font-size: 1.1rem;
    color: var(--text-color);
}
.social-icons a:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}
.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding: 20px 0;
    margin-top: 60px;
}
/* Scroll to Top Button */
#scrollToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1030;
    border: none;
    outline: none;
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 20px rgba(10, 36, 99, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#scrollToTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollToTopBtn:hover {
    background: var(--secondary-color);
    transform: translateY(-5px);
}

#scrollToTopBtn .car-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease-in-out;
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Headlight Beam Animation */
#scrollToTopBtn::before,
#scrollToTopBtn::after {
    content: '';
    position: absolute;
    top: -50px;
    width: 100px;
    height: 60px;
    background: radial-gradient(ellipse at 50% 100%, rgba(126, 126, 124, 0.7) 0%, transparent 80%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
    filter: blur(5px);
}

#scrollToTopBtn::before {
    left: -15px;
    transform: rotate(-25deg);
}

#scrollToTopBtn::after {
    right: -15px;
    transform: rotate(25deg);
}

#scrollToTopBtn:hover::before,
#scrollToTopBtn:hover::after {
    opacity: 1;
}

/* Fire Animation */
.fire-trail {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: height 0.3s ease-out;
    z-index: 1;
}

#scrollToTopBtn.is-boosting .fire-trail {
    height: 60px;
}

.flame {
    background: linear-gradient(#ffc107, #dc3545);
    width: 10px;
    height: 20px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: absolute;
    bottom: 0;
    opacity: 0;
    transform-origin: bottom center;
    animation: none;
}

#scrollToTopBtn.is-boosting .flame {
    animation: burn 0.6s ease-out infinite;
}

@keyframes burn {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }

    100% {
        transform: translateY(100px) scale(0);
        opacity: 0;
    }
}

/* Staggered animation delays for the trail effect */
#scrollToTopBtn.is-boosting .flame:nth-child(2) {
    animation-delay: 0.05s;
}

#scrollToTopBtn.is-boosting .flame:nth-child(3) {
    animation-delay: 0.1s;
}

#scrollToTopBtn.is-boosting .flame:nth-child(4) {
    animation-delay: 0.15s;
}

#scrollToTopBtn.is-boosting .flame:nth-child(5) {
    animation-delay: 0.2s;
}

Step 3 (JavaScript Code):

This file will control the interactive parts of your site, like the slider and scroll animations. Copy this code into your script.js file.

$(document).ready(function () {
  // Initialize AOS
  AOS.init({
    duration: 800,
    once: true,
    offset: 50,
  });

  // Navbar scroll effect
  $(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
      $('#navbar').addClass('scrolled');
    } else {
      $('#navbar').removeClass('scrolled');
    }
  });

  // Scroll to Top Button Logic
  const scrollToTopBtn = $('#scrollToTopBtn');

  $(window).scroll(function () {
      if ($(this).scrollTop() > 300) {
          scrollToTopBtn.addClass('show');
      } else {
          scrollToTopBtn.removeClass('show');
      }
  });

  scrollToTopBtn.on('click', function () {
      // Add the animation class
      $(this).addClass('is-boosting');

      // Scroll to top
      $('html, body').animate({ scrollTop: 0 }, 800); // 800ms for smooth scroll

      // Remove the animation class after it finishes
      setTimeout(() => {
          $(this).removeClass('is-boosting');
      }, 800);
  });

  // Counter Up Animation
  const counters = document.querySelectorAll('.counter');
  const speed = 200; // The lower the slower

  const animateCounters = () => {
    counters.forEach((counter) => {
      const updateCount = () => {
        const target = +counter.getAttribute('data-target');
        const count = +counter.innerText;
        const inc = target / speed;

        if (count < target) {
          counter.innerText = Math.ceil(count + inc);
          setTimeout(updateCount, 1);
        } else {
          counter.innerText = target;
        }
      };
      updateCount();
    });
  };

  // Intersection Observer for counters
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          animateCounters();
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.5 }
  );

  const counterSection = document.getElementById('why-choose-us');
  if (counterSection) {
    observer.observe(counterSection);
  }

  // Hero Car Slider
  var heroCarSwiper = new Swiper('.hero-car-slider', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    loop: true,
    coverflowEffect: {
      rotate: 0,
      stretch: 80,
      depth: 200,
      modifier: 1,
      slideShadows: false,
    },
    navigation: {
      nextEl: '.hero-slider-nav .swiper-button-next',
      prevEl: '.hero-slider-nav .swiper-button-prev',
    },
  });

  // Testimonial Slider Initialization
  var testimonialSwiper = new Swiper('.testimonial-slider', {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    breakpoints: {
      768: {
        slidesPerView: 2,
      },
    },
  });
});

Final Output:

free-car-dealer-website-template-html-and-bootstrap-5.gif
Read Alsocreate-movie-website-landing-page-using-html-css-and-javascript.webpCreate Movie Website Landing Page using HTML, CSS, and JavaScript

Conclusion:

Congratulations! You now have a high-quality, professional homepage for a car dealership. By separating your HTML, CSS, and JavaScript, your project is now much easier to manage and update.

You can customize this code as much as you want. Change the images, text, and colors to match your brand.

Want the Full Website?

This free template is just the homepage. If you need the complete, multi-page website, I have a full version available.

The full version includes 10 pages, such as:

  • Car Listings Page (with filters)
  • Car Detail Page
  • About Us Page
  • Services Page
  • Blog Page
  • Contact Page (with a working form)
  • And more!

You can get the full, premium template by visiting my shop: codewithfaraz.com/shop

I hope you find this free code snippet useful!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: car dealer template, website template, car website, bootstrap template, auto dealer website, free car dealer website template html, responsive car dealer bootstrap 5 template, car dealership website code, html css javascript car website, bootstrap 5 car listing template, website template with swiper slider
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺