Free comedy club website template
Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.
MIT license · Made by 8B, an AI website builder · Plain text: snort.md, data: snort.json
About this comedy club website template
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.
At a glance, October 2026. 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.
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 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 page fits better. The weak spot is the alumni line-up, which is built for five portraits.
Good for:
Turn the comedy club website template into your site with an AI agent
With an AI coding agent
Files (PowerShell: curl.exe):
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.mdPrompt for the agent:
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.In a terminal
npx degit 8bsite/comedy-club-website-template my-siteComedy 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.
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.Comedy club website design and motion
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 buttonsFonts
- 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.
Every value of this comedy club website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.
What is on the comedy club website page
- NavigationFixed top bar: wordmark with an 18+ mark, five section links, Menu button; hides on scroll down; full-screen menu overlay
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, LeedsTonight'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
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 crowdsSeven nights as seven capsule rows: day, show name, one line, time and price, a small photo and a Book link
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 hideThe venue in three facts: a heading, two photos and three short blocks (distance to the mic, the train, the brick vault)
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)Five house rules, each a crossed-out polite rule and the real rule under it
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 micOpen-mic sign-up: heading, three steps with numbers, a photo and a short form
The heading lines slide into place, and the three step numbers squash and bounce into place.
- They bombed here firstFive comics who started at the open mic, portraits in a spotlight line-up
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 twoThe bar: heading and six items (four drinks, two snacks) with photos and prices, on a pinned sideways track
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 archPrivate hire: photo, heading, three priced packages and an enquiry button
The heading lines slide into place, the underline draws itself and the three price pills squash into place.
- Overheard at the barSix short quotes with a face and a first name, in a grid
Scrubbed by scroll: each face grows and wobbles in turn while a brush underline is drawn beneath the name.
- Asked beforeSix questions and answers in native <details> elements beside a sticky heading
The heading slides in; answers open and close natively and the plus icon rotates.
- Come round the archesAddress, box office, email and directions under a call button, ending in a huge wordmark
A black blob that covers the section on arrival shrinks to nothing at the closing wordmark, which then springs up from a squashed shape.
- FooterFooter: wordmark and note, club links, social and newsletter links, copyright with the Design: 8B credit
Before you publish the comedy club website site
- Replace social preview image, favicon, phone number, email address, contact form (sends nothing yet), map and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
- 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 Thursdaynow; 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.examplenow; point them to your private hire enquiry address or form. - Call the box office button in the visit section lead to
tel:+441130000000now; point them to your box office phone number. - Directions link in the visit section lead to
a Google Maps search for Leedsnow; 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 networksnow; point them to your profile addresses. - Newsletter link in the footer lead to
a mailto link to hello@snort.example with the subject Newsletternow; 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.
Questions about this comedy club website template
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. 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 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. 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.



