Restaurant Homepage Template

A dark, candle-lit restaurant homepage built with Bootstrap 6 for a fictional wood-fire dining room called Ember & Vine, with menu highlights, live opening hours, guest reviews and a reservation form with the new Bootstrap 6 Datepicker.

How it works

Everything lives in .ev-page, which sets data-bs-theme="dark" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and friends) to the ember orange, so every btn-solid theme-primary follows the brand.

• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> for the mobile menu. "Visit" opens a .menu with menu-item-icon and menu-item-description. The script closes the drawer after an in-page link is chosen.
• Hero: a full-bleed Unsplash photo set through --ev-hero-photo, a serif headline and an .ev-infobar strip. The script reads the EV_HOURS object and writes "Open now until…", "Opens today at…" or "Closed today" into [data-ev-today]. "View tonight's menu" opens #ev-fullmenu, a dialog dialog-lg dialog-scrollable with dotted price leaders.
• Menu highlights: nav nav-underline tabs (data-bs-toggle="tab") switch three .tab-pane grids of .ev-dish cards with badge badge-subtle dietary labels.
• Our kitchen: an arched photo, a chef caption card and three .ev-pillars.
• Reviews: three quote cards and a row of press mentions.
• Visit and reserve: an hours table where today's row gets .ev-today, a static SVG map and a <form data-bs-validate novalidate>. The date field uses data-bs-toggle="datepicker"; the script sets data-bs-date-min to today and data-bs-date-max to EV_BOOKING_DAYS ahead, so no dates are hard-coded. On submit, invalid fields get .is-invalid; otherwise a spinner runs, the request is simulated and #ev-toast shows a summary via Toast.getOrCreateInstance().
• Private dining CTA and footer with the current year filled into [data-ev-year].

Customization

• Change --ev-ember and --ev-brass in .ev-page (style.css) to rebrand; update the --bs-primary-* overrides next to them so buttons follow.
• Swap the hero photo by editing --ev-hero-photo. All photos come from Unsplash; replace them with your own dishes and dining room.
• Edit EV_HOURS in script.js (minutes after midnight per weekday, null = closed) and the matching rows in .ev-hours.
• Change EV_BOOKING_DAYS to allow bookings further ahead.
• Replace the setTimeout in the submit handler with fetch() to your booking endpoint or reservation service.
• Add or remove .tab-pane panels in the menu section; each needs a matching tab button.
• Delete .ev-cta or .ev-story for a shorter page.

Accessibility

A skip link jumps to #ev-main. Tabs use role="tab" with aria-selected, the map is a single role="img" with a label, today's hours row gets aria-current="date", and the toast uses role="status". Every control has a visible focus outline and smooth scrolling is disabled under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Compared with Bootstrap 5: buttons are btn-solid theme-primary, the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Dropdown is Menu, Modal is Dialog, selects use form-control, validation uses data-bs-validate instead of needs-validation, and the Datepicker is built in (no third-party plugin). The script imports Dialog, Drawer and Toast from the bundle as an ES module.