DIGITAL ДЛЯ БИЗНЕСА · АРСЕНИЙ АСЯНОВ
EN RU

Разбор · Концепт сайта фитнес-студии

PULSE

Лендинг студии силовых тренировок в небольших группах. Один из семи демо-сайтов, которые показывают разные визуальные направления; здесь — жёсткий спортивный характер: чёрный фон, крупный Archivo Black и акцент цвета «volt».

Концепт: студия, тренеры, адрес и цифры на странице вымышлены. Это демо для портфолио, а не сайт реального клиента.

Тип
Концепт, одностраничный лендинг
Сроки
20 августа 2026, одним коммитом вместе с шестью другими демо
Стек
HTML и CSS в одном файле, без JavaScript · 193 строки, 10,5 КБ
Ссылки
живая страница ↗
код на GitHub ↗

Первый экран, ширина 1440px.

Телефон, 393px.

Занятия на телефоне: две колонки вместо четырёх.

01

Для кого и зачем

Задача концепта — показать, как мог бы выглядеть сайт небольшой студии, которая продаёт не абонементы, а тренировки под присмотром тренера. Страница сразу объясняет формат (в каждой группе не больше 12 человек), показывает виды занятий и тренеров и ведёт к бесплатному пробному занятию.

PULSE входит в портфолио web-studio-portfolio из семи демо — кафе, стоматология, юридическая фирма, фотограф, спа, недвижимость и эта студия. Каждое сделано отдельным HTML-файлом со своим визуальным направлением.

02

Что сделано

  1. Шапкалоготип «PULSE.», разделы и кнопка «Free Trial Class»; прилипает к верху при прокрутке
  2. Первый экран«Train like it matters.», слово «matters.» набрано контуром; две кнопки
  3. Бегущая строканаправления студии на полосе цвета «volt»
  4. Занятиячетыре карточки — Strength, Conditioning, Mobility, Open Gym — с длительностью и форматом
  5. Цифрыразмер группы, тренеры, занятия в неделю, рейтинг (значения вымышлены)
  6. Тренерытри карточки; вместо фотографий — градиенты
  7. Призыв«Your first class is on us.»
  8. Подвалчасы работы и контакты

03

Решения, на которые стоит посмотреть

  • Бегущая строка без JavaScript

    В полосе два одинаковых блока текста подряд, а вся дорожка сдвигается на −50% своей ширины за 22 секунды с постоянной скоростью и начинает заново. В момент перезапуска на месте первого блока стоит точно такой же второй, поэтому шва не видно. Двигается только transform — браузеру не нужно пересчитывать раскладку на каждом кадре.

  • Линии сетки — это зазор, а не рамки

    У сетки занятий серый фон #262626 и зазор между ячейками в 1px, а сами карточки чёрные. Сквозь зазоры проступает фон — получаются ровные тонкие разделители без border у карточек и без удвоенных линий на стыках. При наведении карточка светлеет до #1A1A1A.

  • Контурное слово и плотная строка в заголовке

    «matters.» — прозрачный текст с обводкой -webkit-text-stroke: 2px. Размер заголовка тянется от 52 до 124px через clamp(52px, 9vw, 124px), межстрочный интервал 0.86 — строки почти касаются, и заголовок читается одним тяжёлым блоком.

  • Шапка поверх контента

    Шапка прилипает к верху через position: sticky и остаётся полупрозрачной: фон rgba(10, 10, 10, .92) и размытие backdrop-filter: blur(6px). Контент под ней при прокрутке угадывается, но не мешает читать меню.

  • Адаптивность с одной точкой перелома

    До ширины 900px занятия встают в две колонки вместо четырёх, цифры — в две, тренеры — в одну, а меню разделов скрывается. Остальное подстраивается без медиазапросов: размеры заголовков заданы через clamp(), ряды кнопок и шапки разделов переносятся через flex-wrap.

Чего в концепте нет

  • Кнопки записи на пробное занятие никуда не ведут — для настоящей студии нужна форма или запись через её сервис.
  • На телефоне меню разделов скрыто, замены ему нет.
  • Бегущая строка не останавливается при системной настройке «уменьшить движение».
  • Фото тренеров и цифры нужно получить у реальной студии.

04

Как проверить

  • Открыть страницу и сузить окно до ширины телефона fitness.html ↗
  • Весь код — один файл на 193 строки GitHub ↗
  • Остальные шесть демо той же серии web-studio-portfolio ↗

Связь со мной

Есть задача?
Пиши.