Travel Agency Homepage Template

A bold Bootstrap 6 homepage template for a travel agency called Farline Journeys: a full-bleed photo hero with a trip search bar, filterable destinations, tour packages with a budget slider, traveller stories and a deals sign-up.

How it works

The root .fj-page carries data-bs-theme="light" and maps the Bootstrap 6 primary role (--bs-primary-bg and friends) to coral, so buttons, chips, the range and the switch use the brand color. Fonts: Bricolage Grotesque and Figtree.

Hero and navbar: .fj-hero holds the background photo under two dark gradients. Inside it sits a transparent navbar lg:navbar-expand with data-bs-theme="dark" and a <dialog class="drawer drawer-end"> for mobile. The "Destinations" .menu links also filter the destination grid.
Trip search: #fj-search combines a searchable Combobox (data-bs-search="true"), a "When" select that the script fills with the next months (MONTHS_AHEAD) and a travellers select. Submitting scrolls to the tours and shows a toast.
Destinations: a bento grid (.fj-bento). The .chip buttons with data-fj-region filter tiles by data-fj-place.
Tour packages: a Bootstrap 6 Range (.form-range with #fj-budget) hides every .fj-tour-col whose data-fj-price is above the chosen budget. Each card's next departure is computed from data-fj-depart (the Saturday that many weeks ahead), so dates never go stale. "Itinerary" copies the hidden .fj-itin list into the #fj-itinerary Dialog.
Why Farline and stories: feature tiles, then a scroll-snap Carousel of quotes.
Deals sign-up: <form data-bs-validate novalidate> with a .switch; the script validates, simulates the request and confirms with #fj-toast.

Customization

Change --fj-coral, --fj-navy and --fj-sky on .fj-page in style.css to rebrand, and update the --bs-primary-* overrides beside them.
Swap the hero photo in the background of .fj-hero; keep the gradients for text contrast.
Set data-fj-price on each .fj-tour-col and the min, max and step of #fj-budget to match your price range.
Change data-fj-depart on a card to move its next departure by whole weeks.
Change MONTHS_AHEAD in script.js to offer more or fewer months in the search.
Replace the setTimeout in the newsletter handler and the toast in the search handler with fetch() calls to your booking backend.
The photos come from Unsplash; replace them with your own trip photography.

Accessibility

A skip link jumps to #fj-main. The chips are toggle buttons with aria-pressed, filter results are announced in aria-live regions, every form control has a label, carousel buttons have visually hidden names and the toast uses role="status". Photo text sits on dark gradients for contrast, and hover zooms are turned off under prefers-reduced-motion.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). For Bootstrap 5 developers: Drawer replaces the collapsing navbar, Menu replaces Dropdown, Dialog replaces Modal, btn-solid theme-primary replaces btn-primary, form-control styles the <select> instead of form-select, and the Carousel now scrolls with CSS scroll-snap. New components used here: Combobox, Range, Chips and the switch. The script imports Dialog, Drawer and Toast from the bundle as an ES module. The Combobox choice stays after a search.