Техническое задание: Адаптивная верстка сайта с анимациями
Цель проекта
Перенести готовый дизайн с конструктора на чистый стек технологий, сохранив оригинальный внешний вид и функциональность, включая все интерактивные элементы.
Основные требования
- Технологии: Чистый HTML5, CSS3 (включая modern features), Vanilla JavaScript (без фреймворков).
- Точность: Полное соответствие предоставленному дизайну, пиксель в пиксель.
- Адаптивность:Корректное отображение на мобильных устройствах, планшетах и десктопах.Реализация breakpoints согласно макету.
- Интерактивность:Сохранение и корректная работа всех анимаций, присутствующих в оригинале.Обработка событий, интерактивных кнопок, форм.
- Кроссбраузерность:Корректная работа в актуальных версиях Chrome, Firefox, Safari, Edge.
- Качество кода:Семантическая разметка.Чистый, структурированный и комментированный код.Оптимизация графики и скриптов для быстрой загрузки.
Этапы работы
- Анализ текущего сайта на конструкторе, изучение анимаций и поведения элементов.
- Подготовка семантической HTML-разметки.
- Стилизация (CSS) с созданием адаптивной сетки и точным переносом дизайна.
- Написание скриптов (JS) для реализации интерактивности и анимаций.
- Тестирование на различных устройствах и в браузерах.
- Сдача работы с комментариями по коду.
Что предоставляется
- Доступ к существующему сайту на конструкторе для анализа.
- Все необходимые графические материалы (изображения, иконки, шрифты).
- Уточнения по спорным моментам.
Требования к исполнителю
- Опыт верстки сложных адаптивных интерфейсов.
- Глубокие знания CSS (Flexbox/Grid, анимации, transitions).
- Навыки работы с чистым JavaScript для реализации интерактивности.
- Понимание принципов кроссбраузерной и адаптивной верстки.
- Умение точно переносить дизайн.
Срок выполнения: 3-4 дня.