Задание: HTML-верстальщик. Реализовать адаптивную верстку по макету из Figma (Дистанционная работа)
Общие требования
1. Сверстать макет по ссылке из Figma https://www.figma.com/design/6l9EasiDS8JLQj776mH7Ea/Cresu-_-%D0%9A%D0%BB%D0%B8%D0%B5%D0%BD%D1%82%D1%81%D0%BA%D0%B8%D0%B9?node-id=194-2&t=wpFpHGFUcqUy7BGx-1
- Верстка должна быть адаптивной и корректно отображаться на всех типах устройств (desktop, tablet, mobile).
- Необходимо обеспечить кроссбраузерность: сайт должен корректно работать во всех актуальных браузерах (Google Chrome, Firefox, Edge и т.д.), а также в Safari на iOS c 15 и выше.
2. Технические детали
- Использовать семантические теги HTML5, грамотно разделять структуру контента и стили.
- Верстка должна быть responsive, т.е. изменять размеры и перестраивать блоки в зависимости от ширины экрана.
- SCSS. Для каждого смыслового (семантического) блока нужен отдельный SCSS-файл. Приветствуется использование переменных, миксинов и импортов (@import / @use) для удобства и дальнейшего расширения проекта.
- Использовать flexbox и/или grid для расположения элементов.
- Минимизировать использование лишних оберток и избежать float-верстки.
- Желательно придерживаться структуры и отступов, заданных в макете Figma.
- Соблюдать иерархию заголовков (h1, h2, h3...) и прочую семантику (header, main, footer и т.д.).
- Учесть все состояния элементов (hover, focus, active) и интерактивные элементы (кнопки, ссылки и т.д.), если они показаны или указаны в макете.
- Желательно использовать методологию BEM или другую соглашённую систему именования классов, чтобы избежать конфликтов в стилях.
3. Шрифты и цвета
- Использовать шрифты и цветовую палитру согласно макету.
- Если в макете не указаны названия шрифтов, использовать экспортируемые из Figma или согласовать заранее.
4. Изображения и иконки
- Экспортировать все необходимые изображения из Figma в соответствующих форматах (SVG для иконок, PNG/JPG/WebP для фото и графики).
- Оптимизировать изображения перед загрузкой (с помощью сервисов сжатия).
5. Проверка качества
- Убедиться в корректной загрузке и отображении стилей, шрифтов и изображений во всех актуальных браузерах + в Safari на iOS 15.
- Проверить, что при изменении масштаба и разрешения экрана нет «сломанных» блоков, горизонтальной прокрутки или других визуальных и функциональных ошибок.
6. Результат работы
- Исходные файлы проекта: HTML, SCSS (с разделением на отдельные файлы для блоков), JS (при необходимости).
- Структура проекта должна быть четкой и понятной.
- Если используется сборщик (Gulp/Webpack/etc.), предоставить README с инструкциями по установке и сборке.
- Финальная версия должна быть готова к деплою: все пути и ссылки проверены, нет лишних тестовых или временных файлов.
Итог: Ожидаю получить готовую верстку, максимально соответствующую макету из Figma, с разделенной структурой SCSS для каждого смыслового блока, с адаптивным и кроссбраузерным отображением, а также удобную для дальнейшего развития и поддержки.
По любым вопросам и уточнениям обращаться в личные сообщения.
