Примеры работ и кейсы по направлению «Верстка»

интернет-магазин Специй

Чистый HTML / CSS / JS срез ключевых блоков промышленного лендинга для экспорта нержавеющих труб. Сделано как демо для портфолио: без WordPress и без реальной отправки форм.

• CODE FRONTIER 2026 — IT-конференция: таймер обратного отсчёта, спикеры, программа с переключением дней, тарифы, FAQ-аккордеон. Что внутри: — Адаптивная вёрстка (mobile-first), плавно от 320px до 4K; — Анимации на чистом CSS + JS: countdown, табы, аккордеон, reveal через IntersectionObserver; — Кастомная SVG-графика и иконки, ноль внешних библиотек; — Кроссбраузерность, семантика, доступность (aria), быстрый рендер.

• NEON WAVE Fest — музыкальный фестиваль: неоновый дизайн, анимированный эквалайзер, лайнап, расписание сцен, билеты. Что внутри: — Адаптивная вёрстка (mobile-first), плавно от 320px до 4K; — Анимации на чистом CSS + JS: countdown, табы, аккордеон, reveal через IntersectionObserver; — Кастомная SVG-графика и иконки, ноль внешних библиотек; — Кроссбраузерность, семантика, доступность (aria), быстрый рендер.

Каркас админ-панели: sidebar с offcanvas на мобильных, карточки метрик, таблица с действиями, адаптив.

Адаптивный лендинг: шапка с мобильным меню, бегущая строка иконок, лента новостей с active-состоянием, sticky-футер. Pug + SCSS (БЭМ, миксины брейкпоинтов), сборка на Gulp 4, SVG-спрайт, переключение EN/RU, автодеплой через GitHub Actions.

Вёрстка платёжных страниц: выбор способа оплаты (крипта, карта, Perfect Money, MoneyGo, Skrill), выбор монеты и сети (USDT BEP-20 / ERC-20 / TRC-20), экран с адресом депозита и QR. Пошаговый сценарий на vanilla JS, адаптив.