# Free comedy club website template

> Free HTML comedy club website template for venues with a weekly bill, a bar and private hire. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Comedy club website template: one free HTML file for a venue that runs a show every night, serves drinks and hires out the room. It opens on tonight's running order, then runs through a seven-night week, house rules, an open-mic sign-up and the bar. Black, yellow and white with heavy type. AGENTS.md lets Claude Code or Cursor adapt it.

- Page: https://8b.com/templates/snort/
- Live demo: https://8b.com/templates/snort/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/snort/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/comedy-club-website-template
- Download ZIP: https://8b.com/templates/snort/comedy-club-website-template.zip
- Template name in the repository: Snort
- At a glance: One 113 KB index.html with its CSS and JavaScript inside, 13 sections, 29 Unsplash photos credited in CREDITS.md, Instrument Sans and Playpen Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/comedy-club-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/comedy-club-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/comedy-club-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/comedy-club-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my venue: name, city, seats, tonight's date and running order, the seven weekly shows with times and prices, house rules, open-mic rules, bar menu with prices, private hire rates, accessibility details, address, box office hours, ticket link, social links>. Replace the tonight panel and week rows first, then bar and hire. Keep the section ids, data-8b-section and data-8b-motion, the class names AGENTS.md lists and --len. Ask for any missing fact. Never invent prices, times, reviews, addresses or contacts.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/comedy-club-website-template my-site`.

### Comedy club website design prompt for any AI tool

Paste this comedy club website design prompt into Claude Code, Codex, Cursor, Lovable, v0 or Bolt to build a venue's site from scratch, or hand it to a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.

```text
Build a one-page website for a comedy club that runs a show every night, serves drinks and hires out the room. Static HTML, CSS and a little GSAP; no framework.
Sections in order: navigation, opening with tonight's four-act running order, a week of seven shows, the room, house rules, open-mic sign-up, five alumni portraits, bar, private hire, reviews, questions, visit, footer.
Type: Instrument Sans in bold uppercase for headings, medium weight for body, bold uppercase for buttons; Playpen Sans at weight 800 only for house rules, step numbers, bar item names and the closing wordmark.
Colours: #ffd20a yellow for the nav bar, buttons and alternate grounds, #141414 near-black for text, borders and the dark panels, #ffffff for the room, bar and questions sections.
Motion: one idea, a brush stroke is drawn through each old house rule as you scroll and the real rule drops in with a squash. Respect prefers-reduced-motion.
Avoid: purple gradients, three icon cards, a centred hero with two buttons. Use pill-shaped bars, buttons and week rows, grounds that flip between yellow, white and black like stacked posters.
Copy: short and concrete. Ask me for show names, times, prices, capacity, address, box office hours and ticket link; never invent them or any reviews. Mark every placeholder.
One action: Book tonight, repeated on each week row and in the visit section.
Phone: check at 390 px, 44 px tap targets, no horizontal scroll.
Done when: no console errors, visible keyboard focus, and you list every placeholder.
```

## About

Built around a weekly bill, it suits a stand-up night, an improv or roast venue, a cabaret, or a theatre website template for a small studio with a bar. The bill, a seven-row programme, an open-mic sign-up, a drinks menu and room hire are already on the page. Anyone shopping for a theater website template with a programme on the first screen gets one here.

Replace the tonight panel first: date, doors time, price, the four acts and the seats note. Then the seven week rows, the house rules, the six bar items and the hire packages. Keep the section ids, the data-8b-section and data-8b-motion attributes and the class names AGENTS.md lists. Ask the owner for capacity, address, box office hours, ticket links and accessibility details. A [vibe coding session in Claude Code](https://8b.com/templates/for-claude-code/) or Cursor should never invent them.

Pick this comedy club website template for Claude Code or Cursor when one venue needs one long page with a nightly programme. It has no ticket engine and no calendar: every Book button is a link you point at your ticketing page, and dates are typed by hand. For a business that sells planned events rather than nightly tickets, a [garden wedding studio](https://8b.com/templates/aubade/) page fits better. The weak spot is the alumni line-up, which is built for five portraits.

## Design

- Palette: #ffd20a (page ground behind the week, open mic, hire and visit sections, the nav bar, the yellow buttons and the hover fill of the dark ones, and headings and names on dark sections), #141414 (text and borders on light grounds, the first-screen panel, house rules, alumni, reviews, footer and menu overlay grounds, and the dark buttons), #ffffff (grounds of the room, bar and FAQ sections, text on dark grounds, the menu link hover colour and the hover fill of the yellow buttons)
- Fonts: Instrument Sans (headings in bold uppercase, body text in medium weight, labels, pills and buttons in semibold or bold uppercase), Playpen Sans (weight 800 only: the menu links, the real house rules, open-mic step numbers, alumni names, bar item names, the closing wordmark and the footer mark)

Rounded pills carry most of the interface: the nav bar, buttons, form fields and the seven week rows, with 40px corners on the form and FAQ items. Section heads sit in two columns, heading left and a lead paragraph right. Headings are uppercase, with small inline arrows and brush underlines. The first screen is a dark panel: title and running order left, a tall headliner photo right. On phones it stacks.

The page flips between yellow, white and black grounds like stacked posters. House rules are struck through with a drawn brush stroke before the real rule drops in with a squash. Buttons fill with a wobbling blob on hover, and a black blob shrinks into the closing wordmark.

## Sections and motion

- **Navigation** (navigation): fixed top bar: wordmark with an 18+ mark, five section links, Menu button; hides on scroll down; full-screen menu overlay. Motion: The top bar slides out of view on a scroll down past 120px and returns on a scroll up; the Menu button opens a full-screen overlay.
- **The Late Show, Snort comedy club, Leeds** (opening): tonight's show: date and doors line, the heading "The Late Show", a short intro, a four-act running order, a Book tonight button and a headliner photo. Motion: On load the text blocks rise in one after another, the title settles from a larger size, the photo zooms in and the caption fades in.
- **Seven nights, seven crowds** (week): seven nights as seven capsule rows: day, show name, one line, time and price, a small photo and a Book link. Motion: As each of the seven rows crosses the middle of the screen, a black fill grows out of the day disc across the row and the colours swap, then it shrinks back.
- **One arch, 164 seats, nowhere to hide** (room): the venue in three facts: a heading, two photos and three short blocks (distance to the mic, the train, the brick vault). Motion: The heading lines slide into place, the line with the arrow dropping from above, and the yellow underline draws itself, once.
- **House rules (the real ones)** (rules): five house rules, each a crossed-out polite rule and the real rule under it. Motion: Scrubbed by scroll: a brush stroke draws through each old rule, it tilts with a bounce, and the real rule drops in with a squash.
- **Fresh Meat five minutes, one mic** (openmic): open-mic sign-up: heading, three steps with numbers, a photo and a short form. Motion: The heading lines slide into place, and the three step numbers squash and bounce into place.
- **They bombed here first** (alumni): five comics who started at the open mic, portraits in a spotlight line-up. Motion: On wide screens the section holds for nearly two screens of scroll while a spotlight travels along the five portraits, lighting each in colour and lifting it slightly; on phones the same spotlight follows the scroll without pinning.
- **The bar stays open till two** (bar): the bar: heading and six items (four drinks, two snacks) with photos and prices, on a pinned sideways track. Motion: The section pins and the six bar cards slide sideways as you scroll, leaning with the scroll speed, while each photo drifts inside its frame.
- **Hire the arch** (hire): private hire: photo, heading, three priced packages and an enquiry button. Motion: The heading lines slide into place, the underline draws itself and the three price pills squash into place.
- **Overheard at the bar** (reviews): six short quotes with a face and a first name, in a grid. Motion: Scrubbed by scroll: each face grows and wobbles in turn while a brush underline is drawn beneath the name.
- **Asked before** (faq): six questions and answers in native <details> elements beside a sticky heading. Motion: The heading slides in; answers open and close natively and the plus icon rotates.
- **Come round the arches** (visit): address, box office, email and directions under a call button, ending in a huge wordmark. Motion: A black blob that covers the section on arrival shrinks to nothing at the closing wordmark, which then springs up from a squashed shape.
- **Footer** (footer): footer: wordmark and note, club links, social and newsletter links, copyright with the Design: 8B credit

## Good for

- comedy club or stand-up night
- small theatre, cabaret or improv venue
- live music venue, pub or bar with a weekly programme
- any local venue with a night-by-night schedule and private hire

## Questions

**Is this a free comedy club website template?** Yes. It is one index.html under the MIT license, with no build step and no CMS. GSAP, ScrollTrigger and Lenis load from jsDelivr, fonts from Google Fonts, and the photos are Unsplash images listed in CREDITS.md, so you can use it for your own club or for client sites.

**Can it work for a theatre or a live music venue?** Yes, if the venue has a weekly bill, a bar and rooms to hire, all on [one page of shows and rooms](https://8b.com/templates/one-page/). For theater website design, rename the shows, swap the open mic for your own community night and change the house rules. A venue that needs seat maps or a booking calendar will need a ticketing service linked in.

**Is there a comedy club website design prompt for an AI agent?** Yes, further up this page: a full prompt that works without this file. In v0, [the comedy club card](https://8b.com/templates/for-v0/) loads the files instead. With the file, put index.html and AGENTS.md in one folder, open it in Claude Code, Cursor or Codex and paste the short prompt. AGENTS.md lists what to replace, facts to ask for and the selectors scripts use.

**What must stay when I edit the file?** Keep every id, data-8b-section, data-8b-motion and data-8b-part, and the class names AGENTS.md lists. The week rows and bar cards take any number of items, but the alumni line-up is built for five portraits. Update the --len value on the wordmark if you rename the venue.

**Does the open-mic form send anything?** No. The script checks the name and email, shows a thank-you line and resets the form; nothing leaves the page. Connect Formspree or Netlify Forms in the form tag and the script, or delete the form. The Book buttons are plain links until you point them at your ticketing page.

**Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the site in a sentence and its engine designs a new one, its own design and not this template. Designing is free. Hosting with SSL, HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs in Claude and ChatGPT through the 8B connector.

## Before publishing

Replace: social preview image, favicon, phone number, email address, contact form (sends nothing yet), map and social media links, plus the invented demo facts (prices, dates, addresses).

- Book tickets button in the phone menu overlay lead to #week (the programme) now; point them to your ticketing page.
- Book tonight button on the first screen lead to #visit (the address and box office phone) now; point them to the ticket page for tonight's show.
- Book buttons on the seven night rows in the week section lead to #visit for Tuesday, Wednesday, Friday, Saturday and Sunday, #openmic for Monday, #tonight for Thursday now; point them to one ticket page per night, or one booking page for all seven.
- Ask about a date button in the hire section lead to a mailto link to hire@snort.example now; point them to your private hire enquiry address or form.
- Call the box office button in the visit section lead to tel:+441130000000 now; point them to your box office phone number.
- Directions link in the visit section lead to a Google Maps search for Leeds now; point them to a Google Maps link to your venue.
- Instagram, TikTok and YouTube links in the footer lead to the home pages of the three networks now; point them to your profile addresses.
- Newsletter link in the footer lead to a mailto link to hello@snort.example with the subject Newsletter now; point them to your newsletter sign-up page.
- The open-mic form only checks the fields and shows a message; it sends nothing until you connect a form service or remove it.
- The bar pins the screen for its sideways track at every width, and the alumni section holds for about 1.8 screens on screens wider than 900 px, which can feel long on short laptop screens.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).
