Html верстка интернет магазина
Задание на HTML-верстку
Общее
Тип работ: статическая HTML5-верстка по двум макетам: Desktop.pdf и Mobile.pdf (адаптив от 360px до 1920px+).
Код: чистый HTML5 + CSS3 (без фреймворков). JS — только нативный и только для интерактивов (мобильное меню, табы/фильтры, счётчик и т.п.).
Стиль кода: БЭМ-нейминг, семантическая разметка, валидный W3C, аккуратные отступы.
Кросс-браузерность: последние 2 версии Chrome, Firefox, Edge; Safari 15+ (macOS/iOS).
Производительность: изображения в WebP/AVIF + fallback, SVG-иконки, спрайты, lazy-loading.
Аксессибилити: корректные label/aria для форм, фокус-состояния, контраст.
SEO-база: корректные <title>, meta, OpenGraph на главной/карточке товара.
Исходники: структурированный проект, README с инструкцией запуска, архив + репозиторий.
Экраны / страницы (минимальный состав)
Ориентируемся на тексты и блоки из макетов:
Главная: хиро-блок «macarons & tattiler», CTA «Перейти в каталог», шапка/подвал с графиком работы и языками RU/KZ/EN.
Каталог: сетка карточек с бейджами «Популярное/Новинка/Хит/Нет в наличии», фильтры/категории (Macarons, Финики, Печенье, Боксы и пр.).
Карточка товара (пример «Крамбл Кукис Шоколадный», цена, описание, состав, «Добавить в корзину», примечание про опт).
Бокс-конструктор (набор до 12 шт., счётчики, «Выбрать/Изменить наполнение», сумма).
Корзина (листинг позиций, «Рекомендуем», «Продолжить покупки/Оформить заказ», «Промокод»).
Оформление заказа (доставка/самовывоз, оплата, получатель, комментарий, чекбокс «Заказ подтверждаю»).
Авторизация: вход по телефону, ввод 6-значного кода, состояния таймера/ошибки («Осталось 2 попытки»). Поведение таймера — статичное (имитируем).
Кабинет пользователя: профиль (имя/телефон/адрес), история заказов, купоны (активировать/активен).
Экран успеха «Ваш заказ принят / № заказа».
Если каких-то текстов/фото нет — использовать заглушки и семплы, но разметку и состояния повторить.
Интерактивы (минимум на ванильном JS)
Мобильное меню/бургер; табы/фильтры каталога; инкремент/декремент количества в корзине/боксе; переключение способов доставки/оплаты; показ/скрытие купонов; модалки «Вы уверены, что хотите выйти?», «Подтвердите номер». Таймер кода — имитация (обратный отсчёт без реальной логики SMS).
Адаптив
Mobile-first. Ключевые брякпоинты: 360/480/768/1024/1440+ (допустима своя сетка при неизменном визуале). Элементы/отступы/кегли — как в макетах мобильной и десктопной версий.
Графика/шрифты
Экспорт SVG для логотипов/иконок; изображения товаров — WebP + 2x версии. Подключение шрифтов через @font-face (woff2 приоритет). Фавиконки + webmanifest.
Ограничения
Никаких UI-библиотек (Bootstrap, Tailwind и т.п.), никаких сборщиков (если не оговорено). Допустимо подключить PostCSS/Autoprefixer через простую NPM-скрипт-сборку (без сложного конфига) — по согласованию.
Критерии приёмки
Пиксель-перфоманс (±2px) на ключевых брякпоинтах.
Валидатор W3C без критичных ошибок. Lighthouse: Performance/Best Practices/SEO ≥ 90 на десктопе (на заглушках).
Формы кликабельны, состояния работают (фокус/ошибки/disabled).
Согласованная сетка и типографика между версиями.
Сроки и этапы
Старт: сразу после подтверждения.
Промежуточный показ (4 экрана): до среды, 10 сентября 2025 —
Главная, 2) Каталог, 3) Карточка товара, 4) Оформление заказа (ключевые состояния).
Финал всей верстки: к вечеру четверга, 11 сентября 2025 (по местному времени исполнителя — уточнить в отклике).
Оплата
50/50: 50% предоплата, 50% — после приёмки финала (после устранения замечаний первой итерации).
Ссылка на десктоп и мобильная версия pdf исполнителю предоставлю figma.
Что прислать в отклике (фрилансеру)
Ссылки на 2–3 похожие по уровню работы (адаптив, каталог, формы, модалки).
Краткий план: чем будет собираться CSS (чистый CSS/SCSS), как организует БЭМ-структуру.
Сроки по этапам (под наши даты) + доступность в мессенджере днём.
Ставка за проект «под ключ».
Заявки фрилансеров
