Construction Company

Templates Pass or Vault: not sold separately £50 or the whole Vault, £99

An eight-page construction company website template for builders, contractors, property developers, engineering firms and consultancies. Four colour-coded sectors, a filterable project index, project pages with a draggable build timeline, and a page transition that builds each new page storey by storey.

ScrollTriggerFlip advanced

18 more details

page-transitionsoft-navigationdirectional-transitionflip-layoutfiltermask-revealclip-pathstaggercount-upscroll-revealscroll-linked-colorcarouseltouch-dragtimeline-controltabskeyboard-navigationfocus-managementprogressive-enhancement

This template reads better at your own screen size than in the frame below:

Open the template in a new tab

Released 4 October 2026

About this template

A construction company website has to prove two things quickly: that the firm builds the kind of building you need, and that it finishes them. This eight-page template leads with a full-bleed site photograph at golden hour, the four sectors the company works in set as a two-line condensed headline, and a strip of hard figures along the bottom edge. Calder Build, a fictional Salford contractor and developer, is the worked example; the same pages suit a builder, main contractor, property developer, housebuilder, civil or structural engineering firm, architecture practice or construction consultancy.

Read the full template overview

Every page change is the template's signature, called topping out. Eight floor slabs stack up from the bottom of the screen one storey at a time, a level line with tick marks rides the top of the stack while a storey counter ticks from L01 to L08, the destination's name is set on the finished stack, and the slabs lift away top-first to reveal the new page. Heading to a project or a sector, the slabs take that sector's colour. Open a project from the index or the home spotlight and its photograph lifts into a framed inset beside the project's name while the storeys build behind it, then opens into the project page's hero as they lift away. Back and Forward run the whole thing in reverse.

Colour has one job: each of the four sectors (education, health, living and workspace) has its own colour, used for its tiles, tags, bands and slabs, while the interface stays concrete grey, blueprint navy and near-black. On the sectors page the four colour bands blend into one another as you scroll. The project index filters by sector with cards that reflow into place, and each project page carries a facts table, three short chapters and a build timeline you can drag across the programme months. Replace the photographs, the copy and four sector colours to make it yours. Everything is static HTML, CSS and JavaScript with bundled images and no build step.

Construction Company - website template preview

What's included

14 items

Eight standalone HTML pages: home, project index, three project case studies, sectors, about and contact
Topping-out page transition on every internal link: floor slabs stack up storey by storey with a riding level line and L01 to L08 counter, hold the destination's name, then lift away top-first
Slabs take the destination's sector colour for project and sector pages, and ink for everything else
Project photographs ride along with the transition: lifted out of the index card or home spotlight into a framed inset beside the project name while the storeys build, then opened into the project hero as they lift; Back shrinks the hero onto its card
Back and Forward run the transition in reverse, with scroll positions restored and the arriving heading focused and announced
Full-bleed home hero with a two-line condensed headline, sector-coloured underlines and a figures strip
Careers band with a short looping site clip over its still that plays only while on screen, pauses when hidden and never plays under reduced motion
Four sector tiles with colour blocks under the photographs, linking to the sector page and a pre-filtered project index
Project spotlight with previous and next buttons, arrow keys and swipe: a wipe in the incoming project's sector colour, a vertical postcode and a figure that counts up
Project index filtered by sector with Flip reflow, live counts, and ?sector= links that arrive pre-filtered
Project pages with facts table, three story chapters, a draggable and keyboard-operable build timeline over the programme months, gallery and a next-project band in that project's colour
Sectors page whose four colour bands blend into one another as you scroll, with text that stays above 4.5:1 throughout; About page with history line, numbered approach index and leadership; contact page with offices and an unsent enquiry draft
Real links and complete pages without JavaScript; instant page swaps under reduced motion
Thirty-four bundled, graded WebP images and one graded MP4 clip: Pexels construction photography and footage plus four AI-generated leadership portraits, with credits

Perfect for

4 use cases

Main contractors and builders presenting work by sector
Property developers and housebuilders with a portfolio of schemes
Civil and structural engineering firms showing project case studies
Architecture practices and construction consultancies with several service lines

How it works

6 sections

A page transition built storey by storey

Internal links fetch the next page and swap it in under a stack of eight floor slabs instead of reloading. The slabs rise from the bottom of the screen with a fast settle, a level line and storey counter ride the top of the stack, and the destination's name holds on the finished stack while the page and its hero photograph load. The slabs then lift away top-first and the new hero settles into place, in about 1.2 seconds when the page is already prefetched.

Colour that always means a sector

Education, health, living and workspace each have one colour, and nothing else on the site uses colour. The sector tiles, tags, filter chips, sector bands, next-project bands and the transition slabs heading to a project all take their sector's colour, always with ink text measured for contrast. Rename the sectors and repaint four tokens to fit another business. On the sectors page the bands blend from one colour to the next with scroll, and the text switches between ink and white at the point where each stays legible.

Projects you can filter and open

The project index filters by sector with buttons; non-matching cards fold away and the rest reflow into place, and links from sector tiles and bands arrive pre-filtered through the address. Opening a project lifts its photograph into a framed inset beside the project name while the storeys build, then opens it into the project page hero. The home spotlight swaps four projects behind a wipe in each project's colour, with the main figure counting up.

A build timeline on every project

Each project page has a slider across the programme months with four milestones: ground broken, frame up, topped out and handover. Drag the marker, click the track or a milestone, or use the arrow, Page Up, Page Down, Home and End keys, and the stage photograph and caption change with it. Without JavaScript the four stages are listed as figures.

Footage on the home page

The careers band on the home page loops a short graded site clip over its still photograph. It plays only while it is on screen and the tab is visible, fades in once playing, and never plays under reduced motion, where the still stays and the clip is not downloaded. Without JavaScript the still shows.

Fallbacks

Every link is an ordinary link and every page is complete HTML. Reduced motion swaps pages instantly and removes the slabs and reveals. Without JavaScript, with the GSAP CDN blocked, or opened from a local file, pages load normally and all content is visible.

Plugins ScrollTrigger, Flip

Difficulty Advanced

Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (8 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Which businesses can use this construction template besides a contractor?

It is built as a general construction company website template. Builders, main contractors, property developers, housebuilders, civil and structural engineering firms, architecture practices and construction consultancies can keep the structure: sectors or service lines, a filterable project index, project case studies with a build timeline, and an about page with leadership. Replace Calder Build's projects, figures and photographs with your own.

Can I rename the four sectors or use a different number of them?

Yes. Each sector is an id such as living, used on tiles, cards, chips and bands, with one colour token in style.css. Rename the ids and labels to match your service lines, for example residential, commercial, infrastructure and heritage. Adding a fifth means one more token, one more chip and one more band, and choosing a colour that carries ink text at 4.5:1.

How do I add another project case study page?

Copy one of the three project pages, give it a new filename, and change its data-storey attributes, hero photograph, facts, chapters and timeline months. Add a card for it on projects.html with the same sector, and point the previous project's next-project band at it. The transition, photo carry and timeline pick the new page up without any script changes.

Does the enquiry form send messages or create leads?

No. The contact form is an unwired static front end. It collects project type, sector, budget band, start date, name, organisation, email, phone and a description, then prepares an unsent enquiry the visitor can copy into an email. Nothing is saved or delivered. Connect Formspree, Netlify Forms or your CRM and update the visible notice before taking real enquiries.

Can I change the build timeline milestones and dates?

Yes. Each project page sets its programme start month and length on the timeline section, and each stage lists the month it happens in, a label, a photograph and a caption. Use four stages or more, rename them to your own milestones such as planning consent or practical completion, and the slider, month ticks and milestone buttons are generated from that markup.

Can the slab transition use my brand colour instead of the sector colours?

Yes. The slabs use the destination's sector colour when the link or page names a sector, and the ink colour for every other page. Set the ink token, or the slab colours in the transition section of style.css, to your brand colour, measuring the title text on it. Removing data-sector from links makes every transition use the one colour.

Templates Pass or Vault

Get the Templates Pass or the Vault to use this template.

The Templates Pass and the Vault both include Construction Company, the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate. This template is not sold on its own.

£50 Templates Pass: every current and future premium template

Browse templates

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

Upload the folder to any static host and open index.html. Keep the eight HTML files beside assets/ so relative links keep working. There is no build step, framework or package to install.

Serve the files over HTTP or HTTPS to see the page transitions. While editing, use any local static server (for example python3 -m http.server in the folder) and open http://localhost:8000/index.html. Opening a file straight from disk works too, but links then load pages normally without the transition.

GSAP, ScrollTrigger and Flip load from a CDN and the font from Google Fonts. Images, styles and the script are bundled locally.

Using It With Your Own Design

Identity. Replace "Calder Build", the addresses, phone numbers, email addresses and the fictional-company note in the header and footer of each page (they are repeated in all eight files so each page stands alone). The logo is three CSS bars beside the name; swap in your own mark inside .brand.
Sectors. The four sectors are ids (education, health, living, workspace) used in data-sector and data-tag attributes, ?sector= links and the id of each band on sectors.html. Rename them to your own service lines, and rename the matching selectors and tokens at the top of assets/style.css (see Palette). The script reads the list from SECTORS at the top of assets/script.js.
Projects. Each card on projects.html is one <li data-project-card data-sector="...">. Each case study is a copy of a project page (see Project Pages).
Photographs. Swap the files in assets/img/ keeping the names, or change the paths. Update alt text and captions to describe what your photographs actually show.
Enquiries. Connect the contact form to your own service before taking real enquiries (see Enquiry Form).

Everything visual lives in assets/style.css; everything interactive lives in assets/script.js, organised as one function per feature that returns early when its markup is absent. assets/page-router.js is the small page router underneath the transition (link handling, fetching, history, scroll and focus); you should not need to edit it. Delete a section from the HTML and the rest keeps working.

Pages and Configuration

File	Content
`index.html`	Full-bleed hero with a figures strip, statement paragraph, photo and text split, four sector tiles, project spotlight, "Behind the builds" figures, latest news, careers band with a second clip
`projects.html`	Project index with sector filter chips; `?sector=living` pre-selects a sector
`project-broughton.html`, `project-pollard-yard.html`, `project-hulme-works.html`	Case studies: hero with name and vertical postcode, facts table, three chapters, build timeline, gallery, next project
`sectors.html`	One full-width band per sector, blending into the next as you scroll (`data-blend` on the page) (`id="living"` and so on): photograph, what you build, figures and a link to the filtered index
`about.html`	History line, numbered approach index (five topics), leadership, accreditations
`contact.html`	Two offices, enquiry form with an unsent draft, tenders and supply chain note

Hooks you will meet in the markup:

data-page wraps each page's header, main and footer. Its data-storey-label (small caps line) and data-storey-title (large title) are what the transition holds while that page loads. Project pages add data-storey-sector and data-storey-postcode.
data-sector="living" on a link gives the transition that sector's slab colour. Links with ?sector= or to sectors.html#living pick it up from the address.
data-carry on a link makes its photograph ride along with the transition into the destination's data-carry-target hero: the link's own image, or the element its value selects (data-carry="#spot-img-1").
<video data-video> inside a photo slot loops a clip over that slot's still (see Video).
data-blend on a page's data-page wrapper turns on the scroll colour blend (see Sector Colour Blend).
data-filter, data-chip="living" and data-project-grid: the index filter.
data-spotlight, data-spot: the home spotlight. data-count="5900" on a number counts up (data-comma adds thousands separators, data-decimals="1" keeps one decimal).
data-build, data-start="2023-03", data-months="26" and data-stage data-month="7" data-label="Frame up": the build timeline.
data-approach, data-approach-tab, data-approach-panel: the about page index.
data-reveal, data-reveal-group and data-rule give a gentle rise or a drawn hairline on scroll; data-hero-fade and data-hero-line mark a page's opening block.

Page Transitions

Every same-origin link to a sibling .html page runs the same transition:

Out. Eight floor slabs stack up from the bottom of the screen, one storey at a time, each with a fast settle. A level line with tick marks rides the top of the stack and a storey counter at the right edge ticks from L01 to L08. Slabs take the destination's sector colour for projects, sector bands and filtered indexes, and ink for every other page.
Hold. The destination's label and name rise on the finished stack (projects add their postcode set vertically beside the name) while the next page is fetched, its hero photograph is decoded and the page is swapped in underneath.
In. The slabs lift away top-first and the arriving hero photograph settles from 1.05 to 1.

Back and Forward reverse it: the slabs drop in from the top and clear bottom-first. Scroll positions are restored and the arriving heading receives focus and is announced.

Links with data-carry (project cards and the spotlight) take their photograph along as a passenger. It lifts out of the page with a slight scale and shadow and settles into a framed inset (the right of the screen on wide screens, the top on phones) while the storeys build behind it, beside the project's name and postcode. As the slabs lift it opens into the project page hero's exact rect, then the hero's title fades in. Back from a project page reverses it: the hero photograph shrinks to the inset over the dropping slabs and lands on its card if the card is on screen, or fades if it is not. The inset size lives in insetBox in the script.

Notes for editing:

Pages are fetched, not reloaded, so scripts inside a fetched page do not run. Put new behaviour in assets/script.js as another init function called from initPage. Every page loads assets/page-router.js before assets/script.js; keep that order on a new page.
The transition itself is the leave, hold and enter functions passed to PageRouter.create at the end of assets/script.js; the header comment of assets/page-router.js lists everything they receive.
Any sibling HTML file with a data-page wrapper joins the transition automatically. Add data-native-navigation to a link or container to opt out; downloads, new-tab clicks, external links and same-page anchors already behave normally.
Timing lives in raise (about 0.45s), showTitle, and open (about 0.5s); STOREYS sets the number of slabs. With the next page already fetched (links prefetch on hover, focus and touch) one transition takes about 1.2 seconds, including a minimum 0.2s hold on the title. On a slow connection the title holds until the page and its hero are ready.
The latest click wins: a second link chosen before the new page is in place goes straight to that page from the filled stack, and Back or Forward mid-transition settles on the page the browser asked for. Resizing the window mid-transition finishes it quickly.

Video

The careers band on the home page loops a short clip over its still photograph: <video data-video poster="..." loop muted playsinline preload="none"> with an MP4 source in assets/video/. The same hook works in any photo slot; for a clip that should start at once, such as a hero, add autoplay and preload="auto".

A clip plays only while it is on screen and the tab is visible, and fades in over its still once it is actually playing. It pauses when scrolled away, when the tab is hidden and when the page changes.
Under reduced motion the clip never plays: autoplay is removed, its sources are detached so it does not download, and any attempt to play is paused again. The still stays, which is also what visitors without JavaScript see.
To replace a clip, export H.264 MP4 with -movflags +faststart and no audio track (about 1280px wide and under 2MB for a supporting clip), grade it to match the stills, and keep the still as its poster. Text laid over a clip needs a scrim checked against its brightest frame.

Sector Colour Blend

On sectors.html the page itself paints the background: the script reads each band's colour (and the footer's), makes those surfaces transparent, and one scrubbed ScrollTrigger blends the page from the concrete top through education, health, living and workspace to the ink footer. Each blend starts as the next band enters the lower part of the screen and completes as it reaches the top quarter. No pins, no layout change.

Ink text stays above 4.5:1 on every in-between sector colour (the lowest measured is 6.5:1, health to living). Between mint and the ink footer no colour passes for both ink and white, so the text of the last band and the footer switches from ink to white at the measured point and the background steps across that narrow band in one frame; the lowest body-text contrast anywhere in the scroll is 4.8:1. If you change sector colours, keep ink at 4.5:1 or more on each and the blend stays legible. Reduced motion and no JavaScript keep the hard band colours.

Projects and the Filter

Each card carries its sector in data-sector. The chips above the grid are buttons with aria-pressed; choosing one folds the other sectors' cards away and reflows the rest with Flip, and updates the address to ?sector=... without adding a history entry. The grid's height is held while cards move so the footer does not jump. Add a project by adding a card; the chip counts are written in the HTML, so update them too.

Project Pages

Copy a project page and change its data-storey-* attributes, hero, facts, chapters and gallery. The build timeline is generated from its markup: data-start (year and month the programme starts), data-months (its length) and one data-stage per milestone with the month it falls in. The slider supports dragging, clicking the track, the milestone buttons, and Arrow, Page Up, Page Down, Home and End keys. On touch it only scrubs once a gesture is more horizontal than vertical, so the page still scrolls. Without JavaScript the stages are a plain list of figures. The stage photographs in the demo illustrate each kind of milestone; use your own site photographs for real projects.

Enquiry Form

contact.html is an unwired static front end. Fields are named type, sector, budget, timescale, name, organisation, email, phone and message. With JavaScript, "Prepare my enquiry" validates the form and writes an unsent enquiry the visitor can copy; the page says plainly that nothing is sent.

To take real enquiries, point the form at Formspree, Netlify Forms or your CRM, replace the submit handler in initEnquiry with your delivery code, and update the visible notice. Only say an enquiry was sent after your service confirms it.

Palette

Token	Default	Purpose
`--concrete`	`#D7D8D3`	Page ground
`--slab`	`#1C2B45`	Blueprint navy: statement, careers and timeline sections (white text)
`--ink`	`#121311`	Text, buttons, footer and the default slab colour
`--paper`	`#F4F4F1`	Form fields and notes
`--sector-edu`	`#F2C230`	Education
`--sector-health`	`#5FB4E0`	Health
`--sector-living`	`#EC7A62`	Living
`--sector-work`	`#6CC59A`	Workspace

Each neutral has a matching -rgb triple used for translucent values; change both. Secondary text is the ink at 72% (6.2:1 on concrete). Sector colours are fills only and always carry full ink text: 11.1:1, 8.1:1, 6.7:1 and 9.0:1. Dimmed ink is not used on them, and white text never sits on them. If you choose new sector colours, keep ink text at 4.5:1 or more on each.

Type is one family, Instrument Sans, at two widths: condensed 600 for names, figures and headlines, normal width 400 and 500 for reading.

Accessibility and Fallbacks

Real links everywhere, a skip link, visible focus, labelled form controls and one h1 per page.
The transition layer is aria-hidden. Scrolling is held while it runs and the arriving heading is focused and announced through a polite live region.
Filter chips are buttons with aria-pressed and a live status; the spotlight has labelled buttons, arrow keys and a live status; the build timeline is a slider with a month value text; the approach index becomes tabs with arrow keys.
Reduced motion swaps pages instantly with no slabs, keeps the video stills and the sectors page's hard band colours, swaps spotlight projects and timeline stages without animation, and removes reveals and counting.
No JavaScript, an unavailable GSAP CDN or opening from file://: links load pages normally and all content is visible. Without JavaScript the spotlight is a list of four projects and the timeline a list of four stages.

Dependencies

The demo is pinned to GSAP 3.15.0 with ScrollTrigger and Flip. Compatibility floor: GSAP 3.12+, with core and plugins on matching versions. No Lenis, no other plugins, no backend. Without Flip the filter still works, without the reflow animation.

Images and Credits

The download contains thirty-four cropped, graded WebP derivatives in assets/img/. Third-party brand marks were retouched out of the source photographs with local masked edits limited to those marks: crane maker and company plates in hero.webp, developer and hotel names in news-skyline.webp, a desk label in classroom.webp, a hire-bike panel and entrance wordmark in the living images, workwear badges in stage-ground.webp, stage-top.webp and stage-top-b.webp (plus a shop sign in stage-top.webp), and a floor wordmark and monogram in the atrium images.

Construction photography is licensed through Pexels, which permits use in website templates. The photographs show unrelated buildings, sites and people, not Calder Build's projects or staff, and the build timeline stages are illustrative.

File(s)	Source	Subject
`hero.webp`	Pexels 410730	Concrete frame and tower cranes at sunset
`people-tablet.webp`	Pexels 8961008	Site engineer reading a tablet
`people-engineer.webp`	Pexels 8961126	Engineer under a steel roof frame
`about-site.webp`	Pexels 8961065	Two colleagues beneath formwork towers
`news-team.webp`	Pexels 8961131	Two colleagues with a radio and tablet
`news-skyline.webp`	Pexels 28140881	City skyline with a tower under construction
`tile-education.webp`, `p-kersal-vale.webp`, `kersal-tall.webp`	Pexels 18587790	Timber-clad school wings and bridge
`p-broughton.webp`	Pexels 14446732	School building with terracotta cladding
`classroom.webp`	Pexels 12168815	Classroom desks and chairs
`tile-health.webp`, `p-union-street.webp`	Pexels 17292192	Health building entrance
`p-werneth.webp`	Pexels 17531832	Timber atrium with roof glazing
`tile-living.webp`, `p-weaste-quay.webp`, `weaste-tall.webp`	Pexels 18643867	Brick apartment block
`p-pollard-yard.webp`	Pexels 19563032	Street of brick terraced houses
`p-gable-row.webp`	Pexels 14128509	Three brick gables
`p-hulme-works.webp`	Pexels 5368598	Timber-lined office facade
`tile-workspace.webp`, `work-atrium.webp`	Pexels 5506023	Office atrium with timber slats
`p-ordsall-shed.webp`	Pexels 5505930	Workshop hall with timber roof
`stage-ground.webp`	Pexels 19408681	Rebar mats in an excavation
`stage-ground-b.webp`	Pexels 8961260	Two engineers on a cleared site
`stage-frame.webp`	Pexels 210695	Four-storey timber frame
`stage-frame-b.webp`	Pexels 8830259	Timber framing seen from below
`stage-top.webp`	Pexels 10951145	Two workers on a roof deck at dawn
`stage-top-b.webp`	Pexels 8576025	Roofers landing timber battens
`office-salford.webp`	Pexels 30675756	Salford Quays at sunrise

Video, licensed through Pexels and bundled as cut, looped and graded derivatives with no audio:

File	Source	Subject
`video/careers.mp4` (9.8s, 1280x720, 1.5MB)	Pexels video 8964378	Two engineers in hard hats talking on site

The four leadership portraits (leader-1.webp to leader-4.webp) are AI-generated images of people who do not exist, made for this template. Replace them with photographs of your real team before launch; never present generated portraits as real staff.

To replace an image, keep its filename or update every path, its width/height, alt text and caption. The Vault authoring source includes assets/img-manifest.json with original URLs, crops and grades (and, under videos, the clip's source, cut and ffmpeg grade); in the Vault checkout it regenerates with bun scripts/build-template-assets.ts construction-company-template --force. The manifest and source files are authoring inputs; your site only needs the files in assets/img/.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.