Free brewery website template
Repository: github.com/8bsite/brewery-website-template · Live demo: 8bsite.github.io/brewery-website-template/ · MIT license
About this template
Loud Kettle is a brewery website template for a small craft brewery with its own taproom; it also works for a brewpub, a beer bar or a cider house. The look is dark and loud: condensed capitals, cream tag labels and one colour per beer.
A one-page site for a small craft brewery with a taproom in an old tram shed: the tap list, a flight builder, brew day, events and a booking form. Near-black ground, cream tags and loud condensed capitals; an amber disc behind the hero pint floods the second screen, the beer cards fill with colour like glasses as they step down, and the brew-day steps turn on a wheel as you scroll.
Good for:
Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation, parallax website templates.
How to use the brewery website template
With an AI coding agent
Download the files into your project (Windows PowerShell: curl.exe):
curl -LO https://raw.githubusercontent.com/8bsite/brewery-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/brewery-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/brewery-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/brewery-website-template/main/CREDITS.mdThen give the agent this prompt:
Read AGENTS.md, then edit index.html. Use this template as the base for a site for <your brewery, taproom or bar: name, city, what's on tap with styles and prices, opening hours, address, events, how to book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, beers, prices, hours, events, quotes, photos, links and contacts, and recolour it through the CSS variables if needed.Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.
In a terminal
npx degit 8bsite/brewery-website-template my-siteNo code
Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.
Brewery website design and motion
Palette
#120c07 near-black brown background#f5e4c7 cream text, tags, buttons, date stubs#e3a43c amber hero disc, IPA card, button hover#2a221a dark brown flight panel and stout card#f15a26 orange pale ale card#c21d24 red ale card#f19656 peach sour card#b4a387 muted tan secondary textFonts
- Bricolage Grotesque: headings, tags, buttons: extra-bold, condensed, uppercase, some outlined
- Onest: body and small tracked labels
Cream tag labels with two punched holes top dashed-border cards on a near-black ground. Photos are cut into circles and tall pills, giant outlined words fill the width, beer cards step down a staircase, and events read as tickets.
Motion runs on scroll; the list of sections below says what moves in each.
What is on the page
- NavigationTop bar: two-line wordmark, section links, Book a table button; phone menu overlay
- The kettle's loud. The beer's louder.Two-screen hero: headline, product photo on a brand-colour disc with three orbiting photos, then a manifesto sentence on the brand colour (demo: a pint and ingredients)
Smooth scrolling runs page-wide. Round photos orbit the pint on a loop; on scroll the amber disc floods the screen, the pint lifts away and photo chips pop into the text.
- Four things that never go in the kettleColumn of four hanging tag-cards (principles or features) among floating round photos
Tied to scroll, the four tag-cards drop in turn and swing to rest while round photos float up at two speeds.
- What's pouringGiant outlined word over five product cards in a staircase, each in its own colour (demo: the beers on tap)
On desktop the five cards step down the staircase as you scroll, each filling with colour like a poured glass.
- Build a flight of four. $14Interactive picker: choose four items into round slots, then save (demo: a beer flight)
A tapped beer drops into the next round slot, filling it with its colour from the bottom; tap a slot to clear it.
- From grain to glassFive numbered process steps that turn on a big wheel as you scroll (demo: brew day from grain to glass)
Pinned: the five numbered steps sit on a huge dashed wheel that turns one step at a time as you scroll.
- The tram shedThe venue: heading, lead, one wide and two small photos, three fact cards (demo: hours, dogs, food truck)
The title rises line by line, and the three fact cards swing down on an elastic hinge as they arrive.
- OverheardTestimonials: giant outlined word and a slow scrolling row of six quotes on tag-cards
The outlined word's letters ripple in a wave that settles as it scrolls up; the quote cards below roll sideways, pausing on hover.
- Ask the barQuestions and answers (native <details>), sticky heading on desktop
The heading rises line by line on arrival and stays beside the questions on desktop as you read.
- Loud nightsList of dated events as ticket rows: date stub, title, text, price and time
Tied to scroll, the ticket rows start stacked and tilted on the first one and deal out into a list.
- Come thirstyContact: photo of the venue, address, hours, phone and email cards, and a booking request form (placeholders)
The Come thirsty heading rises line by line and the three fact cards swing down on their hinges.
- Join the Kettle ClubWidth-filling outlined wordmark, links, newsletter signup, social icons, copyright and the Design: 8B credit
What is inside
- Files
index.html(96 KB, CSS and JavaScript inside),AGENTS.md,CREDITS.md,LICENSE- Motion
- GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
- Fonts
- Bricolage Grotesque and Onest from Google Fonts (SIL Open Font License)
- Photos
- 24 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
- Browsers
- Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).
- Replace before publishing
- Social preview image, favicon, map, phone number, email address, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
- License
- MIT
Good to know
- One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
- Book a table buttons in the nav and the phone menu lead to
#visitnow; point them to your reservation or booking URL (or keep #visit if the form below is your booking). - Directions link in visit lead to
a Google Maps search for the invented addressnow; point them to the Google Maps link of your real address. - Instagram and Facebook icons in the footer lead to
the networks' home pagesnow; point them to your own profile URLs. - The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
- The booking form, the flight picker and the newsletter form only show a message on the page; nothing is sent until you connect them.
- There is no age check or responsible-drinking notice; add one if your local rules require it.
- The copy mixes "nothing is bottled" (brew-day) with cans, crowlers and growlers (events, faq): align it with how you really sell.
- The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.
Questions about this brewery website template
Does the flight builder save or send orders?
No. Pick four beers and Save shows the list to read out at the bar; nothing is stored or sent. Beer names and colours are set in the HTML.
Do the booking and newsletter forms work?
Both check their fields and show a confirmation line, but neither sends anything until you connect a form service such as Formspree or Netlify Forms.
