Overview

A white, exact HTML template for an architecture and interiors photographer who shoots for architects and builders: exteriors, interiors, twilight, aerial, details and construction progress. The pages put the buildings first — a boxed hero under a spaced-caps title, a staggered project list, a searchable archive, passepartout frames, three project layouts — and the logic is worked out rather than typed in: packages priced per building, per room or per visit, an estimate that adds the building scale, extras, travel, rush delivery and the licence, a cost share between everyone who wants the photographs, a booking with the site details and the light of the chosen day, selects against what the packages include, and a currency switch.

What’s included

• 3 home pages, each with its own scroll moment: The Building Rises (a tower’s elevation lands floor by floor while its photograph uncovers), A Plan Lights Up (a gallery’s plan lights room by room and each room’s interior comes up) and Down The Stairwell (the view down a spiral stair turns with the scroll)
• 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
• The light of the day from the solar equations: sunrise, sunset, tonight’s blue hour and the hours the sun is on a facade facing any way, for the studio and for every day on the booking calendar
• WebGL: the Brise-Soleil — the slow shadow of a sun-shading screen across the page titles and plain bands — and a tower drawn in two-point perspective in the footer, its vanishing points sliding as it turns
• 14 projects for 12 practices and builders with type tabs, practice and year filters and search; three project layouts; an architects index and a practice page; a gallery
• Six shoot packages, a rate card, the estimate builder with saved estimates, licensing with a use-terms table and the cost-share calculator, a six-step booking, selects and delivery, a client area
• Plan to Elevation preloader, Keystone Correct photo reveals (converging verticals that straighten), the plumb-line 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 Vertica. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open vertica/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the estimate, the licensing calculator, the booking calendar, the light of the day, the filters and the selects all work straight from the files.

2. Deploy to a server

Upload the contents of the vertica/ 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 building types, the extras, travel, the licence uses, the co-licensees, the calendar, the studio’s site, the practices, the projects and the team live in one place — see Packages, Estimate & 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 vertica/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

vertica/
├── *.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 (36 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
        ├── client/                      4 files
        ├── flags/                       6 files
        ├── icons/                       12 files
        ├── logo/                        5 files
        ├── menu/                        3 files
        ├── photo/                       18 files
        ├── project/                     40 files
        └── team/                        6 files

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

The site is white with black ink, and the colour comes from the photographs. Ink is the headings, the square buttons, the night bands and the footer; the mist band alternates with white. Lemon is the one accent and is used as a fill or a mark, never as text on white: the slider arrows, the plumb bob, the reveal’s guides, the button hover, the lit room on the plan. --vc-accent-text is the darker olive for the rare small accent text on white. --vc-bg, --vc-band, --vc-surface, --vc-heading and --vc-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: Montserrat (headings in widely tracked capitals, navigation, eyebrows, buttons and figures) and Literata (the body, the leads and the quotes). Swap them by editing the Google Fonts link and the --vc-ff-head / --vc-ff-body variables.

Logo

The logo is VERTICA in tracked Montserrat capitals whose I is a plumb line ending in a lemon bob. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — ink, for white bars
• logo-light.png — white, over the night hero, in the dark theme and the footer
• mark-light.png — the plumb line alone, white (the about band)
• seal.png — the plumb line 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

Vertica 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 vertica-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 estimate, the practices, the stairwell, the footer) are dark in both themes.
• Icons and drawings — each line icon ships in an ink and a white version; the elevation and the plan draw in the theme’s own ink.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Packages, Estimate & Booking

The figures on every page come from one data block, JS block 09 Vertica Data near the top of main.js (var VERTICA). Edit it once and the rate card, the package pages, the estimate, licensing, the booking, the selects 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 packages

How an estimate adds up

Each per-building package is its price times the building type’s scale factor times the buildings; interiors are the price times the rooms (from 4); construction progress is the price times the scale factor times the visits. Extra images cost the first package’s extra-image price. The licence adds a share of the creative fee for each use beyond the included ones; every co-licensee takes 10% off the fee, up to 30%, and pays its own share for its own licence. Styling and 360 tours go by the room, people, the permit and the film are flat; travel beyond 40 km is counted there and back for each day on site and each visit; rush adds 25% of the package fees; VAT goes on top; the deposit is 30% of the total.

The booking calendar, the light 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 sun comes from the solar position equations for the studio’s site: the header’s live line says whether the studio is on site, open or closed, or in tonight’s blue hour, and names the next free shoot day; the footer and the twilight package show today’s sunrise, sunset and blue hour; the booking shows, for the chosen day, the hours the sun is on the facade the client picked, the sunset and the blue hour. Replace dayStatus() in block 10 with a call to your own calendar to show real bookings.

Selects

The contact sheet counts the client’s picks against the images their packages include (14 here) and prices every pick over that number at the package’s extra-image price: two picks over cost €170.

Saved estimates, bookings and 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 selects confirm on screen with a reference — connect them to your own systems to take real bookings. The estimate engine is block 23.

WebGL & Motion

A small WebGL shader draws the Brise-Soleil: the shadow of a sun-shading screen — slanted fins with soft edges that widen away from the fin, crossed by thin louvres — sweeping slowly across the page titles and plain bands while its slant shifts, as the sun moves over a facade. It is one canvas:

<canvas class="vc-gl" data-gl="brise" 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 tower — a canvas drawing in two-point perspective: the camera stays level, so the verticals stay vertical and every horizontal edge runs to one of two vanishing points on the horizon; as the tower turns the points slide along it.
• 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 vc-key to a photo’s frame and it starts the way a wide lens sees a building from the pavement — verticals converging — and straightens to true while two lemon guides stand up beside it (block 04). vc-words on a title makes its words rise from their own masks; vc-fade lifts text into place; data-delay="0.2" staggers any of them. vc-plumb on a card gives it the plumb-line hover: a hairline drops beside it and a lemon bob swings once and settles.

RTL (Right To Left)

Vertica is RTL-ready: the layout with its paddings and margins, the sliders and the animations all mirror, while the drawings 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 vertica-lang and vertica-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 36 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 Plan to Elevation preloader, the header, the Keystone Correct reveals and word rise, the theme and direction switch and the WebGL layer.
• 09–10 — Vertica Data, Studio Live & The Light. Vertica Data holds every figure; Studio Live works out the booking calendar, the live line and the light of the day 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 Building Rises, A Plan Lights Up, Down The Stairwell. The three home pages’ scroll moments.
• 23–36 — Estimate Engine, Booking Wizard, Work Filters, Selects & Delivery, Tab Sets, Contact Form, Account Forms, Client Area, Article Tools, Demo Forms, Launch Countdown, Footer Tower, Licence Cost Share, FAQ Search. The feature pages: the estimate engine, the booking wizard, the project filters, selects, tabs, contact, accounts, the journal, demo forms, the countdown, the footer tower, licensing, 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, selects, 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, Literata

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.