Crypto Wallet Homepage Template

A dark, complete homepage template for a self-custody crypto wallet, built with Bootstrap 6 for a fictional app called Keyhaven.

How it works

Everything lives in .cw-page, which carries data-bs-theme="dark" and re-maps the Bootstrap 6 primary role (--bs-primary-bg, --bs-primary-contrast and friends) to the brand lime, so every btn-solid theme-primary and badge follows the brand.

• Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end">. Below 1024px the toggler opens the drawer; the script syncs aria-expanded and closes it after an in-page link. "Products" opens a .menu with menu-item-icon and menu-item-description.
• Ticker: [data-cw-ticker] scrolls with a CSS marquee. The script clones the items once for a seamless loop and nudges each data-cw-price every few seconds.
• Hero: a three-line headline, stats in a <dl>, and .cw-phone, a wallet screen drawn with HTML and an inline SVG chart, plus two floating notification cards. "Download free" opens #cw-get-app, a <dialog class="dialog"> with a QR code.
• Features: a CSS grid bento (.cw-bento) with one wide tile.
• Swap preview: two Bootstrap 6 Combobox toggles pick the assets, a btn-check radio group sets slippage, and the script recalculates the quote from CW_PRICES on change.bs.combobox, input and flip.
• Security: an SVG vault illustration and a stepper of three steps.
• Markets: nav nav-underline tabs switch three tables with inline SVG sparklines.
• Reviews, FAQ, download: proof stats, three quote cards, an exclusive <details name="cw-faq"> accordion and a data-bs-validate form that simulates sending a link and shows #cw-toast.

Customization

• Change --cw-lime and --cw-orange in .cw-page (style.css) and the --bs-primary-* overrides next to them to rebrand.
• Edit CW_PRICES and CW_FEE at the top of script.js, or load live prices from your market data API there.
• Replace the swap form's submit handler with your wallet SDK call to build and sign the route.
• Replace the setTimeout in the .cw-form submit handler with fetch() to your own endpoint.
• Add a coin by copying a .menu-item with a new data-bs-value into both swap menus and adding its price to CW_PRICES.
• The portraits come from Unsplash; replace them with photos of your own users.

Accessibility

A skip link jumps to #cw-main. The phone mockup is one role="img" with a text label, tabs use role="tab" with aria-selected, tables have captions and row headers, and swap results are announced through a role="status" region. The marquee pauses on hover or focus and stops under prefers-reduced-motion, as do the tile hover effects.

Bootstrap 6 notes

Built on Bootstrap 6.0.0-alpha.1 (alpha APIs can still change). Coming from Bootstrap 5: btn-solid theme-primary replaces the per-color button classes, the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Dropdown is Menu, Modal is Dialog, the asset pickers use the new Combobox instead of a plain select, accordions are native <details>, and validation uses data-bs-validate. The script imports Drawer and Toast from the bundle as an ES module. The Combobox may log a harmless "more than one instance" message in alpha.1.