WorkspaceRiverside — athletics club fixtures
Find your next idea/Create
TEMPLATE

Riverside — athletics club fixtures

A confident navy-and-lime sports club design with a large monogram, match cards and switchable team fixtures.

S studioUpdated Oct 5, 2026Revision 1
Remix this Present Download
LIVE PREVIEW Isolated & interactive
<!-- Original layout, SVG/CSS artwork and JavaScript © 2026 XXC Templates. MIT License.
Visual pattern references (original code, names and content; no affiliation):
HTML5 UP: https://html5up.net/
Responsive template catalog: contrasting editorial, split-screen, gallery and article-led compositions.
GOV.UK: https://www.gov.uk/
Task-led public information, clear headings, strong rules and direct service navigation.
Illustrative sample content and data; no real accounts, payments, reservations or messages. -->
<main>
  <header>
    <b
      >RA<span>RIVERSIDE<br />ATHLETICS</span></b
    >
    <nav><a href="#fixtures">Fixtures</a><a href="#club">Our club</a></nav>
    <span>PLAY FOR EACH OTHER.</span>
  </header>
  <section id="club">
    <div>
      <small>YOUR TOWN. YOUR TEAM.</small>
      <h1>MORE THAN<br /><em>THE SCORE.</em></h1>
      <p>A local club built on showing up.</p>
    </div>
    <span class="club-mark">R/</span>
  </section>
  <section id="fixtures">
    <div class="fixture-head">
      <h2>NEXT UP</h2>
      <nav>
        <button data-team="first" aria-pressed="true">First team</button
        ><button id="change" data-team="youth">Youth team</button>
      </nav>
    </div>
    <div class="match">
      <div><span>HOME</span><strong>RA</strong><b>RIVERSIDE</b></div>
      <div class="versus">
        <small id="date">SAT 10 OCT / 15:00</small><strong>VS</strong
        ><span id="ground">RIVERSIDE GROUND</span>
      </div>
      <div>
        <span>AWAY</span><strong id="opponent-mark">NH</strong><b id="opponent">NORTH HILL</b>
      </div>
    </div>
    <p class="fixture-note">FICTIONAL TEAMS AND FIXTURES / A CLUB WEBSITE DESIGN DEMO</p>
  </section>
  <output data-status aria-live="polite"></output>
  <footer class="demo-note">Fictional brand · local interface demo · no information is sent</footer>
</main>
Revision history · 1 versions
v12026-10-05 18:26:30 UTC

Keep the ideas flowing.

Explore the library
HELP KEEP THE WORKSHOP USEFUL

Report this creation
ONE QUICK CHECK

Continue?