Техническое задание: Верстка всплывающей формы
Основная задача
Создать адаптивную, кроссбраузерную верстку всплывающей формы на основе предоставленного макета Figma. Форма должна корректно отображаться на всех устройствах и не конфликтовать с существующей структурой сайта.
Ключевые требования к верстке
- Использование методологии БЭМ для именования классов
- Валидный HTML/CSS код без ошибок W3C
- Высокие показатели Google PageSpeed Insights: от 90 для десктопа и от 80 для мобильных устройств
- Все иконки, где это возможно, должны быть в формате SVG и вставлены через тег
![]()
- Растровые изображения использовать в формате PNG с сохранением качества из макета
- Верстка должна быть независимой и не влиять на существующие стили сайта
Функциональные требования
Реализация всплывающего окна
- Использование библиотеки Fancybox для отображения формы
- Настройка времени задержки перед появлением формы
- Корректная работа всех интерактивных элементов формы
Организация кода
- JavaScript и CSS файлы должны быть предоставлены в не минимизированном виде для возможности дальнейших доработок
- Четкое разделение структуры и логики
Результат работы
Исполнитель должен предоставить два варианта реализации:
- Статичная форма - страница с формой, которая будет размещена в отдельном разделе сайта
- Всплывающая форма - страница, на которой форма появляется автоматически через заданный промежуток времени
Критерии приемки
- Полное соответствие макету Figma
- Адаптивность на всех разрешениях экрана
- Корректная работа во всех современных браузерах
- Высокая производительность и скорость загрузки
- Чистый, хорошо структурированный код