Overview

A quiet, monochrome HTML template for a beauty and fashion photographer who works for clients: editorials for the magazines, campaigns for beauty and fashion houses, lookbooks and talent portraits. The pages put the photographs first — full-bleed sliders, mosaics, stories laid out three ways, a lightbox gallery, tear sheets as they were printed — and the logic is worked out rather than typed in: shoot types priced by the day or the half day, a quote that adds looks, retouching, rush delivery, the usage licence and the team, a booking enquiry on a live calendar, client proofing priced against what the shoot includes, and a currency switch.

What’s included

• 3 home pages, each with its own scroll moment: The Cover (a magazine cover builds round the portrait — the masthead drops in behind her head, cover lines, the barcode, trim marks), The Light Table (35 mm transparencies slide onto a light table and a loupe magnifies each one’s detail) and The Spread (a magazine opens across its gutter)
• 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 (euros, pounds, dollars) that repaints every price
• WebGL: a Moiré of two fine line screens at the edges of the page titles and night bands, and the logo’s swiped A pixel-sorting in and out in the footer
• 14 stories for 11 clients with type, client and year filters and search; three story layouts; a clients index; 12 tear sheets drawn as magazine pages
• Six shoot types, a rate card, a quote engine with saved quotes, a six-step booking enquiry on a live calendar, client proofing and a client area
• Lipstick Swipe preloader, Crop Out photo reveals from each photo’s own focal point, the dodge-brush hover, Swiper sliders and Fancybox
• About, team and profile, process, 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 Posea. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open posea/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the quote, the booking calendar, the filters and the proofing all work straight from the files.

2. Deploy to a server

Upload the contents of the posea/ 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 shoot types, the rates, the usage factors, the team, the calendar, the clients, the stories, the tear sheets and every photo’s focal point live in one place — see Rates, Quote & 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 posea/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

posea/
├── *.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 (34 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
        ├── cover/                       1 files
        ├── flags/                       6 files
        ├── icons/                       32 files
        ├── logo/                        4 files
        ├── mast/                        10 files
        ├── menu/                        3 files
        ├── photo/                       20 files
        ├── team/                        6 files
        └── work/                        79 files

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

The site is white and black, and the colour comes from the photographs. Ink is the headings, the square buttons and the coal bands; the powder band alternates with white. The lipstick is the one accent: coral for the large marks (the preloader’s stroke, the crop corners, the focus squares, the swipe under a title) and rouge for buttons on hover, prices in links and small text. --po-bg, --po-band, --po-surface, --po-heading and --po-text are the semantic names the components use — the dark theme swaps those (see Dark & Light Mode).

Fonts

Two Google Fonts are loaded in the head of each page: Dosis (headings, navigation, eyebrows, buttons and figures in thin, tracked capitals) and Castoro (the body and the grey italic lead under every title). Swap them by editing the Google Fonts link and the --po-ff-head / --po-ff-body variables.

Logo

The logo is POSEA in thin, tracked Dosis capitals whose A has a lipstick swipe for its crossbar. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink, for white bars
• logo-light.png — white, over photographs, on the coal bar, in the dark theme and the footer
• mark-light.png — the swiped A alone, white (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

Posea opens white. Every header (and the mobile menu) has a theme switch that turns the dark pages on. The choice is saved in the browser under the key posea-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 quick quote, the campaigns, the light table, the film, the retouching levels, the footer) are dark in both themes.
• Icons and mastheads — each line icon and masthead ships in an ink and a white version; the right one shows by theme and ground.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Rates, Quote & Booking

The figures on every page come from one data block, JS block 09 Posea Data near the top of main.js (var POSEA). Edit it once and the rate card, the shoot pages, the quote, the booking, the proofing and the client area follow. Prices are in euros (the currency switch converts them); times are minutes after midnight (540 = 9:00); weekdays run 0 = Sunday to 6 = Saturday.

The shoot types

How a quote adds up

The creative fee is the day rate times the days (or the half-day rate). Looks over what the shoot includes cost the shoot’s extra-look price; retouched images over what it includes cost the chosen level, and a finer level also upgrades the included images. Rush delivery adds 25% of the retouching. The usage licence is the creative fee times the media, territory and term factors (editorial use is always included). The team and the studio are added by the day or the half day; VAT goes on top; the deposit is 30% of the total.

The booking calendar and the live line

Each shoot day’s state comes from a seeded rule on the date, so every page and every visit agrees; the header’s live line says whether the studio is on set, open or closed and names the next free shoot day. Replace dayStatus() in block 10 with a call to your own calendar to show real bookings; the booking, the free-days strips and the live line all read from it.

Client proofing

The proofing gallery counts the client’s picks against the images their shoot includes (6 here) and prices every pick over that number at the chosen level, plus the level’s upgrade on the included picks: two picks over at Natural (€45 an image) cost €90; at High-End Beauty (€95) the two extra and the upgrade come to €490.

Saved quotes, booking enquiries and proofing picks are kept in the browser (localStorage) so they follow the visitor from page to page and show in the client area; the booking and the proofing confirm on screen with a reference — connect them to your own systems to take real enquiries. The quote engine is block 23.

WebGL & Motion

Two small WebGL shaders draw the moving layers: the Moiré — two fine line screens a few degrees apart, turning against each other so their interference throws soft fringes, held to the two edges of the page titles and night bands — and the monogram in the footer, the swiped A drawn on a canvas and pixel-sorted: rows of its brightest pixels run out into streaks and sort back into the crisp mark. Each is one canvas:

<canvas class="po-gl" data-gl="moire" aria-hidden="true"></canvas>

• Colours — each 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.
• 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.
• Remove one — delete the canvas; nothing else depends on it.

Reveals and hover

Add po-crop to a photo’s frame and it opens on a tight crop of its focal point, coral crop corners riding the edge, then widens to the full frame (block 04). po-words on a title makes its words rise from their own masks; po-fade lifts text into place; data-delay="0.2" staggers any of them. po-dodge on a photo frame gives it the dodge-brush hover: a soft circle of light brushes across the photo and lifts it a little.

RTL (Right To Left)

Posea 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) lists the languages that read left to right and right to left. Choosing Arabic stores the language and the direction (keys posea-lang and posea-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 34 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 Lipstick Swipe preloader, the header, the Crop Out reveals and word rise, the theme and direction switch and the WebGL layers.
• 09–10 — Posea Data, Studio Live. Posea Data holds every figure; Studio Live works out the booking calendar and the studio’s 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 Cover, The Light Table, The Spread. The three home pages’ scroll moments.
• 23–34 — Quote Engine, Booking Wizard, Work Filters, Client Proofing, Tab Sets, Contact Form, Account Forms, Client Area, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the quote engine, the booking wizard, the work and tear-sheet filters, client proofing, tabs, contact, 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, the line icons, the mastheads 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, proofing, 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: Dosis, Castoro

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.