Overview

A black-and-white editorial HTML template for a model and talent agency: the women’s and men’s boards and the new faces, model books, a casting shortlist, a casting request with a live estimate and a become-a-model application. Facetta ships three home pages, a light and a dark theme, right-to-left support, and logic that is worked out rather than typed in: the roster filtered by height, hair, eyes and city, sizes in centimetres or inches, rates in dollars, euros or pounds, the estimate by the job, the board, the days and the usage, the boards an applicant fits, the show weeks and the scouting tour from the date, and four offices each open or closed on its own clock.

• 3 home pages, each with its own scroll moment: the agency board (twelve digitals line up by division), the walk (a model walks down the runway toward the lens) and the height ruler (a rule slides up and stops at her height)
• 32 models on the board in 3 divisions, each with a 2:3 card, the hover ruler and the sizes
• The board’s filters: division, a two-thumb height range, hair, eyes, city, name search and order, with a live count
• Three model book layouts, a shortlist kept between visits, and a casting request that starts from it
• A live estimate: day rate by job and board, half days, travel days, the usage buyout by territory, term and media, the 20% agency fee, in three currencies
• A become-a-model application: age from the date of birth, a guardian under 18, the boards you fit as you type, four digitals with previews
• The show weeks and the scouting tour from the date, each office open now from its own time zone, the next open call
• A white studio theme and a dark theme on one switch in every header, remembered and applied before the page paints
• Right-to-left from the stylesheets through a flag language picker
• WebGL: Colour Gel at the edges of the black bands, the agency monogram in a slit-scan in the footer
• Contact Select preloader, Strip Cut reveals, word-rise titles, the hover ruler, Swiper sliders and Fancybox
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open facetta/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the filters, the shortlist, the estimate, the application and the clocks all work straight from the files.

2. Deploy to a server

Upload the contents of the facetta/ 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 models, bookers, offices, show weeks, the tour, the rates and the usage live in one place — see Agency 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 facetta/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

facetta/
├── *.html                              the 31 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
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (34 blocks)
    │   └── plugins/                    vendor scripts
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── bands/                       5 files
        ├── banner/                      6 files
        ├── bookers/                     6 files
        ├── books/                       10 files
        ├── campaigns/                   15 files
        ├── digitals/                    13 files
        ├── flags/                       6 files
        ├── hero/                        11 files
        ├── journal/                     7 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── models/                      32 files
        └── moments/                     2 files

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

White is the studio every page is set in; black carries the header, the footer, the strips, the rate cards and the photo bands; ink sets the headings and the buttons. Lipstick is the one colour: the short bar before every eyebrow, the hover ruler’s tick, the hearts and the focus ring. A title’s second line is set in the title grey. The three gels are light only — they colour the WebGL layer, never a control. --fc-bg, --fc-surface, --fc-band, --fc-heading and --fc-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: Mona Sans — headings, navigation and buttons in capitals at font-stretch: 75% (its condensed width), body text at the regular width — and Libre Baskerville in italic for the eyebrows, the quotes, the cities and the figures in the books. Swap them by editing the Google Fonts link and the --fc-ff-display / --fc-ff-body / --fc-ff-serif variables.

Logo

The logo is FACETTA in condensed capitals with a lipstick swipe behind the F. It ships as ready-made PNG files in assets/img/logo/:

• logo-light.png — white letters, for the black header, the footer and dark grounds
• logo.png — ink letters, for Home 2’s white header and the side menu
• logo-word.png — the word alone (the edge print on the preloader’s film)
• favicon.png — the browser tab icon

The footer’s monogram is drawn by the script with the same swipe, so it needs no file. To use your own logo, replace these files; the header sizes the logo by its height.

Light & Dark Mode

Facetta opens in the white studio, which needs no attribute. Every header (and the side menu) has a theme switch that turns the lights down. The choice is saved in the browser under the key facetta-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 black — sections with the class is-night (the header, the footer, the strips, the runway, the scouting tour) and the photo bands (fc-photo-band) are black in both themes.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Agency Logic

The figures on every page come from one data block, JS block 09 Facetta Data near the top of main.js (var FACETTA). Edit it once and the cards, filters, books, rates and estimates follow. Measurements are in centimetres and rates in US dollars (the switches convert); times are minutes after midnight in each office’s own time zone (570 = 9:30 am); weekdays run 0 = Sunday to 6 = Saturday.

Sizes and rates everywhere

Any element with data-cm is a measurement: data-u="h" reads as a height (177 cm or 5′10″), data-u="shoe" as a shoe (EU 39 or US 8.5 with data-sex="f"), any other as a length. Any element with data-usd is an amount in dollars. The switches in the top bar (and on the rates and the estimate) repaint them all and remember the choice.

The estimate

For each model: the job’s rate × the board’s multiplier × the days (half days at 60%), plus the usage buyout as a share of that fee (territory + term + each medium), plus travel days at 50% of the day rate; then the agency fee of 20% on the whole.

The boards an applicant fits

The show weeks and the tour

On a date inside a week the strip reads Now: … Day n Of m and the cards of the models who walk it are tagged; otherwise it names the next week and the days to it (on 22 October 2026: New York Fashion Week in 107 days). The scouting tour stops on the first Saturday of every month; the next six stops and a countdown to the next are worked out from the date.

The offices’ clocks

Open now, closed and the next open call are read in each office’s own time zone, so a visitor in Tokyo sees London as London is. The top bar shows the office nearest the visitor’s time zone.

The shortlist, the units and the currency are kept in the browser (localStorage). The casting request, the application, the newsletter and the account forms confirm on screen — connect them to your own systems.

WebGL Layers

Two small WebGL shaders draw the moving layers: Colour Gel — soft theatre gels in magenta, blue and amber drifting at the side edges of the black bands, adding where they cross — and the monogram — the footer’s swipe and F in a slit-scan, each row showing the mark a moment later than the row above. Each is one canvas:

<canvas class="fc-gl" data-gl="gel" aria-hidden="true"></canvas>

• Colours — the gels read --gl-1, --gl-2, --gl-3 and --gl-alpha from the canvas’s CSS.
• 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)

Facetta is RTL-ready: the layout, 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 stores the language and the direction (keys facetta-lang and facetta-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 34 numbered blocks (see the JS INDEX comment at the top of the file):

• 01 Preloader — Contact Select, once a session
• 02 Sticky Header — the header sticks after the hero
• 03 Offcanvas Menu — the side menu
• 04 Scroll Reveals — Strip Cut on photos, word rise on titles, soft rise on copy
• 05 Back To Top — the button
• 06 Anchor Scroll — smooth in-page links
• 07 Light & Dark Mode, Direction — the theme switch and the language picker
• 08 WebGL Layers — Colour Gel and the slit-scan monogram
• 09 Facetta Data — every figure
• 10 Agency Clock — offices open now, open calls, fashion month, the scouting tour
• 11 Custom Select — the styled selects
• 12 Units & Currency — cm / in and USD / EUR / GBP everywhere
• 13 Hero Sliders — the three heroes
• 14 Card Sliders — the rails
• 15 Accordion — FAQ and the home questions
• 16 Filter Tabs — the campaigns filter
• 17 Grid Search — the journal search
• 18 Newsletter — the coming-soon sign-up
• 19 Model Search — the header’s search over the roster
• 20 The Agency Board — Home 1’s scroll moment
• 21 The Walk — Home 2’s scroll moment
• 22 The Height Ruler — Home 3’s scroll moment
• 23 Roster Filters — division, height range, hair, eyes, city, name and order
• 24 Shortlist — the hearts, the header count and the shortlist page
• 25 Wizards & Casting Estimate — the step engine, the casting estimate and Home 2’s quick estimate
• 26 Become A Model — age, guardian, board fit and the digitals
• 27 Tabs & Book Slider — the division tabs, the book tabs and the big book slider
• 28 Card Rulers — the hover ruler’s tick
• 29 Contact Form — the AJAX form
• 30 Account Forms — login, register, reset
• 31 Article Tools — reading time and copy link
• 32 Demo Forms — forms that confirm on screen
• 33 Launch Countdown — coming soon
• 34 FAQ Search — the questions by topic

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: 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 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 casting request, the application, the booker’s message, the comment, newsletter, 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

$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 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>

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: Mona Sans, Libre Baskerville

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