Pivot

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Pivot is a construction company website template, built on Bootstrap 5. It suits building contractors, renovation firms and architectural practices. The layout is responsive and mobile-ready. There are eight pages: home, about, services, projects, a project case study, news, contact and a quote request.

The home page opens with a full-screen photo slider, followed by an about block, a grid of recent projects with captions on hover, three service cards, a news carousel, client testimonials and a call-to-action band above the footer. The inner pages add a company history with a checklist, six service cards, a project portfolio, a case study with a related-projects carousel, a news grid, a working contact form and a quote form that asks about the client’s company and project. A hover drop-down menu, social links and a dark footer with contact details complete the design.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1 and jQuery), compiled from Sass with the original blue and the Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero and news sliders, a small built-in module replaces Waypoints and animate.css, and npm run build (Dart Sass and esbuild) compiles minified CSS and JavaScript.
• Lighter pages: all nine pages together went from 10.5 MB and 209 requests to 7.4 MB and 195 requests, and the services page from 1.3 MB to 0.8 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen; the hero photos are sharper 2560 px images and the first one is preloaded.
• No third-party requests: K2D and Niramit are self-hosted, and three icon fonts are replaced by Lucide SVG icons and a 1 KB social-logo subset. A Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the contact and quote forms send through php/send-email.php, with validation, a spam trap and an in-page message. Before, they posted nowhere and most fields had no name.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, visible focus rings, project captions and slider arrows that also show on keyboard focus, larger slider dots, descriptive image text, reduced-motion support and WCAG AA text contrast, with a deeper blue for links and buttons, darker body text, light text on the dark footer and a soft shade behind the hero headings.
• Fixed: two stylesheet links that pointed at files that never shipped, footer and button links that went nowhere, a service listed twice and a typo in the call-to-action band. The demo content uses fictional names, companies, address and phone number, and new Unsplash photos replace low-resolution hero images and a few stock photos.