Free football club 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: kilnfield.md, data: kilnfield.json

Football club website template: first screen on a phone

About this football club website template

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.

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

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

Good for:

Youth or grassroots football clubOther junior sports clubs such as rugby, cricket or netballCommunity club or society with age groups, fixtures and volunteersAny membership organisation with tiers, a weekly programme and a free trial

Turn the football club 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/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

Prompt for the agent:

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.

In a terminal

npx degit 8bsite/football-club-website-template my-site

Football club website design and motion

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.

Every value of this football club 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 football club website page

Navigation
Top bar with club mark and name, six links, a Free session button; phone menu overlay of nine links
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.
Club line, a long statement as the h1, two links and a wide photo of a team huddle
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
Four age-group cards dealt like a deck, each with a photo, days, a sentence and tags
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
Pinned sideways track of seven club days, each with a huge day name behind a photo card
The section pins and seven day cards travel sideways, while huge outlined day names move more slowly behind their photos.
Four promises
Four club promises, each a big line that a black field sweeps across, with a sentence
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
This weekend's fixtures table: team, opponent, kick-off, ground
The heading halves slide in and the table opens upward from its bottom edge once.
The coaches
Four coaches as rows: first name and surname either side of a portrait, role and a quote
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
Four numbered steps from booking a session to the first match
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
A looping row of six parent and volunteer quote cards
Six quote cards loop sideways without end and pause when off screen, on hover and on keyboard focus.
What it costs
Three fee tiers as colour columns with a monthly price and a bursary line
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
Six questions and answers in native <details> elements
The heading halves slide in and each question rises into view.
Come and play. First session free. See you Saturday.
Three huge drifting rows of text, a free-session form and the ground, phone, email and hours
Three huge rows of text drift sideways in opposite directions as the block crosses the screen.
Footer
Three link columns, a large club wordmark and a legal line
Each of the three link columns rises into view as it enters the screen.

Before you publish the football club 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.
"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.

Questions about this football club website template

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

Not a football club website? More free templates