Парад цвета — лендинг фестиваля
Одностраничный сайт для концепта фестиваля «Парад цвета» — музыка, общение и цветной порошок в духе Холи. Это веб-часть учебного проекта по айдентике: знак, флаги, палитра и носители, нарисованные в Figma, собраны в одну страницу.
- Автор: Эмиль Шанаев, группа БРИЦП262, 1 модуль, 2026
- Макет: Figma
- Код: Gitea, ветка
gh-pages
Это концепт: фестиваль не проводится, билеты не продаются, события и контакты вымышлены.
Как открыть
Сборки нет: статический HTML и CSS без зависимостей. Достаточно открыть
index.html в браузере или поднять локальный сервер, чтобы проверить
относительные пути к шрифтам и картинкам:
cd color-parade
python3 -m http.server 8000
# → http://localhost:8000
Структура
color-parade/
├── index.html разметка страницы
├── styles.css токены, сетки, компоненты и адаптив
└── assets/
├── fonts/ Inter и Inter Display (локально, .ttf)
└── images/ фото-мокапы и флаг с росчерком
Что на странице
- Шапка — знак из четырёх кругов, навигация и кнопка «Билеты».
- Обложка — «ПАРАД ЦВЕТА», подзаголовок и кнопка; справа флаг с росчерком, повёрнутый на −7°.
- Бегущая строка — жёлтая полоса «ЦВЕТ • МУЗЫКА • ЛЮДИ».
- Что вас ждёт — три цветные плитки: зал красок, музыка, кадры на память.
- О фестивале — тёмный блок с двумя наложенными фотографиями.
- События — три карточки: зал красок, живая сцена, творческие зоны.
- Мерч — фото коллекции и список из трёх позиций.
- Подвал — о проекте, автор и ссылки на Figma и Gitea.
Технологии
- HTML5 и CSS3. JavaScript не используется.
- Inter и Inter Display лежат в
assets/fonts— внешних запросов за шрифтами нет. - Цвета бренда вынесены в CSS-переменные в
:root. - Адаптив на брейкпоинтах 1050, 800 и 520 px.
- Доступность: skip-link, семантика
header/main/footer,aria-labelledbyу секций, заметныйfocus-visible, alt у изображений и поддержкаprefers-reduced-motion.
Палитра
| Токен | Цвет | Где используется |
|---|---|---|
--ink |
#181818 |
текст и тёмные блоки |
--paper |
#FFFDF5 |
фон страницы |
--cy |
#00AEEF |
циан, плитка «Зал красок» |
--mg |
#EC008C |
маджента, плитка «Музыка» |
--yl |
#FFF200 |
жёлтый, бегущая строка |
--muted |
#68645F |
вторичный текст |
--hair |
#DEDBD3 |
линии и разделители |
Использование ИИ
Проект сделан не полностью вручную: ИИ использовался как подсобный инструмент, а не как автор.
| Что | ИИ | Комментарий |
|---|---|---|
| Вёрстка, HTML/CSS | да, частично | каркас разметки, сетки, адаптив, мелкие правки |
| Тексты | да, черновики | ИИ помог набросать формулировки, финал — вручную |
| Знак, флаги, палитра, плакаты | нет | Figma |
| Фотографии в макете | да, частично | фото-мокапы для концепта, реального события не было |
Вёрстка. HTML и CSS частично собраны с помощью ИИ-ассистента: каркас
разметки, сетки, адаптив, отдельные правки вроде focus-visible. Дальше код
доводился вручную — типографика, отступы, поведение на разных ширинах,
доступность и детали, которые видно только в браузере.
Текст. ИИ помог набросать черновики формулировок — заголовки, подписи секций, описания событий и мерча. Финальные формулировки, факты и структура страницы — авторские.
Изображения. Фото в макете — постановочные мокапы для концепта: реального фестиваля не было, часть кадров сгенерирована нейросетью.
Что сделано без ИИ. Знак, флаги, палитра, плакаты и носители — в Figma. Сборка страницы, финальная доводка вёрстки и правка текстов — вручную.
Использование
Учебный проект. Код и макет можно смотреть и разбирать, коммерческое использование — по договорённости с автором.