# Construction Company > 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. Canonical: https://gsapvault.com/templates/construction-company-template Live demo: https://gsapvault.com/demos/construction-company-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | Not sold singly; comes with the Templates Pass or the Vault | | Difficulty | advanced | | Plugins | ScrollTrigger, Flip | | Techniques | page-transition, soft-navigation, directional-transition, flip-layout, filter, mask-reveal, clip-path, stagger, count-up, scroll-reveal, scroll-linked-color, carousel, touch-drag, timeline-control, tabs, keyboard-navigation, focus-management, progressive-enhancement | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo (8 pages, lowest score shown), 5 October 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview 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. 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. ## Features - 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 ## 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 ## 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. ## Vibe-Code Ready Setup This template includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works ### 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. ## Documentation How this template works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### 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 1. **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`. 2. **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`. 3. **Projects.** Each card on `projects.html` is one `
  • `. Each case study is a copy of a project page (see Project Pages). 4. **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. 5. **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"`). - `