A warm, light Bootstrap 6 mobile app landing page for a fictional habit tracker, Ripple, with store download buttons, CSS phone mockups, a screenshot carousel, reviews, an FAQ and an "email me a download link" form.
How it works
Everything sits inside .rp-page, which pins data-bs-theme="light" and re-maps the Bootstrap 6 primary role to the brand tangerine, so every btn-solid theme-primary and badge follows the palette.
- Navbar:
navbar lg:navbar-expandwith a<dialog class="drawer drawer-end rp-sheet">. The script keepsaria-expandedon.rp-togglerin sync and closes the drawer after an in-page link. - Hero: a centered headline with a wavy underline (
.rp-wave), App Store and Google Play buttons (.rp-store), a rating line and.rp-fan, three phones drawn with plain HTML, CSS and an SVG streak ring..rp-hero-blobdraws the ripple rings. "Watch the 40-sec tour" opens#rp-trailer, a<dialog class="dialog dialog-lg">. - Features: a stats strip, then
.rp-bento, a CSS grid of feature cards. - Screens: a Bootstrap 6 scroll-snap
carouselshowing 1, 2 or 3 phones depending on width via--bs-carousel-items, with prev/next buttons and indicators. - How it works: a
stepper md:stepper-horizontalinside.contains-inline. - Reviews and FAQ: three quote cards with Unsplash portraits and an exclusive accordion of
<details name="rp-faq">. - Download:
.rp-ctaholds abtn-checkradio group (iPhone / Android), an email field in aninput-groupand a decorative QR code. On submit the script flags an invalid email with.is-invalid, otherwise shows a spinner and opens.rp-toastwithToast.getOrCreateInstance().
Customization
- Change
--rp-orange,--rp-plumand--rp-minton.rp-pageinstyle.cssto rebrand; keep the--bs-primary-*overrides beside them in sync. - Point the
.rp-storelinks at your real App Store and Google Play listings. - Replace the
setTimeoutin the submit handler inscript.jswithfetch()to your own endpoint. - Swap the QR
<svg>inside.rp-qrfor a real QR code that links to your app. - Edit the screens inside
.rp-fanand the carousel or replace them with real screenshots. - Change
--bs-carousel-itemsin the.rp-carouselmedia queries to show more or fewer phones per view. - The portraits come from Unsplash; replace them with photos of your own users.
Accessibility
A skip link jumps to #rp-main. The phone fan is one role="img" with a descriptive label, carousel buttons have visually hidden labels, star ratings carry aria-label, and the toast uses role="status". Focus rings are visible on every control, and smooth scrolling and hover lifts are disabled 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: the navbar uses lg:navbar-expand with a Drawer instead of navbar-collapse, Modal is now Dialog, buttons are btn-solid theme-primary, toggle buttons put the input inside a label.btn-check, the carousel uses CSS scroll-snap, the accordion is native <details>, the stepper is new, and validation uses data-bs-validate. The script imports Drawer and Toast from the bundle as an ES module.
