Overview

An unhurried, Parisian HTML template for a French bistro: set-price formules at lunch and dinner, a carte that tours one region of France a month, a glass of the region’s wine matched to every plate, a cheese trolley, private dining and a small wine cave with gift vouchers. Terroira 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 region on the carte from the visitor’s date, lunch or dinner served now, a formule priced as it is built, the booking slots from the kitchen’s hours, a private-dining estimate and a shop with a bag, coupon, delivery and tax.

What’s included

• 3 home pages, each with its own scroll moment: the cheese trolley rolls in with the month’s cheeses on flags; entrée, plat and dessert slide into one column as the formule assembles; the tablecloth is whipped away while the setting stays
• Le Tour de France: twelve regions, one a month, each with two entrées, three plats, two desserts, three cheeses and three wines by the glass — every page paints the region of the visitor’s month
• The formule builder: two or three courses, lunch or dinner, a dish per course with supplements, the matched glasses, the cheese trolley, covers and the day
• Five-step table booking: the terrace from April to October, the zinc counter for up to three, the region and formule of the day booked
• Wine by the glass, carafe and bottle; the year’s thirty-six glasses filtered by colour
• La Cave: drawn bottles and gift vouchers, filters, sort and search, product page, bag, coupon, free-delivery meter, tax, checkout with an order number, wishlist
• 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 layers — Window Rain at the edges of the linen bands and page titles, and the footer’s etched still life in cross-hatching — tinted by the theme colours
• Butter Curl preloader, Letterpress reveals with a word rise on titles, the butter-spread hover, Swiper sliders and Fancybox popups
• Team and chef page, gallery, journal, FAQ with search, account pages, coming soon, 404
• Fully responsive, W3C-valid, zero console errors

Getting Started

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

1. Open locally

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

2. Deploy to a server

Upload the contents of the terroira/ 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, formules, the twelve regions, the classics, the rooms and the shop rules live in one place — see Bistro 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 terroira/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

terroira/
├── *.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 (31 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
        ├── art/                         5 files
        ├── blog/                        11 files
        ├── dishes/                      28 files
        ├── faces/                       6 files
        ├── flags/                       6 files
        ├── gallery/                     11 files
        ├── home/                        18 files
        ├── icons/                       18 files
        ├── logo/                        6 files
        ├── menu/                        3 files
        ├── shop/                        13 files
        ├── team/                        6 files
        └── textures/                    2 files

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

White is the ground; linen carries the split panels and the bands, mist the guests’ voices. Terracotta sets the outsized section titles and the hairline that runs in from the page edge under them; the deeper terracotta ink is the colour of small eyebrows, labels and the solid buttons (white on it reads at AA). The blush draws the hand-drawn ellipse round the italic buttons. Black marble is the footer. Butter belongs to the motion: the curl, the butter-spread hover and the still life’s glint. --tr-bg, --tr-surface, --tr-linen, --tr-heading and --tr-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: Fanwood Text (the capitals of every heading, the lower-case italic connector words, prices and the italic buttons) and Libre Franklin (body, navigation, eyebrows and labels in tracked capitals). Swap them by editing the Google Fonts link and the --tr-ff-display / --tr-ff-body variables.

Logo

The logo is the name TERROIRA in widely tracked capitals whose O is a butter curl seen end on. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the white headers, the preloader
• logo-light.png — for photos and dark grounds: the header over a hero photo, the footer, dark mode
• logo-gap.png / logo-gap-light.png — the wordmark without its O, for the preloader’s curl to roll into
• mark.png — the curl alone in terracotta (the account and bare pages, the voucher cards)
• favicon.png — the browser tab icon

The logo’s lettering appears only inside the images. To use your own logo, replace logo.png and logo-light.png; the header sizes the logo by its height, so a wider or narrower file needs no CSS change. The preloader’s O position is set in CSS (.pre-o) — replace the gap files too, or remove the preloader block.

Light & Dark Mode

Every header (and the mobile menu) has a theme switch. The choice is saved in the browser under the key terroira-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 dark — sections with the class is-night (the footer, the booking summary, the estimate and the formule summary) are marble in both themes. A light card placed inside one takes tr-on-light to keep its own ink.
• Packshots — La Cave’s bottles and vouchers keep their linen ground in both themes.
• Illustrated icons — each icon ships in an ink and a cream version; 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.

Bistro Logic

The figures on every page come from one data block, JS block 08 Bistro Data near the top of main.js (var BISTRO). Edit it once and the cartes, prices, glasses, slots and totals follow. Prices are in US dollars; times are minutes after midnight (720 = 12:00 pm); weekdays run 0 = Sunday to 6 = Saturday; months run 0 = January to 11 = December.

The region of the month

Every region section is written in the page for one month and carries data-rd paths (for example data-rd="plats.0.name"); block 09 works out the visitor’s month and repaints each path from that month’s region, so the carte, the arches, the wine cart, the cheeses and the top bar always show the region on the carte today. The year grid marks the toured months, this month and the next. Date fields name the region of the day they hold, and the booking and the formule builder price the day booked.

How a formule is priced

A head: the formule’s lunch or dinner price, plus the supplement of each dish chosen, plus the matched glass of each course if glasses are on, plus the cheese trolley if added. The table total multiplies by the covers.

Private dining

Only the rooms that can seat the party are offered. The estimate is the room hire, plus the menu by the head for every guest, plus the extras, plus 20% service on the food, drink and extras; a quarter of it holds the date.

How La Cave totals

The bag, the wishlist and the applied coupon 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 25 La Cave Shop) to []. Checkout, table booking and the dining enquiry 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: Window Rain — beads running down a café window with their wet trails, held to the two side edges of the linen bands and the page titles — and the Still Life — a bottle, a glass, a baguette and a wedge of cheese drawn in the browser as three tone plates and etched in cross-hatching in the footer while a light travels across them. Each is one canvas:

<canvas class="tr-gl" data-gl="rain" 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)

Terroira 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 terroira-lang and terroira-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 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 31 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–07 — Preloader, Sticky Header, Offcanvas Menu, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Butter Curl preloader, the header, the offcanvas, the theme and direction switch and the WebGL layers.
• 08–09 — Bistro Data, Bistro Clock & Region Of The Month. Bistro Data holds every figure; the clock works out lunch or dinner now, and the region painter sets the region of the visitor’s month on every page.
• 10–18 — Custom Select, Scroll Reveals, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: the selects, the Letterpress reveals and word rise, sliders, accordions, filters, search, forms.
• 19–21 — Cheese Trolley, Formule Assembly, Tablecloth. The three home pages’ scroll moments.
• 22–31 — Table Booking, Private Dining, Contact Form, La Cave Shop, Account Forms, Formule Builder, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The feature pages: table booking, private dining, contact, La Cave, accounts, the formule builder, articles, FAQ, the countdown.

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 — and the img paths in the data block for the region dishes. Images are grouped inside assets/img/:

The logo files, the illustrated icons, the language flags, the drawn marble, the scroll-moment art and La Cave’s packshots 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, table booking, dining enquiry, 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: Fanwood Text, Libre Franklin

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.