Alder
A restaurant website template.
A complete website for a restaurant, fine-dining room or cafe, built with Astro 5, TypeScript and plain CSS. Moody, warm and calm, in light and dark, with a booking form that works the day you publish it. The sample restaurant, Alder, is fictional: every name, dish, price, hour and quote is sample content for you to replace.
- For
- Restaurant
- Built with
- Astro 5, TypeScript, plain CSS, three.js
- Pages
- 7 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A wood-fired oven mouth in flat brand colour: a slow fire bed, embers that cool from orange to ash as they rise, and heat shimmer over the dome.
What you get
Straight from the template's README, the same file you will find in the repository.
- Seven pages: Home, Menu, Reservations, Chef (about), Private dining, Gift cards and a 404.
- A signature hero: a wood-fired oven drawn in three.js in flat brand colour. Embers rise out of the mouth and cool from orange to ash; heat shimmer bends the dome above. It loads only when needed, caps the pixel ratio at 2, pauses off screen, stays still under reduced motion and falls back to a matching still image.
- "Open now" in plain words: a live line that reads your hours and time zone ("The fire is lit. Doors open at 17:30."). Today's row in every hours table is marked.
- A real menu: sections, dietary marks (vegetarian, vegan, gluten-free, dairy-free) with a filter, a seasonal note, a tasting menu, and a print stylesheet for a clean paper menu.
- Booking form: date limited to your booking window and open days, times that change with the day, party size, name, email, phone and notes. Full validation with an error summary, loading, error and success states. Posts to any form endpoint, or opens an email if you have none.
- Private dining with spaces, formats and an enquiry form; gift cards with a live card preview and a checkout link of your choice.
- Light and dark themes that follow the visitor's system, with a toggle. Phone, tablet and desktop layouts.
- Picture slots that look finished before you have photos: drawn placeholders in the palette, each captioned with the photograph it is waiting for.
IMAGES.mdis the shot list. - Fast and accessible: static HTML, self-hosted fonts, no trackers, no runtime CDN, semantic markup, visible focus, keyboard and screen reader friendly patterns, AA contrast.
- One file to edit:
src/content/site.tsholds every word, price, hour and picture.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Menu
- Reservations
- Chef
- Private dining
- Gift cards
- 404
Stack
- Astro 5
- TypeScript
- plain CSS
- three.js
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
