Проек включает 4 блока:
- Шапка сайта
- Профиль
- Фотографии
- Подвал сайта
Техническая составляющая проекта:
- основная информация была взята из макета в «Figma»;
- cтраница сайта была создана на основе файловой структуры по методологии БЭМ;
- в проекте была реализована адаптивная вёрстка чтобы веб-страница выглядела отлично на всех устройствах;
- для ¨гибкости¨ сайта использовался: flexbox, grid и директива @media;
- в проекте используется язык программирования JavaScript;
- реализована возможность редактирования профиля при нажатии на "карандаш";
- при клике на кнопку "плюс" появляется модальное окно, которое позволяет загрузить новую фотограцию, а также существует возможность увеличение карточек по клику;
- при наведении мыши на аватар появляется "карандаш" и реализована возможность смены картинки;
- кнопки "лайк" и "корзина" активны при нажатии;
- реализована возможность закрытия модальных окон при клике на крестик;
- настроена валидация модальных окон;
- испоользована ООП в интерфейсе;
- cборка проекта выполнена через Webpack;
- API;
- сборка проекта реализуется через фреймворк React.
Анимация:
Кнопки в проекте при наведении мыши становятся серыми, а модальные окна плавно появляются и исчезают.
Ссылки: