Free Construction HTML Website Template (Tailwind & JS)

Faraz

By Faraz -

Download this free, responsive Construction HTML website template. Built with Tailwind CSS, AOS, Swiper, and Fancybox.

Join us on Telegram
free-construction-html-website-template.webp
Read Alsohow to create sidebar menu in html css and javascript.pngCreate a Responsive Sidebar Menu: HTML, CSS, and JavaScript Tutorial

Table of Contents

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

Are you looking for a free construction HTML website template? You are in the right place. Building a website for a construction company or a contractor doesn’t have to be hard or expensive. You don't need to hire a developer when you have the right code snippets.

In this guide, I will share a complete, responsive template. We will use Tailwind CSS for fast styling and modern JavaScript libraries like Swiper (for sliders), AOS (for scroll animations), and Fancybox (for image galleries).

Prerequisites: Before we start, you need a few simple things:

  • A code editor (like VS Code or Notepad++).
  • Basic understanding of HTML tags.
  • An internet connection (to load the plugin libraries).

Source Code

Step 1 (HTML Code):

First, we need to set up the skeleton of our website. This code includes the CDN links for Tailwind CSS, Phosphor Icons, and all the necessary plugins.

This structure creates a Header, a Hero Slider, an About section, a Service Grid, and a Project Gallery.

Copy this code into a file named index.html:

Read Alsocreate-real-time-stock-price-tracker-using-html-css-and-javascript.webpCreate Real-Time Stock Price Tracker Using HTML, CSS, and JavaScript

Step 2 (CSS Code):

Because we are using Tailwind CSS, 95% of the styling is already done inside the HTML classes (like text-primary, p-8, flex). However, some plugins need small manual tweaks to look perfect.

body {
    background-color: #0a0a0a;
    color: #ffffff;
    overflow-x: hidden;
}

/* Lenis Smooth Scroll */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #C5A059;
    border-radius: 2px;
}

/* Hamburger Animation */
.hamburger .line {
    width: 30px;
    height: 2px;
    background-color: white;
    display: block;
    margin: 6px auto;
    transition: all 0.3s ease-in-out;
}

.hamburger.is-active .line:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Text Stroke */
.text-stroke {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
    color: transparent;
}

/* Magnetic Border */
.btn-magnetic {
    position: relative;
    background: transparent;
    color: #fff;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 1;
}

.btn-magnetic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #C5A059;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-magnetic:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-magnetic:hover {
    color: #000;
}

/* Dropdown Styles */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Swiper Fixes & Effects */
.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.3;
    width: 10px;
    height: 10px;
    transition: all 0.3s;
}

.swiper-pagination-bullet-active {
    background: #C5A059;
    opacity: 1;
    width: 30px;
    border-radius: 5px;
}

/* Custom Pagination Positioning for Testimonials */
.testimonial-pagination {
    position: relative !important;
    margin-top: 30px !important;
    bottom: 0 !important;
    display: flex;
    justify-content: center;
}

/* Call Widget Vertical */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

/* Mobile Menu Premium Animation */
#mobile-menu {
    clip-path: circle(0px at calc(100% - 40px) 40px);
    transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    background: rgba(10, 10, 10, 0.98);
    height: 100dvh;
    z-index: 45;
}

#mobile-menu.is-open {
    clip-path: circle(150% at calc(100% - 40px) 40px);
}

/* Staggered Animation for Links */
.mobile-link {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#mobile-menu.is-open .mobile-link {
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu.is-open .mobile-link:nth-child(1) {
    transition-delay: 0.2s;
}

#mobile-menu.is-open .mobile-link:nth-child(2) {
    transition-delay: 0.3s;
}

#mobile-menu.is-open .mobile-link:nth-child(3) {
    transition-delay: 0.4s;
}

#mobile-menu.is-open .mobile-link:nth-child(4) {
    transition-delay: 0.5s;
}

#mobile-menu.is-open .mobile-link:nth-child(5) {
    transition-delay: 0.6s;
}

Step 3 (JavaScript Code):

Finally, we need to "turn on" our plugins. This script initializes the animations (AOS), the slider (Swiper), and the image popup (Fancybox).

$(document).ready(function () {
  // 1. Initialize Lenis (Smooth Scroll)
  const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    direction: 'vertical',
    gestureDirection: 'vertical',
    smooth: true,
    mouseMultiplier: 1,
    smoothTouch: false,
    touchMultiplier: 2,
  });

  function raf(time) {
    lenis.raf(time);
    requestAnimationFrame(raf);
  }
  requestAnimationFrame(raf);

  // 2. Initialize AOS
  AOS.init({
    once: true,
    offset: 50,
    duration: 1000,
  });

  // 3. Navbar & Hamburger Logic
  const $navbar = $('#navbar');
  const $hamburger = $('#hamburger-btn');
  const $mobileMenu = $('#mobile-menu');
  const $mobileLinks = $('.mobile-link');

  // Resize Handler: Reset Mobile Menu on Desktop Width
  $(window).resize(function () {
    if ($(window).width() >= 1024) {
      // lg breakpoint
      $mobileMenu
        .removeClass('is-open pointer-events-auto')
        .addClass('pointer-events-none');
      $hamburger.removeClass('is-active');
      $('body').removeClass('overflow-hidden');
      updateNavbar(); // Reset navbar style
    }
  });

  // Update Navbar Background Logic
  function updateNavbar() {
    const isMenuOpen = $mobileMenu.hasClass('is-open');

    // If menu is open, make navbar transparent to blend with menu overlay
    if (isMenuOpen) {
      $navbar
        .removeClass(
          'bg-brand-dark/95 backdrop-blur-md shadow-lg py-4 bg-gradient-to-b from-black/80 to-transparent'
        )
        .addClass('bg-transparent py-6 border-none');
    }
    // If menu is closed, apply scroll-based styles
    else {
      if ($(window).scrollTop() > 50) {
        $navbar
          .removeClass(
            'py-6 bg-gradient-to-b from-black/80 to-transparent bg-transparent border-none'
          )
          .addClass(
            'bg-brand-dark/95 backdrop-blur-md shadow-lg py-4 border-b border-transparent'
          );
      } else {
        $navbar
          .removeClass(
            'bg-brand-dark/95 backdrop-blur-md shadow-lg py-4 border-none bg-transparent'
          )
          .addClass(
            'py-6 bg-gradient-to-b from-black/80 to-transparent border-b border-transparent'
          );
      }
    }
  }

  // Scroll Listener
  $(window).scroll(updateNavbar);

  // Toggle Mobile Menu
  $hamburger.click(function () {
    $(this).toggleClass('is-active');

    if ($mobileMenu.hasClass('is-open')) {
      // Close
      $mobileMenu.removeClass('is-open');
      setTimeout(() => {
        $mobileMenu
          .removeClass('pointer-events-auto')
          .addClass('pointer-events-none');
      }, 500);
      $('body').removeClass('overflow-hidden');
    } else {
      // Open
      $mobileMenu
        .removeClass('pointer-events-none')
        .addClass('pointer-events-auto');
      setTimeout(() => {
        $mobileMenu.addClass('is-open');
      }, 10);
      $('body').addClass('overflow-hidden');
    }

    setTimeout(updateNavbar, 50);
  });

  // Close mobile menu on link click
  $mobileLinks.click(function () {
    $hamburger.removeClass('is-active');
    $mobileMenu.removeClass('is-open');
    setTimeout(() => {
      $mobileMenu
        .removeClass('pointer-events-auto')
        .addClass('pointer-events-none');
    }, 500);
    $('body').removeClass('overflow-hidden');
    setTimeout(updateNavbar, 50);
  });

  // Ensure mobile menu starts hidden interaction-wise
  $mobileMenu.addClass('pointer-events-none');
  updateNavbar(); // Init

  // 4. Swiper Initialization
  const serviceSwiper = new Swiper('.serviceSwiper', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    initialSlide: 1,
    coverflowEffect: {
      rotate: 30,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
    },
  });

  const testimonialSwiper = new Swiper('.testimonialSwiper', {
    slidesPerView: 1,
    effect: 'fade',
    fadeEffect: { crossFade: true },
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.testimonial-pagination',
      clickable: true,
    },
  });

  // 5. Fancybox Initialization
  Fancybox.bind('[data-fancybox]', {
    // Custom options
    Thumbs: {
      type: 'modern',
    },
    Toolbar: {
      display: {
        left: ['infobar'],
        middle: [],
        right: ['slideshow', 'thumbs', 'close'],
      },
    },
  });

  // 6. Counter Animation
  let counterStarted = false;
  $(window).scroll(function () {
    if ($('.counter').length) {
      const hT = $('.counter').offset().top,
        hH = $('.counter').outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();

      if (wS > hT + hH - wH && !counterStarted) {
        $('.counter').each(function () {
          $(this)
            .prop('Counter', 0)
            .animate(
              {
                Counter: $(this).data('target'),
              },
              {
                duration: 2000,
                easing: 'swing',
                step: function (now) {
                  $(this).text(Math.ceil(now));
                },
              }
            );
        });
        counterStarted = true;
      }
    }
  });

  // 7. Contact Form SweetAlert
  $('#contactForm').on('submit', function (e) {
    e.preventDefault();
    Swal.fire({
      title: 'Proposal Sent!',
      text: 'We will review your project details and get back to you shortly.',
      icon: 'success',
      background: '#1a1a1a',
      color: '#ffffff',
      confirmButtonColor: '#C5A059',
    });
    this.reset();
  });

  // 8. Video Reel Modal (Mockup)
  $('#play-reel').click(function () {
    Swal.fire({
      html: '<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/ScMzIvxBSi4?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>',
      showConfirmButton: false,
      background: '#000',
      width: '80%',
      showCloseButton: true,
    });
  });

  // 9. Cookies Popup Logic
  const cookiePopup = document.getElementById('cookie-popup');
  if (!localStorage.getItem('cookiesAccepted')) {
    setTimeout(() => {
      cookiePopup.classList.remove('hidden', 'translate-y-[150%]');
    }, 3000);
  }

  window.acceptCookies = function () {
    localStorage.setItem('cookiesAccepted', 'true');
    cookiePopup.classList.add('translate-y-[150%]');
    setTimeout(() => cookiePopup.classList.add('hidden'), 500);
  };

  window.closeCookies = function () {
    cookiePopup.classList.add('translate-y-[150%]');
    setTimeout(() => cookiePopup.classList.add('hidden'), 500);
  };

  // 10. Scroll to Top Logic
  const scrollTopBtn = $('#scroll-top');
  const progressCircle = document.getElementById('scroll-progress-circle');
  const radius = 28;
  const circumference = 2 * Math.PI * radius;

  // Lenis scroll event
  lenis.on('scroll', ({ scroll, limit, velocity, direction, progress }) => {
    // Show/Hide
    if (scroll > 500) {
      scrollTopBtn.removeClass('opacity-0 translate-y-10 pointer-events-none');
    } else {
      scrollTopBtn.addClass('opacity-0 translate-y-10 pointer-events-none');
    }

    // Lenis provides 'progress' (0 to 1) directly!
    const offset = circumference - progress * circumference;
    if (progressCircle) {
      progressCircle.style.strokeDashoffset = offset;
    }
  });

  scrollTopBtn.click(function () {
    lenis.scrollTo(0);
  });
});

Final Output:

free-construction-html-website-template.gif
Read Alsocreating a stunning portfolio website from scratch using html, css, and javascript.jpgCreating a Stunning Portfolio Website from Scratch using HTML, CSS, and JavaScript

Conclusion:

And that’s it! You now have a fully functional Construction HTML website template. It is mobile-friendly, loads fast, and uses modern tools like Tailwind and Swiper.

Why this template is good for SEO:

  • Semantic HTML: Uses tags like <header>, <section>, and <footer> which Google loves.
  • Mobile First: Tailwind ensures it looks good on phones.
  • Fast Loading: CDNs help load libraries quickly from nearby servers.

Feel free to change the images and text to match your construction business.

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: construction html template, free website code, tailwind css template, construction site design, free construction website template source code, responsive construction site with tailwind css, simple html css javascript construction project, how to build a construction website with aos and swiper
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🥺