Overview

An HTML template for a friendly vintage and pre-loved clothing store that also takes consignments: one-of-a-kind pieces from the sixties to the noughties, graded honestly and measured by hand. Relova ships three home pages, a light and a dark theme, right-to-left support, a pound / dollar / euro switch, and logic that is worked out rather than typed in: every piece exists once, so a piece in the bag is held for 20 minutes and a sold piece drops off every rail; the rail filters by era and condition grade; a consignment payout estimate by category, label tier, grade and age; a five-step consign form; an alterations menu with ready dates; events on repeat rules; a size finder; the weekly rail drop with a live countdown; and a consignor account with markdowns and payouts.

What’s included

• 3 home pages, each with its own scroll moment: Label Sew (the shop’s woven label drops into a coat’s neck and is sewn on stitch by stitch), Payout Gauge (one coat’s payout climbs as its grade rises from C to A+) and Patchwork Jacket (twelve offcuts fly in and are top-stitched into a jacket)
• 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 seventies waves along the bands, the page titles and the footer, and a vinyl record with procedural grooves spinning in the footer
• The rail: 14 one-of-a-kind pieces (and 3 already sold) in 6 categories with era (60s, 70s, 80s, 90s, 00s), year, grade, size, colour, measurements, fabric, label and flaw; filters, sort and search
• One of one: a piece goes in the bag once and is held for 20 minutes, counted down; checkout marks it sold and it drops off every grid, rail and card
• Consignment: 8 categories, 4 label tiers and 4 grades; a price range, your share or 20% more as store credit, a five-step form and a consignor account
• The workroom: 12 alterations and repairs with prices and working days, express, the ready date; a piece can be fitted before it ships
• Events on monthly and weekly rules with places left; a size finder that reads every piece’s measurements; the weekly rail drop with its countdown
• The lookbook, the team, the journal, FAQ with search, account pages, coming soon, 404
• Rail Flick preloader, Patch Pin card reveals, word-by-word titles, an embroidered patch on hover, Swiper sliders and Fancybox video popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open relova/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the shop clock, the holds, the filters, the payout estimate, the consign form, the alterations, the events and the bag all work straight from the files.

2. Deploy to a server

Upload the contents of the relova/ 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, the eras, the grades, the pieces, the consignment rates, the workroom menu, the events, the team and the shop rules live in one place — see 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 relova/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

relova/
├── *.html                              the 31 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 (35 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
        ├── art/                         2 files
        ├── banner/                      7 files
        ├── blog/                        5 files
        ├── era/                         5 files
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── hero/                        3 files
        ├── icons/                       26 files
        ├── logo/                        4 files
        ├── look/                        17 files
        ├── menu/                        3 files
        ├── patch/                       6 files
        ├── rail/                        8 files
        ├── shop/                        20 files
        └── team/                        6 files

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

A warm off-white is the ground and umber sets the type, the top bar and the footer. Burnt orange is the one accent — the buttons, the accent word in every title, the links (in the darker --rl-accent-text for small text) — and with mustard and clay it makes the seventies triad the waves are striped in. Kraft is the swing tags; teal and the other era tints mark the decades on the cards. --rl-bg, --rl-surface, --rl-panel, --rl-heading and --rl-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: Epilogue (every heading, with its italic for the accent word, the buttons, the prices and the small labels in tracked capitals) and Rethink Sans (body text and the menu). Swap them by editing the Google Fonts link and the --rl-ff-head / --rl-ff-body variables.

Logo

The logo is the word relova in Epilogue, its o a burnt-orange four-hole button sewn on with a cross of thread. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — umber lettering, for light grounds (every header in the light theme, the mobile menu)
• logo-light.png — ivory lettering, for the headers over photographs, the footer and the dark theme
• tag.png — a kraft swing tag with the logo, the one the preloader’s rail stops on
• favicon.png — the button on an umber square, 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

Relova opens light: the light theme is the default and needs no attribute. Every header (and the mobile menu) has a theme switch that turns the lights down. The choice is saved in the browser under the key relova-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees the light page first. 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.
• Canvases — the label, the gauge and the patchwork read their inks from the theme tokens and repaint on the switch; the waves read --gl-1 to --gl-3.
• Logo and icons — the light logo shows on photographs and in the dark theme; each illustrated icon ships in an umber and a light version and the right one shows by theme.
• 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.

Shop Logic

The figures on every page come from one data block, JS block 09 Relova Data near the top of main.js (var RELOVA). Edit it once and the cards, prices, estimates, dates and totals follow. Prices are in pounds sterling with VAT included; the currency switch shows them in GBP 1, USD 1.27, EUR 1.17 (key relova-currency), and prices written in the pages carry a data-gbp attribute so the switch can repaint them. Times are minutes after midnight (660 = 11:00 am); weekdays run 0 = Sunday to 6 = Saturday.

One of one

There are no quantities. A piece in the bag is held for 20 minutes from the moment it went in, counted down on its line; when the hold runs out the line says so and offers to hold it again. At checkout the pieces are marked sold (key relova-sold-v1) and drop off every grid, rail and card on the site; a bag lets a sold piece go, and the wishlist marks it sold with a link to more of its decade. A piece can be fitted with an alteration on its product page: the price is added to the line and the dispatch date waits for the workroom.

The consignment estimate

A piece’s resale price is its category’s base value × its label tier × its grade × its era factor, to the nearest five pounds, shown as a range 15% either side. The consignor keeps the tier’s share of the sale, or 20% more as store credit; a piece that would sell under £20 is declined, and the estimate says why.

The payout gauge on Home 2 runs one piece through the same sum at every grade (its data-gauge-cat, -tier and -era attributes name it): a designer coat from the 1960s–1990s pays C £93, B £138, A £183, A+ £231.

On the rail

The consignor account prices each piece with the same sum and says where it stands: on the rail (day n of 90), marked down 20% from day 45, back to collect after day 90, sold with its payout due 14 days later, or paid.

The workroom

Jobs on one piece run one after another: the longest sets the pace and every further job adds a day. Express costs half as much again and halves the days. The ready date counts the workroom’s working days from the drop-off day; it is shut on Sundays and Mondays.

Events

Each event runs on its rule and the next dates come from the visitor’s own date; one that has finished today moves on to the next. Places taken are seeded from the event and the date, so every visitor sees the same list.

How the shop totals

Prices include VAT: the bag shows the VAT inside the total, not on top of it. The coupon comes off the goods before the free-shipping check.

The bag with its holds, the wishlist, the sold pieces, the applied coupon, the consignments and the orders are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 29 One-Of-A-Kind Shop) to []. Checkout and the consign form confirm on screen with a reference — connect them to your own systems to take real orders and consignments.

WebGL & Moments

One small WebGL shader draws the seventies waves — stacked stripes of orange, mustard and clay rippling along a band’s edge like a seventies poster, with the page’s ground showing between them. Each layer is one canvas:

<canvas class="rl-gl is-top" data-gl="waves" data-gl-edge="top" data-gl-reach="1" data-gl-bands="5" aria-hidden="true"></canvas>

• Place — data-gl-edge sets the edge the waves rise from (top or bottom), data-gl-bands how many stripes, and data-gl-reach how far into the band they reach; the stack thins out as it leaves its edge, so it never sits under the copy.
• Colours — --gl-1, --gl-2, --gl-3 and the strength --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.

The footer’s vinyl record is a second shader (canvas[data-vinyl], block 10): fine grooves with the gaps between tracks, a highlight that stays put while the disc turns, and the orange label with the logo’s four holes. It speeds up to 33⅓ while the pointer is over it. The scroll moments are drawn on plain 2D canvases (data-sew, data-gauge, data-patchwork, blocks 20–22); the patchwork’s fabrics are drawn in code, their colours follow the theme tokens, and they rest in their finished state for reduced motion.

RTL (Right To Left)

Relova 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 relova-lang and relova-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, times, measurements and figures keep reading left to right inside their rows.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 35 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 Rail Flick preloader, the header, the Patch Pin and word-rise reveals, the theme and direction switch and the WebGL seventies waves.
• 09–12 — Relova Data, Vinyl Record, Custom Select, Currency. Relova Data holds every figure; the vinyl record spins in the footer; the pound / dollar / euro switch repaints every price.
• 13–19 — Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: sliders, accordions, filters, search, the newsletter, choice cards.
• 20–22 — Label Sew (Home 1), Payout Gauge (Home 2), Patchwork Jacket (Home 3). The scroll moments: the woven label sewn into a coat (Home 1), the payout gauge (Home 2) and the patchwork jacket (Home 3).
• 23–35 — Shop Clock, Consignment, Alterations, Events, Size Finder, Contact Form, One-Of-A-Kind Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: open now, the consignment desk and the rail-drop countdown from the clock, the consignment estimate and form, the alterations menu, events, the size finder, contact, the one-of-a-kind shop, accounts, the journal, demo forms, the countdown, 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 drawn garments, patches, label and lining, 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, consign, alterations, events, 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: Epilogue, Rethink Sans

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.