Description
.tpl-section{background:#0f0f0f;border:1px solid #c9a84c;border-radius:10px;padding:28px 32px;margin:28px 0;font-family:’Segoe UI’,system-ui,sans-serif;color:#e8e8e8}
.tpl-section h3{color:#c9a84c;font-size:1.05rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #2a2a2a}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tpl-grid li{background:#181818;border:1px solid #2a2a2a;border-radius:7px;padding:14px 16px;font-size:.9rem;line-height:1.5}
.tpl-grid li strong{display:block;color:#c9a84c;margin-bottom:4px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.tpl-included{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.tpl-included li{display:flex;align-items:flex-start;gap:9px;background:#181818;border-radius:7px;padding:10px 13px;font-size:.88rem;line-height:1.45}
.tpl-included li::before{content:”✓”;color:#c9a84c;font-weight:700;flex-shrink:0;margin-top:1px}
.tpl-stack{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-stack li{background:#1a1a1a;border:1px solid #c9a84c33;border-radius:20px;padding:5px 14px;font-size:.8rem;color:#d4b96a;font-weight:600}
.tpl-for{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-for li{background:#1a1a1a;border:1px solid #3a3a3a;border-radius:6px;padding:7px 14px;font-size:.85rem;color:#ccc}
.tpl-for li::before{content:”→ “;color:#c9a84c}
Restaurant Website Template
A luxurious restaurant website template with a warm Tuscan aesthetic. Everything a restaurant needs to establish a premium online presence — from the hero with a stunning food photo to the fully functional reservation form.
Feature Highlights
- Tabbed Menu3-tab food menu (Starters / Mains / Desserts) with dish photo, price, and dietary tags. Pure JS tab switching.
- Photo Gallery5-image grid with lightbox hover zoom and caption overlay.
- Reservation Form8-field booking form (date, time, covers, name, email, phone, notes) with responsive grid layout.
- TestimonialsStar-rated customer quotes with avatar and visit date. Smooth carousel.
- Animated HeroFull-bleed food photo with parallax scroll, animated headline, and dual CTA buttons.
- Stats BarYears open / TripAdvisor rating / total reviews — counts up on scroll.
- Google Maps EmbedResponsive iframe placeholder — drop in your embed code in one line.
- Newsletter SignupEmail capture section with validation and success message.
What’s Included
- index.html — full restaurant homepage
- style.css — warm Tuscan palette with CSS variables
- restaurant.js — tab menu, carousel, counter animations
- /assets/ — demo food photos, chef portrait, dish thumbnails
- README.md — how to edit menu items, update hours, embed your map
Tech Stack
- Tailwind CSS (CDN)
- Vanilla JS
- Google Fonts — Playfair Display + Lato
- CSS Custom Properties
- Intersection Observer
- No backend required
Perfect For
- Restaurant owners wanting a premium web presence
- Cafés and bistros launching a new site fast
- Web designers building client restaurant pages
- Food bloggers promoting a supper club or pop-up
- Hotels showcasing their in-house dining experience
Frequently Asked Questions
Can I add my own menu items?
＋
Yes. Menu items are plain HTML list elements inside clearly labeled sections. Add, remove, or reorder dishes without touching a single line of CSS.
Is online ordering included?
＋
The template includes a styled order-intent UI (item selection, totals display). Actual order processing requires integration with a service such as Square, Toast, or a custom API.
Can I integrate OpenTable for reservations?
＋
Yes — the reservation section contains a placeholder <div> ready for OpenTable’s embed widget. Paste their snippet and you’re done.
How do I change the brand colors?
＋
The warm gold and deep charcoal palette is controlled by CSS variables in :root. Edit three or four hex values to match your restaurant’s identity.
Does it include a mobile menu?
＋
Yes. A fully animated hamburger menu activates on screens narrower than 768 px, keeping navigation thumb-friendly for every mobile diner.
Noah B. –
The product-card hover zoom and quick-add-to-cart interaction are the smoothest I’ve seen in a free template. Filters sidebar collapses elegantly on mobile. Launched my Shopify-style store in record time.
Raj P. –
Solid e-commerce template with a clean aesthetic. Product image gallery with thumbnail switcher works great out of the box. Took off one star because the cart slide-over needed a z-index fix on sticky headers, but otherwise excellent.
Amelia J. –
Every section a real store needs is here — category nav, breadcrumbs, product grid, and a detailed PDP layout. The checkout flow mockup alone saved me two days of design work.
Sophie W. –
I compared five templates before choosing this one and nothing came close to the polish on the category page grid. The sale badge components and rating stars are pixel perfect. Highly recommend.