Event Conference Homepage Template

A dark, high-contrast tech conference homepage built with Bootstrap 6 for a fictional developer event called Edgeline Summit.

How it works

The page lives inside .es-page, which sets data-bs-theme="dark" and re-maps Bootstrap 6 roles: --bs-primary-* becomes electric lime and --bs-accent-* becomes hot pink, so btn-solid theme-primary, badges, the Range fill and checks all follow the brand.

• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> on small screens and an "Attend" .menu. The script syncs aria-expanded on the toggler and closes the drawer after an in-page link.
• Hero: a giant headline with a highlighted word, two calls to action, a four-cell countdown and a tilted stage photo with floating tags. The event date is computed in script.js from LEAD_DAYS (moved to the next Thursday), so the dates, day labels and countdown never go stale.
• Speakers: eight .es-sp buttons with grayscale portraits that turn to color on hover or focus. Each carries data-es-name, data-es-role, data-es-talk, data-es-bio and data-es-img; clicking fills and opens the #es-speaker <dialog class="dialog"> via Dialog.getOrCreateInstance().
• Schedule: nav nav-underline tabs (data-bs-toggle="tab") switch between two .tab-pane lists. Bootstrap 6 .chip buttons filter .es-slot rows by data-es-track on both days and update aria-pressed.
• Tickets: three cards. The Team card uses a Bootstrap 6 .form-range (#es-team); moving it recalculates the total with a 10% or 20% group discount. The early-bird countdown is derived from EARLY_BIRD_BEFORE.
• Signup: <form data-bs-validate novalidate> with an email field and a .check. Invalid fields get .is-invalid; a valid submit is simulated and shows #es-toast.
• FAQ: an exclusive accordion-flush of <details name="es-faq"> items.

Customization

• Change --es-lime and --es-pink in .es-page (style.css) and the --bs-primary-* / --bs-accent-* overrides next to them to rebrand.
• Set LEAD_DAYS and EARLY_BIRD_BEFORE at the top of script.js, or replace the computed start date with your real event date once it is fixed.
• Add speakers by copying an .es-sp button and editing its data-es-* attributes.
• Tag schedule rows with data-es-track and add a matching .chip in .es-chips.
• Change the per-seat price (549) and discount steps in the Team calculator in script.js.
• Replace the setTimeout in the form handler with fetch() to your mailing list provider.
• The photos come from Unsplash; replace them with your own speakers and venue.

Accessibility

A skip link targets #es-main. Speaker cards are real buttons with aria-haspopup="dialog", tabs use role="tab" and aria-selected, filter chips expose aria-pressed, and filter results and the toast are announced through polite live regions. The countdown uses role="timer". Focus is always visible; the marquee and hover effects stop 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, Modal is now Dialog, Dropdown is now Menu, .form-range wraps the input and auto-initialises and validation uses data-bs-validate. The script imports Dialog, Drawer and Toast from the bundle as an ES module.