# Free roller rink website template

> Free HTML roller rink website template for skating venues with weekly sessions, lessons and party packages. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Roller rink website template: one free HTML file for a skating venue with a weekly session list, eight-week lessons, rental sizes, party packages and a record booth. It reads like a 1976 poster, with teal, aubergine and ink grounds and cream type under yellow, orange and red stripes. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/spinway/
- Live demo: https://8b.com/templates/spinway/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/spinway/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/roller-rink-website-template
- Download ZIP: https://8b.com/templates/spinway/roller-rink-website-template.zip
- Template name in the repository: Spinway Roller Rink
- At a glance: One 85 KB index.html with its CSS and JavaScript inside, 12 sections, 16 Unsplash photos credited in CREDITS.md, Gabarito and Rethink Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/roller-rink-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/roller-rink-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/roller-rink-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/roller-rink-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my venue: name, address, year opened, weekly sessions with days, times and prices, lesson fee and start date, rental sizes, shop prices, party packages and deposit, hours, closures, phone, email>. Replace first the name, sessions, prices and history years. Keep the section ids, the four lesson steps with their --ls-n numbers, the classes AGENTS.md lists and the footer wordmark len set to the new name length. Ask me for missing facts and never invent prices, hours or contacts.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/roller-rink-website-template my-site`.

## About

A rink site has to put the timetable up front, and this one does, right below the first screen: five weekly sessions with day, time and price, then lessons, rental sizes, three party packages and a map. If you want a roller skating website template that is a working site and not a design file, this is that. An ice rink, a trampoline park or a dance hall with a regular week and birthday bookings can reuse the same page.

For vibe coding with Claude Code, Cursor or Codex, hand the agent the real session days, times and prices, the lesson fee and start date, rental sizes, shop prices, party packages, deposit, history, address and hours. The demo invents all of them, including the DJ and the 1976 opening. The agent should replace the name everywhere and set the footer wordmark's --len to its character count. The ids and the classes AGENTS.md lists must stay.

Pick this base for a venue with a regular timetable and a history worth telling. A [trampoline venue](https://8b.com/templates/hopla/) that sells timed jumps can keep the structure but will want its own look, and a bowling alley website can drop the wheel-colour rental rows. The weak spot is the single page: the record request form sends nothing until connected, and without code, the 8B builder is the other route.

## Design

- Palette: #0b5f7f (teal ground of the lessons and booth sections, the Saturday session row and the teal wheel in the rental rows), #3b2e47 (aubergine ground of the first screen, phone menu, rental and contact sections), #f3e6cf (cream text, photo frames, rules, outlines and the cream bars between stripes), #f5a524 (yellow ground of the floor and questions sections, primary buttons, the first session row and the footer wordmark), #ee5a2a (orange ground of the seasons section, button hover, the second session row and the map route), #b8301a (red in the stripes, the red wheel, the third lesson step and the largest party panel), #271e30 (ink page ground for sessions, parties and footer, and dark text on the yellow and orange sections)
- Fonts: Gabarito (rounded heavy headings, session days, step and panel titles and the footer wordmark, weights 700 to 800), Rethink Sans (body text, buttons, uppercase labels, form fields and badges, weights 400 to 700)

Section grounds alternate as you scroll: aubergine, ink, yellow, teal, aubergine, orange, ink, teal, yellow, aubergine. Photos sit in frames with two cut corners. Session rows are full-width colour bars, the lesson steps rise like a staircase, the party packages are three slanted panels, and the seasons run as a row of eight years. A diagonal slant repeats in badges, stripes and entrances. The map is drawn in SVG, with the rink as a rounded oval of nested rings.

The yellow, orange and red stripe band is the signature: it draws in under headings, and a slanted stripe bar sweeps across every pill button on hover. Photos sit in cut-corner frames, every section carries a fine dot grain, and the rental wheels are circles drawn in CSS.

## Sections and motion

- **Navigation** (navigation): top bar: stripe mark and wordmark, five section links, Book a party button; hides on scroll down; full-screen phone menu
- **Season fifty, same maple floor** (opening): first screen: two cut-corner photos beside the headline, a short story of the floor, two buttons and a link. Motion: On load the two photos rise in from the lower left and the headline, text, buttons and link settle upward one after another, in CSS keyframes with nothing tied to scroll.
- **Five sessions a week** (sessions): five weekly sessions as colour rows with day, name, note, time and price; ticket note and button. Motion: While you scroll, the list starts tilted and shrunk, straightens, and each row slides into place and fades in its description, pinned for about one extra screen of scrolling on desktop.
- **Sixteen hundred boards of hard maple** (floor): a photo of worn skates beside a heading about the maple floor, a stripe band and three facts. Motion: The photo drifts inside its frame on scroll, the stripe band draws across and the three facts slide in diagonally.
- **Learn to skate in eight Wednesdays** (lessons): course heading with a photo, then four steps rising like a staircase with week ranges and a join button. Motion: The four steps climb into a staircase as you scroll, sliding sideways instead on phones.
- **Two hundred and forty pairs on the wall** (skates): rental heading, wall photo, four wheel-colour size rows, a heap-of-skates photo and a pro shop price list. Motion: The two photos drift on scroll and the four wheel-colour rows slide in diagonally.
- **Fifty seasons on the same floor** (seasons): a horizontal track of eight years with a short story and a photo each, under a stripe band. Motion: The section pins and the row of eight years slides sideways as you scroll.
- **Your party, our floor** (parties): party heading with a photo, three slanted package panels with lists and prices, deposit note and button. Motion: The photo drifts and the three package panels slide in diagonally, one after another.
- **Records from the booth** (booth): booth story with a photo and a record request form, beside four record sleeves flipping like a crate. Motion: The section pins and the sleeves flip forward and fade one by one, like flicking through a crate, until the last crate stays.
- **Before your first lap** (faq): questions and answers in native details elements beside a heading with a stripe band. Motion: The stripe band draws and each question slides in diagonally.
- **Find the rink** (contact): address, phone and email, session hours, box office note, beside a drawn street map with a route to the rink. Motion: The map zooms and untwists into place while the route to the rink draws itself.
- **Footer** (footer): large wordmark with a stripe band, footer links, social links, copyright with the Design: 8B credit. Motion: The stripe band under the wordmark draws across once.

## Good for

- roller rink or skating venue
- ice rink, trampoline park or bowling alley with weekly sessions and party packages
- dance studio, club night or community hall with a regular timetable
- any venue with a long history, a rental shop and party bookings, or a retro poster look

## Questions

**Is this a free roller skating website template?** Yes. It is one HTML file under the MIT licence, free for your own rink or a client's. The photos are from Unsplash and listed in CREDITS.md, and the two fonts are open licence. Replace the invented prices, hours and history before you publish.

**How do I give it to Claude Code or Cursor?** Download index.html, AGENTS.md, LICENSE and CREDITS.md with the four curl lines in the repository, open that folder in the agent, and paste the prompt on this page. AGENTS.md tells it what to replace, what to keep and which facts to ask you for.

**What must I keep when I edit it?** Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists. The lessons grid is built for four steps, each with its --ls-n number, and the footer wordmark needs its --len set to the name's character count. Keep the Design: 8B footer link unless the site owner asks to remove it.

**Does the record request form send anything?** No. As shipped, a script checks that the field is not empty and shows a thank-you line on the page, and nothing leaves the browser. Connect Formspree or Netlify Forms, or point it at your own endpoint, or delete the form and its script.

**Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the rink in a sentence and it designs a new site, which is its own design and not this template. Designing and restyling are free; publishing with hosting, HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

**How does it behave on phones and without JavaScript?** On phones it opens a full-screen menu, and the session rows show only day, time, price and title. Without JavaScript the menu button does nothing and the form shows no confirmation, though the footer still links five sections. With scripts running, the seasons and booth scenes pin for several screens.

## Before publishing

Replace: social preview image, favicon, email address, contact form (sends nothing yet), phone number and social media links, plus the invented demo facts (prices, dates, addresses).

- Book a party button in the nav, the first link of the phone menu and the first screen's secondary button lead to #parties now; point them to your party booking page, or keep #parties and connect the Ask for a date button.
- Ask for a date button in the parties section lead to a mailto link to the parties email address now; point them to your party enquiry form or booking page, or your real parties email.
- This week’s sessions button on the first screen lead to #sessions now; point them to keep it, or link to an online ticket page for the week.
- Plan your visit button in the sessions section lead to #contact now; point them to your directions or ticket page, or keep #contact.
- Join the next course button in the lessons section lead to #contact now; point them to your lesson sign-up page or form.
- Phone and email links in the Call or write block lead to a tel link and a mailto link with placeholder details now; point them to your real phone number and email address.
- Send to the booth button (record request form) lead to nothing is sent: a script shows a thank-you line on the page now; point them to a form endpoint (Formspree, Netlify Forms or your own) or remove the form.
- On phones the sessions scene runs unpinned and the per-row descriptions are hidden under 900 px; only day, time, price and the title show.
- The seasons and booth scenes pin the section for several screens of scroll, which feels long on short phone screens.
- The page loads GSAP, ScrollTrigger and Lenis from jsDelivr; if the CDN fails, no scroll motion runs and the page shows its static layout. Self-host them if you need offline use.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).