Верстка главной страницы по макету Figma
Необходимо сверстать главную страницу сайта в точном соответствии с предоставленным макетом в Figma. Требуется аккуратная, адаптивная верстка.
Техническое задание: Верстка многостраничного попапа для доната
Цель проекта
Создать адаптивную и интерактивную фронтенд-реализацию всплывающего окна (попапа) для сбора пожертвований на существующем сайте. Работа выполняется на чистом HTML/CSS/JS, интеграция с Laravel или другим бэкендом не требуется.
Основные функциональные блоки
1. Главный попап с формой доната
- Многошаговый интерфейс с несколькими состояниями.
- Поля для ввода суммы пожертвования.
- Блок выбора способа оплаты (банковская карта, электронный кошелек, другие методы).
- Кнопки навигации (Далее, Назад, Отмена).
2. Попап "Успешная операция"
- Отдельное модальное окно, которое появляется после успешного завершения процесса.
- Сообщение об успешном переводе.
- Кнопка для закрытия окна.
3. Попап "Ошибка операции"
- Отдельное модальное окно для отображения ошибок.
- Сообщение о неудачном завершении платежа.
- Кнопки для повтора действия или закрытия.
Технические требования
- Чистая, семантическая верстка на HTML5 и CSS3.
- Адаптивность под основные разрешения экранов.
- Интерактивность реализуется на ванильном JavaScript (без jQuery, если возможно).
- Плавные анимации открытия/закрытия окон и переходов между шагами.
- Код должен быть хорошо структурирован и закомментирован.
- Все попапы должны быть независимыми компонентами.
Что предоставить по итогу
- Архив с HTML-файлом (или файлами), CSS и JS.
- Рабочий прототип, где можно кликнуть по кнопке "Сделать донат" и пройти по всем состояниям попапов.
- Визуальное соответствие предоставленному дизайну (макетам).