Техническое задание: Адаптивная верстка на чистом CSS

Основная задача

Требуется преобразовать готовый дизайн-макет (предоставлен в Figma) в семантические, валидные HTML-страницы с идеально адаптивной версткой.

Ключевые требования

• Технологический стек: Использование исключительно чистого (native/vanilla) CSS. Запрещены любые CSS-фреймворки (Bootstrap, Tailwind, Foundation и т.п.) и сторонние библиотеки для сеток или компонентов.
• Адаптивность (Responsive Web Design): Корректное и pixel-perfect отображение на всех основных разрешениях:
  • Десктопные мониторы
  • Планшетные устройства (портретная и альбомная ориентация)
  • Мобильные телефоны (смартфоны)
• Качество верстки: Кроссбраузерная совместимость (последние версии Chrome, Firefox, Safari, Edge), валидный HTML5 и CSS3 код, семантическая разметка, оптимизация производительности.
• Организация кода: Читаемая и структурированная файловая организация. Приветствуется использование современных возможностей CSS (CSS Grid, Flexbox, Custom Properties).

Что нужно сделать

1. Проанализировать предоставленные макеты в Figma (все экраны и состояния).
2. Сверстать все необходимые HTML-страницы, полностью соответствующие дизайну.
3. Реализовать плавную адаптацию под указанный диапазон устройств.
4. Оптимизировать графику и обеспечить высокую скорость загрузки.
5. Предоставить итоговые файлы в удобном для интеграции виде.

Результат работы

Полностью рабочий, адаптивный и кроссбраузерный набор HTML и CSS файлов, готовый к передаче backend-разработчику или размещению на хостинге. Все контактные данные и упоминания, не относящиеся к функционалу, должны быть вынесены в конфигурационные файлы или заменены на условные.