Coworking Space Homepage Template

A bright, complete coworking space homepage built with Bootstrap 6 for a fictional brand called Fieldhouse. It suits coworking operators, shared offices and flexible workspace providers.

How it works

Everything sits inside .fh-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role (--bs-primary-* and --bs-control-checked-bg) to the brand cobalt, so every btn-solid theme-primary, check and range picks up the brand color. Section by section:

1. Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> below 1024px. The script syncs aria-expanded and closes the drawer after a link is chosen.
2. Hero: .fh-bento is a CSS grid of four tiles: the headline tile with a yellow <mark>, a photo tile, the yellow .fh-tile-live availability tile and the cobalt .fh-tile-pass day-pass tile.
3. Spaces: nav nav-pills tabs (data-bs-toggle="tab") switch four .tab-pane panels, each with a photo and a starting price.
4. Plans: a btn-group of btn-check radio labels. On change the script reads data-fh-monthly or data-fh-yearly from each .fh-price-amount and announces the switch in a polite live region.
5. Amenities and members: a dark icon grid, quote cards and a community banner.
6. Tour booking: <form data-bs-validate novalidate> with a Combobox for the location, a Datepicker for the day, a Range for team size and a check. The script sets data-bs-date-min to today and data-bs-date-max to 60 days ahead. On submit it flags invalid fields, simulates the request and shows #fh-toast with the chosen day.
7. FAQ and footer: an exclusive accordion of <details name="fh-faq"> items, a yellow call-to-action card and the footer.

Customization

• Change --fh-yellow and --fh-cobalt on .fh-page in style.css to rebrand; update the --bs-primary-* overrides beside them so buttons, checks and the range follow.
• Edit data-fh-monthly / data-fh-yearly on each .fh-price-amount to set your prices; data-fh-fixed keeps a label (such as "/ day") from changing.
• Remove .fh-plan-featured from the Resident card to make all plans look equal.
• Change the 60 in the Datepicker block of script.js to open more or fewer days for tours.
• Add locations as more .menu-item buttons with a data-bs-value inside .fh-combo-field.
• Replace the setTimeout in the submit handler with fetch() to your booking endpoint.
• The photos come from Unsplash; replace them with photos of your own space and members.

Use cases

• Coworking operators: a bento hero with availability and day-pass tiles introduces the space
• Space types: pill tabs show four space types, each with a photo and starting price
• Memberships: a monthly and yearly switch updates plan prices
• Tour bookings: a form with location combobox, datepicker and team size range books visits, with an FAQ

Accessibility

A skip link jumps to #fh-main. Tabs use role="tab" with aria-selected, the price switch is announced through aria-live, the team size is shown in an <output>, and the toast uses role="status". Focus outlines are visible, and motion 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, the accordion is native <details>, validation uses data-bs-validate, and checks use .check. Combobox, Datepicker and Range are new components driven by the data API; the script imports Drawer and Toast from the bundle as an ES module. The Combobox has no reset method, so the chosen location stays after a submit.