Overview

A warm, sunlit HTML template for a beekeeper and honey shop: honeys by flower and season, a trace for every batch, gift boxes, beekeeping courses with their dates and places, and a full shop. Apiaria 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 honey house open now from the visitor’s clock, each honey’s harvest status and the batch in its jars from the date, a price for every jar size, the next dates of every course with their seats, gift boxes and pollination hire priced by their rules, and a shop with a code, shipping and tax.

What’s included

• 3 home pages, each with its own scroll moment: bees fly out of the hive across the section (Home 01), a brood frame zooms into its cells (Home 02) and the harvest in four steps — frame, uncap, spin, jar (Home 03)
• The beeswax-paper light theme by default and a dark theme on one switch in every header, remembered between visits and applied before the page paints
• Right-to-left stylesheets and a flag language picker in every header: a right-to-left language turns any page around
• WebGL layers — Bee Paths, dashed flight paths looping at the band edges, and the footer’s straw skep wound from one rope of straw, turning — tinted by the theme colours
• Honeys by flower and season: a finder by season, colour on the Pfund scale and texture, a harvest calendar with this month marked, a price for every jar size
• The batch trace: any spelling of a batch number opens its apiary, hives, harvest, extraction and jarring dates, jars, water content and best-before date
• The gift-box builder: three boxes, a honey for every jar, extras, wrapping and a card, 10% off a full box, into the bag as one line
• Beekeeping courses on repeat rules, next dates and seats left from the date, and a five-step booking where Continue never blocks
• Pollination hire priced by crop, acres and weeks; the honey house open now; this month at the hives
• The honey shop: categories, price filter, sort and search, jar sizes with a price per 100 g, bag, code, free-shipping meter, express, pickup, tax, checkout with an order number, wishlist
• Frame Lift preloader, Hex Fill reveals (photos uncovered cell by cell through a comb), word-rise titles, a bee that follows the cursor and a bee that lands on cards on hover
• Beekeepers, beekeeper profile, apiaries, services, gallery, journal with post formats, FAQ with search, account pages, coming soon, 404
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open apiaria/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the honey finder, the batch trace, the gift boxes, the course booking, the estimator and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the apiaria/ 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 honeys, batches, apiaries, courses, boxes and shop rules live in one place — see Honey & Course 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 apiaria/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

apiaria/
├── *.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
    │       ├── 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
        ├── apiary/                      19 files
        ├── banner/                      6 files
        ├── cutouts/                     2 files
        ├── decor/                       15 files
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── icons/                       42 files
        ├── kitchen/                     10 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── shop/                        18 files
        └── team/                        4 files

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

The beeswax paper is the ground and white the panels laid on it. Rust fills the buttons and sets the prices; rust ink is the same rust made dark enough for small text, eyebrows and dates. Sand is the footer, Home 03’s hero panel and the course and gift bands, always with ink text; honey is kept for comb, jars and the bee. --ap-bg, --ap-surface, --ap-cream, --ap-heading and --ap-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: Open Sans, once, with its width axis — condensed (font-stretch: 75%) bold capitals for the headings, navigation, eyebrows and buttons, normal width for the copy — and Nothing You Could Do, a handwriting for signatures, notes and batch numbers. Swap them by editing the Google Fonts link and the --ap-ff-display / --ap-ff-body / --ap-ff-hand variables; --ap-cond sets the condensed width.

Logo

The logo is a bee seen from above, its body a honeycomb cell banded in honey, beside APIARIA in condensed capitals with BEES & HONEY spaced under it. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the header on the paper, the sand footer
• logo-light.png — for dark grounds: the dark theme
• mark.png — the bee alone (the footer)
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace these files; the header sizes the logo by its height, so a wider or narrower file needs no CSS change.

Light & Dark Mode

Apiaria opens light: the beeswax paper is the default and needs no attribute. Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key apiaria-theme and applied by a one-line script in the <head> before the page paints, so a dark visitor never sees a light flash. 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. Change a dark colour there.
• Bands that keep their colour — sections with the class is-sand (the footer, Home 03’s hero panel, the course and gift bands) stay sand with ink in both themes; is-night (the trace band, the mobile menu’s foot) stays propolis brown.
• Icons and sprigs — each illustrated icon and line-drawn sprig ships in an ink and a light version, and the right one shows by theme and ground.
• Start dark — to open the site dark for first-time visitors, add data-theme="dark" to the <html> tag of each page; the switch still works and is still remembered.

Honey & Course Logic

The figures on every page come from one data block, JS block 09 Apiaria Data near the top of main.js (var APIARIA). Edit it once and the prices, dates, seats, batches and totals follow. Prices are in US dollars; times are minutes after midnight (1020 = 5:00 pm); weekdays run 0 = Sunday to 6 = Saturday; months 1 = January to 12 = December.

The honeys

A honey is Harvesting now in its harvest months, New season for two months after, and otherwise shows its next harvest month; the jars carry the newest batch harvested by today. Elements with data-honey-status="id" and data-honey-batch="id" repaint from the visitor’s date.

Tracing a batch

Courses on their dates

Gift boxes

Pollination hire

How the shop totals

The bag, the wishlist and the code are kept in the browser (localStorage), so they follow the visitor from page to page. The first visit starts with a small demo bag and wishlist so every shop page has something to show; to start empty, set the two demo lists in doShop() (block 30 Honey Shop) to []. Course bookings, gift boxes, the estimator and checkout confirm on screen with a reference — connect them to your own systems to take real bookings and payments.

WebGL Layers

Two small WebGL scenes draw the moving layers: Bee Paths — a few dashed flight paths looping at the left and right edges of the heroes, page titles and bands, drawn on to a honey dot and fading, the copy in the middle left clear — and the Straw Skep — a traditional hive wound from one rope of straw, bound with cane stitches, turning on its board in the footer. Each is one canvas:

<canvas class="ap-gl" data-gl="paths" aria-hidden="true"></canvas>

• Colours — each layer reads its 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.
• 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)

Apiaria 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) beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the language and the direction (keys apiaria-lang and apiaria-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

Add dir="rtl" to the page’s <html> tag (and set lang to your language):

<html lang="en" class="no-js" dir="rtl">

2. Swap Three Stylesheets

The scripts read the direction from the dir attribute: sliders and every move that must mirror follow it on their own. Prices, dates, batch numbers, the harvest calendar and the drawn scenes keep reading left to 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 Frame Lift preloader, the header, the Hex Fill reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Apiaria Data, Honey Clock. Apiaria Data holds every figure; Honey Clock works out the honey house open now, this month at the hives, each honey’s harvest status and the batch in its jars, and the next dates of every course with their seats, from the visitor’s date.
• 11–19 — Custom Select, Bee Cursor, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, the bee cursor, sliders, accordions, filters, search, forms.
• 20–23 — Hive Flight, Frame Zoom, Harvest Steps, Floating Sprigs. The three home pages’ scroll moments and the floating sprigs.
• 24–35 — Honey Finder, Batch Trace, Gift Box Builder, Course Booking, Pollination Estimator, Contact Form, Honey Shop, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the honey finder, the batch trace, the gift-box builder, the course booking, the pollination estimator, contact, the honey shop, accounts, the journal, the coming-soon countdown and the 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 automatically: content appears in its final state and the drawn 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, the illustrated icons, the drawn decor, jars and gift boxes and the language flags are included and ready to use. All demo photography shown on the live preview (the beekeepers, the hives, the bees, the comb and the honey kitchen) 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, course booking, gift box, pollination, 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: Open Sans, Nothing You Could Do

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheet, the Google Maps embeds 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.