Overview

A quiet, elegant, animated HTML template for estate wineries, vineyards and cellar doors: classical Roman capitals, a thin olive accent, muted vineyard photography and warm oak-charcoal bands. Vinora ships three home pages, a light and a dark theme, right-to-left support, and winery logic that is worked out rather than typed in: tour and tasting booking with start times and seats left, a wine club with three tiers and a shipment calculator, vintage notes for every year, the cellar door’s open-now status and a shop that sells by the bottle, the vintage and the case.

What’s included

• 3 home pages, each with its own scroll moment: a vine that climbs its trellis (bud, leaf, flower, grapes that turn purple), the vintage chart rising bar by bar, and the cellar descent
• Tour and tasting booking in five steps: the experience, a date, a start time with its seats, guests, club rate and add-ons, details, review
• The wine club: three tiers, a shipment calculator and a join form with an age check
• Vintage notes for twelve years: rating, harvest dates, rain, heat, style and the drinking window from today’s year
• The cellar door’s hours, closures and last pour; today’s tours start by start
• 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
• WebGL Oak Grain under the night bands and the estate crest in relief in the footer, lit by a moving light
• Cellar Door preloader, Depth Walk reveals (cards come forward out of the page), the estate-ribbon hover, Swiper sliders, Fancybox
• The shop: type filters, sort and search, wine pages with their vintages, a bag with the case rate, coupon, shipping, tax and a legal-age check at checkout, wishlist
• The estate’s blocks, awards, team and profile, gallery, journal with six post formats, FAQ with search, accounts, coming soon, 404
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open vinora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — tour booking, the club calculator, the vintage chart and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the vinora/ 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. Hours, batches, classes, sizes, vouchers and products live in one place — see Winery 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 vinora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

vinora/
├── *.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 (17 sections)
    │   ├── 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 LTR + RTL, Swiper, Fancybox)
    ├── js/
    │   ├── main.js                     all custom scripts, numbered JS INDEX (33 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
        ├── banner/                      10 files
        ├── blog/                        6 files
        ├── decor/                       2 files
        ├── flags/                       6 files
        ├── gallery/                     20 files
        ├── home/                        23 files
        ├── icons/                       44 files
        ├── logo/                        4 files
        ├── menu/                        3 files
        ├── preloader/                   1 files
        ├── team/                        17 files
        ├── tours/                       6 files
        └── wines/                       12 files

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 --vn-olive-rgb) — change both together.

Olive draws the grape rules, the icons, the active menu items and the buttons on night bands (oak text on olive). Olive ink is olive’s partner for small text on light grounds. Charcoal is the main button, the top bar and the footer; oak is the night bands under the oak grain. Lees, a dusty claret, marks the chosen vintage and the seats running low. White and mist are the section grounds. --vn-bg, --vn-surface, --vn-heading and --vn-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: Cinzel (the Roman capitals of the titles, labels and figures) and Catamaran (the body, navigation and buttons). Swap them by editing the Google Fonts link and the --vn-ff-head / --vn-ff-body variables.

Logo

The logo is the name in a thin signature script, and the estate crest — a shield with a grape cluster, a vine leaf and a tendril — stands on the preloader’s door, in the footer relief and in the favicon. They ship as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the headers, the offcanvas
• logo-light.png — for dark grounds: the Home 2 header, the footer, coming soon, dark mode
• crest-light.png — the crest in ivory, on the preloader’s oak door
• favicon.png — the browser tab icon

To use your own logo, replace these files; the header sizes the logo by its height.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key vinora-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.
• Bands that stay dark — sections with the class is-night (the club band, the cellar descent, the footer) stay oak charcoal in both themes. A light card inside one takes vn-on-light.
• Bottle grounds — the bottles stand on --vn-product, light grey by day and warm charcoal in dark mode.
• Start dark — add data-theme="dark" to the <html> tag of each page; the switch still works.

Winery Logic

The figures on every page come from one data block, JS block 09 Vinora Data near the top of main.js (var VINORA). Edit it once and the cards, dates, seats, prices and totals follow. Prices are in US dollars; times are minutes after midnight (630 = 10:30 am); weekdays run 0 = Sunday to 6 = Saturday; months run 0 = January to 11 = December.

The cellar door’s week

Tours and tastings

Seats taken in a start are a stand-in worked out from the date so the demo looks lived-in; a start that has begun today shows no seats. Replace seatsTaken() in block 10 Estate Clock with your own bookings. The wizard (block 24) offers the next 14 open days, never blocks on Continue, and checks the details and the age box only on Confirm.

The wine club

How the shop totals

The bag, the wishlist and the applied coupon are kept in the browser (localStorage). The first visit starts with a small demo bag and wishlist; to start empty, set the two demo lists in doShop() (block 28 The Shop) to []. Checkout, booking and the club confirm on screen with a reference — connect them to your own systems to take real orders.

WebGL Layers

Block 08 draws two layers. Oak Grain — toasted oak planks whose grain, rings and pores flow slowly along the band — sits under the night bands and the footer as one canvas:

<canvas class="vn-gl" data-gl="oak" aria-hidden="true"></canvas>

The crest relief in the footer is the estate crest drawn in code as a height field; its normals are taken in the shader and lit by a light that circles slowly and follows the pointer: <canvas class="footer-crest" data-crest>.

• Colours — the oak reads --gl-1 (ground), --gl-2 (grain), --gl-3 (toasted light) and --gl-alpha; the crest reads --crest-1, --crest-2 and --crest-3.
• Performance — a layer runs only while it is on screen and the tab is visible; reduced motion gets one still frame.
• Remove one — delete the canvas; nothing else depends on it.

RTL (Right To Left)

Right to left comes from the stylesheets, not from separate pages: the language picker beside the light / dark switch lists the languages that read left to right and right to left. Choosing Arabic or Hebrew stores the direction (key vinora-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 copy. To make a page right to left for good:

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

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 33 numbered blocks. Each block is a self-contained doSomething() function that skips pages where its section is not present:

• 01 — Preloader
• 02 — Sticky Header
• 03 — Offcanvas Menu
• 04 — Scroll Reveals
• 05 — Back To Top
• 06 — Anchor Scroll
• 07 — Light & Dark Mode, Direction
• 08 — WebGL Oak Grain & Crest Relief
• 09 — Vinora Data
• 10 — Estate Clock
• 11 — Custom Select
• 12 — Meters
• 13 — Hero Sliders
• 14 — Card Sliders
• 15 — Accordion
• 16 — Filter Tabs
• 17 — Grid Search
• 18 — Newsletter
• 19 — Choice Cards
• 20 — The Vine Climbs Its Trellis
• 21 — The Vintage Chart
• 22 — The Cellar Descent
• 23 — Tour Finder
• 24 — Tour & Tasting Booking
• 25 — Wine Club
• 26 — Wine List
• 27 — Contact Form
• 28 — The Shop
• 29 — Account Forms
• 30 — Article Tools
• 31 — Demo Forms
• 32 — Launch Countdown
• 33 — FAQ Search

Every animation respects prefers-reduced-motion: content appears in its final state.

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. Images are grouped inside assets/img/:

The logo files, the crest, the rendered bottles, the oak door, the line icons, the signatures 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 forms and the comment form post to sendmail.php, a lightweight AJAX mail handler. The newsletter, booking, club, checkout and account forms are demo forms: they confirm on screen and are ready to connect to your own systems. To activate the mail handler:

1. Set your email address

$email = 'example@example.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support. Opened from your computer, it shows an “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

• Create v3 keys for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• Add a hidden token field inside the form and load the reCAPTCHA script with your site key before </body>:

<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<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>

Credits

• Bootstrap 5.3.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• Fancybox 3.5
• Font Awesome Free
• RTLCSS
• Google Fonts: Cinzel, Catamaran

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.