Практический курс по Vue3 и Nuxt3
Boosty
Junior

Сайт помощи животных

Скриншоты:

1
2
3
CSSHTMLJavaScript
-9.139315999996649e+54

Категория: Web Ecommerce

Интерактивные элементы:

  Модальное окно  Валидация

Описание и небольшое ТЗ

Макет сайта о помощи животным несложен, но интересен.

Один момент: он на португальском языке, но не думаю, что это будет большой проблемой.

На главной странице есть форма обратной связи (скриншот 1). Все поля обязательные к заполнению, так что если пользователь пытается отправить данные с хотя бы одним пустым полем - показывайте ошибку. А еще слева есть контакты: instagram, телефон и email. Помните, что для телефона и email есть специальные атрибуты у тегов <a>.

Скриншот 2 - форма, с которой вам придется плотно поработать для реализации валидации. В макете таких форм две. Попробуйте взять какую-нибудь популярную библиотеку для реализации данного функционала.

Скриншот 3 - модальное окно. Сделайте так, чтобы оно закрывалось при клике на крестик, на кнопку Esc и на клике вне окна.

И последний момент: при прокрутке страницы шапка должна быть всегда прикреплена наверху сайта.

Удачи в реализации!

Поделись выполненной работой с другими!

Для того, чтобы поделиться, войдите в свой аккаунт.

Будьте первым, кто поделится своей готовой работой!