Solara — Mediterranean Restaurant HTML Template

Solara is a five-page restaurant website template built around an editorial poster home, Mediterranean cream-and-terracotta palette, and Fraunces display serif. It's designed for small independent restaurants, wine rooms, bistros, and neighborhood spots that want to look genuinely intentional — not a stock landing page with food swapped in.

The home page uses a ceremonial poster layout rather than the common hero-image-on-the-right split. A centered display name is framed by a thin circular ornament, flanked by date and location stamps, and anchored by a row of inline navigation-like calls to action. Below, a "Tonight at the pass" typographic list presents three signature dishes as numbered editorial entries with prices aligned to the right — not as uniform cards. A full-bleed plate image divides the page, followed by a dual-column chef quote, a triptych of room/chef/wine images, a hours-and-press rail, and a ceremonial "Reserve a chair" closing CTA in oversized italic serif.

What's included

• Home — editorial poster hero, tonight-at-the-pass list, full-bleed plate, chef pull-quote, image triptych, hours rail, ceremonial reserve CTA.
• Menu — five sections (starters, pasta, wood-fire, desserts, wine & drinks) with per-dish descriptions, prices, and dietary tags. Includes a dietary key.
• About — story section with chef portrait, three guiding values with serif italic numerals, and a room gallery.
• Reservations — fully fleshed booking form (name, phone, email, date, time, party size, occasion, allergies/special requests), a side panel with booking rules, and a private-events CTA band.
• Contact — address, hours, social icons, map placeholder (swap for Google Maps iframe), and a secondary contact form.

Design details

Typography pairs Fraunces (a variable serif with warm italics) with Inter for body copy. The palette is cream #faf5ea, deep terracotta #b0553e, olive #6b7c4f, gold #c9924a, and charcoal ink #1f1d19. A subtle SVG grain overlay and warm gradient orbs create depth without feeling digital.

Every section has intentional hover, focus, and active states. Reduced-motion and keyboard navigation are wired in. Responsive down to 320 pixels with dedicated mobile-nav sheet.

Use cases

Neighborhood restaurants, Mediterranean/Italian/Spanish/Greek kitchens, wine bars, small hotels with dining, bistros, cafés, farm-to-table spots, or any hospitality brand that wants an editorial feel rather than the usual restaurant-template look.

Tech

Vanilla HTML, CSS, and JavaScript. No build step. Google Fonts via preconnect. All images are labeled SVG placeholders under assets/img/, each preceded by an HTML comment showing recommended dimensions so you know exactly what to swap.