Overview

A night-black, orange-edged HTML template for a performance and EV specialist: paint and wraps, protection film, tuning, EV service and detailing under one roof. Revolta 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 wrap and film quote from the car’s size, the film and the coverage, tuning stages with their power and torque gains for every model, an EV battery health estimate and a battery check booked into the EV bay’s free lifts, detailing priced by size, care plans monthly or yearly, and a shop of upgrades supplied or supplied and fitted.

What’s included

• 3 home pages, each with its own scroll moment: Performance & EV (one coupe takes six films in turn, each laid from the nose back as you scroll), Tuning & Dyno (the dyno bars climb from stock to stage 1, 2 and 3) and EV & Detailing Studio (the headlights flicker on, then the beam blazes up)
• A light theme by default with night bands, 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 — Track Lines, racing-line chevrons sliding along the edges of the night bands and page titles, and the footer’s V mark gliding through the studio band with a trail of echoes — tinted by the theme colours
• The wrap and paint-protection quote: 5 car sizes, 7 films, 6 coverages and extras → the price line by line, the days in the bay, the warranty, the deposit and a reference, with the coupe on the preview taking the chosen film
• The film library: 16 colours by finish and family, with search, each one handed to the quote
• Tuning stages for 8 models: stock and stage 1, 2 and 3 power and torque, the gains, power to weight, the days and what each stage fits, with a stage table and the next dyno day counting down
• EV battery health: the car, its age, miles, fast charging, climate and charge limit → state of health, usable kWh and range today; a five-step battery check booking with the EV bay’s free starts
• Detailing priced by size with a builder (package, add-ons, the hours and the ready day); four care plans monthly or yearly with what a plan saves
• The upgrades shop: categories, price filter, sort and search, the product page, supply or supply & fit, cart with a code, shipping and tax, checkout with an order number, wishlist
• The studio clock in every header (open now, or when it opens), today marked in every hours list and this week’s load in each bay
• Wrap Peel preloader, Spray Pass reveals (two spray-gun passes uncover each photo), word-rise titles and the wrap swatch on hover
• Builds with filters, the crew, a crew profile, the journal with post formats, FAQ with search, My Garage and the login pages, coming soon, 404
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open revolta/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the studio clock, the quote, the tuning stages, the battery estimate, the booking wizard, the plans and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the revolta/ 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 hours, films, coverages, models, batteries, packages, plans and shop rules live in one place — see Studio 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 revolta/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

revolta/
├── *.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 (38 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/                      14 files
        ├── cars/                        12 files
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── lamp/                        3 files
        ├── logo/                        3 files
        ├── menu/                        3 files
        ├── parts/                       6 files
        ├── shop/                        15 files
        ├── team/                        5 files
        ├── work/                        13 files
        └── wrap/                        3 files

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

Night, coal, band and panel are the dark grounds — the heroes, the scroll moments, the footer and the cards on them; steel is the face of the buttons, with an orange edge. White and title grey carry the light pages. Orange is the one accent: the bars, the ticks, the corner squares, the menu’s top bar and the orange band; orange ink is the same orange made dark enough for small text on white. --rv-bg, --rv-surface, --rv-grey, --rv-heading and --rv-text are the semantic names the components use — the dark theme swaps those (see Light & Dark Mode). The 16 wrap colours are content, not grounds: each is a w- class (for example w-volt-orange) that sets --rv-wrap for its chip and its hover.

Fonts

Two Google Fonts are loaded in the head of each page: Oxanium (headings, labels, the navigation and the buttons, in capitals) and Sarabun (body text and figures). Swap them by editing the Google Fonts link and the --rv-ff-display / --rv-ff-body variables.

Logo

The logo is REVOLTA in wide capitals with the V as the mark: an orange chevron with a lightning cut through its left arm. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white header and the light pages
• logo-light.png — for dark grounds: the header over the heroes, the footer and the dark theme
• favicon.png — the browser tab icon

The preloader and the footer’s echo draw the V from its own paths in code (block 01 Preloader and block 08 WebGL Layers), so they need no image. 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

Revolta opens light: the white pages are the default and need no attribute, with night bands for the heroes and the scroll moments. Every header (and the mobile menu) has a theme switch that turns the whole site dark. The choice is saved in the browser under the key revolta-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 (the heroes, the wrap moment, the dyno chart, the headlights, the footer) are night in both themes; is-coal is the coal band and is-orange the orange band.
• 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.

Studio Logic

The figures on every page come from one data block, JS block 09 Revolta Data near the top of main.js (var REVOLTA), and one set of rules, block 12 Studio Engines. Edit the data once and the hours, prices, gains, ranges and totals follow. Prices are in US dollars, power in hp, torque in lb-ft and range in miles; times are minutes after midnight (1080 = 6:00 pm); weekdays run 0 = Sunday to 6 = Saturday.

Open now

Every element with data-open-status shows Open now, until 6 pm, Opens today at 8 am or Closed now, opens Monday at 8 am, from the visitor’s own clock. Hours lists marked data-hours-table mark today’s row; data-ev-next shows the EV bay’s next free start and data-dyno-next the next dyno day.

How a wrap or film quote totals

The film’s full-body price × the coverage’s share × the size factor, plus the extras, rounded to $10. The days are the film’s days × the coverage’s plus the extras’, the deposit is 20% of the total and the warranty is the film’s.

Tuning stages

Every model carries its stock figures and three stages; the cards show the gains over stock and power to weight in hp a US ton (2,000 lb).

The battery estimate

Calendar fade (quicker in the first years, then steady), the miles, the share of DC fast charging, the climate and the charge limit each take their part of the pack’s health; the result is shown with a ±1.5-point band, the usable kWh and the range today, and the margin over the health the battery warranty keeps.

Battery checks in the EV bay

The wizard offers a start every 30 minutes that leaves a lift free for the whole check; taken lifts are seeded from the date, so every visitor sees the same picture, and closed days are off. Continue never blocks — only the last step checks the details — and the booking gets a code and is kept in My Garage.

Detailing and care plans

How the shop totals

Every upgrade can be supplied, or supplied and fitted at the studio: fitting is its hours on the lift × the labour rate. The code comes off the parts, tax is on the parts after the code, fitting is labour (not taxed and never shipped), and only supplied parts ship.

The cart, the wishlist, the code, the saved quotes, the battery-check bookings and an unfinished booking are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo cart and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 32 Upgrades Shop) to []. Quotes, bookings, plans and checkout confirm on screen with a reference — connect them to your own systems to take real bookings and payments.

WebGL Layers

Two small WebGL scenes draw the moving layers: Track Lines — racing-line chevrons sliding along two gently curving lines at the top and bottom edges of the night bands and page titles, one run each way, every few an orange one, the copy in the middle left clear — and the Echo Mark — the V mark gliding through the footer’s studio band, leaving a trail of echoes, each older, paler and cooler than the last. Each is one canvas:

<canvas class="rv-gl" data-gl="track" 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)

Revolta 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) beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys revolta-lang and revolta-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, the dyno chart and the cars 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 38 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 Wrap Peel preloader, the header, the Spray Pass reveals, the theme and direction switch and the WebGL layers.
• 09–12 — Revolta Data, Studio Clock, Custom Select, Studio Engines. Revolta Data holds every figure; Studio Clock works out open now, today in the hours lists, the EV bay’s next free start, the next dyno day and this week’s load in every bay; Studio Engines is the arithmetic every page shares (the film quote, detailing, the tuning stages and the battery estimate).
• 13–20 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards, Service Words. Shared components: sliders, accordions, filters, search, the newsletter, choice cards and the service words.
• 21–23 — Wrap Moment, Dyno Bars & Stage Finder, Headlights. The three home pages’ scroll moments.
• 24–38 — Wrap Quote, Film Library, Dyno Day Countdown, Battery Estimator, Battery Check Wizard, Detailing & Battery Ring, Care Plans, Contact Form, Upgrades Shop, Account Forms, My Garage, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the wrap quote, the film library, the dyno-day countdown, the battery estimate and the booking wizard, detailing, care plans, contact, the upgrades shop, accounts and My Garage, the journal, 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 three scroll moments draw on layers: img/wrap/ holds the stage, the car’s paintwork (a grey shading of the body on transparency, which the film colour is multiplied into) and its highlights; img/lamp/ holds the car at night and its running-light and beam glows on transparency. Cut your own from one photograph each, at the same size, so the layers stay in register.

The logo files and the language flags are included and ready to use. All demo photography shown on the live preview, the car layers and the cut-out parts among it, 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 quote, the battery-check booking, the plans, the newsletter, 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: Oxanium, Sarabun

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.