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

Цель проекта

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

Основные требования

  • Верстка должна быть выполнена исключительно на чистом HTML5 и CSS3, без использования CSS-фреймворков (Bootstrap, Tailwind и т.д.).
  • Обязательна полная адаптивность (responsive design) с применением медиа-запросов (media queries).
  • Код должен быть семантически правильным, с использованием соответствующих тегов (header, main, section, article, footer и др.).
  • Верстка должна соответствовать предоставленному макету из Figma по пиксельной точности (pixel perfect) в рамках технической возможности.
  • Все интерактивные элементы (кнопки, ссылки, формы) должны иметь состояния (:hover, :focus, :active).
  • Код должен быть чистым, хорошо структурированным и с комментариями для основных блоков.
  • Исходные файлы (шрифты, изображения, иконки) будут предоставлены.

Детализация работ

1. Подготовка и структура

  • Анализ макета в Figma, извлечение ресурсов.
  • Создание файловой структуры проекта.
  • Настройка базовых CSS-стилей (сброс отступов, подключение шрифтов, переменные для цветов и отступов).

2. Верстка основных блоков

  • Создание шапки (header) сайта с меню.
  • Верстка основных секций (hero, услуги, о компании, портфолио, контакты и т.д.).
  • Реализация подвала (footer).

3. Адаптивная реализация

  • Адаптация сетки макета под мобильные разрешения.
  • Преобразование навигационного меню в "бургер-меню" для мобильных устройств.
  • Корректировка размеров шрифтов, отступов и изображений для разных экранов.

4. Финальная проверка и сдача

  • Тестирование верстки в последних версиях основных браузеров (Chrome, Firefox, Safari).
  • Проверка на валидаторе HTML/CSS.
  • Проверка адаптивности с помощью инструментов разработчика.
  • Подготовка архива с исходными файлами для передачи.

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

Исполнитель предоставляет архив, содержащий:

  • HTML-файл с разметкой.
  • CSS-файл (или файлы) со стилями.
  • Папку с оптимизированными изображениями, шрифтами и иконками.
  • Код должен быть готов для последующей передачи разработчику для интеграции в выбранную систему управления контентом (CMS).