090
AI ready

Pub

£29 View live demo or the whole Vault, £79.20

Five-page pub website template for pubs, inns, gastropubs and brewery taprooms, and a bar or restaurant website template for any venue with two rooms worth showing. The pub's badge rides the seam of a split photo hero: drag it to choose the bar or the brewhouse. A tap board you drag onto a flight paddle, a table you lay dish by dish and a pile of event cards to fling fill the inner pages.

ScrollTrigger Lenis advanced
10 more details
dragmomentumflipsvg-animationscroll-revealclip-pathview-transitionslocal-storagekeyboard-navigationprogressive-enhancement
Open Pub template in new tab

Released

About this template

A five-page pub website for a market-town free house with a brewery out the back, built on two things at once: warm photographs of the actual rooms, used big, and a cream page of fat slab type and flat colour cards in mustard, duck-egg, cider pink, sloe plum and bottle green, each with a thick ink border and a slight tilt. The Coopers Arms Brewhouse in Frome is the worked example, with beers named after the lanes around it and a dog called Dennis.

Read the full template overview

The home page opens on two full-height photographs side by side, the pub and the brewhouse, with the pub's badge on a round green plate riding the seam between them: a cooper hammering a barrel with the name arched over him. Drag the badge, click a room or use the arrow keys and that room takes the whole frame, its line of copy and its call to action sliding in. A Book a table button stays on screen on every page, and the nav reads the opening hours to say whether the bar is open now and until when.

Each inner page has something to handle. The tap list is a board of beer cards you drag onto a four-glass paddle that pours in each beer's colour and totals the ABV and price. The kitchen lets you lay a table: each dish you tap lands as a tilted plate photo, with a running total and how many it feeds. What's on is a pile of event cards you fling off to reach the next, each with real upcoming dates and a hold-a-spot button. Visit takes party size, day and time, suggests where you would sit, lets you choose a different area, and shows a photo of that table.

Making it yours is mostly photographs and copy: the colour system lives in a short token block, opening hours in one config object beside matching HTML tables, and beers, dishes and events are plain list items with data attributes. Two-room venues of any kind fit the split hero, and the flight works as well for wine or cider.

Pub - website template preview

What's included

10 items
  • Split two-room photo hero with the pub's badge riding the seam: drag it, click a room or use the arrow keys to give one room the whole frame
  • House mark of a cooper hammering a barrel with the name arched over it, one inline SVG in a single colour, beside an italic serif wordmark in the nav
  • Book a table button fixed on every page at every scroll position
  • Live open-now line in the nav, read from one opening-hours config, with today's row marked in every hours table
  • Tap board with style filters and a four-glass flight paddle that pours each beer in its own colour and totals ABV and price
  • Kitchen table you lay dish by dish: plate photos land and stack, with a running total and how many it feeds, plus a Sunday menu tab
  • Pile of event photo cards to drag or fling through, with real upcoming dates computed from weekly and monthly rules
  • Booking front end with party size, a 14-day strip and time chips; it suggests a seating area, lets the visitor choose another and shows a photo of that table
  • Flight, table, held events and booking draft remembered across pages in local storage
  • Five plain HTML pages with cross-document view transitions; complete without JavaScript and under reduced motion

Perfect for

5 use cases
  • Pubs, inns and gastropubs that want the rooms and the food to sell the visit
  • Brewpubs and brewery taprooms with a tap list that changes
  • Cider houses, wine bars and cafe-bars with a flight or tasting to offer
  • Bars and restaurants with two distinct rooms or sides: bar and dining room, bar and garden, shop and cafe
  • Hospitality sites that need hours, events and a booking page without a framework

How it works

5 sections

The two-room hero

Both rooms are photographs in one flex row, and a single custom property sets the pub's share of the width, so dragging the badge only changes one number. Past a threshold the choice commits and the chosen room takes the frame while its copy slides in; short of it, the seam springs back. The badge is a focusable slider for keyboard users, and on phones the rooms stack and the same control works vertically.

Opening hours, once

The hours live in one config object in the script, which drives the open-now line in the nav, the kitchen card on the home page and the highlighted row in every hours table. The tables themselves are ordinary HTML, so the times read correctly without JavaScript; change both together.

Flight paddle and table spread

Beer and dish cards are list items carrying their name, price and colour or serving count as data attributes. Adding one animates a copy of its glass or photo onto the paddle or table, then updates totals and a plain text summary that screen readers can follow. Touch uses the Add buttons, so a finger on a card always scrolls the page; mouse and pen can drag.

The event pile

Event cards stack with a small offset and tilt. A horizontal drag on the top card throws it off once it passes a distance or speed threshold and it rejoins the bottom of the pile; a vertical swipe scrolls the page. Each card's date is calculated from a rule such as every Tuesday or the last Sunday of the month, so the demo never shows a past date.

Pages, state and fallbacks

The five pages are ordinary documents linked normally, with a short crossfade between them where the browser supports cross-document view transitions. Choices that should survive a page change are kept in local storage and every read is guarded, so a blocked or empty store just starts fresh. Without JavaScript every list, menu, event and form is visible as plain content; under reduced motion everything works with instant changes.

Plugins ScrollTrigger
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (5 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Which venues does this pub website template suit?

Pubs, inns and gastropubs first, then any bar or restaurant people visit for the room as much as the menu: brewery taprooms, cider houses, cafe-bars and wine bars. The split hero wants two spaces worth photographing, such as bar and dining room or bar and garden, and the flight paddle works for wine or cider tastings with new names and colours.

Does the Book a table form take real bookings?

No. The Visit page form is an unwired static front end. It collects party size, a day from the next fortnight and a time, previews the area where the party would sit, then tells the visitor nothing was sent. Point it at your pub's booking system, a form service such as Formspree or Netlify Forms, or swap the section for your reservation provider's widget.

Can customers order or pay from the flight paddle or the kitchen table?

No. The paddle and the laid table are planning tools for a visit, not a till: they add up prices and, on the kitchen page, how many the dishes feed, and the copy asks people to order at the bar. No order is placed or charged, and the choices live only in that visitor's own browser storage.

How do I change the beers, dishes and events?

Every beer, dish and event is a single list item in its page's HTML. Its price, ABV, serving count or repeating date rule (every Tuesday, last Sunday of the month) sits in data attributes. Duplicate an item and edit its text and attributes; the style filters, running totals and next dates update on their own. Glass colours come from a few beer tokens in the stylesheet.

How do I set my own opening hours?

Change the HOURS object at the top of the script: it drives the open-now line in the nav, the kitchen card on the home page and the highlighted row for today. Then update the hours tables in the HTML to match, since that is what people without JavaScript read. The rule that greys out Sunday evening booking times sits beside it.

What photographs do I need to replace the demo ones?

Two room photographs in similar warm light for the split hero, ideally tall frames, then plates of food, a handful of event shots, each seating area and the front of the building. The image manifest lists every local file with its crop, so a replacement at the same proportions drops in without layout changes.

How do I put my own pub's name and mark on it?

The mark is one inline SVG drawn once near the top of each page: a single-colour silhouette of a cooper at a barrel, and a lockup that arches THE COOPERS ARMS over it. Swap the silhouette path for your own emblem and change the arched text; the nav, footer and hero badge all reuse it, and the colour follows the text colour around it. The favicon is a separate small file.

Paid template

Purchase to unlock the code.

Buying Pub opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£29 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

Upload the folder to any static host and open index.html. Keep the five HTML files beside assets/ so relative links keep working. There is no build step, framework or package to install.

Pages load normally. In browsers that support cross-document view transitions the change between pages is a short crossfade (off under reduced motion); elsewhere it is an ordinary page load.

GSAP, ScrollTrigger and Lenis load from a CDN. The fonts (Ultra, Onest, Jost for the arched name and Cormorant Garamond italic for the wordmark), images, styles and the script are bundled locally (see Fonts below).

Using It With Your Own Design

  1. Photographs. Replace the files in assets/img/ (see Images and Credits). The split hero needs two rooms in similar light: portrait-friendly frames, since each half is tall. Food, events and seating areas are 4:3 or 3:2 landscape.
  2. Identity. Replace "The Coopers Arms" in the nav, hero plaque, footer and page titles, the address and phone number, and the house mark (see House mark).
  3. Opening hours. Edit HOURS at the top of assets/script.js and the matching hours tables in index.html and visit.html (see Opening hours).
  4. Beers, dishes and events. Each is one list item with data attributes (see Pages and Configuration).
  5. Colour and type. Edit the tokens at the top of assets/style.css (see Palette).
  6. Booking. Connect the form to your booking system before going live (see Booking).

Everything visual lives in assets/style.css; everything interactive lives in assets/script.js, one function per feature that returns early when its markup is absent. Delete a section or a page and the rest keeps working; remove its link from the nav and footer.

Pages and Configuration

File Content
index.html The two-room split hero, "Today at the Coopers" cards, a room photo band, the Sunday roast band, hours and a find-us teaser
tap-list.html Tap board with style filters and the flight paddle, the brewhouse band, guest cask and cider
kitchen.html Full-bleed food photograph, the menu board with a weekday/Sunday switch and the table you lay, then allergy and children's notes
whats-on.html The week at a glance, the event pile, and the weekly rhythm
visit.html Front photograph, the booking form with the seat preview and area choice, full hours, find us with a route sketch, and dogs, children and access

Header, phone menu and the Book a table pill

Below 760px the header is one row: the cooper, the name and a Menu button. The button opens #site-menu, a full-screen sheet near the end of each page with the four pages (the current one marked), the open-now line and a Book a table button. It traps focus, closes on Escape or Close, returns focus to the Menu button, locks page scroll and stops Lenis while open (it carries data-lenis-prevent for that reason). Add or rename a page in both the header list and the sheet list. Without JavaScript the header keeps its own links. On phones the fixed Book a table pill steps aside while the visitor scrolls down, inside the booking section and over the footer, and comes back when they scroll up (initBookPill() in assets/script.js).

Split hero ([data-split])

Two .half elements (data-half="pub" and data-half="brew"), each with an image and a .half-copy block: a room label, a .room-more paragraph shown when that room fills the frame, and a call to action. The badge on the round plate is the control (.seam-plate[data-seam], a slider): drag it, click a room's photograph, or use the arrow keys, Home, End or Escape. The .both-rooms button returns to the split. Arrow tabs on the plate's rim (.plate-arrow) show the direction, and about a second after load the seam leans towards each room and back once; any pointer or key press cancels that nudge, and reduced motion skips it. The h1 is the plaque under the badge. On phones the rooms stack and the drag is vertical. Without JavaScript the two rooms simply sit side by side.

House mark

The mark is drawn once in the hidden SVG sprite at the top of each page. <symbol id="cooper"> is a single-colour silhouette of a cooper hammering a barrel, filled with currentColor; <symbol id="lockup"> arches THE COOPERS ARMS over it in Jost. The nav shows the lockup beside the italic wordmark (Cormorant Garamond) and the cooper alone on phones, the footer shows the lockup, and the hero shows it in cream on the round green plate. Each takes its colour from the text colour around it. Swap the path in #cooper for your own emblem and change the arched text in #lockup; assets/favicon.svg is the cooper on a green disc, edited separately.

Opening hours

HOURS in assets/script.js lists the bar and kitchen sessions for each day (0 is Sunday) as 24-hour "HH:MM" pairs; "24:00" is midnight. It drives the open-now line in the nav, the kitchen card on the home page, the greyed-out Sunday evening times on the booking form, and the highlighted row for today in any table[data-hours-table] (rows carry data-days="1 2 3 4"). The tables are what visitors without JavaScript read, so keep both in step. TODAY beside it holds the "On tonight" text for each day.

Tap board and flight paddle ([data-flight])

Each beer is an <li class="beer" data-beer> with data-id, data-name, data-abv, data-third (the price of a third), data-colour (one of the --beer-* tokens) and data-family (pale, dark, sour or af), which sets its card colour and its filter. The paddle holds four glasses; a fifth is refused with a message. Tap a glass to take it off. Mouse and pen can drag a card onto the paddle; touch uses the Add a third buttons so a finger on a card scrolls the page.

Menu board and table ([data-spread])

Each dish is an <li class="dish" data-dish> with data-id, data-name, data-price, data-serves, data-img (the photo that lands on the table) and data-menu (week, sunday or both, separated by a space). The table holds up to twelve plates. Below the drawn table is a plain list of what was added, with a Remove one button per dish.

Event pile ([data-pile])

Each event is an <li class="event" data-event> with data-id and data-rule: weekly:2 (every Tuesday), first:5 (first Friday of the month) or last:0 (last Sunday). The date badge is filled in from the rule, so it always shows the next occurrence. Give each card a colour class such as bg-mustard or bg-pink. Next and Previous buttons and the arrow keys mirror the fling. Hold a spot toggles a remembered state and says plainly that nothing is sent.

Booking and seat preview ([data-booking])

The day strip is generated for the next fourteen days. The chosen party size and time suggest an area: daytime tables for up to six go to the garden, then two to the window, up to four to the snug and larger groups to the bar end. Change the rules in pickArea() and the labels in AREAS and AREA_TAGS. The visitor can also choose an area with the four chips under the preview (<button class="chip" data-zone="..." aria-pressed>); a chosen area wins over the suggestion. Each area also has one <img data-area="..."> in the preview frame. isFull() greys out a few times to look realistic; delete it once you connect real availability.

Palette

The tokens at the top of assets/style.css: --cream (ground), --paper (raised cards), --ink (text, borders and hard shadows), five card colours (--mustard, --duck, --pink, --plum, --green), --red for the Book a table button, --wood for the drawn paddle and table, and the --beer-* colours used only inside glasses. The measured contrast pairs are in the comment above them: ink text goes on mustard, duck-egg and pink; cream text goes on green, plum and red.

The photographs are baked without any tint so they keep their own warm light. Choose card colours to sit beside your photographs rather than grading the photographs toward the cards.

Booking

The booking form validates nothing and sends nothing: on submit it shows a message saying it is a front end only. Point the <form data-booking> at your reservation system, a form service such as Formspree or Netlify Forms, or replace the section with your booking provider's widget, then remove the demo message in initBooking() in assets/script.js. The flight paddle, the kitchen table and held event spots are planners only; nothing is ordered or charged.

Accessibility and Fallbacks

  • Without JavaScript every page is complete: both hero rooms show with their links, every beer, dish and event is a readable list, and the booking form is a plain form with a date field.
  • Under reduced motion there is no smooth scrolling and no animation; every control still works with instant changes.
  • The split hero's badge is a keyboard slider. Glasses, plates and events have real buttons, and the paddle, table and pile each keep a text summary that screen readers announce.
  • Touch drags never trap the page: the paddle and table use buttons on touch, and the event pile only takes a swipe that is clearly sideways.
  • The Book a table button is fixed bottom centre on every page; the footer leaves room beneath it so it never covers the last line.

Dependencies

  • GSAP 3.12+ with ScrollTrigger (the demo is built against 3.15.0)
  • Lenis 1.1+ for optional smooth scrolling (the demo is built against 1.3.17). Delete its script tag and initLenis() to go without, or add ?smooth=off to a URL to compare.

Fonts

The four families are self-hosted in assets/fonts/, so no page makes a render-blocking third-party request. The files are the Latin subsets Google Fonts serves, declared by the @font-face rules at the top of assets/style.css with the same weights and unicode-range Google uses. Each page preloads Ultra and Onest, since they set the headlines and body copy above the fold. Licences: Cormorant Garamond (Copyright 2015 the Cormorant Project Authors, github.com/CatharsisFonts/Cormorant), Jost (Copyright 2020 The Jost Project Authors, https://github.com/indestructible-type) and Onest (Copyright 2021 The Onest Project Authors, https://github.com/simpals/onest) are under the SIL Open Font License 1.1, full text in assets/fonts/OFL.txt; Ultra (Copyright 2010 Brian J. Bonislawsky DBA Astigmatic) is under the Apache License 2.0, full text in assets/fonts/LICENSE-Ultra.txt.

To swap a face, put your .woff2 in assets/fonts/, point its @font-face rules and the --font-* token at it, and change the preloads in each page's <head>. To use Google Fonts instead, delete the @font-face rules and the preloads and add the Google Fonts <link> to every page.

Images and Credits

All photographs are from Pexels, used under the Pexels licence. The files in assets/img/ are cropped, resized and lightly desaturated WebP derivatives; assets/img-manifest.json records each source, crop and output size, and assets/img-src/ holds the JPEG masters. To regenerate after editing the manifest, run bun scripts/build-template-assets.ts pub-template --force from the GSAP Vault repository, or simply replace a file with your own at the same name and shape.

Some copies are cut from those files and are not in the manifest, so phones fetch a size near the one they show: hero-pub-1000.webp (Home hero), regulars-1100.webp (Home) and kitchen-spread-1100.webp (Kitchen hero) are smaller copies in each image's srcset, and exterior-phone.avif and exterior-phone.webp (Visit hero) are the centre of the full frame at a 2.2:1 shape, which screens 760px wide and under load instead (the <picture> in the hero). If you replace one of these photographs, re-cut its copies the same way or delete the matching srcset entry or <source>, and update the image preload in that page's <head>.

Five photographs marked retouched are the Pexels originals edited with an AI-assisted tool (the Codex image tool) only to remove third-party names and branding from signs, taps, mirrors and boards; nothing else in them is generated.

The pub, its people, beers and events are fictional; the photographs show other, unnamed places.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.