Architecture Studio Homepage Template

A complete Bootstrap 6 homepage template for an architecture studio (the fictional Atelier Kerf), with a concrete palette, signal-orange accents and a filterable project index.

How it works

Everything sits inside .ak-page, which pins data-bs-theme="light" and maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and the rest) to the orange in --ak-signal. Fonts: Archivo and JetBrains Mono.

• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end">. The script syncs aria-expanded and closes the drawer after a link is chosen.
• Hero: a two-line headline, two buttons, a .ak-stats row and .ak-hero-figure, a full-height Unsplash photo with corner ticks and a caption card. A .ak-strip band below lists the disciplines.
• Projects: btn-check radio labels in a btn-group filter six .ak-project cards by data-ak-category and a live region announces the count. Each "View project" button opens #ak-dialog (<dialog class="dialog dialog-lg">), filled from the button's data-ak-* attributes.
• Philosophy: a dark section with four numbered principles.
• Process: a stepper md:stepper-horizontal inside .contains-inline, with the first two phases marked active.
• Clients: three quotes with portraits, plus an awards list that uses badge theme-primary and badge badge-outline.
• Contact: <form data-bs-validate novalidate> with a Combobox for the project type and a .form-range budget slider with a live <output>. On submit the script flags invalid fields with .is-invalid, shows a spinner, simulates the request and then shows a Toast.

Customization

• To rebrand, change --ak-signal, --ak-paper and --ak-ink on .ak-page in style.css, and update the --bs-primary-* lines next to them.
• To add a project, copy an .ak-project article and set its data-ak-category and the data-ak-title, data-ak-text, data-ak-img values on its button.
• Add a radio to .ak-filter for each new category value.
• Edit min, max and step on #ak-budget to change the budget scale, and the text in formatBudget() in script.js to change the currency.
• To send real enquiries, replace the setTimeout in the submit handler with fetch() to your endpoint.
• Delete #ak-philosophy or #ak-process (and its navbar link) for a shorter page.
• The photos come from Unsplash. Replace them with photographs of your own buildings and clients.

Accessibility

A skip link targets #ak-main and sections are labelled by their headings. The filter is a real radio group with a visible focus ring. The dialog is a native modal that closes with Escape. Form errors appear as text under each field, and the Toast uses role="status". Image hover zoom and smooth scrolling are turned off under prefers-reduced-motion.

Bootstrap 6 notes

The template is built on Bootstrap 6.0.0-alpha.1, and alpha APIs can still change. Here is how it maps to Bootstrap 5:

• btn-solid theme-primary replaces btn-primary.
• Drawer replaces Offcanvas and navbar-collapse.
• Dialog replaces Modal.
• lg:col-7 replaces col-lg-7.
• data-bs-validate replaces needs-validation.
• Combobox and Stepper are new components.

script.js imports Dialog, Drawer and Toast from the bundle as an ES module. The project type stays selected after a reset because Combobox has no reset method.