Overview

An HTML template for a designer fashion house: collections shown twice a year, lookbooks, the runway film, stockists around the world and an atelier that cuts every piece again to order. Maisona opens dark, the way a runway does, and ships a paper light theme, right-to-left support, a euro / pound / dollar switch, and logic that is worked out rather than typed in: made-to-order prices and ready dates that skip the atelier’s closures; stockists open or closed in their own time zones; private appointments in each atelier’s own diary; a size finder; and a bag that takes a deposit today and the balance before dispatch.

What’s included

• 3 home pages, each with its own scroll moment: Season Shuffle (the collections as a deck, shuffled season by season), the Runway Film (the show scrubbed frame by frame) and the Archive Line-Up (every season’s signature look leaves a pile and settles under its year)
• Black by default and a paper light 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 light slits drifting through the dark bands, a spotlight that follows the pointer in the runway band, and the footer’s monogram woven row by row by a cellular automaton
• 22 seasons in the archive, two collections in store with 32 numbered looks, each look’s pieces with their prices and ready dates
• Made to order: 17 pieces in 12 cloths from the mills, sizes FR 34–46 with their Italian, British and American twins, lengths, a 50% deposit and a ready date counted in working days
• 12 stockists in 9 cities across 9 time zones, open now or not by their own clocks, with city tabs, filters, search and a map
• Private appointments in five kinds at three ateliers, each in its own time zone, with your own time shown beside theirs
• Bag, wishlist, coupon, five shipping zones, French VAT included in the EU and taken off for export, deposit today and balance before dispatch, checkout with an order number
• The studio, a profile, the journal, FAQ with search, account pages, coming soon, 404
• Spotlight Step preloader, Block Resolve photo reveals with a word rise on titles, the look number sliding in on hover, Swiper sliders and Fancybox popups
• Fully responsive, valid HTML5, no console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open maisona/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the clocks, the ready dates, the appointment diary, the size finder and the bag all work straight from the files.

2. Deploy to a server

Upload the contents of the maisona/ 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 seasons, the looks, the pieces, the cloths, the sizes, the stockists, the ateliers and the shop rules live in one place — see House 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 maisona/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

maisona/
├── *.html                              the 30 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 kind
        ├── faces/                       4 files
        ├── flags/                       6 files
        ├── logo/                        5 files
        ├── looks/                       33 files
        ├── menu/                        3 files
        ├── team/                        4 files
        └── wide/                        13 files

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

Black is the ground of every page, as on the runway; white sets the titles and the primary buttons. Bone is the one warm light — the spotlight, the light slits, the figures, the look numbers, the hover of every button. The dashed rule is the house’s device: round the icons and the social links, between the appointment columns, under the titles and under every text link. --mi-bg, --mi-panel, --mi-heading, --mi-text and --mi-accent are the semantic names the components use — the light theme swaps those (see Dark & Light Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Montserrat (titles in capitals, the menu, the labels and the copy) and Gloock (the house’s editorial voice: collection names, the display lines, the look numbers, figures and quotes). Swap them by editing the Google Fonts link and the --mi-ff-head / --mi-ff-body / --mi-ff-display variables.

Logo

The logo is MAISONA over a small PARIS in Gloock, with a fine slit of light cut down the middle of the M — the runway’s spotlight. It ships as ready-made PNG files in assets/img/logo/:

• logo-light.png — white lettering, for the black theme and the headers over photographs
• logo.png — ink lettering, for the paper light theme
• mark.png and figure.png — the slit M and the figure that steps into the preloader’s spotlight
• favicon.png — the slit M on a black 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. The footer’s woven monogram is drawn from the letter M in Gloock inside its canvas.

Dark & Light Mode

Maisona opens black: the dark theme is the default and needs no attribute. Every header (and the mobile menu) has a theme switch that turns the page to paper. The choice is saved in the browser under the key maisona-theme and applied by a one-line script in the <head> before the page paints. The switch sets data-theme="light" on the <html> tag.

• Tokens — the light values sit in one block, [data-theme="light"] { … }, right after :root in style.css. Change a light colour there.
• Canvases — the light slits read --gl-1 and --gl-alpha; the loom reads --loom-warp, --loom-weft and --loom-ground; the light block swaps them.
• Photo bands — the hero, the runway band and the photo bands stay dark in both themes, so the white copy on them always reads.
• Start light — to open the site on paper for first-time visitors, add data-theme="light" to the <html> tag of each page; the switch still works and is still remembered.

House Logic

The figures on every page come from one data block, JS block 09 Maisona Data near the top of main.js (var MAISONA). Edit it once and the seasons, looks, prices, dates, slots and totals follow. Prices are in euros with French VAT; the currency switch shows them in EUR 1, GBP 0.86, USD 1.09 (key maisona-currency), and prices written in the pages carry a data-eur attribute so the switch can repaint them. Times are minutes after midnight in each place’s own time zone (600 = 10:00 am); weekdays run 0 = Sunday to 6 = Saturday.

A made-to-order price and its date

The price is the piece in its first cloth, plus the cloth chosen, plus 15% when the pattern is re-cut to your measurements, to the nearest five euros. The lead time is the cloth’s weeks, the queue and the making weeks (a week more to measure), counted in working days from tomorrow and skipping the atelier’s closures.

How the bag totals

Prices include French VAT. Shipped within the EU it stays in; outside the EU it comes off the pieces and the local duties are paid on delivery. The deposit is 50% of the pieces, due today; the balance and the shipping are due before the pieces leave the atelier.

Open now, everywhere

Each stockist and atelier is read in its own time zone with the browser’s Intl clock: its weekday and time now, then open until its closing time, or when it opens next. Tokyo can be open while Paris sleeps; the homes count how many of the 12 are open at this moment.

Appointments

The wizard offers only the ateliers that hold the chosen appointment, then the days each opens in the next 28 days of its own calendar and the times that leave room for the whole appointment before closing. When the atelier keeps another clock than the visitor’s, the visitor’s own time is shown beside it. Continue never blocks; Confirm sends you back to whatever is missing and gives a reference, kept for the account page.

The size finder

The bag, the wishlist, the applied coupon, the appointments 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; to start empty, set the two demo lists in doShop() (block 31 Bag, Wishlist & Checkout) to []. Checkout and the appointment confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL & Motion

One small WebGL shader draws the light slits — slow vertical blades of light moving through the dark bands, brightest where the light comes in at the top. Each band is one canvas:

<canvas class="mi-gl" data-gl="slits" data-gl-seed="0.4" aria-hidden="true"></canvas>

• Variety — data-gl-seed (0 to 1) gives a band its own blades and pace.
• Colours — --gl-1 and the strength --gl-alpha; the theme switch repaints them.
• Performance — a band only runs while it is on screen and the tab is visible. Visitors who prefer reduced motion get one still frame. Without WebGL, the band’s own black shows.
• Remove one — delete the canvas; nothing else depends on it.

The runway spotlight (block 10) lights the dark runway band only: with a mouse the pool of light follows the pointer, easing behind it; elsewhere it rests where the band’s data-spot="x y" puts it (in per cent). The loom (block 20) sets the M in the house face inside its canvas, then weaves it row by row with an elementary cellular automaton, each row born from the one above, and moves on to the next rule when the letter is done. The three scroll moments (blocks 21–23) are scrubbed against their own section’s travel, none of them pins the page, and each shows its finished state for reduced motion.

RTL (Right To Left)

Maisona is RTL-ready: the layout with its paddings and margins, the side menu of Home 3, 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 maisona-lang and maisona-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

Prices, sizes, times and figures keep reading left to right inside their rows, and the woven monogram keeps the letter’s own direction.

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 Spotlight Step preloader, the header, the Block Resolve and word-rise reveals, the theme and direction switch and the WebGL light slits.
• 09–12 — Maisona Data, Runway Spotlight, Custom Select, Currency. Maisona Data holds every figure; the runway spotlight follows the pointer in the dark band; the euro / pound / dollar 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–23 — Monogram Loom, Season Shuffle, Runway Film, Archive Line-Up. The footer’s monogram woven by a cellular automaton (every page) and the scroll moments: the season shuffle (Home 1), the runway film frame by frame (Home 2) and the archive lined up by year (Home 3).
• 24–38 — Atelier Clock & Next Show, Stockists, Collection List, Private Appointments, Made To Order, Size Finder, Contact Form, Bag, Wishlist & Checkout, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, Tabs, FAQ Search. The feature pages: the atelier clock and the next show, the stockists in their own time zones, the collection list, private appointments, made to order with ready dates, the size finder, contact, the bag, accounts, the journal, demo forms, the countdown, FAQ, tabs.

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 preloader’s figure 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, appointment, checkout, comment, 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, Gloock

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.