# Free burger restaurant website template > Free HTML burger restaurant website template for burger bars and diners: menu board, booth booking, motion. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. Burger restaurant website template: one free HTML file for a burger bar or casual diner, with a six-burger menu board, a five-step method section, house pickles, weekly nights and a booth booking form. Lime, deep green and check paper give it a loud, friendly look, and AGENTS.md lets Claude Code or Cursor adapt it. - Page: https://8b.com/templates/dillys/ - Live demo: https://8b.com/templates/dillys/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/dillys/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/burger-restaurant-website-template - Download ZIP: https://8b.com/templates/dillys/burger-restaurant-website-template.zip - Template name in the repository: Dilly's - At a glance: One 144 KB index.html with its CSS and JavaScript inside, 12 sections, 14 Unsplash photos credited in CREDITS.md, Asta Sans, Besley and Bricolage Grotesque 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/burger-restaurant-website-template/main/index.html curl -LO https://raw.githubusercontent.com/8bsite/burger-restaurant-website-template/main/AGENTS.md curl -LO https://raw.githubusercontent.com/8bsite/burger-restaurant-website-template/main/LICENSE curl -LO https://raw.githubusercontent.com/8bsite/burger-restaurant-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 wordmark, the six burgers, the five method steps, the pickle list, the quotes and the photos. Keep the section ids and the classes AGENTS.md lists for each script. Ask me for any missing fact and never invent prices, hours, sourcing claims, reviews 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/burger-restaurant-website-template my-site`. ### Burger restaurant website design prompt for any AI tool Use this to build a burger bar or diner site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt. It is this template's design as decisions, the same ones its token file for agents holds. The short prompt above is enough for the template itself. ```text Build a one page website for a burger bar or casual diner. The audience is hungry locals and groups choosing where to eat tonight. Sections in order: navigation, opening with a photo and a text panel, menu board of six burgers and six sides with prices, five step cooking method, house pickles, the room, weekly nights, house rules, questions, customer quotes, booking and visit block, footer. Type: Bricolage Grotesque in heavy condensed weight for headings, Besley for prices and quotes, Asta Sans for body text and buttons. Colours: lime #d7f36b for the navigation bar and pickles, ink #131510 for text and dark bands, green #12801f for buttons, forest #0b3a17 for panels and hard shadows, white #ffffff for menu and cards, red #e2382a only for a small diamond on stickers. Motion has one idea, things thrown onto a table: headings slam in, stickers stamp, photos reveal through a check pattern, each once. Respect prefers-reduced-motion. Layout: full width bands that change ground colour, hard offset shadows with no blur, pill buttons, scalloped stickers. Do not use purple gradients, glass blur, icon cards or a centred hero with two buttons. Copy is short, concrete and in the bar's voice. Ask me for prices, address, hours, allergens and group booking rules; never invent them or any reviews, and leave marked placeholders. One primary action, booking a booth, repeated in the opening and the visit block. Check at 390 px width, fold grids to one column, keep tap targets at least 44 px. Acceptance: no console errors, visible keyboard focus, every placeholder listed. ``` ## About This suits places with a short menu: smash-burger bars, diners, chippies, taprooms and pubs that take group bookings. As a one page restaurant website it puts the menu with prices, hours, address and a booking form into one scroll, which is usually all that restaurant websites for small bars need. If you want a menu restaurant template with dozens of dishes in categories, pick a layout built for that. As a burger restaurant website template for Claude Code, Cursor or Codex, it goes fastest when you vibe code it and the agent has the facts only the bar can give: menu and prices, hours, address, allergens, weekly nights and group booking rules. The demo's hours, prices, sourcing claims and quotes are invented. Replace the wordmark, the six menu cells, the five method steps, the pickle list and the quotes first, and leave the section ids and the classes AGENTS.md lists for each script alone. Pick this for a counter-service bar that wants noise and colour. A sit-down table-grill place with set menus fits the [Korean barbecue](https://8b.com/templates/hwaro/) template better. The weak spot is booking: the form sends nothing until a service is connected, and there is no ordering or delivery. Owners who do not want to touch code can build a new site with 8B's builder instead. ## Design - Palette: #d7f36b (navigation bar, the lime menu cells, the pickles, rules and booking grounds, headings on dark bands, two of the six quote cards, footer check strip), #131510 (text, the thin rules between rows, the griddle and nights bands, the footer, the black band that crosses the house rules), #12801f (filled buttons, round icon buttons and the plus icons on the questions), #0b3a17 (the opening's text panel, every second menu cell, the quotes band and the hard shadows under buttons, cards and stickers), #ffffff (menu, room and questions grounds, sticker faces, four of the quote cards and the booking form, text on the dark bands), #e2382a (only the small diamond above the text on each sticker) - Fonts: Bricolage Grotesque (weight 800 at 75% width: section headings, burger and method names, question text, sticker labels and the huge day names and house rules), Besley (prices, step numbers and pickle names in bold upright, the nav and footer wordmark and the customer quotes in italic), Asta Sans (body text at 400, buttons and links at 500 to 700, and small tracked uppercase labels at 700) Ten bands, each on its own ground: the photo and green panel, white menu, black griddle, lime pickles, white room, black nights, lime rules, white questions, green quotes and a lime booking block. Several open with a big condensed heading on one side and a short paragraph on the other. Two-column checkerboards, 1.5px black rules between rows and scalloped stickers repeat. Below 900 px most grids fold to one column. Colour is rationed by ground: lime, white, black and deep green take turns, and red is only the diamond above each sticker label. Hard green shadows sit under buttons and quote cards. Loud restaurant website design, and restaurant website inspiration for a bar with a voice. ## Sections and motion - **Navigation** (navigation): lime top bar with four links, the wordmark, a map pin, a phone button and a booking link; full-screen phone menu. Motion: The navigation bar slides away after a short downward scroll and comes back on the way up; on phones its links fold into a full-screen menu sheet. - **Ninety seconds on the griddle. Not one more.** (opening): one screen split in two: a photo of hands holding burgers on the left, a deep green panel with the h1 and the griddle claim on the right. Motion: On load the photo zooms in and the heading, text, facts and buttons rise in turn, then the photo drifts slowly in a CSS loop that pauses when it leaves the screen. - **Six burgers. That's the menu.** (menu): a checkerboard of six burgers, each a copy cell and a photo cell, plus a list of sides and drinks. Motion: Each burger cell slides in from the side as it climbs to mid-screen, alternating by row, while its photo settles from a zoom; the heading drops in with a squash. - **Five moves, one griddle.** (smash): dark griddle section: a full-bleed photo squeezed into a strip and the five cooking moves. Motion: On wide, tall screens the section is held for about one and a half screens while the photo flattens from a tall squeeze into a strip, the heading drops in and the five moves rise in turn. - **Pickled upstairs before we open.** (pickles): photo of pickle jars with a price sticker beside a list of five house pickles. Motion: The photo arrives through a check pattern, the sticker stamps in with a small twist, the heading drops in with a squash, and the photo column stays in view beside the list on desktop. - **A room built for elbows.** (room): a photo half and three short stories about the counter, the booths and the back bar. Motion: On desktop the photo column is held while the three stories pass, each new photo replacing the last through the check pattern as you scroll, and a centre seam draws down. - **Every night has a thing.** (nights): four weekly nights as rows with big day names, beside a photo and a sticker. Motion: The heading drops in, the photo arrives through the check pattern and the sticker stamps in, each once. - **House rules.** (rules): five house rules in huge type that a black band re-colours as they pass through the middle of the screen. Motion: A black band holds the middle of the screen while the five rules scroll behind it, and any rule inside the band reads lime on black. - **Questions we hear a lot.** (faq): six questions and answers (native
). Motion: The heading drops in once; each question opens natively and its plus icon turns into a cross. - **Said at the counter.** (talk): six customer quotes as stickers thrown on a table that settle into two columns. Motion: The six quote cards start displaced and tilted, then settle straight into two columns as the board crosses the screen. - **Come in, or book for six.** (visit): night photo, address, hours, contact lines and a booth booking form. Motion: The photo arrives through the check pattern and the heading drops in, each once. - **The bar** (footer): check strip, wordmark with one line, three link columns and the copyright line. Motion: The black and lime check strip slides sideways as the footer scrolls into view. ## Good for - burger bar or smash burger restaurant - diner, chippy or casual street-food restaurant - pub, taproom or cafe with a short menu and group bookings - any food or drink brand that wants a bold, sticker-and-checks look ## Questions **Is it free to use for a bar's own site or a client's?** Yes. It is a single index.html under the MIT license, so a burger bar or a freelancer building for one can ship it at no cost. GSAP, ScrollTrigger and Lenis, which drive [the scroll-linked motion](https://8b.com/templates/animated/), load from jsDelivr, there is no build step, and the 14 Unsplash photos are listed in CREDITS.md. **Is it a restaurant website template with online ordering?** No. It shows the menu, not a basket: six burgers and six sides and drinks with prices, and no cart, payment or order form. The See the menu button can point to an ordering page you already use, and the demo's collection and booking lines are for you to replace. **Where does the booth booking form send its requests?** Nowhere yet. It checks name, mobile, date, time and party size, shows a thank-you line that promises a text within the hour, and clears the fields. Connect Formspree or Netlify Forms using the steps in AGENTS.md, or link to OpenTable, SevenRooms or Resy, and edit that promise. **How do I hand it to Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder with the curl lines at the start of AGENTS.md and tell the agent to read AGENTS.md first. To start from scratch in Lovable, v0 or Bolt, paste the burger restaurant website design prompt further down this page instead, or [hand Bolt the repository](https://8b.com/templates/for-bolt/) with one button. **Which parts of the file break if I change them?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists per script. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it. **Can I get a site like this without editing code?** Yes, with a different tool. [8B's AI website builder](https://8b.com/) designs a new site from a one-sentence description, 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 through the 8B connector. ## Before publishing Replace: social preview image, favicon, phone number, map, email address, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). - Book a booth (6+) link in the top bar and the Book a booth button in the phone menu lead to #book, the booking form near the end of the page now; point them to your booking page (OpenTable, SevenRooms, Resy) if you use one, or keep #book once the form is connected. - Map pin button in the top bar lead to #visit, the visit section now; point them to keep it, or point it at your Google Maps listing. - Phone buttons and links (top bar, questions, visit section, footer) lead to a tel: link to the demo number now; point them to your bar's phone number as tel:+44.... - Open in maps link in the visit section lead to a Google Maps search for Glasgow now; point them to the Google Maps link of your bar. - See the menu button in the opening lead to #menu now; point them to keep it, or link a PDF or online ordering page. - Request the booth button in the booking form lead to submits the form to nothing; a script shows the thank-you line and resets the fields now; point them to a form service (Formspree, Netlify Forms) or your booking system. - The booking form sends nothing: the button only shows the thank-you line, so connect a form service or your booking system before publishing. - On screens under 900 px wide or 640 px tall the griddle scene, and under 900 px wide the room scene, switch to lighter versions without the held stage. - The stylesheet still carries rules for a lime hero with a band and a sticker that no markup uses; they can be deleted. ## 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).