Техническое задание: Верстка страницы "Контакты"

На основе предоставленного макета в Figma необходимо создать чистую, семантическую и адаптивную HTML-страницу.

Основные блоки страницы

  • Блок с контактной информацией: Адрес организации, представленный в виде структурированного текста.
  • Интерактивная карта: Встроенная карта для визуального отображения местоположения. Место для интеграции API карт (например, Яндекс.Карты или Google Maps).
  • Форма обратной связи: Простая форма с полями для имени, электронной почты, темы сообщения и текста сообщения, а также кнопкой отправки.

Требования к верстке

  • Адаптивность: Страница должна корректно отображаться на трех ключевых разрешениях: мобильные устройства, планшеты и десктопы. Брейкпоинты согласуются с макетом.
  • Чистый код: Использование семантических тегов HTML5. Код должен быть хорошо структурирован и прокомментирован.
  • Соответствие макету: Точное соответствие предоставленному дизайну по шрифтам, размерам, отступам и цветам.
  • Кроссбраузерность: Корректное отображение в современных версиях браузеров Chrome, Firefox, Safari.

Что предоставляет заказчик

  • Исходный макет страницы в Figma со стилями и слоями.
  • Доступ к существующему сайту для понимания общей стилистики.

Ожидаемый результат

Готовая HTML-страница с полностью реализованной адаптивной версткой всех указанных блоков, готовая к интеграции в существующую CMS или код сайта.