Digital Agency Homepage Template

A warm, editorial homepage template for a creative digital agency, built with Bootstrap 6 for a fictional studio called Northfold. Cream paper tones, a terracotta accent and italic serif highlights set it apart from the usual dark agency look.

How it works

The page sits in .nf-page with data-bs-theme="light". Its custom properties define the palette and re-map the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast…) to terracotta, so buttons, the stepper and toggles use the brand color.

Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> for mobile and a "More" .menu placed with data-bs-placement="bottom-end". The script closes the drawer after an in-page link.
Hero: a large headline with an <em> serif word and a highlighted .nf-mark, stats in a <dl>, and .nf-collage: an arched Unsplash photo, a round inset photo and a floating award badge. The kicker text in [data-nf-season] is computed by the script as the next quarter, so the page never shows a stale date.
Services: four .nf-service cards with BS6 chip tags.
Case studies: a btn-group of btn-check radio labels filters the .nf-case-col items by data-nf-cat and announces the count in a live region.
Process: the new Bootstrap 6 stepper md:stepper-horizontal, wrapped in .contains-inline because the horizontal layout is a container query.
Team and testimonials: grayscale portraits that regain color on hover, then a scroll-snap carousel with prev/next buttons and indicators.
Contact: <form data-bs-validate novalidate> with toggle-button checkboxes, a Bootstrap 6 Combobox for the budget (data-bs-name="budget" adds a hidden input) and a textarea with minlength. Invalid fields get .is-invalid; a valid submit shows a spinner, waits one second and reveals the .nf-success alert.

Customization

Change --nf-accent, --nf-forest and --nf-sun in .nf-page (style.css) to rebrand; keep the --bs-primary-* overrides in sync.
Swap fonts through --nf-display and --nf-serif and the Google Fonts URL.
Add a case study by copying a .nf-case-col and setting data-nf-cat to brand, web or product; add a filter by adding a radio with a new value.
Replace the setTimeout in the submit handler of script.js with fetch() to your form endpoint.
Edit the data-bs-value buttons inside the budget .menu to change the ranges.
Move the active class between .stepper-items to show a different progress state, or delete sections you do not need.
All photos come from Unsplash; replace them with your own project shots and team portraits.

Accessibility

A skip link targets #nf-main. The toggler uses aria-controls, the filter group and carousel have labels, slides use aria-roledescription, and the filter count and success alert are announced. Every image has descriptive alt text, focus outlines are visible, and motion is disabled with prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Instead of BS5 classes it uses btn-solid theme-primary, lg:navbar-expand with a Drawer instead of navbar-collapse, Menu instead of Dropdown, btn-check on the label, the new Combobox, Chips and Stepper, badge badge-subtle theme-*, and the scroll-snap carousel with carousel-icon-prev/-next.