# Free swimming pool website template
> Free HTML swimming pool website template for outdoor pools, lidos and swim clubs, with ticket prices. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.
Swimming pool website template: one free HTML file for an outdoor pool, lido or swim club with timed sessions, swim lessons, a kiosk menu and ticket prices. Saturated rounded tiles sit on a pale grey ground, with round photo windows and tilted price stickers. It is a single file that Claude Code, Cursor or Codex can adapt.
- Page: https://8b.com/templates/splosh/
- Live demo: https://8b.com/templates/splosh/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/splosh/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/swimming-pool-website-template
- Download ZIP: https://8b.com/templates/splosh/swimming-pool-website-template.zip
- Template name in the repository: Splosh
- At a glance: One 116 KB index.html with its CSS and JavaScript inside, 13 sections, 25 Unsplash photos credited in CREDITS.md, Google Sans, Playpen Sans and Savate from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 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/swimming-pool-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/swimming-pool-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/swimming-pool-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/swimming-pool-website-template/main/CREDITS.md
```
Then give the agent this prompt:
```text
Read AGENTS.md, then edit index.html. Make this the site for . Replace first the pool name, demo history, prices and photos. Keep the section ids, the classes AGENTS.md lists and the four photos in the kiosk chain; set --len on the big word and footer wordmark to the new character count. Ask for any missing fact; never invent prices, hours, dates, safety rules 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/swimming-pool-website-template my-site`.
### Swimming pool website design prompt for any AI tool
Use this to build a swimming pool site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It is this template's design written as decisions, like the tokens in its plain-text design file; with the template itself, the short prompt above is enough.
```text
Build a one-page website for an outdoor pool, lido or swim club. Audience: families and local swimmers who want session times, lesson levels and ticket prices before they phone. Sections in order: navigation, opening panel, timed sessions, swim lessons, winter swimming, a pool-deck statement, kiosk menu, history, evening events, ticket prices, visit form, questions, footer. Type: Savate 900 in capitals for headings and stickers; Google Sans for body, buttons, times and prices; Playpen Sans once, for one handwritten note. Colours: page ground #e6e9e5, ink #15181b, pool blue #84c6e8, sunny yellow #fcb64d, orange #f6874b, deep green #0f5a40, secondary grey #50565d. Layout: rounded 30px tiles in saturated colours on the pale ground, round photo windows, tilted price stickers. No purple gradients, no three identical icon cards, no centred hero with two buttons; the first screen is one big blue panel with the heading beside an aerial photo. Motion: one idea, round photos swimming along lane bands as you scroll; stamp the stickers in; respect prefers-reduced-motion. Copy: short and concrete. Ask me for session times, prices, lesson fees, kiosk menu, hours and address; never invent them, leave visible placeholders. One primary action, Book a swim, repeated in the navigation, the opening panel and the prices. Mobile: check 390px, tap targets of 44px, menu button. Acceptance: no console errors, keyboard focus visible, list every placeholder.
```
## About
People search for a swimming pool template when a lido or community pool needs a site that shows sessions and prices before anyone phones. This pool website template has five timed sessions, four lesson levels, winter swimming with a sauna, a kiosk menu, three evening events and four ticket types. Used as a swimming pool website template for Claude Code and Cursor, it is one file an agent can edit; a swim school can reuse it.
Give Claude Code, Cursor or Codex the facts only the pool has: the session timetable, ticket and pass prices, lesson ages and fees, kiosk menu, event dates, opening hours and the charity or company number. The demo invents all of them, including the history. Replace the name, then update --len on the big word and the footer wordmark. The deck section's real heading sits in a hidden span, so change both. The agent should ask about safety rules and leave [the scroll-driven motion](https://8b.com/templates/animated/) as built.
This is the right base for one venue that sells time slots and a few tickets at its own gate. A [training club](https://8b.com/templates/arcline/) with coaches and membership plans suits a template built around a weekly schedule. The weak spots: Book a swim buttons only jump to another section of the page, there is no live availability, and the site is one long scroll. Without code, 8B's builder is the other route.
## Design
- Palette: #e6e9e5 (page ground, the price pills on the session lanes and the dividers between questions), #ffffff (white tiles, the nav pill and logo tile, form fields, lane tracks and the rings around round photos), #15181b (text, the black buttons, the events section ground, the menu overlay and the footer rule), #84c6e8 (pool blue: the first-screen panel, the footer panel, blue tiles and the Ducklings step), #fcb64d (sunny yellow: tiles, the button hover fill, the nav logo disc, the question toggles and the winter sticker), #f6874b (orange tiles, the lane tone behind the family session, the link underline on hover and the spark beside the history photos), #0f5a40 (deep green: the winter panel, the tilted price stickers with yellow type and the small nav logo disc), #50565d (secondary grey text: lane descriptions, the kiosk note, the price footnote and the answers to questions)
- Fonts: Savate (weight 900 in capitals: section headings, card titles, the big Lounge word, the footer wordmark and the stickers), Google Sans (body text, buttons, times, prices and form labels, in weights 400 to 700), Playpen Sans (weight 600, used once, for the handwritten note beside the trial lesson button)
A pale grey ground carries tiles with 30px corners in white, pool blue, yellow, orange and deep green. The first screen is one large blue panel on a 12-column grid: heading, text, buttons and a four-point list beside an aerial photo. Later sections use two-column heads, five horizontal lane bands, club steps that rise in height, a ticket row with every second ticket pushed down and a tile board with a form.
Depth comes from colour, not shadow: blue, yellow, orange, green and white tiles sit side by side, and only round stickers cast a shadow. Headings are heavy uppercase Savate; one note in Playpen Sans is the only loose touch. The events section turns to night ink.
## Sections and motion
- **Navigation** (navigation): fixed bar: logo tile, white pill with six links, Book a swim button; hides on scroll down; phone menu overlay. Motion: The fixed bar hides when you scroll down and returns when you scroll up; on phones a menu button opens a full-screen overlay.
- **Fifty metres of open sky** (opening): one blue screen: headline "Fifty metres of open sky", a paragraph, two buttons, four facts and an aerial photo with a 24 degree sticker. Motion: On load the heading lines, text, buttons, list and photo pop up in a short stagger, and the heated sticker lands like a stamp.
- **A day in the water** (sessions): "A day in the water": five lanes, one per session, each with time, name, line and price, and a round swimmer photo on its lane. Motion: On screens at least 1000 by 680 px the section pins for about one and a tenth screens while each lane's round photo swims across it and a colour fill follows; smaller screens run each lane as it passes.
- **Swim club** (club): "Swim club": four level tiles of rising height with a round photo each, a handwritten note with an arrow and a trial lesson button. Motion: As you scroll, the four steps rise from below one after another, each round photo hops in an arc to its step and the handwritten arrow draws itself.
- **The water doesn't close for winter** (cold): "The water doesn't close for winter": green ground, a swimmer photo, a sauna photo, a short list of seasons and prices and a join button. Motion: The heading and paragraph rise, the sticker stamps in and a small spark draws its three strokes.
- **Lounge on the lawn** (deck): "Lounge on the lawn": the giant word LOUNGE with a round deckchair photo, then three tiles with photos. Motion: The section pins for one screen while a round photo travels through the word Lounge, lifting and tilting the letters it passes, and comes to rest after the last letter.
- **The kiosk** (kiosk): "The kiosk": a hot chocolate feature tile with a price sticker, a chain of four round photos and a six-line price list. Motion: Four round photos start piled on the hot chocolate photo and roll out into an overlapping chain; the price sticker stamps in and a spark draws beside the photo.
- **Since 1936** (story): "( Since 1936 )": a short history in a paragraph and four dated lines beside two archive photos. Motion: The heading, first line and both archive photos rise, and a spark draws beside the photos.
- **The lights go on underwater** (nights): "The lights go on underwater": dusk ground, a glowing pool photo and three dated event tiles. Motion: The section ground runs from pool blue through deep green to night ink as it arrives, the type turns white and the photo brightens from near dark.
- **Pay as you swim, or swim all summer** (prices): "Pay as you swim, or swim all summer": four ticket tiles with price stickers and a Book a swim button. Motion: The heading and paragraph rise, and each of the four price stickers stamps in.
- **Through the green gate** (visit): "Through the green gate": a board of tiles (address, photo, getting here, opening hours, phone and email) and a message form. Motion: The tiles arrive scattered and tilted around the board's centre and gather into the board as it comes into view.
- **Good to know** (faq): "Good to know": six questions as native details elements beside a heading and the phone number. Motion: The heading and the line under it rise on arrival.
- **Footer** (footer): pool-blue footer: the wordmark with a disc for the O, brand line, eight links, address and phone, charity line with the Design: 8B credit
## Good for
- outdoor pool or lido
- community leisure centre or swim school
- open-water swimming club or sauna and cold-plunge spot
- any local venue with timed sessions, courses and a cafe, by look
## Questions
**Is this a free swimming pool website template I can use for a club?** Yes. It is one index.html under the MIT license, so a lido, a swim club or a freelancer can use it at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, there is no build step, photos are Unsplash images and the fonts are under the Open Font License. CREDITS.md lists them.
**Do the Book a swim buttons and the message form work?** Not yet. Book a swim only scrolls to the prices or visit section, and the form checks its fields, shows a thank-you line and sends nothing. Point the buttons at your booking page and connect Formspree or Netlify Forms, or delete the form. Also edit the thank-you line, which promises an answer within two days.
**How do I hand it to Claude Code, Cursor or Codex?** Put index.html and AGENTS.md in an empty folder using the curl lines at the start of AGENTS.md, then tell the agent to read AGENTS.md before it edits index.html. Give it the files, not the page address; [Cursor's Plan mode](https://8b.com/templates/for-cursor/) suits a first pass. No file? Paste the swimming pool website design prompt below into Lovable, v0 or Bolt.
**Which parts of the file break if I change them?** Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists. The big word and footer wordmark need --len set to their length; the kiosk chain fits four photos. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.
**Can I get a site like this without editing code?** Yes, in a different way. [8B's AI website builder](https://8b.com/) designs a new site from a sentence describing the pool, and it will not be this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat need Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.
**What happens on a phone, with reduced motion or with scripts off?** On a phone the six links collapse into a menu button, club steps form two columns and the sessions pin switches off. With reduced motion, entrance and scroll animations and smooth scrolling stop, while hover fills and nav hiding continue. Without JavaScript the menu button cannot open and the form shows no thank-you line; the questions still open.
## Before publishing
Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).
- Book a swim buttons in the nav, the phone menu, the first screen and the prices section lead to #prices (the prices section's own button goes to #visit) now; point them to your online booking page for sessions.
- See today's sessions link on the first screen lead to #sessions now; point them to keep it, or a live timetable page.
- Book a trial lesson button in the swim club lead to #visit now; point them to your lesson sign-up page.
- Join the cold club button in the winter section lead to #prices now; point them to your cold club sign-up page.
- Ask about tickets links under the three evening events lead to #visit now; point them to the ticket page for each event.
- Newsletter link in the footer lead to a mailto link with the subject Newsletter now; point them to your mailing-list sign-up page.
- The sessions pin only runs on large screens (1000 px wide and 680 px tall or more); smaller screens run each lane as it scrolls by.
- The nav hide-on-scroll and hover effects keep running with reduced motion; the scroll scenes and entrance animations are switched off.
- The five lane photos are decorative circles with no alt text, and small stickers sit over photos, so check contrast and text size when you replace them.
## 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(), container query units, cascade layers, small/dynamic viewport units).