This is the full template running in a frame. Scroll inside it, open its menu, or open it in its own tab to see it at full size.
What moves
- On load the header lines draw out and the logo, title and menu fade in.
- Opening a menu item zooms and blurs the background photo and fades the panel in over it.
- Escape, the close button or a click outside closes the panel and reverses the zoom.
The motion is HTML5 UP's own CSS transitions and a small jQuery script, both unchanged. The page still works without JavaScript; it just skips the intro.
What we changed: only the colours
We swapped the original palette for Enrichr's deep green, cream, brand greens and lime. Everything else is HTML5 UP's: the HTML, the animation script, the layout, fonts, icons and images. Colours with transparency keep their original opacity.
| Original | Enrichr |
|---|---|
#1b1f22 | #0c1e18 |
#131519 | #0c1e18 |
#000000 | #050d0a |
#ffffff | #fbf8f1 |
Some accents are swapped only where they read well: #e6ff55 replaces #ffffff on primary buttons; #e6ff55 replaces #ffffff on ticked checkboxes and radio buttons; #e6ff55 replaces #ffffff on focused fields; #e6ff55 replaces #ffffff on link underlines.
How to use it
- Download the .zip and unzip it.
- Open
index.htmlin a browser to check it, then edit the text, links and images in it. - Upload the whole folder to any static host (Netlify, Vercel, GitHub Pages or your own server).
The zip also holds HTML5 UP's README.txt and LICENSE.txt, the Sass source, and ENRICHR-COLOURS.txt, which lists every colour change.
Prompt for your AI assistant
Paste this into Claude, Cursor or ChatGPT together with the unzipped folder.
I downloaded the "Dimension one-pager" site template (by HTML5 UP, recoloured in Enrichr colours) from https://enrichr.dev/templates/html5up-dimension.html.
Unzip it and edit index.html for my site: [describe your site, its sections and tone].
Rules:
- Replace the placeholder text, links and images with mine. Keep image sizes close to the originals.
- Do not change assets/css/main.css or anything in assets/js: the layout and animations depend on them.
- Keep the class names and the HTML structure of each section, so the animations still run.
- Keep the "Design: HTML5 UP" credit in the footer (the CC BY 3.0 licence requires it).
Verify: open index.html in a browser, check there are no console errors, that the animations still play, and that it works at 375px wide.The template as JSON: /templates/html5up-dimension.json.
What it is for
A personal or product one-pager where every section (intro, work, about, contact) fits in one panel.
| Section | Full one-page site |
|---|---|
| Techniques | Reveal and intro, Parallax and depth |
| Stack | HTML, CSS, jQuery |
| Mood | dark, minimal |
| Original | Dimension on html5up.net |
Licence and credit
Dimension is a free template by HTML5 UP (AJ (@ajlkn)), released under the Creative Commons Attribution 3.0 licence. You can use it in personal and commercial projects as long as you credit HTML5 UP; the template's footer already does, so leave it in. Enrichr changed only its colours. HTML5 UP is not affiliated with Enrichr and does not endorse this version.
More templates
FAQ
Is this free for client work?
Yes. HTML5 UP releases it under Creative Commons Attribution 3.0, which allows personal and commercial use as long as you credit HTML5 UP. Keep the credit in the footer.
Did you change the animations?
No. Only colour values changed. The HTML, the jQuery script and every transition are exactly as HTML5 UP wrote them, and we checked that the page behaves the same as the original.
Can I use different colours?
Yes. Edit the colour values in assets/css/main.css. ENRICHR-COLOURS.txt in the zip lists each one we changed, so you can find them quickly.