Overview

A warm, well-dressed HTML template for a personal stylist and wardrobe consultant — a studio that sells styling time, not clothes. The pages keep a fashion editor’s eye (full-bleed portraits, photo mosaics, gold numerals, italic voices) and the logic is worked out rather than typed in: packages priced by the hour and by the stylist, a builder that adds the hours, the add-ons and travel, a style quiz that finds a profile and matches every card to it, colour analysis by the twelve seasons, a closet audit that prices the tailoring, a booking that reads each stylist’s diary and takes photos, and a currency switch.

What’s included

• 3 home pages, each with its own scroll moment: The Edit (a crowded rail of 24 pieces thins to the curated 10), Your Season (the palette round a portrait moves spring, summer, autumn, winter) and Keep, Tailor, Donate (each piece’s swing tag turns to its verdict)
• A white theme by default and a dark theme on one switch, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker; a currency switch (dollars, pounds, euros) that repaints every price
• 6 packages with hours and prices, a package builder with saved estimates, a five-question style quiz with 6 profiles and a style-match ring on every lookbook, package and stylist card
• Colour analysis: 12 seasons with palettes, neutrals and metals, and a four-question season finder
• A closet audit, a six-step booking with each stylist’s diary and photo upload, 12 client lookbooks with filters and three single layouts, a client area
• Colour Fan preloader, Page Turn-In photo reveals, Swatch Rain and a turning colour wheel in WebGL, Swiper sliders and Fancybox
• About me, stylists and a stylist profile, how it works, journal, FAQ with search, contact with a map and the PHP form, account pages, coming soon with a countdown, 404
• Fully responsive from 390 px to wide screens

Getting Started

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

1. Open locally

Unzip the downloaded package and open closetta/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the package builder, the quiz, the season finder, the closet audit, the booking diary and the filters all work straight from the files.

2. Deploy to a server

Upload the contents of the closetta/ 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 packages, the stylists, the quiz, the seasons, the pieces, the alterations, the lookbooks and the studio hours live in one place — see Packages, Quiz & Booking.

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 closetta/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

closetta/
├── *.html                              the 30 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
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (37 blocks)
    │   └── plugins/                    jQuery, Bootstrap, GSAP, ScrollTrigger, Swiper, Fancybox
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── band/                        9 files
        ├── blog/                        7 files
        ├── client/                      8 files
        ├── flags/                       6 files
        ├── hero/                        6 files
        ├── logo/                        5 files
        ├── look/                        30 files
        ├── menu/                        3 files
        ├── photo/                       17 files
        ├── piece/                       32 files
        ├── strip/                       8 files
        └── team/                        6 files

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

The site is white with warm ink, a powder band between the white sections, and the colour comes from the photographs. Ink is the headings, the pill buttons, the testimonial band and the footer. Gold draws the big italic numerals, the title rules’ accents, the hanger hook in the logo and the italic words laid over photographs; --cs-gold-text is the deeper gold for small text on white. Rouge marks the style-match ring, the picked quiz answer and the small flags. --cs-bg, --cs-band, --cs-surface, --cs-heading and --cs-text are the semantic names the components use — the dark theme swaps those (see Dark & Light Mode). The twelve season palettes are content, kept in the data block.

Fonts

Two Google Fonts are loaded in the head of each page: Montserrat (the 800 capitals of the big titles, the headings, the body, the buttons and the figures) and Playfair Display (the italic eyebrows, the italic line under each title, the gold numerals and the quotes). Swap them by editing the Google Fonts link and the --cs-ff-head / --cs-ff-body / --cs-ff-accent variables.

Logo

The logo is CLOSETTA in geometric capitals whose O hangs from a gold hanger hook. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink with a deep gold hook, for white bars
• logo-light.png — white with a gold hook, in the dark theme and the footer
• mark-light.png — the hooked O alone, white (the preloader’s ink blade)
• seal.png — the hooked O on an ink squircle (the account, coming-soon and error pages)
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its height.

Dark & Light Mode

Closetta opens white. Every header (and the mobile menu) has a theme switch that turns the evening studio on. The choice is saved in the browser under the key closetta-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 in style.css.
• Bands that stay dark — sections with the class is-night (the quiz band, the tailor band, the stylist rates, the footer) are dark in both themes; photo bands carry their own ink wash.
• Product shots — pieces photographed on white sit on a light plate in both themes.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Packages, Quiz & Booking

The figures on every page come from one data block, JS block 09 Closetta Data near the top of main.js (var CLOSETTA). Edit it once and the packages, the builder, the quiz, the seasons, the audit, the booking, the lookbooks and the client area follow. Prices are in US dollars (the currency switch converts them); times are minutes after midnight (600 = 10:00); weekdays run 0 = Sunday to 6 = Saturday.

The packages

How a session adds up

The package price covers its included hours; every hour more or less moves it by the package’s hourly rate. The stylist level multiplies that (stylist ×1, senior stylist ×1.2, founder ×1.5). Add-ons are flat. Home visits beyond 5 miles cost $2.50 a mile there and back for each visit the package takes; the deposit is 30% of the total and the balance is paid after the session.

The style quiz and the style-match ring

Each answer adds its weights to the profiles; the strongest is the visitor’s profile, the next the runner-up, and the result shows each profile’s share. It is saved in the browser (closetta-profile); every card with a .cs-match ring then fills to its match: the cosine between the visitor’s scores and the card’s styles (its main style 1, its second 0.6), shown from 40% to 100%.

The season finder

Two answers read the undertone, one the depth and one the chroma; the strongest of the three names the season — a light, deep, bright or soft season on the warm or cool side, or the true season of that side when the undertone leads. The result is saved (closetta-season) and named in the footer’s colour wheel.

The diary, booking and the client area

Each stylist works on their own days; a seeded rule places their bookings, so every page and every visit agrees. The booking offers only the start times long enough for the chosen session, at the chosen stylist’s level, and takes three photos (dropped or chosen on the frames, never uploaded until you connect a server). Bookings, estimates, the profile, the season and the audit are kept in the browser (localStorage) and shown in the client area — connect them to your own systems to take real bookings. Replace diaryOf() in block 10 with a call to your own calendar. The package engine is block 23.

WebGL & Motion

A small WebGL shader draws Swatch Rain: small fabric swatches with pinked edges, a twill on each, drifting slowly down through the page titles and the night bands in two depths. It is one canvas:

<canvas class="cs-gl" data-gl="swatch" aria-hidden="true"></canvas>

• Colours — the layer reads its colours and strength from CSS variables on its canvas or section: --gl-1, --gl-2 and --gl-alpha. The theme switch repaints them.
• The footer’s colour wheel — a second shader (data-gl="wheel"): twelve seasonal wedges, light at the hub and deep at the rim, the hue running round it, gold hairlines between, turning slowly.
• Performance — each layer only runs while it is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame.
• Remove one — delete the canvas; nothing else depends on it.

Reveals and hover

Add cs-turn to a photo’s frame and it turns in from the right like a lookbook page, hinged on its left edge, while a page shade lifts off it (block 04). cs-words on a title makes its words rise from their own masks; cs-fade lifts text into place; data-delay="0.2" staggers any of them. A card with has-match and a .cs-match ring fills the ring on hover.

RTL (Right To Left)

Closetta is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror, while the colour wheel and the swatch ring keep their own left and right. Right to left comes from the stylesheets, not from separate pages: the language picker (a flag and a code) lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys closetta-lang and closetta-dir) and reloads; the script in <head> then sets dir="rtl" and swaps the three stylesheets for the files named in their data-rtl attribute. 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 37 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 Colour Fan preloader, the header, the Page Turn-In reveals and word rise, the theme and direction switch and the WebGL layers.
• 09–10 — Closetta Data, Studio Live & The Diaries. Closetta Data holds every figure; Studio Live works out the stylists’ diaries and the live line from the visitor’s own date and time.
• 11–19 — Custom Select, Currency, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, the currency switch, sliders, accordions, filters, search, forms.
• 20–22 — The Edit, Your Season, Keep, Tailor, Donate. The three home pages’ scroll moments.
• 23–37 — Package Builder, Booking Wizard, Work Filters, Style Quiz, Tab Sets, Colour Analysis, Closet Audit, Contact Form, Style Match, Account Forms, Client Area, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the package builder, the booking wizard, the lookbook filters, the style quiz, tabs, colour analysis, the closet audit, contact, the style-match ring, 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.

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 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, booking, quiz, 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: Montserrat, Playfair Display

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.