# Free running race website template > Free HTML running race website template for trail races, ultras and mountain events, with a fee table. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. 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. - Page: https://8b.com/templates/solsta/ - Live demo: https://8b.com/templates/solsta/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/solsta/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/running-race-website-template - Download ZIP: https://8b.com/templates/solsta/running-race-website-template.zip - Template name in the repository: SOLSTA - At a glance: 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. ## 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/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 ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make it the site for . 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. ``` 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/running-race-website-template my-site`. ## About 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](https://8b.com/templates/kurvo/) 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. ## Design - 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. ## Sections and motion - **Navigation** (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. Motion: 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** (opening): 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. Motion: 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** (course): the course as a sideways row of five part tiles that climb with the altitude, an intro column with a GPX link. Motion: 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** (races): three race cards on sky tiles coloured by start hour: Long, Half, Vertical. Motion: 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** (crew): volunteers: heading with a link, four portraits with name tags and a quote. Motion: The heading rises out of its clip, orange light crosses each portrait and the name tags land like stickers. - **What you carry** (kit): mandatory kit: a held photo of a runner with a weight badge beside a ten-item checklist. Motion: 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.** (orvalle): the finish village: heading, paragraph, one night photo cut into six tiles, a paragraph and three tags. Motion: Six small rounded tiles with gaps grow into one seamless night photo while an orange light moves across it. - **Ten longest days** (editions): a held sky tile beside a table of ten past editions that shows each edition's weather as you read. Motion: 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): entry board: ballot dates with a reminder button, a fees table for three races, three tags and a note about the finisher stone. Motion: The heading rises out of its clip and the three tags land like stickers. - **One day** (trailday): two huge words that widen, two photos and a card about the trail-work day with three steps. Motion: 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** (faq): eight questions as native details elements beside a heading and a link to the office. Motion: The heading lifts in and the Ask the office badge lands like a sticker; the questions open as native details elements. - **The race office** (contact): the race office on a sky tile that turns from dusk to night: address, email, phone, hours and a form. Motion: 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): footer: giant wordmark, a line about the race, three link columns and a legal line. Motion: The See you at first light sticker lands when the footer arrives. ## Good for - trail running race or ultra marathon - mountain or outdoor sports festival - cycling, ski or triathlon event with several distances - yearly village or charity event with a ballot, a programme and volunteers ## Questions **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](https://8b.com/). 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. ## Before publishing Replace: social preview image, favicon, email address, phone number, contact form (sends nothing yet) and social media links, plus the invented demo facts (prices, dates, addresses). - 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. ## 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).