Overview

A warm, animated HTML template for a neighbourhood gastropub: twelve taps, a kitchen, match nights and a Tuesday quiz. Pintora ships three home pages, a light and a dark theme, right-to-left support and pub logic that is worked out rather than typed in: a live tap list whose kegs run low through the evening, happy hour live from the clock, a burger builder that prices every layer, a table booking that knows the day’s hours and the rooms, fixtures that come round every week, a pub quiz with a rolling jackpot, and a pub shop with a bag, a code, VAT and checkout.

What’s included

• 3 home pages, each with its own scroll moment: the bar (five pints slide along the bar to their taps), the darts (three darts land in the treble twenty, the score adding up) and the tug of war (two team bars push against each other and settle on the pub poll)
• 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: Chalk Smudge (chalk smudges and eraser marks drifting on the slate bands) and a low-poly dartboard turning in the footer
• Live tap list: what’s pouring, style, ABV, cask or keg, each keg’s level from the clock, running low, the guest beer on the first keg to run dry, happy hour prices
• Happy hour live from the clock: on now with its countdown or the next window, the week drawn to scale, half-price small plates
• Burger builder: six burgers, three buns, eight add-ons, sides and a pint deal; the drawn burger stacks itself and the price follows
• Table booking in four steps, match nights with fixtures and Book buttons, the pub quiz sign-up with the jackpot and the season table, what’s on by month
• The pub shop: filters, sort and search, the product page, the bag with a code and VAT, checkout with collection, local delivery or courier and an order number, wishlist
• Food menu with category and diet filters, crew, gallery, blog in six post formats, FAQ with search, account pages, coming soon, 404
• Coaster Flip preloader, Clink reveals, chalk circles on prices, Swiper sliders and Fancybox lightboxes
• Fully responsive, zero console errors

Getting Started

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

1. Open locally

Unzip the downloaded package and open pintora/index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — the tap list, happy hour, burger builder, booking, quiz, fixtures and the shop all work straight from the files.

2. Deploy to a server

Upload the contents of the pintora/ 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 taps, prices, hours, happy hour, menu, burgers, fixtures, quiz, events, rooms and crew live in one place — see Pub 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 pintora/, the template. Every page sits in the template’s root; everything the pages load sits under assets/:

pintora/
├── *.html                              the 31 pages, all in the root (see File Structure)
├── sendmail.php                        the AJAX mail handler for the contact form
└── 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 (36 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 kind
        ├── bar/                         8 files
        ├── burger/                      26 files
        ├── chalk/                       3 files
        ├── darts/                       2 files
        ├── decor/                       6 files
        ├── faces/                       9 files
        ├── flags/                       6 files
        ├── hero/                        9 files
        ├── icons/                       26 files
        ├── logo/                        5 files
        ├── menu/                        9 files
        ├── photos/                      19 files
        ├── shop/                        15 files
        ├── team/                        6 files
        └── textures/                    3 files

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

Bottle green is the voice: the accent word in titles, the chalk-script eyebrows and prices, the brush rule under every title, the framed boxes and the buttons’ hover. Small green text uses its deeper partner (--pn-green-deep) so every line reads clearly. Ink draws the square buttons and the headings; kraft paper and white alternate as grounds; slate is the chalkboard of the night bands and the footer. Amber and red are kept for the drawings, the running-low flags and the live dot. --pn-bg, --pn-surface, --pn-heading, --pn-text and --pn-accent 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: Teko (the caps headings, the navigation, buttons and the body) and Shadows Into Light (the chalk-script eyebrows, prices and names). Swap them by editing the Google Fonts link and the --pn-ff-head / --pn-ff-script variables.

Logo

The logo stacks a beer-mat coaster (a nonic pint between hop leaves) above the name PINTORA, with a short rule and hop leaves below. It ships as ready-made PNG files in assets/img/logo/:

• logo.png — for light grounds: the sticky header, the boxed home’s header
• logo-light.png — for dark grounds: the headers over photographs, the slate footer, dark mode
• coaster.png / coaster-back.png — the coaster’s two faces: the preloader, the 404, the badges
• 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 pintora-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 is-night (the slate) and the photo bands keep their ground in both themes. A light card inside one takes pn-on-light.
• Paper — the kraft grounds carry a fibre texture; the dark theme swaps it for a dark one.
• 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.

Pub Logic

The figures on every page come from one data block, JS block 09 Pub Data near the top of main.js (var PUB). Edit it once and the cards, lists, builders and totals follow. Prices are in pounds; times are minutes after midnight (960 = 4:00 pm; a close after midnight runs past 1440).

The kegs and happy hour

A keg’s level is its opening level minus its pour rate times the hours the pub has been open today, so the tap list changes through the evening on its own: gauges drop, kegs under a fifth read Running Low, the first keg to run dry is changed for the guest beer and any later one for a fresh keg of its own (Just On). Happy hour takes its share off pints and halves while a window is open; the price is struck through and the happy price written beside it.

The burger builder

The price is the burger, plus a different bun’s add-on (a burger’s own bun is in its price), plus each add-on, plus the side swap, plus the pint deal; the drawn burger lays every layer in where it belongs.

Bookings, fixtures and the quiz

A day’s slots run from opening to 90 minutes before closing (a Saturday has 26), today’s past slots drop out and each slot has its own tables left; rooms too small for the party step aside. Fixtures come round by weekday, so the list never goes out of date; a Book button carries the game’s date and the screen room to the booking (kept in the browser, never in the link). The quiz jackpot grows £25 every week it is not won (on Tuesday 27 October 2026 it stands at £100).

The bag, wishlist, code, burgers and booking hand-over 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; to start empty, set the two demo lists in doShop() (block 31 Pub Shop) to []. Checkout, bookings, the quiz sign-up and tickets confirm on screen with a reference — connect them to your own systems.

WebGL Layers

Two kinds of WebGL draw the moving layers. Chalk Smudge is a fragment shader over the slate bands: soft chalk smudges, the arcs an eraser leaves and a little dust, drifting very slowly and kept to the band’s sides. The dartboard in every footer is a real triangle mesh, low-poly with flat facets: every ring of the twenty sectors is cut into facets that tilt apart and catch the light as the board swings on its nail, a dart in the treble twenty.

<canvas class="pn-gl" data-gl="chalk" aria-hidden="true"></canvas>
<canvas class="footer-board-gl" data-board-gl aria-hidden="true"></canvas>

• Colours — Chalk Smudge reads --gl-1, --gl-2, --gl-3 and --gl-alpha; the dartboard reads --db-black, --db-cream, --db-red, --db-green and --db-steel on its holder. The theme switch repaints them.
• Performance — a layer only runs while it 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)

Pintora 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 pintora-lang and pintora-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

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

2. Swap Three Stylesheets

The pictures keep their own left and right: the bar with its taps and pints, the dartboard with its darts, the tug of war (home on the left) and the week chart drawn on a clock.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into 36 numbered blocks (see the JS INDEX comment at the top of the file):

• 01–08 — Preloader, Sticky Header, Offcanvas Menu, Scroll Reveals & Chalk Circles, Back To Top, Anchor Scroll, Light & Dark Mode, Direction, WebGL Layers. The core every page shares: the Coaster Flip preloader, the header, the Clink reveals and chalk circles, the theme and direction switch and the WebGL layers.
• 09–10 — Pub Data, Pub Clock. Pub Data holds every figure; Pub Clock works out the doors, the kitchen, happy hour, each keg’s level, the fixtures’ and events’ dates and the jackpot.
• 11–19 — Custom Select, Meters, Hero Sliders, Card Sliders, Accordion, Filter Tabs, Grid Search, Newsletter, Choice Cards. Shared components: selects, meters, sliders, accordions, filters, search, newsletter, choice cards.
• 20–36 — Live Tap List, Happy Hour, Bar Moment, Darts Moment, Food Menu, Burger Builder, Table Booking, Match Nights, Pub Quiz, What's On, Contact Form, Pub Shop, Account Forms, Article Tools, Demo Forms, Launch Countdown, FAQ Search. The niche logic and the scroll moments: the live tap list, happy hour, the bar, the darts, the food menu, the burger builder, the table booking, match nights with the tug of war, the pub quiz, what’s on, the contact form, the shop, accounts, articles, demo forms, the countdown and FAQ search.

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 drawn pints, taps, burgers and darts, the gift cards, glass, beer mats and tote, the chalk drawings, the illustrated icons, the textures 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 posts to sendmail.php, a lightweight AJAX mail handler. The success or error message appears under the button without reloading the page. The newsletter, booking, quiz, ticket, comment, account and checkout 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: Teko, Shadows Into Light

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

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.