Case study · Fitness studio website concept
PULSE
A landing page for a small-group strength training studio. One of seven demo sites that explore different visual directions; this one has a hard, sporty character: a black background, large Archivo Black type and a “volt” accent colour.
Concept: the studio, coaches, address and numbers on the page are fictional. This is a portfolio demo, not a real client’s site.
- Type
- Concept, one-page landing
- Date
- August 20, 2026, in one commit together with six other demos
- Stack
- HTML and CSS in one file, no JavaScript · 193 lines, 10.5 KB
First screen, 1440px wide.
Phone, 393px.
Classes on a phone: two columns instead of four.
01
Who it’s for and why
The concept shows what a website could look like for a small studio that sells coached training sessions rather than memberships. The page explains the format up front (no more than 12 people per group), presents the class types and coaches, and leads to a free trial class.
PULSE is part of web-studio-portfolio, a set of seven demos — a café, a dental clinic, a law firm, a photographer, a spa, real estate and this studio. Each one is a separate HTML file with its own visual direction.
02
What was built
- Headerthe “PULSE.” logo, section links and a “Free Trial Class” button; sticks to the top on scroll
- First screen“Train like it matters.” with “matters.” set in outline; two buttons
- Tickerthe studio’s disciplines on a volt-coloured strip
- Classesfour cards — Strength, Conditioning, Mobility, Open Gym — with duration and format
- Numbersgroup size, coaches, classes per week, rating (the values are fictional)
- Coachesthree cards with gradients instead of photos
- Call to action“Your first class is on us.”
- Footeropening hours and contacts
03
Decisions worth a look
-
A ticker without JavaScript
The strip holds two identical text blocks in a row, and the whole track shifts by −50% of its width over 22 seconds at a constant speed, then starts over. At the moment it restarts, an identical second block sits exactly where the first one was, so there’s no visible seam. Only transform is animated — the browser doesn’t have to recalculate layout on every frame.
-
Grid lines are gaps, not borders
The classes grid has a grey #262626 background and a 1px gap between cells, while the cards themselves are black. The background shows through the gaps — giving clean, thin dividers without card borders and without doubled lines where cards meet. On hover a card lightens to #1A1A1A.
-
An outlined word and a tight headline
“matters.” is transparent text with a -webkit-text-stroke: 2px outline. The headline scales from 52 to 124px via clamp(52px, 9vw, 124px) with a line height of 0.86 — the lines almost touch, and the headline reads as one heavy block.
-
A header over the content
The header sticks to the top with position: sticky and stays translucent: an rgba(10, 10, 10, .92) background and backdrop-filter: blur(6px). Content scrolling underneath is hinted at but doesn’t get in the way of the menu.
-
Responsive with a single breakpoint
Below 900px, the classes go into two columns instead of four, the numbers into two, the coaches into one, and the section menu is hidden. Everything else adapts without media queries: heading sizes use clamp(), and button rows and section headers wrap with flex-wrap.
What the concept doesn’t have
- The trial class booking buttons don’t lead anywhere — a real studio would need a form or booking through its own service.
- On phones the section menu is hidden, with no replacement.
- The ticker doesn’t stop when the system “reduce motion” setting is on.
- Coach photos and the numbers would have to come from a real studio.
04
How to check
- Open the page and narrow the window to phone width fitness.html ↗
- All the code is one file of 193 lines GitHub ↗
- The other six demos in the same series web-studio-portfolio ↗
Get in touch