Free swimming pool 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: splosh.md, data: splosh.json

Swimming pool website template: first screen on a phone

About this swimming pool website template

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.

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

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

Good for:

Outdoor pool or lidoCommunity leisure centre or swim schoolOpen-water swimming club or sauna and cold-plunge spotAny local venue with timed sessions, courses and a cafe, by look

Turn the swimming pool 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/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

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my pool: name, address, session times and prices, lesson levels with fees, ticket and pass prices, kiosk menu, event dates, opening hours, charity number>. 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.

In a terminal

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.

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.

Swimming pool website design and motion

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.

Every value of this swimming pool 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 swimming pool website page

Navigation
Fixed bar: logo tile, white pill with six links, Book a swim button; hides on scroll down; phone menu overlay
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
One blue screen: headline "Fifty metres of open sky", a paragraph, two buttons, four facts and an aerial photo with a 24 degree sticker
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
"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
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
"Swim club": four level tiles of rising height with a round photo each, a handwritten note with an arrow and a trial lesson button
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
"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
The heading and paragraph rise, the sticker stamps in and a small spark draws its three strokes.
Lounge on the lawn
"Lounge on the lawn": the giant word LOUNGE with a round deckchair photo, then three tiles with photos
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
"The kiosk": a hot chocolate feature tile with a price sticker, a chain of four round photos and a six-line price list
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
"( Since 1936 )": a short history in a paragraph and four dated lines beside two archive photos
The heading, first line and both archive photos rise, and a spark draws beside the photos.
The lights go on underwater
"The lights go on underwater": dusk ground, a glowing pool photo and three dated event tiles
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
"Pay as you swim, or swim all summer": four ticket tiles with price stickers and a Book a swim button
The heading and paragraph rise, and each of the four price stickers stamps in.
Through the green gate
"Through the green gate": a board of tiles (address, photo, getting here, opening hours, phone and email) and a message form
The tiles arrive scattered and tilted around the board's centre and gather into the board as it comes into view.
Good to know
"Good to know": six questions as native details elements beside a heading and the phone number
The heading and the line under it rise on arrival.
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

Before you publish the swimming pool website site

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

Questions about this swimming pool website template

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

Not a swimming pool website? More free templates