Roofing

Author: Colorlib

Updated: October 2026 · v3.0.1

Credits: Images from Unsplash

Roofing is a website template for roofing contractors, built on Bootstrap 5. The home page opens with a full-window photo slider, followed by a quote request form, mission tabs, an animated statistics band, tabbed services, a project gallery, testimonials, the latest blog posts and pricing plans. The layout is responsive and mobile-ready. There are seven pages: home, about, services, projects, blog, a single blog post and contact.

The about page adds a video and the team’s story, the services page lists six roofing services with pricing, and the projects page shows twelve completed jobs that open in a lightbox. You will also find a blog with search, a blog post with comments and a comment form, and a contact page with a working contact form and a map that loads on click. Roofing gives you a ready-made site for a roofing, repair or solar installation business.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.2.1 and jQuery), compiled from Sass with the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel, PhotoSwipe 5 and a video dialog replace Magnific Popup, Jarallax replaces Stellar, small built-in modules replace Waypoints, animateNumber and animate.css, and the date and time pickers are native inputs. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 4.1 MB and 53 requests to 1.5 MB and 38 requests, and the contact page from 1.8 MB and 46 requests to 0.74 MB and 19 requests. Every photo has an AVIF version with the JPEG as the fallback, the hero and page headers have sharp copies for large and high-density screens, and the full-page preloader is gone.
• No third-party requests: Poppins is self-hosted, Lucide SVG icons and a small social-logo subset replace the icon fonts and the icon CDN, and the contact map is an OpenStreetMap map (no API key needed) that loads only when a visitor clicks.
• Working forms: the quote, contact and comment forms post to included PHP handlers with validation, a spam trap and in-page messages.
• Accessibility: a skip link, one heading 1 per page, labelled fields, named icon links, visible keyboard focus and text that meets WCAG AA contrast, with dark labels on the gold buttons and a darker gold for text.
• Fixes: the menu is reachable on tablets, the hero slider arrows and blog sidebar icons show, the demo content has distinct project names, blog titles and testimonials, and the page titles, descriptions and structured data are new.