Free roller rink website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: spinway.md, data: spinway.json

Roller rink website template: first screen on a phone

About this roller rink website template

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.

At a glance, October 2026. 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.

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

Good for:

Roller rink or skating venueIce rink, trampoline park or bowling alley with weekly sessions and party packagesDance studio, club night or community hall with a regular timetableAny venue with a long history, a rental shop and party bookings, or a retro poster look

Turn the roller rink website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

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

Prompt for the agent:

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.

In a terminal

npx degit 8bsite/roller-rink-website-template my-site

Roller rink website design and motion

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.

Every value of this roller rink website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the roller rink website page

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
First screen: two cut-corner photos beside the headline, a short story of the floor, two buttons and a link
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
Five weekly sessions as colour rows with day, name, note, time and price; ticket note and button
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
A photo of worn skates beside a heading about the maple floor, a stripe band and three facts
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
Course heading with a photo, then four steps rising like a staircase with week ranges and a join button
The four steps climb into a staircase as you scroll, sliding sideways instead on phones.
Two hundred and forty pairs on the wall
Rental heading, wall photo, four wheel-colour size rows, a heap-of-skates photo and a pro shop price list
The two photos drift on scroll and the four wheel-colour rows slide in diagonally.
Fifty seasons on the same floor
A horizontal track of eight years with a short story and a photo each, under a stripe band
The section pins and the row of eight years slides sideways as you scroll.
Your party, our floor
Party heading with a photo, three slanted package panels with lists and prices, deposit note and button
The photo drifts and the three package panels slide in diagonally, one after another.
Records from the booth
Booth story with a photo and a record request form, beside four record sleeves flipping like a crate
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
Questions and answers in native details elements beside a heading with a stripe band
The stripe band draws and each question slides in diagonally.
Find the rink
Address, phone and email, session hours, box office note, beside a drawn street map with a route to the rink
The map zooms and untwists into place while the route to the rink draws itself.
Footer
Large wordmark with a stripe band, footer links, social links, copyright with the Design: 8B credit
The stripe band under the wordmark draws across once.

Before you publish the roller rink website site

Replace social preview image, favicon, email address, contact form (sends nothing yet), phone number and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
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.

Questions about this roller rink website template

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

Not a roller rink website? More free templates