Необходимо создать простую одностраничную веб-страницу для отображения карточек
пользователей с их профилями. Страница должна быть адаптивной и иметь следующие
элементы:
1. Шапка (Header):
o Содержит название страницы и навигационное меню с двумя ссылками: "О
нас" и "Контакты".
o Шапка фиксируется в верхней части экрана при прокрутке страницы.
2. Карточки пользователей:
o Создайте карточки пользователей с использованием Bootstrap-карточек.
На каждой карточке должна быть информация о пользователе, например,
имя, возраст и город.
o Карточки должны быть адаптивными: на больших экранах отображаться по
4 карточки в ряд, на планшетах — по 2 карточки, на мобильных — по одной
карточке в ряд.
o Внизу карточки должна быть кнопка "Подробнее", при клике на которую
выводится всплывающее окно с дополнительной информацией о
пользователе (например, его биография или описание).
3. Всплывающее окно (Modal):
o При клике на кнопку "Подробнее" открывается всплывающее окно
(модальное окно) с Bootstrap, где отображается подробная информация о
пользователе.
4. Подвал (Footer):
o В подвале отобразите текст с годом и ссылками на социальные сети
(например, иконки Twitter, Facebook и Instagram), которые можно
реализовать с использованием Bootstrap-иконок.
Дополнительные требования:
• Стилизация: Используйте стили Bootstrap, но также добавьте собственные стили
(если требуется) для улучшения внешнего вида.
• JavaScript: Реализуйте открытие модального окна с подробной информацией о
пользователе. Можно использовать встроенные возможности Bootstrap для
модального окна.
• Кросс-браузерность: Страница должна корректно работать в последних версиях
Chrome, Firefox и Safari.
Критерии оценки
1. Адаптивность: Насколько хорошо страница адаптируется под различные размеры
экранов.
2. Корректность использования Bootstrap: Применение компонентов и сетки
Bootstrap для создания макета.
3. Чистота и организация кода: Читабельность HTML, CSS и JavaScript.
4. Работа с UI-компонентами: Корректная работа всплывающего окна и кнопок на
карточках.
Для более лучшей коммуникации сразу пишите свой тг либо пишите напрямую менеджеру @sigmatypescript
