Free arcade bar website template

Live demo Download ZIP Build without code GitHub

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: quarter-moon.md, data: quarter-moon.json

Arcade bar website template: first screen on a phone

About this arcade bar website template

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.

At a glance, October 2026. 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.

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.

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, 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.

Good for:

Arcade bar, barcade or pinball venueBar, pub or club with weekly events and private hireBowling, escape room, mini golf or other entertainment venue that takes bookingsAny venue or studio that wants framed photos with notched tabs and a playful, colourful look

Turn the arcade bar 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/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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my venue: name, address, machines, weekly events and league rules, prices, private hire options, menu, hours, owners' names, how people book>. 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.

In a terminal

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.

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.

Arcade bar website design and motion

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.

Every value of this arcade bar 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 arcade bar website page

Navigation
Chunky two-colour wordmark, five links, a Book a booth button and a menu button that opens a full-screen overlay
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
Dark rounded panel with the h1, a short intro, two actions and four framed room cards that stack as you scroll
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
A featured event card with a Tonight tab and three dated event rows with thumbnails
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.
Tall portrait in a yellow frame, the owners' story in a blue panel, social links and three loose prints
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
Copy and a join button beside a six-row high-score board that sorts itself into rank order
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
Black-and-white photo of friends in a dark frame with the house rule laid over it
The tab drops in and the quote and its signature slide in from opposite sides.
Three ways to play
Pink wall of repeated Insert coin rows around a dark card with three ways to play
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
Three hire options with prices beside a framed party photo
The three hire rows slide in from alternating sides and the photo tab drops in.
Behind the long bar
Six drinks and plates as framed cards in one row that travels sideways while the section holds
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
Three regulars' reviews whose words light up as they rise
Each quote fades in word by word as it rises, and the signatures slide in.
Find the green-lit arches
Address, opening hours, phone and email beside a photo, and a booth booking form
The tab on the photo drops in on arrival.
One new machine on the floor every month. Hear about it first.
Big wordmark, email sign-up with a photo, a dark card with a blurb, three link columns and the base line
The two O discs of the wordmark roll in from beyond the right edge and settle into place as the wordmark scrolls into view.

Before you publish the arcade bar website site

Replace social preview image, favicon, social media links, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this arcade bar website template

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. 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.

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 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.

Not a arcade bar website? More free templates