Overview

A quiet, white HTML template for a landscape photographer who runs small-group photo tours and workshops and sells fine-art prints: photographs in wide white frames, light tracked capitals, and logic that is worked out rather than typed in — departures that roll on from the visitor’s own day with the places left on each, a six-step booking with a deposit and a balance date, a tour estimator, workshops with meeting times from the sunrise, prints by size and finish with a wall preview to scale, a basket with shipping by zone, a gear list that weighs the cabin bag, and the golden hour at every location, live.

What’s included

• 3 home pages, each with its own scroll moment: a panorama stitches together frame by frame, the camera settings roll in and lock per photograph, star trails wheel round the pole star
• A white theme by default and a blue-hour 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 (pounds, euros, dollars) that repaints every price
• WebGL: snow drifting at the edges of the plain bands, and a mountain ridge drawn as stacked profile lines in the footer
• The golden-hour clock: sunrise, sunset, the golden and the blue hour at every tour location in its own time, polar night and the midnight sun included
• Tours with a finder, two tour pages, every departure with places left, Guaranteed and the waitlist, the estimator and a six-step booking
• Workshops with tabs and a calendar, prints by size and finish, the basket, checkout with an order number, saved prints, the gear list
• Portfolio with series tabs and a lightbox, two series pages, guides, field notes, FAQ with search, contact with a map and the PHP form, account pages, coming soon with a countdown, 404
• Level Up preloader, ND Grad photo reveals, the exposure-scale hover, Swiper sliders and Fancybox
• Fully responsive from 390 px to wide screens

Getting Started

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

1. Open locally

Unzip the downloaded package and open horizona/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the departures, the booking, the estimator, the basket, the gear list and the golden-hour clock all work straight from the files.

2. Deploy to a server

Upload the contents of the horizona/ 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 tours, departures, workshops, prints, gear list and locations live in one place — see Tours, Prints & 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 horizona/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

horizona/
├── *.html                              the 33 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
    │       ├── 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 (35 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 section
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── guides/                      6 files
        ├── icons/                       30 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── people/                      7 files
        └── photos/                      34 files

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

White is the ground and the pale band alternates with it; ink is the logo label, the headings and the square buttons. Golden hour is the one accent: the live dots, the level in the preloader, the sun in the logo and the marker on the exposure scale, with the deeper gold for text. Blue hour is the ground of the night bands, the footer and the dark theme. --hz-bg, --hz-band, --hz-surface, --hz-heading and --hz-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: Source Sans 3 (light headings in wide-tracked capitals, body, navigation and buttons) and Source Code Pro (aperture, shutter and ISO, dates, places left and the clock). Swap them by editing the Google Fonts link and the --hz-ff-body / --hz-ff-mono variables.

Logo

The logo is HORIZONA in tracked capitals inside a slim black label, its first O a sun half-risen on the horizon with its reflection below. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — the black label, for the white bars
• logo-light.png — the white label, in the dark theme and the footer
• mark-light.png — the sun alone (the account 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

Horizona opens white. Every header (and the mobile menu) has a theme switch that turns the blue-hour pages on. The choice is saved in the browser under the key horizona-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 workshop calendar, the star trails, the footer) are blue hour 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.

Tours, Prints & Logic

The figures on every page come from one data block, JS block 09 Horizona Data near the top of main.js (var HORIZONA). Edit it once and the tour cards, the departures, the booking, the estimator, the workshops, the print shop, the basket and the gear list follow. Prices are in pounds (the currency switch converts them); departures and workshop dates are month-day pairs ('02-06') that roll on to their next date from the visitor’s day, so the demo never goes out of date.

The tours

Places left

Each departure’s places left is the data’s count less the travellers booked on it through the wizard on this device (saved in localStorage). Replace bookedOn() in block 23 with a call to your own booking system to show real places; every card, row and board reads from it.

Prints by size

For example, 60 × 40 cm in a black oak frame is £355. The wall preview draws the chosen size to scale beside a 200 cm sofa on a 360 cm wall.

The golden hour

Block 10 works out, for each location and the visitor’s day, the moments the sun crosses −6, −4, −0.8 and +6 degrees (the sunrise equation). Golden hour is the sun between −4 and +6 degrees, blue hour between −6 and −4. Times show in each place’s own clock.

The basket, saved prints, trips and workshop places are kept in the browser, so they follow the visitor from page to page. Checkout and the booking confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL & Canvas

Two small WebGL shaders draw the moving layers: Snow Drift — three depths of flakes falling on their own breeze at the edges of the plain bands, clear through the middle where the copy sits — and the ridge in the footer: forty cross-sections of one mountain range stacked from the front to the back, each hiding what lies behind it, the high ground catching the last light. Each is one canvas:

<canvas class="hz-gl" data-gl="snow" aria-hidden="true"></canvas>

• Colours — each layer reads three colours and an opacity from CSS variables on its canvas or section: --gl-1, --gl-2, --gl-3 and --gl-alpha. The theme switch repaints them.
• Canvas 2D — the star trails on Home 03 are drawn with the canvas 2D API from a seeded sky.
• 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.

RTL (Right To Left)

Horizona 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 horizona-lang and horizona-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

Prices, dates, settings and the readouts keep reading left to right inside their rows; the panorama and the star trails keep their own left and right.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 35 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 Level Up preloader, the header, the ND Grad reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Horizona Data, Golden Hour Clock. Horizona Data holds every figure; the golden-hour clock works out sunrise, sunset and the golden and blue hours at every location from its latitude and longitude, on the visitor’s own day.
• 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 — Panorama Stitch, Settings Lock, Star Trails. The three home pages’ scroll moments.
• 23–35 — Tours & Departures, Booking Wizard, Tour Estimator, Workshops, Gear List, Contact Form, Basket & Print Shop, Account Forms, Account Page, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: departures and places left, the booking wizard, the estimator, workshops, the gear list, contact, the basket and print shop, accounts, the field notes, 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 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, checkout, 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: Source Sans 3, Source Code Pro

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.