Sports Club Template
A complete one-page site for a semi-professional football club, painted edge to edge in one saturated kit colour with the club name set at poster scale across a full-bleed photograph, built around a draggable season scrubber that turns a plain results list into an instrument: throw it and the scoreline, points, league position, form guide and position curve all answer to the same finger.
About This Template
A matchday site for a club, not a brochure for a business. Marsh End A.F.C. is a fictional semi-professional football club, and the template is the whole of its site: a fixed bar with crest and ticket button, a hero that paints the kit colour edge to edge and runs the club name across a full-bleed photograph of a goal celebration, a season of results you can drag through, a squad section built on one oversized portrait, a quiet full-bleed section for the ground itself, and a membership ladder priced like a league table.
Read the full template overview
The art direction comes from a club programme rather than a web layout. One saturated royal purple carries every section, gold is the second kit colour and the only accent, and every number on the page, scores, league positions, prices, capacity, is set in the same condensed poster face as the headlines, because at a football club the numbers are the content. Bebas Neue does the posters, Saira and Saira Condensed carry the reading and the fixture data as one voice at two widths, and the founding year sits behind the hero as an outlined figure twice the height of the club name.
The signature is the season scrubber. The results list is real HTML you can read with JavaScript switched off, and the script reads that list and builds the instrument from it: drag the rail and the scoreline, opponent, attendance, points total, league position, form pills, tick rail and league-position curve all move together, with the section's tint going gold on a win and red on a defeat. Fling it and it carries on through the season before settling, digits landing last. Delete a fixture from the list and everything renumbers itself.
To make it your club, repaint the two kit colours in one token block and drop your own photographs into the assets folder. The fixtures, squad and memberships are ordinary markup, the images are bundled optimised WebP with the grade baked in, and the site deploys as static files with no build step.
What's Included
- A complete club site in one page: fixed bar with crest and tickets, hero, season results, squad, the ground, membership ladder and a footer with a sponsor ticker
- Signature season scrubber: drag, fling or arrow-key through sixteen matchdays and the scoreline, opponent, venue, attendance, points, league position, form pills, tick rail and position curve all answer to one input
- The scrubber's data is the plain results list in the markup, so the whole instrument is driven by ordinary HTML: add or delete a fixture and the rail, the curve, the points total and the form guide all renumber themselves
- A fling carries through the season on released velocity and settles with the head overshooting once, and the scoreline lands last rather than blurring past
- Result tinting: one attribute set by the script turns the position curve, tick fill, drag head, scoreline divider and the ghost matchday numeral gold on a win and red on a defeat
- The season plays itself in once when it first scrolls into view, so a visitor sees what the instrument does before touching it
- Squad section built on one oversized portrait against a numbered list, swapping on hover, focus or click with the shirt number as the ground behind it
- Committed hero: the kit colour painted edge to edge, the club name at poster scale breaking across a full-bleed photograph, the founding year outlined behind it, and the next fixture anchored full-width along the foot
- Membership as a ladder of wide bands on a gold ground rather than a row of pricing cards, priced in the same display face as the scorelines
- Bundled optimised WebP photography with the club's grade baked into the pixels, plus a manifest and a one-command rebake to swap in your own
- Full no-JS story: the scrubber hides itself and the results list it was built from carries the section, the sponsor ticker ships a single clean row, and nothing on the page is pre-hidden without a way back
- Reduced motion gets a designed static page through both the CSS media query and the matchMedia branch: the scrubber still drags, it simply snaps instead of settling
- Keyboard parity throughout: the scrubber is a real slider with arrow, Home and End keys and a spoken value for each matchday, and every squad portrait swap is reachable by focus
- Touch-safe dragging via pointer capture with vertical page scrolling preserved, so the season scrubs on a phone without trapping the scroll
- Reskins from one token block: two kit colours and every translucent value derived from RGB triples, with the measured contrast table in the stylesheet header
- Lenis smooth scrolling wired on the shared GSAP clock and fully optional, with anchor links offset for the fixed bar
Perfect For
- Football, rugby, cricket and hockey clubs at semi-professional and amateur level
- Academies, junior sections and university clubs selling memberships and matchday tickets
- Running clubs, cycling clubs, boxing gyms and esports teams with a fixture list and a roster
- Any season-shaped organisation whose results and standings are the story
- Learning pattern: a draggable scrubber built entirely from semantic markup, driving several channels from one input
How It Works
The season scrubber
The results list in the markup is the data source. On load the script reads each list item's data attributes, derives the result and a running points total, and builds the tick rail and the full-season position curve from what it finds. A single floating index drives everything: the continuous channels (rail fill, drag head, curve path and its dot) repaint every frame, while the discrete channels (scoreline, opponent, attendance, points, position, form pills and the tint attribute) commit only when the rounded matchday changes, so the digits stay readable instead of blurring past.
Dragging and settling
The rail uses pointer capture, so a drag survives leaving the element and works identically with a mouse, a pen or a thumb. Velocity is sampled on every move and the released throw is projected forward through the season before a power4 tween snaps it to the nearest matchday; the drag head overshoots once on an elastic ease as it lands, and the scoreline plays its own short entrance so it settles last. The rail carries pan-y touch action, so a vertical swipe still scrolls the page.
Result tinting
Rather than tween several colours from script, the scrubber writes one data attribute for the current result and the stylesheet does the rest: the position curve, tick fill, drag head, scoreline divider and the outlined matchday numeral all switch together on a CSS transition. The defeat red is only ever a stroke or a fill behind dark ink, never type on the kit colour, which is the one pairing on the page that does not clear the contrast floor.
Squad, ground and ticker
The squad list is a set of buttons carrying their own portrait, shirt number and alt text, so hover, focus and click all route through the same swap and the keyboard gets exactly what the mouse gets; portraits are preloaded so a slow line never shows a blank frame. The ground section is a single photograph with an information block deliberately overlapping the seam into the section below. The sponsor ticker duplicates its own row at runtime, so the shipped markup lists each sponsor once.
Without JavaScript
A class added synchronously in the head pre-hides the reveal targets, and the script removes it again if GSAP fails to load, so a blocked CDN leaves a complete page rather than an empty one. The scrubber ships hidden and is only revealed once it has been built, which means a no-JS visitor sees the full results list it would have been built from, with the scores, venues and matchdays all present. Reduced motion keeps every interaction and swaps the settling, reveals and ticker for instant states.