Overview

A clean, colour-led HTML template for a commercial photographer who shoots for brands: e-commerce packshots, styled still life on built sets, lifestyle with models and campaign key visuals, in a studio or on location. The pages put the products first — full-bleed colour-field sliders, shadowed project tiles, fanned composites, a lightbox library, three project layouts — and the logic is worked out rather than typed in: a quote by the final image with set builds, a usage licence for web, print and outdoor, retouching, colourways, location and crew; packages that open the quote; a catalogue calculator by the SKU; a studio or location booking on a live calendar; a licence extension; and a currency switch.

What’s included

• 3 home pages, each with its own scroll moment: The Usage Meter (one campaign image moves from a phone to a magazine page to a billboard as the licence widens), Retouch Before / After (the raw frame under a wipe, the retouch steps ticking) and Six Colourways (one bag fills a grid in six colours)
• A light 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: Colour Fields — flat set-paper planes sliding past each other at the edges of the page titles and bands — and the brand mark as extruded 3D type turning in the footer
• 15 projects for 14 brands with shoot-type, brand, industry and year filters and search; three project layouts; Brands A–Z and a brand page; an image library
• Four shoot types, a quote builder with saved quotes, four packages, a usage & licensing page with an extension calculator, a six-step booking on a live calendar and a client area
• Turntable preloader, Grid Snap reveals that deal cards along the column grid, the thirds-grid hover, Swiper sliders and Fancybox
• About, the studio and locations, 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 Captura. Follow the steps below to get your site live.

1. Open locally

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

2. Deploy to a server

Upload the contents of the captura/ 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 and their rates, the set builds, the usage tiers, the retouching, the packages, the calendar, the brands, the projects and the team live in one place — see Quote, Usage & 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 captura/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

captura/
├── *.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
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (37 blocks)
    │   └── plugins/                    jQuery, Bootstrap, GSAP, ScrollTrigger, Swiper, Fancybox, three.js
    ├── fonts/
    │   └── theme-icons/                the sun and moon of the theme switch
    ├── webfonts/                       Font Awesome Free font files
    └── img/                            images, one folder per section
        ├── blog/                        5 files
        ├── face/                        4 files
        ├── flags/                       6 files
        ├── icons/                       32 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── photo/                       3 files
        ├── team/                        6 files
        └── work/                        64 files

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

The ground is a near white with white tiles under a soft lift; ink is the headings and the square buttons. The colour comes from the set papers — terracotta, petrol, sage, sky, peach, blush and sand, the painted planes of a studio set — used for colour-field bands, tile grounds, the colourways and the WebGL planes. Terracotta is also the accent for small text and hovers; the red is for marks only (the caret after a muted title word, the live dot, badges). --cp-bg, --cp-band, --cp-surface, --cp-heading and --cp-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: DM Sans (titles in mixed case, the display word, figures, buttons and the navigation) and Roboto (the body and the leads). Swap them by editing the Google Fonts link and the --cp-ff-head / --cp-ff-body variables.

Titles

A section title ends on a muted word with a red caret: wrap the word in <span class="cp-mute cp-caret"> (or cp-mute alone for no caret). Titles are set on lines with <span class="line">.

Logo

The logo is Captura in DM Sans 700 with a red caret on the baseline. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink, for light bars
• logo-light.png — white, over the Home 01 hero and in the dark theme
• mark-light.png — the C and its caret 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

Captura opens light. Every header (and the mobile menu) has a theme switch that turns the dark theme on. The choice is saved in the browser under the key captura-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 keep their ground — sections with is-night (the ink quote band) stay dark, and is-paper is-petrol / is-paper is-terracotta keep their set paper in both themes.
• Icons — each line icon 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.

Quote, Usage & Booking

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

The shoot types

How a quote adds up

The final images (never fewer than the shoot type’s minimum) times the rate are the creative fee; the shoot days are the images plus colourways over what a day yields. Colourway variants cost 40% of the rate each. Styled and built sets are added by the set. The usage licence is the creative fee (with the colourways) times the tier’s share, the term and the territory. Retouching is by the image; rush delivery adds 35% of it. On location, a fee by the shoot day and travel both ways past 20 km are added; the crew is by the day. VAT goes on top; the deposit is 30%.

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 a set is shooting now, the studio is 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.

Saved quotes and bookings are kept in the browser (localStorage) so they follow the visitor from page to page and show in the client area; a package’s Start With This carries its settings to the quote builder the same way. The booking confirms on screen with a reference — connect it to your own systems to take real bookings. The quote engine is block 23.

WebGL & Motion

Two WebGL layers draw the moving decoration: Colour Fields — six flat set-paper planes with hard edges sliding slowly past each other at a band’s edges, each throwing a soft shadow on the one behind — and the footer’s extruded type, the brand mark built from DM Sans outlines with three.js and turning slowly. A Colour Fields layer is one canvas:

<canvas class="cp-gl" data-gl="fields" aria-hidden="true"></canvas>
<canvas class="cp-gl" data-gl="fields" data-gl-side="end" aria-hidden="true"></canvas>   (the end side only)

• Colours — the planes read their papers from CSS variables on the canvas or its section, --gl-p1 to --gl-p6, and their strength from --gl-alpha; the extruded type reads --type-face, --type-side and --type-caret.
• 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

Put cp-snap-row on a row and cp-snap on its cards: the cards are dealt out along the column grid, one column per step, and snap into their slots (block 04); cp-snap alone on a photo steps it in from two columns away. cp-fade lifts text into place; data-delay="0.2" staggers it. cp-thirds on a photo frame gives it the thirds-grid hover.

RTL (Right To Left)

Captura is RTL-ready: the layout with its paddings and margins, the sliders, the animations and the WebGL planes 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 captura-lang and captura-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 Turntable preloader, the header, the Grid Snap reveals, the theme and direction switch and the Colour Fields layer.
• 09–10 — Captura Data, Studio Live. Captura Data holds every figure; Studio Live works out the booking calendar, the live line and the sample desk 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 — Usage Meter, Retouch Before After, Six Colourways. The three home pages’ scroll moments.
• 23–37 — Quote Engine, Booking Wizard, Work Filters, Licence Extension, Tab Sets, Catalogue Calculator, Contact Form, Account Forms, Client Area, Article Tools, Demo Forms, Launch Countdown, Type Outlines, Extruded Type, FAQ Search. The feature pages: the quote engine and packages, the booking wizard, the project filters, the licence extension, tabs, the catalogue calculator, contact, accounts, the journal, demo forms, the countdown, the footer’s type and 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 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, 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
• three.js
• Font Awesome Free
• RTLCSS
• Google Fonts: DM Sans, Roboto

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.