Free burger restaurant 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: dillys.md, data: dillys.json

Burger restaurant website template: first screen on a phone

About this burger restaurant website template

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.

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

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

Good for:

Burger bar or smash burger restaurantDiner, chippy or casual street-food restaurantPub, taproom or cafe with a short menu and group bookingsAny food or drink brand that wants a bold, sticker-and-checks look

Turn the burger restaurant 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/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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my burger bar or diner: name, address, opening hours, the burgers and sides with prices, allergen and gluten-free policy, weekly nights and offers, how groups book, phone, email, social links>. 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.

In a terminal

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.

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.

Burger restaurant website design and motion

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.

Every value of this burger restaurant 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 burger restaurant website page

Navigation
Lime top bar with four links, the wordmark, a map pin, a phone button and a booking link; full-screen phone menu
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.
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
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.
A checkerboard of six burgers, each a copy cell and a photo cell, plus a list of sides and drinks
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.
Dark griddle section: a full-bleed photo squeezed into a strip and the five cooking moves
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.
Photo of pickle jars with a price sticker beside a list of five house pickles
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.
A photo half and three short stories about the counter, the booths and the back bar
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.
Four weekly nights as rows with big day names, beside a photo and a sticker
The heading drops in, the photo arrives through the check pattern and the sticker stamps in, each once.
House rules.
Five house rules in huge type that a black band re-colours as they pass through the middle of the screen
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.
Six questions and answers (native <details>)
The heading drops in once; each question opens natively and its plus icon turns into a cross.
Said at the counter.
Six customer quotes as stickers thrown on a table that settle into two columns
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.
Night photo, address, hours, contact lines and a booth booking form
The photo arrives through the check pattern and the heading drops in, each once.
The bar
Check strip, wordmark with one line, three link columns and the copyright line
The black and lime check strip slides sideways as the footer scrolls into view.

Before you publish the burger restaurant website site

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

Questions about this burger restaurant website template

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

Not a burger restaurant website? More free templates