Overview

A crisp, industrial HTML template for a steel and metal fabrication manufacturer: laser cutting, bending, welding and coating from three plants, with the logic worked out rather than typed in — a quote builder that prices a part from its grade, thickness, size, quantity, bends, welds and finish with its lead time and ship date, every grade in stock with its strength and price a kilo, plants with their capacity and the shift running now, certificates with the days left on them, openings with how long they stay open, and a stock shop with a trade saving, a code, shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: a steel coil unrolling into sheets (the strip length worked from the coil’s mass, width and gauge), a blank bent in three press-brake stages into a bracket (with the bending force), and the plants’ throughput bars filling against their capacity
• The quote builder in four steps (Continue never blocks, only the request validates), a quick price on Home 01 that opens the builder with the same choice, and Quote This Grade on the materials page
• A currency switch (USD, EUR, GBP) in the top bar that repaints every price on the site and is remembered
• The plant clock: the sales desk open or closed and every plant’s running shift in New York time, wherever the visitor is
• Certificates on their three-year cycles, careers with filters and dates from today, materials with tabs, search and sort
• The stock shop: categories, price filter, sort and search, the product page, cart, trade saving, code, free-shipping meter, tax, checkout with an order number, wishlist
• A light theme by default and a night 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 the top bar: a right-to-left language turns any page around
• WebGL layers — Pipe Runs, isometric pipes with flanges growing at the band edges, and the footer’s coil spring pressed and released — tinted by the theme colours
• Laser Cut preloader, Press Bend reveals (cards fold down from upright like a flange off a press brake), word-rise titles and the spec plate sliding in on hover
• About, team and profile, industries, process, projects, news with post formats, FAQ with search, account pages, coming soon, 404
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open ferrona/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the quote builder, the plant clock, the certificates, the careers filters and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the ferrona/ 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 grades, rates, plants, certificates, openings and shop rules live in one place — see Fabrication 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 ferrona/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

ferrona/
├── *.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/                      20 files
        ├── decor/                       2 files
        ├── faces/                       7 files
        ├── flags/                       6 files
        ├── icons/                       48 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── shop/                        9 files
        ├── team/                        6 files
        └── work/                        36 files

To publish the site, upload the contents of ferrona/ 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 --fe-red-rgb) — change both together.

The cool grey is the page ground and white panels sit on it; the signal red fills the buttons, the logo plate, the square arrows and the small markers, and red ink is the same red made dark enough for small text on the grey. Ink sets the headings, steel slate the spec plates and the chart’s second series, night the top bar, the footer and the dark bands. --fe-bg, --fe-surface, --fe-alt, --fe-heading and --fe-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: Mulish (headings, buttons, navigation and figures) and Roboto (body, labels and the small side labels). Swap them by editing the Google Fonts link and the --fe-ff-display / --fe-ff-body variables.

Logo

The logo is a red plate holding Fe like an element tile, beside FERRONA in Mulish over STEEL WORKS. 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
• mark.png — the Fe plate alone (the preloader’s cut piece)
• 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

Ferrona opens light: the grey 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 ferrona-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a light 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 (the coil band, the process strip, the figures, the footer) are night in both themes.
• Icons — each illustrated icon ships in a red 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.

Fabrication Logic

The figures on every page come from one data block, JS block 09 Ferrona Data near the top of main.js (var FERRONA), with the engines that work on it. Edit it once and the prices, lead times, shifts, dates and totals follow. Prices are in US dollars; lengths in millimetres; times are minutes after midnight (1080 = 6:00 pm); weekdays run 0 = Sunday to 6 = Saturday.

How a quote is priced

Mass = width × length × thickness × density. Material = mass × price a kilo × the nesting allowance; cutting = the perimeter × the band’s rate (plus the pierces); then bends, weld length and the finish (by the square metre on both faces, or by the kilo for galvanising). The quantity break comes off the parts, the set-up is added once, express adds its share, freight follows the zone and the order’s weight. The lead time adds the processes’ days, the finish’s, one more for every 400 parts and the loading of the plant that cuts it; the ship and arrival dates count working days from today.

The plant clock

Every element with data-desk-status or data-plant-status="pittsburgh" shows Sales Desk Open Until 6 pm or Shift B Running Until 10 pm, or when the desk opens and the next shift starts, worked out in New York time from the visitor’s own clock. Shift tables marked data-shift-table mark today’s row.

Certificates

Each certificate runs in cycles from its first audit; the page works out the one in force today, the days left, the next surveillance audit, and flags a renewal due within 120 days.

The scroll moments’ figures

The cart, the wishlist, the code, the trade tick, the currency and a quote handed from the quick price or the materials page are kept in the browser (localStorage and sessionStorage), so they follow the visitor from page to page. The first visit starts with a small demo cart so every shop page has something to show; to start empty, set the demo list in doShop() (block 29 Stock Shop) to []. Quote requests, applications and checkout confirm on screen with a reference — connect them to your own systems.

WebGL Layers

Two small WebGL scenes draw the moving layers: Pipe Runs — isometric pipe runs with flanged elbows growing slowly at the edges of the heroes, the page titles and the dark bands, the copy in the middle left clear — and the Coil Spring in the footer, a lit helix of round wire pressed by a red plate and released, ringing out while it turns. Each is one canvas:

<canvas class="fe-gl" data-gl="pipes" data-gl-edges="bottom" 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. data-gl-edges keeps the pipes to the top, the bottom or both edges.
• 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)

Ferrona 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 ferrona-lang and ferrona-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 every move that must mirror follow it on their own. Prices, figures and the drawings of the scroll moments 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–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Laser Cut preloader, the header, the Press Bend reveals, the theme and direction switch and the WebGL layers.
• 09–12 — Ferrona Data, Currency Switch, Custom Select, Plant Clock. Ferrona Data holds every figure and the engines (the quote, the shifts, the certificate cycles, the openings); the currency switch repaints every price; the plant clock works out the sales desk and every plant’s shift in New York time.
• 13–19 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: sliders, accordions, filters, search, forms.
• 20–23 — Coil To Sheet, Bend Stages, Throughput Bars, Meters & Rings, Output Chart. The scroll moments and the output chart.
• 24–34 — Quote Builder, Grid Sort, Careers Filters, Capability Rows, Contact Form, Stock Shop, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the quote builder, sorting, the careers filters, the capability rows, contact, the stock shop, 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 at their end.

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, the shop drawing 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, the quick contact on Home 01, the application 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 quote builder, newsletter, checkout, account, login, register and forgot-password forms 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: Mulish, Roboto

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embed 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.