Industry

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Industry is a website template for industrial, engineering, manufacturing and construction companies, built with Bootstrap 5.3.8 and plain JavaScript, with a bright gold accent. It has eight pages: home, about, services, projects, blog, blog post, contact and elements. The layout is responsive and mobile-ready.

The home page opens with a full-screen hero, followed by three services, an about block with a request-a-quote form, the market sectors, counters, the latest projects with photos that open in a lightbox, a client review slider with a video and the latest blog posts. The about, services and projects pages reuse these sections, and the contact page has the address, phone and email, a map that loads on click and a contact form. The blog has seven posts, each on its own page with comments and a comment form, and a sidebar whose search, categories, archive and tags filter the post list; the elements page shows typography, buttons, lists, tables, form controls and an image gallery.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used a Bootstrap 4.0 beta and jQuery 2.2.4), compiled from Sass with the template’s Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 runs the review slider and PhotoSwipe 5 the project photos and the elements gallery, and small built-in modules handle the video dialog, the counters, the phone menu, the forms and the map; Owl Carousel, Magnific Popup, CounterUp, Nice Select, Superfish and the other plugins are gone, and the selects are native. Lucide SVG icons replace Linearicons and Font Awesome 4.7, with a Font Awesome 7 Brands subset for the social logos (X for Twitter). npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 2.8 MB and 53 requests to 1.1 MB and 33 requests, and the download went from 19.8 MB to 4.1 MB, a cleaner download. Images have AVIF versions with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen, and the hero photo is preloaded.
• No third-party requests: Poppins is self-hosted, and the pages no longer load anything from Google Fonts, cdnjs or Google Maps. The contact map is OpenStreetMap and loads only after a visitor clicks Show map, the video loads from YouTube only when it is played, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the request-a-quote, contact, blog comment and elements forms send through php/send-email.php and the footer newsletter through php/subscribe.php, with validation, a spam trap, a recipient you set and an in-page message, and the mailer keeps visitor input out of the mail headers. Before, the quote form sent nothing, the comment form was not a form, the contact script mailed a fixed address with the visitor’s address in its headers and the newsletter posted to an outside mailing list.
• A working blog: seven distinct posts (they all had the same title before), each card and sidebar link opens its own post with its own title, photo, text and previous and next links, and the sidebar’s search, categories, archive and tags filter the blog list. The posts live in one file, js/posts.js.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, each page marked as current in the menu (every page was marked Home before), a phone menu that keeps keyboard focus and closes with Esc, a Blog submenu that opens from the keyboard, names on icon-only links, labels on every form field, visible focus rings and 44 px review-slider controls. Text meets WCAG AA contrast: the gold buttons, counter circles and map button have dark labels (white on gold was 1.8:1), gold text on white is a darker gold, and body and footer text is darker.
• Fixed: the favicon (the file was missing, so every page showed none), the Blog menu link that went nowhere, duplicate ids and stray characters in the markup, and pages that declared no language. Off-topic placeholder text and lorem ipsum are replaced with industrial copy, the three client reviews are different, the contact details are fictional, and brand markings are removed from the photos.