Ledger — Free Fintech & Mobile Banking Website Template
Ledger leads with the thing finance apps live or die on: a believable phone mockup built entirely in CSS around a real screenshot, wrapped in a deep-pine and ledger-gold palette that reads as trustworthy rather than trendy. It ships as one long-scroll landing page with animated stat counters, a monthly/annual pricing switch, and a swipeable testimonial rail — all in plain Bootstrap 5 and vanilla JavaScript, zero jQuery.
Features
- CSS-built phone frame (notch, status bar, live balance UI) wrapping your app screenshot — no image editing required
- Animated trust-stat counters that count up on scroll with prefix/suffix/decimal support
- Three-tier pricing block with a working monthly ↔ annual toggle that rewrites the prices
- Security section with an icon feature list and a floating "bank-grade encryption" badge
- Testimonial cards that collapse into a snap-scrolling, dot-navigated slider on mobile
- Full-bleed CTA band with front-end email validation and App Store / Google Play buttons
- Hand-drawn inline SVG icons throughout (no icon fonts, CSP-safe) and a DM Mono figure treatment for a real "ledger" feel
- Scroll-reveal with staggered timing, sticky glass header, and full prefers-reduced-motion support
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1
- Responsive: Yes
- Style: Deep evergreen fintech with a ledger-gold accent and monospace figures
How to use it
Download the ZIP, unzip it, and open index.html — there is no build step and no dependencies to install. Replace the demo text and images with your own, point any forms at your backend or a form service, and deploy the folder to any static host. Colours, fonts, and spacing live in css/style.css; the interactions are in js/main.js. Bootstrap 5 is bundled locally, so it works offline and on strict-CSP hosts.
FAQ
Is Ledger really free to use commercially?
Yes. Use it for personal and commercial projects, including client work. An attribution link back to uiCookies is appreciated but not required.
Do I need a build step or npm?
No. It's static HTML, one CSS file, one JS file and self-hosted Bootstrap 5. Open `index.html` in a browser or drop the folder on any host and it works.
How do I swap the app screenshot in the phone mockup?
Replace `img/app-screen.jpg` with your own screenshot (portrait, roughly 800×1200). The CSS frame, notch and balance UI sit on top, so any tall image drops straight in.
Are there any external dependencies or trackers?
Only Google Fonts (Bricolage Grotesque, Hanken Grotesk, DM Mono) loaded from Google's CDN. Bootstrap and all JavaScript are self-hosted, and there are no analytics or third-party scripts.
