Design_HSE_Study/color-parade

Парад цвета

Одностраничный лендинг концепта фестиваля «Парад цвета» — музыка, общение и цветной порошок в духе Холи. Учебный проект по айдентике: знак, флаги и графика из Figma собраны в веб-страницу.

Ссылка на сайт

https://git.shanaty.ru/pub/design_hse_study/color-parade/

Страница статическая: сборки нет, всё лежит в index.html, styles.css и assets/. Чтобы открыть локально, достаточно запустить в папке проекта python3 -m http.server 8000 и зайти на http://localhost:8000.

Скриншот

Автор

Эмиль Шанаев, группа БРИЦП262, 1 модуль, 2026.

Что я научился(ась) делать

• Раскладывать страницу по макету из Figma сеткой, а не абсолютным позиционированием: плитки, карточки событий и блок мерча — это grid.
• Делать заголовки резиновыми через clamp() — они не ломают вёрстку на телефоне и не выглядят мелкими на широком экране.
• Обрезать фотографии через object-fit и object-position: кадр подстраивается под блок, но лицо и главное в кадре не обрезается.
• Долго не получалось с фото-стопкой в блоке «О фестивале»: два повёрнутых снимка налезали друг на друга и вылезали за сетку. Помогло position: absolute внутри блока с min-height и отдельные transform: rotate() для каждого фото.
• Проверять страницу на 375, 768 и 1440 px и не забывать про prefers-reduced-motion и заметный фокус у ссылок.

Использование ИИ

Инструменты

Инструмент	Для чего использовал(а)	Уровень помощи
GPT Astra	Каркас страницы, сетки и адаптив по макету	3
DeepSeek 4.1 Flash	Объяснял свойства CSS, помогал с ошибками и с черновиками текстов	2
GPT Image Sunburst	Сгенерировал фото-мокапы для концепта	3

Уровни: 2 — ИИ подсказал фрагмент или нашёл ошибку, 3 — ИИ написал заметный кусок кода или картинку, которые я вставил и разобрал.

Код, который написал ИИ, помечен комментариями в index.html и styles.css («ИИ: … Запись №… в README»).

Записи о запросах

Запись №1 · 21.10.2026

• Что я хотел(а) сделать: сверстать страницу по макету из Figma — шапку, обложку с флагом, бегущую строку, три цветные плитки, тёмный блок о фестивале, карточки событий и мерч.
• Что я спросил(а): попросил собрать каркас лендинга по макету и сразу сделать адаптив под телефон.
• Что ответил ИИ: выдал HTML-разметку по секциям и CSS с переменными цветов, сетками и тремя медиазапросами.
• Что я изменил(а) сам(а): поправил размеры и отступы заголовков, переделал фото-стопку в блоке «О фестивале» и обрезку картинок, убрал лишние обёртки, подогнал брейкпоинты под свои 1050, 800 и 520 px.
• Как я понял(а), что это работает: открыл страницу в браузере и сузил окно до 375 px — по горизонтали ничего не вылезает, меню переносится, плитки встают в колонку.

Запись №2 · 21.10.2026

• Что я хотел(а) сделать: получить фотографии для концепта, потому что реального фестиваля не было.
• Что я спросил(а): попросил сгенерировать кадры фестиваля красок, стену с плакатами и мерч в этой айдентике.
• Что ответил ИИ: сделал изображения 3072×2048, которые пришлось обрезать под пропорции блоков.
• Что я изменил(а) сам(а): выбрал кадры, обрезал их до 3:2, сжал в JPEG и выставил object-position, чтобы в карточках не резались лица.
• Как я понял(а), что это работает: вставил картинки в макет и проверил, как они смотрятся под текстом на широком и узком экране.

Запись №3 · 27.10.2026

• Что я хотел(а) сделать: довести страницу до сдачи — проверить доступность и мелочи, которые не видно на скриншоте.
• Что я спросил(а): что ещё стоит добавить в статичную страницу для доступности и удобства.
• Что ответил ИИ: предложил skip-link, aria-labelledby у секций, focus-visible и prefers-reduced-motion.
• Что я изменил(а) сам(а): добавил skip-link и подписи секций, поправил alt у декоративных картинок (у них теперь пустой alt и aria-hidden), проверил, что фокус видно на тёмном фоне.
• Как я понял(а), что это работает: прошёл по странице клавишей Tab, включил в DevTools эмуляцию prefers-reduced-motion и посмотрел, что прокрутка и кнопки перестают анимироваться.

Выводы

Больше всего ИИ помог на старте: с готовым каркасом проще править, чем начинать с пустого файла. Ошибался он в мелочах — например, предлагал фиксированные размеры заголовков вместо clamp() и не думал про узкие экраны, пока я сам не сузил окно. Макет он не видел, поэтому цвета и отступы всё равно приходилось сверять с Figma. Теперь я понимаю, как в этой вёрстке работают сетки, object-fit и медиазапросы, и смогу собрать такую страницу без подсказок.