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

Цель проекта

Преобразование предоставленного дизайн-макета из 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).