Overview

A sunny, rustic HTML template for a family vineyard that guests take part in: adopt a vine and see your name on its post, come and pick on a harvest weekend, stay the night in the farmhouse or a cottage among the rows, and sit at the long table. Vendemia 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 farm gate open now, the vines still free in every row, an adoption priced as it is built, the harvest weekends with the places left on each, a stay priced night by night by season, the next date and the seats left at every dinner, and a wine shop with a bag, coupon, shipping and VAT.

What’s included

• 3 home pages, each with its own scroll moment: Nameplates On The Posts (the adopters’ plates are hung on the vine posts one by one as the row passes), Basket Hand To Hand (a harvest basket passes from the picker to the old press) and The Family Tree (four generations fill the branches)
• Light and dark mode 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 — Cloud Shadows, soft shadows of passing clouds with warm sun in the gaps, and the footer’s turning vine-leaf kaleidoscope — tinted by the theme colours
• Adopt a vine: three plans, a row picked from the vines still free, the name on the plaque, extra bottles, years paid ahead with a saving and a posted gift pack; the adopted vines leave their row when the order is placed
• Harvest days: every weekend of the season by month, the places left on each, the day’s programme with what is on now, and four-step booking for adults, children and under-sixes with lunch, bottles and photographs
• Vineyard stays: five rooms and cottages priced for the same dates, each night priced by its season and weekday, the shortest stay, extra guests, breakfast and the city tax
• Long-table dinners from repeat rules, held under the pergola or in the barrel room by the month, with seats left and seat booking
• The wine shop: categories, price filter, sort and search, wine page, bag, coupon, free-shipping meter, VAT included, checkout with an order number, wishlist
• The rows, the family and a profile, gallery, journal, FAQ with search, account pages, coming soon, 404
• Secateurs Snip preloader, Leaf Curtain reveals, the warm-sun hover, Swiper sliders and Fancybox video popups
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open vendemia/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the adoption, the harvest booking, the stays, the dinners and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the vendemia/ 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 rows, the adoption plans, the harvest season, the stays and their seasons, the dinners and the wines live in one place — see Vineyard 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 vendemia/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

vendemia/
├── *.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
    │       ├── 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 (32 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
        ├── banner/                      7 files
        ├── blog/                        7 files
        ├── decor/                       8 files
        ├── faces/                       5 files
        ├── flags/                       6 files
        ├── gallery/                     19 files
        ├── hero/                        10 files
        ├── home/                        13 files
        ├── icons/                       32 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── team/                        7 files
        └── wines/                       13 files

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

Grape is the ground of the night bands, the page titles and the footer, and the face of the buttons; limewash carries the warm bands between white sections. Terracotta draws the slashed rules, the stars and the active states; the deeper terracotta and the terracotta ink are the readable versions for small text on light grounds, and straw is their partner on grape. Vine leaf marks what is still free (vines, places, seats). --vd-bg, --vd-surface, --vd-lime, --vd-heading and --vd-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: Lustria (every heading, the prices and the figures) and Raleway (body, navigation, buttons, eyebrows and labels in tracked capitals). Swap them by editing the Google Fonts link and the --vd-ff-display / --vd-ff-body variables.

Logo

The logo is the name VENDEMIA in widely spaced Lustria capitals over a short terracotta rule and the line SINCE 1931; the mark is a grape cluster with its leaf and tendril. They ship as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white headers
• logo-light.png — for grape grounds and photos: the transparent headers, the footer, dark mode
• mark-light.png — the grape-cluster mark in limewash (the account pages)
• 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

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key vendemia-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 stay grape — sections with the class is-night (the page titles, the family bands, the account side panel, the footer) are grape in both themes. A light card placed inside one takes vd-on-light to keep its own ink.
• Packshots — the wine bottles keep their white ground in both themes, as the photographs do.
• Illustrated icons — each icon ships in a grape and a limewash ink; the right one shows by theme and ground on its own.
• 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.

Vineyard Logic

The figures on every page come from one data block, JS block 09 Vineyard Data near the top of main.js (var VINEYARD). Edit it once and the cards, rows, prices, dates, places and totals follow. Prices are in euros with VAT included; times are minutes after midnight (480 = 8:00 am); weekdays run 0 = Sunday to 6 = Saturday and months 0 = January to 11 = December.

How an adoption is priced

A year costs the plan plus €18 for each extra bottle (up to 24). Paid ahead for two or three years, the years together come 5% or 10% off; the gift pack (€12) is added once. Only the rows with enough free vines for the plan are offered, and the plaque takes up to 22 characters.

Harvest days

Every Saturday and Sunday of the season is a harvest day with 24 places. Once this year’s weekends are past, next year’s show. A place costs €65 an adult and €25 a child of 6 to 14; under-sixes come free but still sit down to lunch.

How a stay is priced

Each night is priced on its own: the room’s base rate times its season, plus 15% on Friday and Saturday nights. The first 2 guests are included; each further guest is €35 a night, breakfast €16 a guest a night, and the city tax €2.50 a guest a night for the first 7 nights. The season of the first night sets the shortest stay:

Dinners and seats

Every dinner repeats on its weekday of the month (The Pergola Table: the first Friday), so its next dates are always ahead of the visitor. From May to October the table is laid under the pergola, the rest of the year in the barrel room. Seats booked on the dinner page are kept in the browser and count against the table on every card and in the account; from 6 seats left the card says so.

How the shop totals

Prices include VAT: the bag adds the bottles, takes off the coupon, adds shipping, and shows the VAT inside the total.

The bag (wines and adoptions), the wishlist, the applied coupon, the adopted vines, the harvest places and the booked seats 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 27 Wine Shop) to []. Checkout, the adoption, harvest places, stays and seats confirm on screen with a reference — connect them to your own systems to take real orders and bookings.

WebGL Layers

Two small WebGL shaders draw the moving layers: Cloud Shadows — the soft shadows of passing clouds drifting over the page titles and the bands, with warm sun in the gaps — and the Kaleidoscope — a vine leaf folded into six mirrored wedges in the footer’s disc, turning slowly. Each is one canvas:

<canvas class="vd-gl" data-gl="clouds" 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.
• 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)

Vendemia 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 stores the language and the direction (keys vendemia-lang and vendemia-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 and plaque names keep reading left to right inside their rows.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 32 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 Secateurs Snip preloader, the header, the Leaf Curtain reveals, the theme and direction switch and the WebGL layers.
• 09–10 — Vineyard Data, Vineyard Clock. Vineyard Data holds every figure; Vineyard Clock works out the farm gate’s open-now line, this year’s harvest weekends and the places left on each, the day’s programme and the next date of every dinner.
• 11–18 — Custom Select, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, sliders, accordions, filters, search, forms.
• 19–21 — Nameplates On The Posts, Basket Hand To Hand, The Family Tree. The three home pages’ scroll moments.
• 22–32 — Adopt A Vine, Harvest Days, Long Table, Vineyard Stays, Contact Form, Wine Shop, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: the vine adoption, harvest-day booking, long-table seats, vineyard stays, contact, the wine shop, accounts, 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 scrubbed 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 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, adoption, harvest booking, stay booking, seat 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: Lustria, Raleway

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.