Arena — Free sports club / team Website Template
Arena is a free, single-page Bootstrap 5 template built specifically for football and sports clubs, not generic landing pages. Its standout is a stadium-loud scoreboard hero showing your next opponent, venue and a live JavaScript countdown to kick-off, then it carries the club identity through fixtures, results, a position-filterable squad, news, membership tiers and a sponsor wall. It ships with zero jQuery and inline-SVG crests, so it deploys cleanly even on strict-CSP hosts.
Key features
- Scoreboard hero with dual crests and a live countdown to kick-off
- Set the countdown with one data-kickoff date attribute
- Filterable first-team squad by position, with jersey numbers and captain armband
- Upcoming fixtures with home/away/cup colour coding, times and ticket buttons
- Latest results grid with win/draw/loss badges and a season form guide
- Club news cards with category tags, dates and hover zoom
- Three-tier membership section with a featured ticket-stub plan
- Inline-SVG crests and sponsor wall — no icon fonts, no external images
- Sticky auto-darkening header, scroll reveals, skip link and reduced-motion support
Best for
- Amateur and professional football clubs
- Sports teams and supporter/fan sites
- Club membership and matchday landing pages
- Agencies building a team site for a client
- Single-page club sites needing fixtures and results
At a glance
- Framework: Bootstrap 5
- License: Free for personal and commercial use
- Pages: 1 (single-page)
- Responsive: Yes
- Style: Bold, energetic sports club — scarlet, gold and Foundry-ink with heavy condensed display type
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Arena really free for commercial club use?
Yes. You can use it for a real amateur or professional club, a supporter/fan site, or a paid client project, all free of charge. Attribution to uiCookies is appreciated but not required. There are no licence fees and no usage limits.
Do I need a build tool or coding experience to edit it?
No build step is involved — it's a single index.html plus Bootstrap 5, with no compiler, npm install, or framework to learn. You edit the text, swap the photos and rearrange sections directly in the HTML. A little JavaScript familiarity helps if you want to tweak the countdown or squad-filter data attributes, but nothing more.
How do I change the colours and fonts?
The scarlet, gold and Foundry-ink palette is defined as CSS custom properties in the stylesheet, so you change the whole club identity from one place rather than hunting through the markup. The heavy condensed display type is set the same way. Point the font link at any Google Font (or your own) and update the variable to restyle every heading at once.
Is it responsive and mobile-friendly?
Yes. It's built on the Bootstrap 5 grid, so the scoreboard hero, fixtures list, results grid and squad cards all reflow cleanly from desktop down to phones. It also ships with full prefers-reduced-motion support, so the scroll-reveal animations respect visitors who ask for less motion.
Which browsers does it support?
Arena works in all modern evergreen browsers — Chrome, Firefox, Safari and Edge. All behaviour is vanilla JavaScript in js/main.js with no jQuery, and the only bundled library is Bootstrap 5. Internet Explorer is not supported.
Can I connect ticketing, membership payments or a CMS?
Arena is a static front-end, so it doesn't process payments or store data on its own. The per-match ticket buttons and the membership plan CTAs are ordinary links you point at your own ticketing platform or checkout provider. You're free to wire the markup into any CMS or backend, but that integration is yours to add.
How do I set the countdown to my own match?
Edit the single data-kickoff="2026-08-15T19:45:00" attribute on the .countdown element in index.html. The vanilla JavaScript reads that date and refreshes the days, hours, minutes and seconds every second. When the timer reaches zero it automatically switches to a "Kick off" state — no other configuration needed.
How does the squad filter work and is it lightweight?
Each player card carries a data-pos value (gk, def, mid or fwd), and the position chips toggle card visibility with the hidden attribute — no page reload — showing an empty-state message if a group has no players. It's fast because it's pure DOM work with no library behind it. Every club crest and the sponsor wall are inline SVG rather than icon fonts or external images, so the page stays light and CSP-friendly; you only swap in your own squad and news photos.
