Free restaurant website template

Live demo GitHub Download ZIP Use this template

Repository: github.com/8bsite/restaurant-website-template · Live demo: 8bsite.github.io/restaurant-website-template/ · MIT license

Ombrelle template: first screen on a phone

About this template

Ombrelle is a restaurant website template for a place open from lunch to the last glass: a brasserie, bistro, wine bar or seafood kitchen with a terrace. It works for a cafe too, since coffee hour and aperitivo have their own panels. The look: huge uppercase type on near-white, olive and night grounds.

A one-page site for a brasserie and bar on a town square, open from noon to midnight: menu with prices, the day's service times, the bar card, the seating areas and a booking form. Near-white, olive and night grounds with huge uppercase type; a parasol shade moves across the hero table, the page darkens from noon to midnight along a horizontal track and the parasols open on a plan of the house as you scroll.

Good for:

Brasserie, bistro or neighbourhood restaurantCafé or bar with a terraceSeafood or market-driven kitchen with a daily menuRestaurant with lunch and dinner services and table booking

Free for personal and client work under the MIT license. In collections: one page website templates, github website templates, website templates with animation, parallax website templates.

How to use the restaurant website template

With an AI coding agent

Download the files into your project (Windows PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/restaurant-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/restaurant-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/restaurant-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/restaurant-website-template/main/CREDITS.md

Then give the agent this prompt:

Read AGENTS.md, then edit index.html. Use this template as the base for a restaurant site for <your restaurant: name, kind of food, address, opening hours, menu with prices, how to book>. Keep the layout, the motion and the single-file format; replace the brand name, copy, menu, prices, hours, photos, links and contacts, and recolour it through the CSS variables if needed.

Give the agent the file, not a link. AGENTS.md says what to keep and what to replace. Step by step: templates for Claude Code.

In a terminal

npx degit 8bsite/restaurant-website-template my-site

No code

Download the ZIP, edit index.html and drag its folder onto Netlify Drop, or click Use this template and turn on GitHub Pages.

Restaurant website design and motion

Palette

#f8f7f3 page background#141412 text, buttons, rules#999b69 olive: story field, aperitivo panel, phone menu#5c5e33 dark olive parasol stripes#1c1d15 night: bar, footer, the day track's end#5b5b55 warm grey descriptions and captions#2c3019 parasol shadow over photos#f0a64a amber light warming the hero photo

Fonts

Schibsted Grotesk: the only typeface: regular-weight uppercase headings, tight; small tracked labels

Uppercase headings are scaled to set widths, and the footer wordmark runs edge to edge. Corners are square, photos sit 8 pixels apart, menus run on thin rules with prices flush right, and a drawn plan shows the house with striped round parasols.

Motion runs on scroll; the list of sections below says what moves in each.

What is on the page

Navigation
Header: wordmark, five section links (Book a table last); compact bar on scroll up; phone menu overlay
Ombrelle
First screen: huge wordmark, full-bleed dish photo, Book a table; then the menus intro and a photo pair (demo: brasserie and bar)
Smooth scrolling runs page-wide. A blurred parasol shadow sways over the hero dish; on scroll it slides across, warm light rises and the photo pair climbs at two speeds.
Lunch that runs into the evening
Olive full-width block: three-line justified heading and a short story
Tied to scroll, the olive field opens from a small circle to full screen as the heading lines slide in.
Ombrelle moments
Photo grid of six with a Follow us link (social feed)
Photos open from a thin centre slit as they arrive; a parasol shadow drifts across two as you scroll.
Noon to midnight
Opening hours as a horizontal track of five services, ground going from day to night (demo: Lunch, Coffee hour, Aperitivo, Dinner, Last glass)
Pinned: the five services slide sideways, the ground darkens from near-white through olive to night, photos shift in their frames.
The brasserie card
The menu: courses with dishes, short descriptions and prices, sticky course index and one photo
The heading slides in with your scroll, the photo opens from a slit, and the course index stays put.
This morning
Five ingredients or suppliers with photos and where each goes on the menu (demo: the day's deliveries)
The five ingredient photos start as a tilted pile and deal out into a row as you scroll.
After five
Dark bar section: drinks and small plates with prices, two bar photos
On the night ground the heading slides in with your scroll and both bar photos open from a slit.
Under the parasols
Seating areas with seat counts beside a drawn plan of the house, wide photo of the square
Tied to scroll, the twelve parasols spin open row by row, then the room, counter and back room draw in.
Said at the table
Three guest quotes set large, alternating sides
Each quote drifts in from its side and out the other as it passes, the guest's name moving against it.
Book a table
Booking form and the restaurant's details (address, hours, phone, email)
The Book a table heading slides in sideways, tied to scroll, beside the booking form.
Footer
Night footer: four link columns, width-filling wordmark, copyright and the Design: 8B credit
The wordmark's letters start spread apart and close into the full-width name as the footer arrives.

What is inside

Files: index.html (83 KB, CSS and JavaScript inside), AGENTS.md, CREDITS.md, LICENSE
Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.11 smooth scroll, loaded from jsDelivr. With reduced motion on, the page shows a complete static version.
Fonts: Schibsted Grotesk from Google Fonts (SIL Open Font License)
Photos: 23 from Unsplash (Unsplash License), loaded from Unsplash's servers and each credited in CREDITS.md
Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).
Replace before publishing: 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). AGENTS.md lists them.
License: MIT

Good to know

One page, no CMS: texts and prices are edited in the HTML, and there is no checkout or payment built in.
Book a table buttons and links in the hero, the nav, the footer and "Ask about the back room" in terrace lead to #contact now; point them to your booking page (OpenTable, Resy, TheFork, SevenRooms), or keep the on-page form.
"Explore the menus" in the opening and the Menu links in the nav and footer lead to #carte now; point them to a menu PDF or menu page if you publish one, or keep the on-page menu.
The form sends nothing until you connect a form service such as Formspree or Netlify Forms, or your backend.
The day track pins the section and scrolls sideways only with motion allowed; with reduced motion the five services sit in a static strip.
The demo facts are invented. Photos load from Unsplash, the motion libraries from jsDelivr.

Questions about this restaurant website template

Is the menu easy to change?

Yes. Dishes, descriptions and prices are plain HTML text; the course index links to each course by anchor, and the bar card works the same way.

Does table booking work?

The form asks for name, contact, date, time, guests and terrace or room, then shows a thank-you note, but sends nothing until connected to a form service such as Formspree or Netlify Forms.