Component
Cinch
$6A pay button that cinches into a progress ring and springs open with the result.
Template · Landing pages
Halden
A calm, complete SaaS landing page with an animated product mock, pricing switch and dark mode.
About Halden
Halden is a complete landing page for a SaaS or app product. It has a sticky header, a hero with a product mock animated in pure CSS, a logo marquee, feature cards, a split feature section, stats, pricing with a monthly and yearly switch, testimonials, an FAQ accordion, a call to action and a footer. One file of design tokens re-brands the whole page in light and dark. Plain HTML, CSS and JavaScript with no dependencies, no build step and no external requests; every illustration is CSS or inline SVG.
- Eleven sections, each self-contained, so you can delete, duplicate or reorder them freely.
- A design system in CSS custom properties, with one light-dark() line per colour for both themes.
- Product mock, charts and icons drawn in CSS and inline SVG. There are no image files to replace or optimise.
- Spring motion, scroll reveals and a circular theme wipe, all turned off under reduced motion.
- Container queries, :has(), scroll-driven animation and View Transitions used as progressive enhancement.
- Readable without JavaScript, keyboard friendly and AA contrast in both themes, down to 360px.
What's included
halden-v1.0.0.zip26 KB zip · 87 KB unpackedindex.htmlThe page, with a banner comment at the start of every section.22.0 KBcss/halden.cssDesign tokens first, then styles in fourteen labelled parts.46.8 KBjs/halden.jsNine small independent blocks. Delete what you don't need.9.6 KBREADME.mdSetup, tokens, section notes, accessibility and browser support.5.6 KBLICENCE.txtThe licence in plain English.2.4 KB
- Dependencies
- None
- Build step
- None
- Built with
- HTML, CSS and a classic JavaScript file
- Browsers
- Current Chrome, Edge, Safari, Firefox
Version history
- v1.0.0First release.
Licence in short
You can
- Use it in unlimited personal and commercial projects
- Use it in unlimited projects for clients
- Change the code however you like
You can't
- Resell or share the source as a template, component or kit
- Put it in a competing product or site builder
Good to know
What exactly do I get?
A zip file with the source: plain HTML, CSS and JavaScript, a README that explains setup and customisation, and the licence text. There is no build step and nothing to install — open the HTML file and it runs.
Can I use it in client work?
Yes. One purchase covers you (one person or one company seat) for unlimited personal, commercial and client projects. What you can't do is resell or share the source itself as a template, component or kit. The full wording is on the licence page.
How do I get the files after paying?
Payment happens on Stripe's hosted checkout. The moment it succeeds you land on a download page here. Bookmark that page — the link stays valid for 30 days and 10 downloads.