A warm, welcoming church homepage built with Bootstrap 6 for a fictional congregation called Harbor Light Community Church.
How it works
Everything lives inside .hl-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 color roles: --bs-primary-* becomes forest green and --bs-accent-* becomes warm gold, so every btn-solid theme-primary and btn-solid theme-accent follows the brand.
- Navbar:
navbar lg:navbar-expandwith a<dialog class="drawer drawer-end">for phones. "Ministries" opens a.menuwithmenu-item-iconandmenu-item-description. The script syncsaria-expandedon the toggler and closes the drawer after an in-page link. - Hero: a serif headline, two calls to action, a row of weekly gathering times and an arched sanctuary photo (
.hl-arch). The floating.hl-nextcard shows the coming Sunday, computed inscript.js, so the page never shows a stale date. - Ministries: a
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3of photo and icon cards. - Events: each
.hl-evhasdata-hl-dow(weekday, 0 = Sunday) anddata-hl-week. The script turns them into real upcoming dates, fills the month, day and weekday, and sorts the list. Abtn-groupofbtn-checkradio labels filters bydata-hl-catand announces the count in a live region. - Sermon series: a dark panel with an inline SVG cover art. "Listen" opens
#hl-sermon, a<dialog class="dialog dialog-lg">with a mock player whose.progressbar advances while playing. - Stories: three quote cards with Unsplash portraits and a stats row.
- Plan a visit:
<form data-bs-validate novalidate>withform-fieldwrappers, a<select class="form-control">and a Bootstrap 6.switch. Submitting flags invalid fields with.is-invalid, then simulates the request and shows#hl-toast. A static SVG map and a<details>accordion FAQ sit beside it.
Customization
- Change
--hl-greenand--hl-goldin.hl-page(style.css), then adjust the--bs-primary-*and--bs-accent-*overrides beside them. - Swap fonts through
--hl-serifand--bs-body-font-family. - Set each event's
data-hl-dow,data-hl-weekanddata-hl-cat; add a new filter label with the matchingvalue. - Replace the
setTimeoutin the form submit handler withfetch()to your own visit or CRM endpoint. - Replace the mock player in
#hl-sermonwith a real<audio>element or a YouTube embed. - The photos and portraits come from Unsplash; replace them with photos of your own building and members.
Accessibility
A skip link jumps to #hl-main. The drawer toggler has aria-controls and a synced aria-expanded, the map is a single role="img" with a text label, the filter result and toast are announced politely, and the player button updates aria-pressed and its label. Focus is always visible and motion stops under prefers-reduced-motion.
Bootstrap 6 notes
Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Bootstrap 5 developers will notice that btn-solid theme-primary replaces btn-primary, the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Dropdown is now Menu, Modal is now Dialog, form-select is gone (use form-control on <select>) and validation uses data-bs-validate. The script imports Drawer and Toast from the bundle as an ES module.
