# Ombrelle, a free restaurant website template > Restaurant website for a brasserie, bistro or bar, with a menu, opening hours and table booking. One HTML file with GSAP scroll animations, no build step, MIT license. Made by 8B (https://8b.com/). 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. - Page: https://8b.com/templates/ombrelle/ - Live demo: https://8bsite.github.io/restaurant-website-template/ - Repository (GitHub template): https://github.com/8bsite/restaurant-website-template - Download ZIP: https://github.com/8bsite/restaurant-website-template/archive/refs/heads/main.zip - Size: 83 KB, 23 photos (Unsplash), fonts: Schibsted Grotesk - Motion: GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.11 smooth scroll ## 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/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: ```text Read AGENTS.md, then edit index.html. Use this template as the base for a restaurant site for . 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. ``` 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/restaurant-website-template my-site`. ## Design 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. - 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. ## Sections and motion - **Navigation** (navigation): header: wordmark, five section links (Book a table last); compact bar on scroll up; phone menu overlay - **Ombrelle** (opening): first screen: huge wordmark, full-bleed dish photo, Book a table; then the menus intro and a photo pair (demo: brasserie and bar). Motion: 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** (about): olive full-width block: three-line justified heading and a short story. Motion: Tied to scroll, the olive field opens from a small circle to full screen as the heading lines slide in. - **Ombrelle moments** (moments): photo grid of six with a Follow us link (social feed). Motion: Photos open from a thin centre slit as they arrive; a parasol shadow drifts across two as you scroll. - **Noon to midnight** (day): opening hours as a horizontal track of five services, ground going from day to night (demo: Lunch, Coffee hour, Aperitivo, Dinner, Last glass). Motion: Pinned: the five services slide sideways, the ground darkens from near-white through olive to night, photos shift in their frames. - **The brasserie card** (carte): the menu: courses with dishes, short descriptions and prices, sticky course index and one photo. Motion: The heading slides in with your scroll, the photo opens from a slit, and the course index stays put. - **This morning** (market): five ingredients or suppliers with photos and where each goes on the menu (demo: the day's deliveries). Motion: The five ingredient photos start as a tilted pile and deal out into a row as you scroll. - **After five** (bar): dark bar section: drinks and small plates with prices, two bar photos. Motion: On the night ground the heading slides in with your scroll and both bar photos open from a slit. - **Under the parasols** (terrace): seating areas with seat counts beside a drawn plan of the house, wide photo of the square. Motion: Tied to scroll, the twelve parasols spin open row by row, then the room, counter and back room draw in. - **Said at the table** (reviews): three guest quotes set large, alternating sides. Motion: Each quote drifts in from its side and out the other as it passes, the guest's name moving against it. - **Book a table** (contact): booking form and the restaurant's details (address, hours, phone, email). Motion: The Book a table heading slides in sideways, tied to scroll, beside the booking form. - **Footer** (footer): night footer: four link columns, width-filling wordmark, copyright and the Design: 8B credit. Motion: The wordmark's letters start spread apart and close into the full-width name as the footer arrives. ## Good for - brasserie, bistro or neighbourhood restaurant - café or bar with a terrace - seafood or market-driven kitchen with a daily menu - restaurant with lunch and dinner services and table booking ## Questions **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. ## Before publishing Replace: 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). ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. The "Design: 8B" footer link is optional.