Overview

A fast, precise HTML template for auto parts shops. Torqua ships three home pages, a light and a dark theme, right-to-left support, and parts logic that is worked out rather than typed in: a vehicle selector that narrows the catalogue step by step, fitment on every part for the visitor’s saved car, OE number search, fitting at a partner garage priced from its labour rate, same-day dispatch on the clock, and a full shop with deals, bundles, a coupon, delivery and tax.

What’s included

• 3 home pages, each with its own scroll moment: the brake assembly that slides together, the selector that cascades while the parts count narrows, and a turbo wheel that spins with the scroll
• Vehicle selector (make, model, year, engine) in the header bands, the hero panel, the parts finder, the shop and My Garage
• Fitment rules per part (make, model, years, engine codes, fuel, wheel bolt pattern) — a green tick on every card that fits the active car
• OE and part-number search that ignores spaces, dots and dashes, with the vehicles each match fits
• My Garage: saved vehicles, one active, remembered between visits
• Fitting booking in four steps at partner garages: the job’s hours times the garage’s rate, open days, start times that leave the whole job before closing
• Partner garages with open now, hours and filters; a dispatch clock counting down to the day’s cut-off
• Shop engine: cart with fit per line, wishlist, compare (three parts), deals with countdowns, bundles, coupon, free delivery threshold, tax, order number; order tracking and returns
• Light and dark mode on one switch, remembered and applied before the page paints; right-to-left from the stylesheets through a flag language picker
• WebGL hex-bolt layers and an involute gear train in the footer, tinted by the theme colours
• Spark Gap preloader, Bolt In reveals, Swiper sliders and Fancybox video popups
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open torqua/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the selector, fitment, garage, fitting booking and shop all work straight from the files.

2. Deploy to a server

Upload the contents of the torqua/ 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. Vehicles, parts, fitment rules, prices, garages and shop rules live in one place — see Fitment & Shop 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 torqua/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

torqua/
├── *.html                              the 32 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the contact form
└── 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 (40 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
        ├── blog/                        13 files
        ├── cutout/                      4 files
        ├── flags/                       6 files
        ├── icons/                       42 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── rig/                         6 files
        ├── shop/                        37 files
        └── team/                        8 files

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

Red is the one colour: the header’s logo block, every button, the badges, the promise strip and one band a page. Red Text is its partner for small text on light grounds; Fit Green appears only where a part fits the active vehicle. Ink carries the headings, the bars and the night bands; white cells ruled by the hairline hold the parts, smoke grounds the bands. --tq-bg, --tq-surface, --tq-heading and --tq-text are the semantic names the components use — the dark theme swaps those.

Fonts

Two Google Fonts are loaded in the head of each page: Archivo (headings in tight capitals, body, navigation and buttons) and Familjen Grotesk (the parts-catalogue voice: prices, OE and part numbers, specs, counts and order numbers). Swap them by editing the Google Fonts link and the --tq-ff-body / --tq-ff-num variables.

Logo

The logo is the name TORQUA in heavy capitals, its Q turned into a torque arrow. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the footer
• logo-light.png — for dark grounds: dark mode, coming soon and 404
• logo-white.png — all white, for the header’s red block, the menu and the preloader
• favicon.png — the browser tab icon

Light & Dark Mode

The top bar (and the mobile menu) has a theme switch. The choice is saved in the browser under the key torqua-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="dark" on the <html> tag.

• Tokens — the dark values sit in one block, [data-theme="dark"] { … }, right after :root.
• Bands that stay dark — sections with is-night (the hero sliders, the cascade, the turbo band) and every tq-photo-band are dark in both themes.
• Packshots — parts photos sit on --tq-product, white in both themes, so the photos need no dark versions.
• Illustrated icons — each icon ships in an ink and a light version; the right one shows by theme and ground.

Fitment & Shop Logic

The figures on every page come from one data block, JS block 09 Torqua Data near the top of main.js (var TORQUA). Edit it once and the cards, counts, prices and totals follow. Prices are in US dollars, times in minutes after midnight.

How the selector narrows

Each step offers only what exists for the step before it, with the parts that fit beside each option. A half-chosen vehicle fits a part when any vehicle it could still become fits it.

How the cart totals

Deal prices are already the prices on the cards: the front brake kit shows $415.65, 15% off $489, until the deal ends. The cart, wishlist, compare list, coupon and garage are kept in the browser (localStorage); the first visit starts with a demo cart, wishlist, compare list and vehicle so every page has something to show — set the demo lists in doShop() (block 26 Shop Engine) and the demo vehicle in doGarage() to empty to start blank.

Fitting

Checkout, fitting, returns and the account forms confirm on screen — connect them to your own systems to take real orders and bookings.

WebGL & The Gear Train

One WebGL shader draws the hex bolts: a field of bolt heads on washers, each turning slowly, kept to the left and right edges of a band (the vehicle band, the shop-by-make band, the cascade and turbo bands, page-title banners, coming soon and 404). Each is one canvas:

<canvas class="tq-gl" data-gl="bolts" aria-hidden="true"></canvas>

• Colours — the layer reads its ground, metal and red from --gl-1, --gl-2, --gl-3 and --gl-alpha; the theme switch repaints it.
• The footer’s gear train — three spur gears with true involute teeth (20° pressure angle), each turning at the speed its tooth count gives and phased so its gaps meet the other gear’s teeth. Colours come from --gear-1, --gear-2 and --gear-3 on .tq-gears.
• Performance — layers run only while on screen and the tab is visible; reduced motion gets one still frame.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Torqua is RTL-ready: the layout, the sliders and the animations mirror. Right to left comes from the stylesheets, not from separate pages: the language picker in the top bar lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys torqua-lang and torqua-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

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

2. Swap Three Stylesheets

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 40 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 Spark Gap preloader, the header, the Bolt In reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Torqua Data, Fitment Engine & My Garage. Torqua Data holds every figure; the Fitment Engine matches parts to vehicles and keeps My Garage.
• 11–20 — Custom Select, Counters & Rings, Hero Sliders, Card Sliders, Accordion & Tabs, Filter Tabs, Grid Search, Newsletter, Vehicle Selector, Dispatch Clock. Shared components: selects, counters, sliders, tabs, filters, search, the newsletter, the vehicle selector and the dispatch clock.
• 21–24 — Gear Train, Brake Assembly Moment, Selector Cascade Moment, Turbo Moment. The footer’s gear train and the three home pages’ scroll moments.
• 25–40 — Contact Form, Shop Engine, Account Forms, Article Tools, Demo Forms, Launch Countdown, Partner Garages, Parts Finder, OE Number Search, My Garage Page, Deals Countdown, Fitting Booking, Track Your Order, Returns, Account Dashboard, FAQ Search. The feature pages: contact, the shop engine, accounts, articles, demo forms, the countdown, garages, the parts finder, OE search, My Garage, deals, fitting, tracking, returns, the account dashboard and FAQ.

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

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 drawn parts, the menu previews 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 posts to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, comment, checkout, fitting, returns, account and sign-in 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

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support. 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 built into the handler and stays dormant until the form submits a token. 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: Archivo, Familjen Grotesk

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 popup.

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.