# Free arcade bar website template > Free HTML arcade bar website template for game venues with league nights, private hire and booking. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. Arcade bar website template: one free HTML file for a bar or game venue that runs league nights and private hire. It has a room tour, a week of events, a high-score board, prices, a drinks menu and a booking form, in cream and charcoal with pink, blue and yellow photo frames. AGENTS.md is included for Claude Code or Cursor. - Page: https://8b.com/templates/quarter-moon/ - Live demo: https://8b.com/templates/quarter-moon/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/quarter-moon/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/arcade-bar-website-template - Download ZIP: https://8b.com/templates/quarter-moon/arcade-bar-website-template.zip - Template name in the repository: Quarter Moon - At a glance: One 93 KB index.html with its CSS and JavaScript inside, 12 sections, 23 Unsplash photos credited in CREDITS.md, Climate Crisis, Roboto Serif and Savate from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); 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/arcade-bar-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/arcade-bar-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/arcade-bar-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/arcade-bar-website-template/main/CREDITS.md ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . Replace first the venue name everywhere, the owners' story, the league board, prices, menu, hours and photos. Keep the section ids, the classes AGENTS.md lists and the board rows in rank order, and set the footer wordmark's --len to the new name's length. Ask me for any missing fact; never invent prices, hours, scores, 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/arcade-bar-website-template my-site`. ### Arcade bar website design prompt for any AI tool Use this prompt to build an arcade bar or game venue site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions; with the template itself, the short prompt above is enough. ```text Build a one-page website for an arcade bar or game venue that runs weekly events, a league and private hire, for people choosing a night out. Plain HTML, CSS and JavaScript, one file. Sections in order: sticky bar, first-screen panel, the floor, this week's events, owners, league board, house rule, ways to play with prices, private hire, drinks and food menu, reviews, visit and booking form, footer. Type: Roboto Serif condensed, weight 300, for headings; Savate for body, labels and buttons; Climate Crisis for the wordmark only. Colours: #fefaed cream page, #211e1c charcoal blocks and text, #f5a8c6 pink, #a9c1ff blue and #f5e63d yellow for photo frames and fills, #5a544f secondary text. Motion idea: things stack, sort and slide (cards pile, the board re-sorts, the menu travels sideways); turn all of it off under prefers-reduced-motion. Layout: large rounded blocks with 20px corners, photos in thick colour frames with notched title tabs. No neon, pixel fonts, glows or purple gradients, no row of three icon cards, no centred hero with two buttons. Copy: short and concrete. Ask me for hours, prices, machines, league rules, menu and address; never invent them or reviews; mark every placeholder. One primary action, Book, repeated in the bar, hire and visit. Check 390px width, 48px tap targets, visible keyboard focus and no console errors, then list every placeholder. ``` ## About Bar websites that run on events need the week, the price and the booking button in one scroll, and this page has them: this week's nights, a league board, three ways to play, private hire and a booking form. As an arcade bar website template for Claude Code and Cursor, it suits a barcade or pinball hall, and a bowling, escape room or mini golf venue can reuse it with a text pass. Give Claude Code, Cursor or Codex the facts only the venue has: hours, machine counts, league rules, coin and hire prices, menu, address and the owners' names. The demo invents all of them, along with the board's scores and the three reviews. The agent should replace the venue name everywhere, set the footer wordmark's --len to the new name's length and point the Book buttons at your booking page. A one-file page suits [vibe coding in Claude Code](https://8b.com/templates/for-claude-code/). It fits a venue that sells a night out: events, a league, hire and a short menu. A cafe built around a library of board games is better served by [a layout made for game shelves](https://8b.com/templates/quarter-turn/), and a venue that sells tickets by the time slot needs a real booking tool. The weak spot is length: the room tour and the sideways menu both take a long scroll on a short phone. Without a coding agent, 8B's builder is the no-code route. ## Design - Palette: #fefaed (page and bar ground, text on charcoal blocks, button text on charcoal buttons, form field ground), #211e1c (text, the first-screen panel, league board, ways-to-play card, footer card, main buttons, charcoal photo frames, focus outline), #f5a8c6 (pink photo frames, the Insert coin wall, the league badge, the first O disc, button hover fills, event row hover), #a9c1ff (blue photo frames, the menu overlay, the owners' panel, the visit info panel, the newsletter block, the Book a booth button in the bar, the second O disc), #f5e63d (yellow photo frames, the menu button, the champion row, prices on the dark card, focus outline on dark blocks), #5a544f (secondary text: intros, small labels, game names, the booking form's status line), #d3ccc0 (secondary text on charcoal: the first-screen intro, option text, the board note, footer headings and base line), #ffffff (white photo frames, event rows, board rows, the booking form, the newsletter input, small prints, secondary buttons) - Fonts: Climate Crisis (the wordmark in the bar and the footer: one heavy weight, all capitals, tight line height), Roboto Serif (headings, tab titles, board initials and scores, quotes: weight 300 for large headings and quotes, 400 for tab titles and smaller headings, in a condensed width), Savate (body text, labels, form fields, buttons and links: 400 for text, 500 for small labels, 600 for buttons) A cream page of large rounded blocks: a charcoal panel opens it, then pink, blue, white or charcoal blocks with 20px corners hold the board, prices and owners. Most photos sit in 6px frames in pink, yellow, blue, white or charcoal, with title tabs notched into the frame edge. Sections alternate two-column splits with full-width rows. A sticky bar carries the wordmark, links and a Book a booth button; below 900px a menu button opens a blue overlay. This bar website design is playful rather than neon. For an arcade themed website it keeps a cream ground, a condensed light serif for headings and a heavy display wordmark whose two O letters are pink and blue discs that roll in from the right in the footer. ## Sections and motion - **Navigation** (navigation): chunky two-colour wordmark, five links, a Book a booth button and a menu button that opens a full-screen overlay. Motion: The bar hides when you scroll down past 120px and returns on scroll up, with or without reduced motion; the menu button opens a full-screen overlay. - **What's on the floor** (features): dark rounded panel with the h1, a short intro, two actions and four framed room cards that stack as you scroll. Motion: The heading, intro and buttons rise in on load; the four photo cards then stick one under another, each shrinking to 90% and dimming as the next covers it, while three coloured bands drift sideways behind. - **This week under the arches** (events): a featured event card with a Tonight tab and three dated event rows with thumbnails. Motion: The Tonight tab drops out of the card edge and the three event rows slide in from alternating sides as they arrive. - **We're Ailsa and Dev. We fixed our first cabinet on a kitchen table in Partick.** (about): tall portrait in a yellow frame, the owners' story in a blue panel, social links and three loose prints. Motion: The portrait eases from a 1.24 times zoom to its frame while three small prints, piled in the middle, fan out to their tilted places. - **Your initials on the board by Sunday** (league): copy and a join button beside a six-row high-score board that sorts itself into rank order. Motion: As the board crosses the screen the champion row climbs past each row from the bottom until all six stand in rank order and the first row turns yellow. - **Quote** (quote): black-and-white photo of friends in a dark frame with the house rule laid over it. Motion: The tab drops in and the quote and its signature slide in from opposite sides. - **Three ways to play** (pricing): pink wall of repeated Insert coin rows around a dark card with three ways to play. Motion: The four Insert coin rows drift in opposite directions as the section crosses the screen and rest briefly in the middle; the card title tab drops in. - **Have the arches to yourselves** (private-hire): three hire options with prices beside a framed party photo. Motion: The three hire rows slide in from alternating sides and the photo tab drops in. - **Behind the long bar** (menu): six drinks and plates as framed cards in one row that travels sideways while the section holds. Motion: The section holds the screen while the six cards slide left by the full length of their overflow; without the script or with reduced motion it is a native sideways scroller. - **What the regulars say** (testimonials): three regulars' reviews whose words light up as they rise. Motion: Each quote fades in word by word as it rises, and the signatures slide in. - **Find the green-lit arches** (contact): address, opening hours, phone and email beside a photo, and a booth booking form. Motion: The tab on the photo drops in on arrival. - **One new machine on the floor every month. Hear about it first.** (footer): big wordmark, email sign-up with a photo, a dark card with a blurb, three link columns and the base line. Motion: The two O discs of the wordmark roll in from beyond the right edge and settle into place as the wordmark scrolls into view. ## Good for - arcade bar, barcade or pinball venue - bar, pub or club with weekly events and private hire - bowling, escape room, mini golf or other entertainment venue that takes bookings - any venue or studio that wants framed photos with notched tabs and a playful, colourful look ## Questions **Is this one of the free bar website templates I can use for client work?** Yes. It is one index.html under the MIT license, so you can use it for your own bar or for a client at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step or CMS, and CREDITS.md lists the Unsplash photos and the three Google fonts. **Does it work as an arcade game website template for a venue without a bar?** Yes, after a text pass. Bowling, escape rooms, mini golf and pinball halls reuse the events, league board, ways to play, hire and booking sections of its [single-scroll layout](https://8b.com/templates/one-page/). With no bar, delete the drinks menu section, its menu-track script block and the three Menu links, in the header, the phone overlay and the footer. **Does the booking form send bookings?** No. As shipped, the booth form and the newsletter form check their fields, show a thank-you or error line and send nothing. Connect them to Formspree or Netlify Forms, or point the Book a booth buttons at your own booking page or ticketing link. **How do I give it to Claude Code, Cursor or Codex?** Download index.html, AGENTS.md, LICENSE and CREDITS.md into the project folder, then paste the prompt from this page with your venue facts in the angle brackets. Starting without the file? Paste the arcade bar website design prompt below into Lovable, v0, Bolt or [Build mode in Google AI Studio](https://8b.com/templates/for-google-ai-studio/). **What must I keep when I change the text?** Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, the classes AGENTS.md lists for each script, the board rows in rank order and the wordmark's two O spans. The Insert coin wall grows from one phrase, so change that single word element. **Can I get a site like this without editing code?** Yes. [8B's AI website builder](https://8b.com/) designs a new site from a one-sentence description; it is its own design, not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT. ## Before publishing Replace: social preview image, favicon, social media links, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). - Book a booth buttons in the header, the menu overlay, the first section and the ways-to-play card lead to #visit, the booking form near the end of the page now; point them to your booking page URL (a booking tool or ticketing link) if you take bookings there, or keep it on the form. - Book for a night button in the events section, and the three event rows lead to #visit now; point them to the event or ticket page of each night, or keep them on the form. - Instagram, TikTok and YouTube links in the owners block and the footer lead to the root of each network (instagram.com, tiktok.com, youtube.com) now; point them to your own profile URLs. - Email the bar button in the footer lead to a mailto link to the demo address now; point them to your enquiries address. - Hire the arches, Our house rule, Join on Thursday and Ask about a date buttons lead to #hire, #rules, #visit and #visit now; point them to keep them as anchors, or point them at your own hire or sign-up page. - With reduced motion the header still hides on scroll down, the button and link hovers still animate and the floor cards still stack (CSS sticky); smooth scrolling, the load rise-in and the scroll animations stop. - The floor section holds roughly five screens of scrolling for four photos, and the menu row pins the page while it slides; both feel long on short phone screens. - GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr at the end of the body; if they fail, no scroll animation runs and the page shows everything in place. ## 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).