Free board game cafe 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: quarter-turn.md, data: quarter-turn.json
About this board game cafe website template
Board game cafe website template: one free HTML page for a game cafe or tabletop library, with a table fee on the first screen, four game shelves, table guides, a seven-day week, a menu, private hire and a booking form. Navy, sky blue, amber and pink quarter-circle tiles carry the look. AGENTS.md lets Claude Code, Cursor or Codex adapt it.
At a glance, October 2026. One 95 KB index.html with its CSS and JavaScript inside, 12 sections, 9 Unsplash photos credited in CREDITS.md, Onest and TikTok Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.
A venue that earns from teaching, evenings and food needs a page that shows all three, and this one does in order: a flat table fee, a library shelved by mood, guides, a week with something on every night but Monday, a menu and a long table for hire. As a board game cafe website template for Claude Code and Cursor it also suits a pub with game nights or a hobby shop with a play area.
Vibe coding with Claude Code, Cursor or Codex goes fastest when the agent has the venue's real facts: table fee, shelf games, hours, weekly nights, menu prices, hire terms and address. The demo invents them all, and its 20 game titles are real published games, so the agent swaps in your own library. Renamed, the long table heading and footer name need new --len numbers. Keep exactly four shelf cards, seven days with the booking cell and ten card cells; those scripts stop with an error otherwise.
Choose this when the venue sells teaching, nights and food together and wants a loud, colourful look. A bakery template fits a counter that sells baked goods by pre-order better, and a venue that needs many pages or a live booking calendar needs more than one file. The weak spot is the form: it checks the fields and shows a thank-you line but sends nothing. For a site without code, 8B's builder makes a different design.
Good for:
Turn the board game cafe 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/board-game-cafe-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/board-game-cafe-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/board-game-cafe-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/board-game-cafe-website-template/main/CREDITS.mdPrompt for the agent:
Read AGENTS.md, then edit index.html. Make this the site for <my game venue: name, address, table fee and child price, games on each shelf with player counts and lengths, weekly nights, menu with prices, long table hire terms, loyalty card, hours, phone and email>. Replace first the name, 20 game titles, fees, hours, menu and contacts. Keep four shelf cards, seven days plus the booking cell, ten card cells and every --len matched to its label. Ask me for missing facts; never invent prices, hours or contacts.In a terminal
npx degit 8bsite/board-game-cafe-website-template my-siteBoard game cafe website design prompt for any AI tool
Use this to build a board game cafe site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt. It is this template's design written as decisions, as in prompts for other venues and trades; with the template itself, the short prompt above is enough.
Build a single-page website for a board game cafe and tabletop library in plain HTML, CSS and JavaScript, with GSAP and ScrollTrigger from a CDN and no build step. Audience: players choosing where to spend an evening, and groups booking a table. Sections in order: navigation, opening with the flat table fee, game library in four shelves, guides who teach, a seven-day week of nights, kitchen menu, long table hire, prototype night, loyalty card, questions, visit with address and hours, footer. Type: TikTok Sans, uppercase and very wide, weights 700 to 900, for headings, labels and buttons; Onest for reading text. Colours: navy #23264a for text and the primary button, sky blue #05a6f7, amber #ffab03 and pink #ff74a6 as full-width section grounds, pale grey #e6ebf1 as the page ground, white only on navy. Shapes: quarter circles, discs and long pills drawn in CSS; buttons and inputs get one rounded corner and three square ones. Avoid purple gradients, shadows, three identical icon cards and a centred hero with two buttons. Motion: one idea, the quarter turn; tiles and cards swing into place as sections arrive, and everything holds still under prefers-reduced-motion. Ask me for the table fee, game titles with player counts, weekly nights, menu prices, hire terms, address, hours, phone and email; never invent them, leave visible placeholders. One primary action, requesting a table, repeated wherever a section ends. Mobile: check at 390 px, tap targets of at least 44 px. Done when there are no console errors, keyboard focus is visible and every placeholder is listed.Board game cafe website design and motion
Palette
#23264a text on light grounds, primary button, the library, long table and visit grounds, first screen price bars, form borders, two-pixel rules and the Monday and Friday tiles#05a6f7 the week ground, the first library card, the tile beside the guides photo, the corner tiles of two menu groups, the open mark in the questions and the rule above each hours row#ffab03 the first screen ground, the loyalty section ground, the third library card, the secondary button and the Tuesday and Saturday tiles#ff74a6 the kitchen ground, button hover fill, the second library card, guide step pillars, the Wednesday and Sunday tiles and the pink arcs in the visit field#ffffff text on navy, and the fill of the form inputs#e6ebf1 the page ground, the guides, prototype night and questions sections, the fourth library card, the Thursday tile, the form panel and the footerFonts
- TikTok Sans: display face, weights 700 to 900 with width up to 150 percent: uppercase headings, labels, buttons, the name in the bar and the footer, set wide at 125 percent
- Onest: body face, weights 400 to 700: paragraphs at regular, small notes and times at semibold, lead paragraphs at medium
Each section is a slab of one colour, edge to edge: navy library, sky blue week, pink kitchen, amber loyalty card. Content splits into asymmetric columns, about 3:8 for the library and 5:7 for the guides, and cards are told apart by colour alone. Buttons, form fields and the form panel share one signature: a single rounded top-right corner and three square ones. Photos are cut to quarter circles, discs and long pills. Two-pixel rules divide lists.
The page keeps four flat colours, white and a pale grey, and draws its shapes in CSS: quarter circles, arcs and pillars with one rounded corner. The display face is uppercase and very wide, and the long table heading widens and the loyalty card's cells grow as you scroll.
Every value of this board game cafe 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 board game cafe website page
- NavigationTop bar: four-tile mark and name, five links, a Book a table button; below 861 px a menu button opens a full-screen overlay
The fixed bar slides out of view when you scroll down and returns on scroll up, and this keeps working with reduced motion.
- Pull up a chair. We'll teach you the rest.First screen: sliced label, headline, paragraph, a button and a link beside three navy pill bars with the main offers
On load the copy rises into place and the three navy bars open from a small pill in the middle, then their text fades in.
- Seven hundred games, shelved by how your table feelsFour shelf cards on a board, each with a photo, a name, a note and five games with players and length
Pinned on tall desktop windows: the four shelf cards swing a quarter turn into place about their outer corners, one after another; on phones each swings in as its shelf arrives.
- We read the rulebook so you don't have toTable guides: label, heading, paragraph and a photo with a quarter tile, beside four numbered steps
The label slices in, the photo's tile swings a quarter turn and each of the four steps slides in from the right.
- Something on every night but MondayThe week as a sliding-tile board: seven nights and a booking cell
Pinned: the seven day tiles start shuffled around an empty cell and slide one at a time into order until the empty cell becomes the booking cell.
- Food you can eat with one handMenu in four groups with prices and two photos
The label slices in, and the four menu groups slide in from alternating sides while each corner tile swings into place.
- The long tablePrivate hire: a huge heading whose font widens, a long photo and four facts
The heading widens from the narrowest to the widest setting of the display font as it crosses the screen, and the photo grows from a disc into a long pill.
- Bring the game you haven't finishedPrototype night: a photo, label, heading and a slip with Bring, We supply and Sign up
The label slices in and the three slip columns slide in one by one.
- Every tenth visit is on usLoyalty card: label, heading, price, four perks and a button beside a card of ten cells
The ten card cells fill one after another as you scroll, quarter shapes from their square corner, discs from the centre, and the last cell's On us label slides up.
- Before you comeSeven questions as native details elements with a phone link in the heading
The label slices in and each question slides in from the right; opening one turns its mark a quarter turn and changes its colour.
- Come and playAddress, hours, contact links and a table request form over a field of arc tiles
The 16 arc tiles above the address start turned every which way and make quarter turns back into a checkerboard as you scroll through them.
- PlayFooter: four coloured strips, the name large, a short line with the address, three link columns and a base line
Before you publish the board game cafe website site
- Replace social preview image, favicon, email address, phone number, map, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
- Book a table buttons in the top bar, the menu overlay and the first screen; Book a night in the week section; Ask at the counter in the regulars' section lead to
#visit (the Request a table form)now; point them to your booking page, or keep #visit once the form is connected. - How the guides teach link on the first screen lead to
#guidesnow; point them to keep. - Ask about a date button in the long table section lead to
mailto:events@quarterturn.example?subject=The long tablenow; point them to your events email or enquiry form. - Send a pitch for Thursday link in the prototype night section lead to
mailto:playtest@quarterturn.example?subject=Prototype nightnow; point them to your own email or a sign-up form. - Get directions link in the visit section lead to
a Google Maps search for the city (query=Sheffield)now; point them to a map search for your address. - Instagram link in the footer lead to
the home page https://www.instagram.com/now; point them to your profile address. - Send the request button of the table form lead to
the form has action="#" and method="post"; section-script:visit checks it and shows a thank-you line, nothing is sentnow; point them to your form handler (Formspree, Netlify Forms or your booking system), or remove the form and keep the phone and email. - The table form sends nothing: it has action="#", and the script only checks it and shows the status line. Connect it to a handler or a booking system before launch.
- The library section grows to 330vh on desktop windows at least 720 px tall, and the week to 300vh on desktops at least 680 px tall and phones at least 740 px tall, so each holds its board for over two screens of scrolling. On shorter windows the week stays in order, and the library cards stay in place on wide short windows.
- Times and notes are small text on saturated coloured tiles; check their contrast again after recolouring.
- Photos are lazy-loaded from Unsplash, including the first ones below the first screen; self-host them before launch.
Questions about this board game cafe website template
Is this a free board game cafe website I can use for a client?
Yes. It is one index.html under the MIT license, so a freelancer can ship it for a client at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step and no CMS. Photos are Unsplash images and both typefaces are under the Open Font License; CREDITS.md lists the photos.
Where does the table request form send its messages?
Nowhere yet. It checks the required fields, shows a thank-you line and clears itself, with no handler behind it. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or delete the form and keep the phone and email. Also change the promise in the thank-you line to match your real reply time.
How do I hand it to Claude Code, Cursor or Codex?
Put index.html and AGENTS.md in an empty project folder with the curl lines in AGENTS.md, and tell the agent to read AGENTS.md first. Then paste the prompt from this page, filled in with your venue's facts. Starting from scratch? Use the board game cafe website design prompt below, or let Base44 rebuild the look from the demo.
Which parts break if I change them?
Keep the ids, data-8b-section, data-8b-motion and data-8b-part, and the classes AGENTS.md lists. Four shelf cards, seven days plus the booking cell and ten card cells are fixed; the long table heading and footer name need --len equal to their length. Keep the header comment, the 8B meta tag and, unless the site owner asks otherwise, the Design: 8B footer link.
What happens with reduced motion, on a phone or without JavaScript?
With reduced motion, entrance animations, motion tied to scrolling and smooth scrolling are off, so the week and shelves read in place, while hover fills and the bar's hide on scroll keep running. On phones the pinned week needs a tall screen. Without JavaScript the menu button cannot open, and below 861 pixels the bar links are hidden.
Can I get a site like this without editing code?
Not this exact file, but 8B's AI website builder makes a site from a sentence, in a new design of its own. 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 through the 8B connector.
