Free running race 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: solsta.md, data: solsta.json

Running race website template: first screen on a phone

About this running race website template

This running race website template is one free HTML file for a yearly mountain trail race or ultra. It has a course set out as a sideways row of five parts, three race categories, a kit list, ten past editions with their weather, an entry ballot with fees and a race office form. AGENTS.md lets an AI agent adapt it.

At a glance, October 2026. One 111 KB index.html with its CSS and JavaScript inside, 13 sections, 13 Unsplash photos credited in CREDITS.md, Google Sans and TikTok Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

Organisers of trail runs, ultras and mountain races can use it as a base. As a sports event website template it also carries a cycling sportive, a ski tour or a village charity day. Running race websites share one job, answering what entrants ask, and this one answers in order: course, start times and places, kit, past weather, fees, cut-offs and where to sleep. A marathon website template for the road would drop the climb.

Start with the race name, date, first and last light and the three race cards, then the five course tiles, the fee table and the ten past editions. Claude Code, Cursor or Codex can do this in one pass, and vibe coding works if you hand over the facts. Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes, the altitude value on each course tile and every --len, which stores a heading's character count.

Choose it for a yearly event with several distances, a ballot and volunteers. A running club, coaching service or training app needs another shape, and the app landing page template is closer to that. Live tracking, results search and registration are not here: the entry buttons only jump to the entry section until you point them at your sign-up. Owners who do not code can try 8B instead.

Good for:

Trail running race or ultra marathonMountain or outdoor sports festivalCycling, ski or triathlon event with several distancesYearly village or charity event with a ballot, a programme and volunteers

Turn the running race 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/running-race-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/running-race-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/running-race-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/running-race-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make it the site for <my race: name, place, date, first and last light, distances with climb, altitudes and places, ballot dates, fees, cut-offs, kit list, past results, volunteer rules, legal name and contacts>. Replace the race name, dates, distances, altitudes and fees first. Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes, each course tile's altitude value and each editions row's data-sky value, and update every --len. Ask me for missing facts and never invent cut-offs, safety rules, results, fees or contacts.

In a terminal

npx degit 8bsite/running-race-website-template my-site

Running race website design and motion

Palette

#111111 page ground, text on lime buttons and badges, borders and the hard shadows#ececea body text on the black ground, the light cards (entry board, trail day card, race office cards) and part of the fog, storm and not-run skies#ff4a14 orange: the light that crosses photos, the button sweep, the heat sky and the glow behind the contact cards#c2f47c lime: buttons, badges, link underlines, course part numbers, kit boxes, focus outline and hover colour#8e6cf5 violet: the ends of the sky gradient and the snow, wind and storm skies#f6b5e3 pink in the sky gradient and the wind and storm skies#c9f2e3 mint: base of the sky tiles and the clear and snow skies#ffc58c peach in the sky gradient and the clear and heat skies#a3a3a3 grey for labels, course facts, table heads, hairlines and the quote credit#ffffff white in the sky gradient and skies, and the form field background#241a4a deep violet of the night that closes over the contact tile#1d1d1d dark card surfaces: course cards, question boxes, the quote card, photo backing, the current table row and table hairlines

Fonts

TikTok Sans: display face, weights 700 to 800 with a width axis from 75% to 150%: headlines, race names, the wordmark, kit items and questions, table years, the race names in the fee table and small uppercase numbers
Google Sans: text face, weights 400 to 700, for body copy, buttons, badges, form fields and table cells, fees included

Black ground with rounded sky tiles: panels filled with a slow gradient whose colours come from an hour value, from pale mint and lilac to orange and violet. Large uppercase display type in a stretched face sits on them. Lime buttons, badges and stickers carry thick dark borders and a hard offset shadow, as if stuck on. Every photo is greyscale. Sections alternate between full-width tiles, a sideways row, a three-card grid and a table beside a held tile.

The one motion idea is orange light. A soft orange glow slides across most of the greyscale photos as each one crosses the screen, tinting it for a moment. The contact tile closes the page by turning its sky from dusk to night, which echoes the first screen's last-light time.

Every value of this running race 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 running race website page

Navigation
Black top bar: round mark and wordmark, seven section links, an Enter the ballot button; below 1081 px a menu button opens a full-screen overlay
The top bar slides up out of view when you scroll down and returns on scroll up; this slide keeps running with reduced motion.
First light to last light
First screen on a sky tile: two-line headline, first-light and last-light times, a paragraph about the sixteen hours of daylight, a button and a link
On load the two headline lines slide in from opposite sides, the text row lifts into place and the sky gradient drifts in a slow loop.
58 km over the Kessel ridge
The course as a sideways row of five part tiles that climb with the altitude, an intro column with a GPX link
Pinned: the row of five tiles slides sideways and each tile sits higher the higher its altitude, so the row climbs to the ridge and drops back, with orange light crossing each photo.
Three races, one day
Three race cards on sky tiles coloured by start hour: Long, Half, Vertical
The three race cards start stacked and slightly turned under the first and spread into their row as you scroll in.
212 people on the mountain
Volunteers: heading with a link, four portraits with name tags and a quote
The heading rises out of its clip, orange light crosses each portrait and the name tags land like stickers.
What you carry
Mandatory kit: a held photo of a runner with a weight badge beside a ten-item checklist
The held photo pulls back from a tight close-up while the ten boxes tick one by one as their items pass the middle of the screen.
The finish closes at last light. The long table opens.
The finish village: heading, paragraph, one night photo cut into six tiles, a paragraph and three tags
Six small rounded tiles with gaps grow into one seamless night photo while an orange light moves across it.
Ten longest days
A held sky tile beside a table of ten past editions that shows each edition's weather as you read
The tile held beside the table changes its sky, weather word and year to match the row nearest the middle of the screen.
Getting a place
Entry board: ballot dates with a reminder button, a fees table for three races, three tags and a note about the finisher stone
The heading rises out of its clip and the three tags land like stickers.
One day
Two huge words that widen, two photos and a card about the trail-work day with three steps
The two words "One day" widen from the narrowest to the widest setting of the display font as you scroll, and orange light crosses both photos.
Before you apply
Eight questions as native details elements beside a heading and a link to the office
The heading lifts in and the Ask the office badge lands like a sticker; the questions open as native details elements.
The race office
The race office on a sky tile that turns from dusk to night: address, email, phone, hours and a form
The tile's sky goes from dusk to night as you reach the end, and the orange glow sinks behind the cards.
The race
Footer: giant wordmark, a line about the race, three link columns and a legal line
The See you at first light sticker lands when the footer arrives.

Before you publish the running race website site

Replace social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Enter the ballot buttons in the top bar, the menu overlay and the first screen lead to #entry (the Getting a place section) now; point them to your registration or ballot page.
See how the course spends them link on the first screen lead to #course now; point them to keep, or point at a course page.
Download the GPX of the Long link in the course section lead to solsta-2027-long.gpx (the file is not in the package; the link has the download attribute) now; point them to your own GPX file, or remove the link.
Volunteer in 2027 link in the crew section lead to #contact now; point them to your volunteer sign-up page.
Get the ballot reminder button in the entry section lead to #contact now; point them to your reminder or mailing-list sign-up.
Ask the office link in the questions section lead to #contact now; point them to keep, or your contact page.
Send to the office button of the race office form lead to the form posts to a mailto: address as plain text; it opens the visitor's mail program and does nothing in a browser without one now; point them to your form handler (Formspree, Netlify Forms or your own endpoint), or remove the form and keep the email and phone.
Instagram, YouTube and Strava club links in the footer lead to the home pages https://www.instagram.com/, https://www.youtube.com/ and https://www.strava.com/ now; point them to your own profile and club addresses.
Race rules and Privacy links in the footer lead to #contact now; point them to your rules and privacy pages.
The race office form posts to a mailto: address as plain text. It opens the visitor's mail program and does nothing on devices without one; replace it with a form service before launch.
The Download the GPX link points at a file that is not in the package, so it fails until you add the file.
The course is held while its row slides sideways, about one and a half to two screens of scroll on a laptop or a phone, and its tiles are lifted by up to 30% of the screen height, so on short windows the highest tiles can reach the top edge and be cut off.
The fonts are variable (TikTok Sans for display and Google Sans for text) loaded from Google; the widening words depend on the display font having a width axis, and a fallback font will not widen.

Questions about this running race website template

Is this a free running event website template I can use for a client event?

Yes. It is one index.html under the MIT license, so a freelancer or a race committee can use it at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, the fonts load from Google, and there is no build step. Photos are Unsplash images listed in CREDITS.md.

Where does the race office form send its messages?

Nowhere reliable yet. The form posts to a mailto address as plain text, so it only opens the visitor's mail program and does nothing on a device without one. Connect Formspree or Netlify Forms, or delete the form and keep the email and phone.

How do I give the template to Claude Code, Cursor or Codex?

Download index.html and AGENTS.md into your project folder, then paste the prompt from the template page with your race facts in the angle brackets. The agent reads AGENTS.md first. Edit the downloaded files, not a page fetched by URL, which arrives as a summary.

What must stay in the file when I change the race?

Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes. Each course tile needs its altitude in metres in the value of its data element, each editions row needs a data-sky word, and every --len must match its heading. Keep the Design: 8B footer link unless the site owner asks to remove it.

What happens on a phone, with reduced motion or with scripts off?

On a phone the race cards stack in one column and the menu button opens a full-screen overlay. With reduced motion on, the scroll scenes and smooth scrolling stop and the course becomes a plain grid, while button hovers and the bar's slide still run. Without JavaScript the menu cannot open; the questions still open.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. You describe the race in a sentence and its engine designs a new site, not this template. Designing and restyling are free; publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It runs inside Claude and ChatGPT too.

Not a running race website? More free templates