ConstructionCompany

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Construction Company is a website template for construction firms, building contractors and engineering companies, built on Bootstrap 5. It has a full-screen hero slider with large orange display type over a crane-site photo, a transparent menu that turns sticky on scroll and a dark navy and orange colour scheme. The layout is responsive and mobile-ready. There are ten pages: home, about, services, service details, projects, project details, blog, blog details, contact and elements.

The home page has service cards, an about block, a project gallery with category tabs, a call-to-action band with counters, a team section, a testimonial slider and the latest news. The blog has a sidebar with search, categories, recent posts, tags, a photo feed and a newsletter box, and the contact page has a working contact form and a map that loads on click.

What’s new in 3.0

• Bootstrap 5.3.8 and plain JavaScript with no jQuery. Swiper 14 runs the hero and testimonial sliders, PhotoSwipe the Elements gallery, and small built-in modules handle the scroll animations, counters and mobile menu. The theme Sass source is included, and npm run build compiles and minifies the stylesheet and script.
• Lighter pages: the ten pages together went from 16.9 MB and 414 requests to 9.6 MB and 346 requests, and the contact page from 2.2 MB to 0.6 MB. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen.
• No third-party requests: Barlow and Teko are self-hosted, Font Awesome is replaced by Lucide SVG icons and a small social-logo subset, the contact map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the contact form, the blog comment form and the newsletter boxes send through php/send-email.php, with validation, a spam trap and an in-page message, and the sidebar search goes to the blog page.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, visible form labels, names on icon and image links, a keyboard-friendly mobile menu and submenus, and AA text contrast, with a deeper orange behind white button labels and captions that sit above the hero overlay.
• New project, blog and news photos at twice their display size, distinct project names, team members and posts in the demo content, and working links in the footer, breadcrumbs and blog pagination.