Hyperspace sidebar site: Free HTML Template

Site template · HTML + CSS + jQueryUpdated November 6, 2026

Full pageSite templateHTML + CSS + jQueryBy HTML5 UP · CC BY 3.0

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

Each section fades up as it scrolls into view.
The sidebar highlights the section you are reading and draws a gradient underline under it.
Menu links scroll smoothly to their section; on small screens the sidebar becomes a top bar.

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
`#312450`	`#0c1e18`
`#261c3e`	`#07130f`
`#3c2c62`	`#1a3129`
`#5e42a6`	`#005236`
`#493382`	`#003d28`
`#5052b5`	`#126e45`
`#3e4094`	`#0c5435`
`#b74e91`	`#1a7a4c`
`#953d75`	`#125a37`
`#ffffff`	`#fbf8f1`
`#000000`	`#050d0a`

Some accents are swapped only where they read well: #e6ff55 replaces #b74e91 on the heading underline and the sidebar menu indicator; #e6ff55 replaces #b74e91 on ticked checkboxes and radio buttons.

How to use it

Download the .zip and unzip it.
Open index.html in 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 "Hyperspace sidebar site" site template (by HTML5 UP, recoloured in Enrichr colours) from https://enrichr.dev/templates/html5up-hyperspace.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-hyperspace.json.

What it is for

A startup, service or event one-pager with a few distinct sections and a contact form.

Section	Full one-page site
Techniques	Scroll-driven, Reveal and intro
Stack	HTML, CSS, jQuery
Mood	bold, modern
Original	Hyperspace on html5up.net

Licence and credit

Hyperspace 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.

Story scroll pageA light, modular long page: banner, alternating spotlights, a gallery with a lightbox and a contact form, each fading in as you scroll. Recoloured in Enrichr cream, ink and greens. Dimension one-pagerA one-page site whose sections open as floating panels while the background zooms and blurs behind them. Recoloured in Enrichr greens, cream and lime. Phantom tile portfolioA clean portfolio grid of coloured tiles that zoom on hover, with a slide-in side menu. Recoloured in Enrichr greens, violet and terracotta on cream.

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.