Interior Design Homepage Template

A warm Bootstrap 6 homepage template for an interior design studio (the fictional Olive & Linen) with arched photos, a tabbed portfolio, a before/after slider and a booking form.

How it works

The page root .ol-page pins data-bs-theme="light" and maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and the others) to the olive green in --ol-olive. Fonts: Cormorant Garamond and Jost.

Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> panel for small screens. The script syncs aria-expanded and closes the panel after a link is chosen.
Hero: a serif headline with an italic accent, two pill buttons and an avatar-stack rating. On the right, .ol-arches layers two arched photos (.ol-arch-main, .ol-arch-side), a palette card and a rotated .ol-stamp.
Services: four .ol-service cards.
Portfolio: nav nav-underline tabs (data-bs-toggle="tab") switch three .tab-pane galleries, each an .ol-gallery grid.
Before & after: .ol-compare stacks two photos. The Bootstrap 6 Range (.form-range > .form-range-input) sets --ol-pos, which clips .ol-compare-after and moves the divider line.
Process: an exclusive accordion of <details name="ol-process"> items with numbered steps.
Reviews: three rated quote cards and a press row.
Booking: <form data-bs-validate novalidate> with a Chips input for rooms (data-bs-chips), a Datepicker (data-bs-toggle="datepicker") and a budget select. The script sets data-bs-date-min/data-bs-date-max to tomorrow and 60 days out. On submit it flags invalid fields with .is-invalid, simulates the request and shows a Toast with the chosen date and rooms.

Customization

To rebrand, change --ol-olive, --ol-clay and --ol-cream on .ol-page in style.css, and keep the --bs-primary-* lines next to them in sync.
Edit border-radius on .ol-arch to change the arch shape (50% gives ovals).
To start the comparison at a different split, change value on #ol-compare-range.
To change the booking window, change the 60 in the date block of script.js.
To add a fourth portfolio category, add a nav-item button and a matching .tab-pane.
To send bookings to your server, replace the setTimeout in the submit handler with fetch() to your endpoint.
The photos come from Unsplash. Replace them with photographs of your own projects and clients.

Accessibility

There is a skip link to #ol-main. The tabs use role="tab" with aria-selected and aria-controls. The comparison slider is a labelled range input with a live aria-valuetext; star ratings are a labelled role="img". Validation messages appear as text under each field, and the Toast uses role="status". Hover lifts and smooth scrolling are turned off under prefers-reduced-motion.