# Free football club website template

> Free HTML football club website template for youth teams, with squads, fixtures and fees. AGENTS.md for Claude Code and Cursor, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

Football club website template: one free HTML file for a volunteer-run youth club, with age-group squads, a weekend fixtures table, coaches, three fee tiers with a bursary and a free-session booking form. Signal orange, black and cream with poster-size capital headings. AGENTS.md is included, so Claude Code, Cursor or Codex can adapt it.

- Page: https://8b.com/templates/kilnfield/
- Live demo: https://8b.com/templates/kilnfield/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/kilnfield/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/football-club-website-template
- Download ZIP: https://8b.com/templates/kilnfield/football-club-website-template.zip
- Template name in the repository: Kilnfield Colts FC
- At a glance: One 100 KB index.html with its CSS and JavaScript inside, 13 sections, 16 Unsplash photos credited in CREDITS.md, Pliant and Reddit Sans 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/football-club-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/football-club-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/football-club-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/football-club-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 club: sport, ages and squads with training days, weekly programme, promises, this weekend's fixtures, coaches with badges, how to join, fee tiers and bursary, ground, hours, contacts>. Replace first the club name and year, then the squads, fees, fixtures, coaches, quotes and photos. Keep the ids and classes AGENTS.md lists, and set each --len value to the new line's character count. Ask me for any missing fact and never invent fees, dates, badges, safeguarding claims, names 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/football-club-website-template my-site`.

## About

Parents choosing a team want the same answers in the same order: which squad fits my child's age, when training is, who the coaches are, what it costs and how to try a session. This soccer club website template gives each of those a section. A sports team website template for a rugby, cricket or netball club can reuse the structure, and so can a society with age groups, fixtures and volunteers.

Give the agent the facts only the club has: name, town, founding year, squads with ages and training days, fixtures, coaches and their badges, fees, bursary terms, ground and opening hours. The demo invents all of them, along with the quotes and the coaches' names. Replace the club name in any letter case, then the 16 Unsplash photos. Claude Code, Cursor or Codex can do it in one pass, which suits vibe coding a club site on a weekend.

Choose this when the club is junior, volunteer-run and wants to talk to parents plainly. A club that sells adult memberships with a weekly timetable and plans may fit the [training club](https://8b.com/templates/arcline/) template better. The weak spot is size: this is one page with a hand-edited table of eight fixtures for a single weekend. Without code, an AI website builder can also design a site from a sentence.

## Design

- Palette: #141414 (text on the light pages and on orange, the black sections (opening, week, coaches, fees, contact, footer), the dark squad and quote cards, the button marks), #ff4d1f (signal orange: the nav mark, the main button, the promises and join sections, one squad card, two quote cards, the first fee column, the first contact row, week day labels, the form status line), #ece6d8 (cream: text on the black sections, the questions section, the third squad card, the third fee column, button hover text), #f6f3ec (page background, the nav bar, and the fill that sweeps across the dark button on hover), #5c5a55 (intro paragraphs and table heads on light grounds, and the tone behind photos before they load), #a7a194 (quieter text on the black sections (club line, intros, roles, labels) and the underline of form fields)
- Fonts: Pliant (display face at heavy weights and wide stretch: the nav name, section headings, promise lines, fee prices, contact rows and the footer wordmark), Reddit Sans (body text, labels, table cells, form fields and small captions, from regular to bold)

Poster-size uppercase headings, set wide and heavy in two lines, open the sections after the opening; on all but the week their two halves slide in from opposite sides. Sections alternate full-bleed colour: black for the opening, week, coaches, fees and contact, orange for promises and join, cream for the questions. Buttons are pills with a round arrow mark. Display lines are sized by a --len value so each one fills the width of the screen.

Orange fills the promises and join sections whole, plus the first squad card, two of six quote cards and the first fee column; it also colours the first contact row. The opening is black, and the third contact row is outlined type with no fill.

## Sections and motion

- **Navigation** (navigation): top bar with club mark and name, six links, a Free session button; phone menu overlay of nine links. Motion: The bar slides away when you scroll down past 160 px and back on scrolling up, and the phone menu opens as a full-screen overlay.
- **We’re a community football club for 480 boys and girls between five and eighteen. Nobody is cut, nobody spends a season on the bench, and every coach on our touchline is a trained volunteer who stays.** (opening): club line, a long statement as the h1, two links and a wide photo of a team huddle. Motion: On load the club line, the statement and the buttons rise into place one after another and the huddle photo opens upward from its bottom edge.
- **Find your squad** (squads): four age-group cards dealt like a deck, each with a photo, days, a sentence and tags. Motion: From 1081 px wide the deck pins while four cards gathered in one turned pile are dealt into a row; below that each card is dealt in from alternating sides.
- **Seven days at Kilnfield** (week): pinned sideways track of seven club days, each with a huge day name behind a photo card. Motion: The section pins and seven day cards travel sideways, while huge outlined day names move more slowly behind their photos.
- **Four promises** (promises): four club promises, each a big line that a black field sweeps across, with a sentence. Motion: As each of the four promise lines crosses the middle of the screen, a black field sweeps over it, holds and leaves, scrubbed by the scroll.
- **This weekend** (fixtures): this weekend's fixtures table: team, opponent, kick-off, ground. Motion: The heading halves slide in and the table opens upward from its bottom edge once.
- **The coaches** (coaches): four coaches as rows: first name and surname either side of a portrait, role and a quote. Motion: For each coach row the first name and surname start together at the centre and part towards the edges while the portrait opens between them; on phones the names slide in from opposite sides.
- **How to join in** (join): four numbered steps from booking a session to the first match. Motion: From 1081 px wide the steps pin while each number appears at poster size and settles into its column, with the title and text rising after it; below that each number lands from a large scale.
- **From the touchline** (voices): a looping row of six parent and volunteer quote cards. Motion: Six quote cards loop sideways without end and pause when off screen, on hover and on keyboard focus.
- **What it costs** (fees): three fee tiers as colour columns with a monthly price and a bursary line. Motion: The three tiers start under one black field that narrows to the middle column, uncovering the orange and cream fields while the outer tiers’ text slides in from the sides, scrubbed by the scroll.
- **Parents ask** (faq): six questions and answers in native <details> elements. Motion: The heading halves slide in and each question rises into view.
- **Come and play. First session free. See you Saturday.** (contact): three huge drifting rows of text, a free-session form and the ground, phone, email and hours. Motion: Three huge rows of text drift sideways in opposite directions as the block crosses the screen.
- **Footer** (footer): three link columns, a large club wordmark and a legal line. Motion: Each of the three link columns rises into view as it enters the screen.

## Good for

- youth or grassroots football club
- other junior sports clubs such as rugby, cricket or netball
- community club or society with age groups, fixtures and volunteers
- any membership organisation with tiers, a weekly programme and a free trial

## Questions

**Is this football club website template free to use?** Yes. It is MIT licensed: index.html, AGENTS.md, LICENSE and CREDITS.md come from the GitHub repository with four curl lines. The 16 photos load from Unsplash under its licence and are listed in CREDITS.md, and the fonts are Pliant and Reddit Sans.

**Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). Describe the site in a sentence and its engine designs a new one, with its own design rather than this template. Designing and restyling are free. Hosting with SSL, HTML export and AI edits in chat are on Pro at $9 a month billed yearly.

**How do I give it to an AI agent?** Download index.html and AGENTS.md into an empty folder and open it in Claude Code, Cursor or Codex, then paste the prompt from this page. Give files, not a URL, because a fetched page arrives as a summary. AGENTS.md lists what to keep and what to ask you for.

**What must stay when I change the text?** Keep every id, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists. Update --len when you change the promise lines, contact rows or wordmark. 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.

**Does the booking form send anything?** No. The form has action="#", and its script checks the fields and shows a thank-you line without sending anything. Connect Formspree or Netlify Forms before you publish, or delete the form and its script.

**What happens on a phone, with reduced motion or without JavaScript?** Below 1081 px the squad deck and join steps stop pinning. With reduced motion, entrance and scroll animations and smooth scrolling are off, but the nav bar still slides and hover fills run. Without JavaScript the phone menu cannot open and the form shows no thank-you; the six questions still open.

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

- "Free session" button in the nav lead to #contact now; point them to your session booking page, or keep #contact once the form is connected.
- "Find your squad" button and "Read our four promises" link in the opening lead to #squads and #promises now; point them to keep as they are.
- "Ask about a bursary" button in the fees section lead to mailto: with a placeholder address now; point them to your own email, or a page with a bursary form.
- Instagram, Facebook and YouTube links in the footer lead to the home pages of the networks now; point them to your club's profile pages, or remove what you do not have.
- "Volunteer with us", "Safeguarding" and "Privacy" links in the footer lead to #contact, #faq and #contact now; point them to your volunteer page, safeguarding policy and privacy policy.
- Phone and email links in the contact section lead to tel: and mailto: with placeholders now; point them to your real number and address.
- Booking form in the contact section lead to action="#": nothing is sent, the script only shows a thank-you line now; point them to a form service address (Formspree, Netlify Forms).
- The booking form has action="#" and nothing is sent; connect a form service before publishing.
- The week track pins the section and the deck and the join steps pin from 1081 px; each pin adds scroll length, so the page is long on desktop.
- The huge day names in the week track are decorative and hidden from assistive technology; the day label in each card carries the information.

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