Overview

A sturdy, daylight HTML template for a construction and building contractor: safety yellow on charcoal and white, condensed headings and site photography. Structa ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: a cost estimator from floor area, build type, finish level, site and storeys, projects by sector with their progress from today’s date, a five-step tender request, a live safety record, careers dated from today, and a plant & tool hire depot priced by the day or the week.

What’s included

• 3 home pages, each with its own scroll moment: the site timeline (a building’s programme fills phase by phase — foundation, frame, envelope, handover), the crane carry (a hook carries a steel beam across the band) and the m² scrub (the floor area grows and every build type is priced again)
• A light theme by default and a dark theme on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker in every header: a right-to-left language turns any page around
• WebGL layers — Rebar Mesh, the shadow of a reinforcing mesh drifting across the bands, and the footer’s crane arm, a 3D knuckle-boom solved by inverse kinematics that stacks steel beams — tinted by the theme colours
• The cost estimator: area in m² or ft², storeys, seven build types, four finish levels, three sites, two contracts and six extras; the total with its range, the rate per m², the breakdown, the programme in four phases and the stage payments, carried into the tender
• The tender / RFQ request in five steps: Continue always moves on, only Send checks the form, with a reference, a site visit and a priced-tender date in working days
• Projects by sector: tabs, search and sort, a sector panel worked out from the cards showing, and each project on site placed from today’s date with its progress, phase and handover
• The safety record: days and hours since the last lost-time injury, LTIFR and TRIR by year against the industry, PPE and permits by task, the next toolbox talk
• Careers: roles dated from today with closing dates, apprentice intakes, filters and an apply form
• The plant & tool hire depot: filters, hire dates on the equipment page, day and week rates, deposit, damage waiver, delivery zones, a code, tax, checkout with a hire number, wishlist
• Crane Lift preloader, Tape Off reveals (hazard tape torn off each photo), word-rise titles and the spirit level on hover
• About, team, profile, services, sectors, rate card, gallery, news with post formats, FAQ with search, client portal, account pages, coming soon, 404
• Fully responsive, zero console errors

Getting Started

Thank you for choosing Structa. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open structa/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the estimator, the tender, the projects, the safety record, careers and the hire depot all work straight from the files.

2. Deploy to a server

Upload the contents of the structa/ folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts. The rates, phases, projects, roles, safety figures and hire stock live in one place — see Contractor Logic.

File Structure

Below is an overview of the key files and folders included in this template.

Folder Structure

The package unzips to two folders: Documentation/ (this guide) and structa/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

structa/
├── *.html                              the 33 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the forms
└── assets/
    ├── css/
    │   ├── style.css                   all custom styles, numbered Table of CSS
    │   ├── style.rtl.css               the right-to-left twin of style.css
    │   ├── responsive.css              breakpoints 1399 / 1199 / 991 / 767 / 575
    │   ├── responsive.rtl.css          the right-to-left twin of responsive.css
    │   ├── fontawesome-all.css         Font Awesome Free, loaded locally
    │   └── plugins/                    vendor stylesheets
    │       ├── bootstrap.min.css
    │       ├── bootstrap.rtl.min.css   Bootstrap for right-to-left pages
    │       ├── jquery.fancybox.min.css
    │       └── swiper-bundle.min.css
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (34 blocks)
    │   └── plugins/                    vendor scripts
    │       ├── bootstrap.bundle.min.js
    │       ├── gsap.min.js
    │       ├── jquery-3.7.1.min.js
    │       ├── jquery.fancybox.min.js
    │       ├── ScrollTrigger.min.js
    │       └── swiper-bundle.min.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── banner/                      15 files
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── hire/                        9 files
        ├── icons/                       54 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── site/                        39 files
        ├── slider/                      4 files
        └── team/                        12 files

To publish the site, upload the contents of structa/ to your web root. Photos keep their folder, file name and size when you replace them, so no page needs editing.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates. Colours used with transparency have an -rgb twin (for example --st-yellow-rgb) — change both together.

Safety yellow fills the buttons, the tags, the ring charts and the call-to-action band (always with ink text on it); amber ink is the same yellow made dark enough for small text on white. Charcoal carries the dark bands, the night panel the split bands and the cards on them, slate the arrow tab glued to every button. --st-bg, --st-surface, --st-band, --st-heading and --st-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Sofia Sans Condensed (headings in Title Case, hero titles and navigation in capitals, figures) and Poppins (body, buttons and labels). Swap them by editing the Google Fonts link and the --st-ff-display / --st-ff-body variables.

Logo

The logo is a yellow block whose S is set out in steel flanges and webs, beside Structa with its first syllable in yellow. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white header and the light theme
• logo-light.png — for dark grounds: the header over the heroes, the footer and the dark theme
• logo-word-light.png — the wordmark alone (the preloader sets it beside the block)
• mark.png — the block alone (the load the preloader’s crane lowers)
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Structa opens light: the white ground is the default and needs no attribute. Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key structa-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a white flash. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root in style.css. Change a dark colour there.
• Bands that stay dark — sections with the class is-night or is-night-2 (the sector strip, the news, the capabilities, the footer) are charcoal in both themes; is-yellow is the safety-yellow band with ink copy in both themes.
• White cards — the cards on the hero’s edge take st-on-paper and keep their white and ink in both themes.
• Icons — each illustrated icon ships in an ink and a light version, and the right one shows by theme and ground.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Contractor Logic

The figures on every page come from one data block, JS block 09 Structa Data near the top of main.js (var STRUCTA), and the sums in block 10 work them out. Edit the data once and the estimates, dates, progress, prices and totals follow. Money is in US dollars, areas in square metres; times are minutes after midnight (1050 = 5:30 pm); weekdays run 0 = Sunday to 6 = Saturday.

The build types

How an estimate works

The estimator, the rate card, the timeline on Home 01 and the m² scrub on Home 03 all call the same estimate(), so they always agree. Every change on the estimator is saved in the browser with an estimate number, and the tender request attaches it.

How the hire depot totals

The basket, the wishlist, the code, the delivery zone and the saved estimate are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo basket and wishlist so every hire page has something to show; to start empty, set the two demo lists in doShop() (block 29 Plant & Tool Hire) to []. The tender, checkout, applications and account forms confirm on screen with a reference — connect them to your own systems.

WebGL Layers

Two small WebGL scenes draw the moving layers: Rebar Mesh — the soft shadow of a ribbed reinforcing mesh drifting across the charcoal and yellow bands and the page titles, strongest at the band edges — and the yard in the footer — a 3D knuckle-boom crane arm whose two joints are solved by inverse kinematics every frame, picking steel beams off one stack and setting them on the other. Each is one canvas:

<canvas class="st-gl" data-gl="mesh" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• Performance — a layer only runs while its section is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the section’s own background shows.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Structa is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) in the top bar lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys structa-lang and structa-dir) and reloads; the one-line script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute before the page paints. Nothing is translated — you bring your own right-to-left copy. To make a page right to left for good:

1. Set The Direction

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders and the timeline fill follow it on their own. Prices, figures, dates, the preloader’s crane and the footer’s yard keep reading left to right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 34 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–10 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers, Structa Data, Structa Engine & Site Clock. The core every page shares: the Crane Lift preloader, the header, the Tape Off reveals, the theme and direction switch, the WebGL layers, Structa Data and the engine that works out every estimate, project state, hire price and the office clock.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions, filters, search, newsletter, choice cards.
• 19–21 — Site Timeline, Crane Carry, Area Scrub. The three home pages’ scroll moments.
• 22–34 — Cost Estimator, Tender Request, Projects By Sector, Safety Record, Careers, Ring Charts & Meters, Contact Form, Plant & Tool Hire, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the cost estimator, the tender wizard, projects by sector, the safety record, careers, ring charts, contact, the hire depot, accounts, the news, demo forms, the coming-soon countdown and the FAQ.

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically: content appears in its final state and the scrubbed scenes rest in place.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped inside assets/img/:

The logo files, the illustrated icons and the language flags are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact form and the comment form post to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, tender, application, checkout, account, login, register and forgot-password forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php verifies every submission with Google and rejects low-score (bot) requests.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Sofia Sans Condensed, Poppins

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds and the video popups.

Support

If you have any questions or need help with the template, please reach out through the marketplace where you purchased the template: open the item there and send us your question from its support page. We aim to respond within 24–48 hours.