Construction Company Homepage Template

A bold, dark Bootstrap 6 homepage template for a construction company or general contractor, with a full-bleed site photo, a live project tracker, a filterable project portfolio and a bid request form.

How it works

The page lives in .ir-page, which pins data-bs-theme="dark" and maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and related tokens) to safety yellow, so btn-solid theme-primary, badges, chips, the stepper and the range all share one accent.

• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> for mobile. "Services" opens a .menu with menu-item-icon and menu-item-description. The script keeps aria-expanded on .ir-toggler in sync and closes the drawer after a link is chosen.
• Hero: .ir-hero-bg is a decorative photo under a dark gradient overlay. The .ir-live card shows a project in progress with a striped .progress bar, and .ir-stats lists four key figures.
• Projects: a btn-group of btn-check radios filters .ir-project cards by data-ir-sector and announces the count in a live region. Each "View project" button carries data-ir-project, data-ir-meta, data-ir-scope and data-ir-facts; the script copies them into #ir-project-dialog (a native <dialog class="dialog dialog-lg">) and opens it with Dialog.getOrCreateInstance().
• Process: a five-step .stepper that turns horizontal through md:stepper-horizontal inside a .contains-inline wrapper.
• Safety and clients: .chip certifications, progress meters and a Bootstrap 6 .carousel of testimonials.
• Bid form: data-bs-validate validation, a Combobox for the project type (data-bs-name="projectType" creates a hidden input), a Datepicker for the target start and a .form-range budget mirrored into [data-ir-budget-out]. Submit is simulated, then #ir-toast appears.

Customization

• Change --ir-yellow and --ir-bg in .ir-page (style.css), plus the --bs-primary-* overrides beside them, to rebrand the page.
• Add or change projects by copying an .ir-project card; set data-ir-sector to commercial, residential or civil to match a filter button.
• Separate project facts in data-ir-facts with |; each one becomes a tile in the dialog.
• Edit the width class ir-w68 and aria-valuenow on the hero progress bar to update the "Now building" card.
• Replace the setTimeout in the form submit handler of script.js with fetch() to your CRM or email endpoint.
• The photos come from Unsplash; replace them with photos of your own sites, crews and clients.

Accessibility

A skip link jumps to #ir-main. The filter is a labelled radio group, the dialog has aria-labelledby, progress bars use role="progressbar" with labels, carousel controls have hidden text labels, and the toast uses role="status". Focus has a visible yellow outline; hover effects respect prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Coming from Bootstrap 5: btn-solid theme-primary replaces btn-primary, the navbar uses a Drawer instead of navbar-collapse, Dropdown is now Menu, Modal is now Dialog, the carousel uses carousel-icon-prev/-next, and Combobox, Datepicker, Chips, Stepper and Range are new built-in components. The Combobox keeps its selection after the simulated submit because alpha.1 has no reset method.