Как только вы перейдёте в интерфейс сдачи проектной работы в курсе «Сдача проектной работы», репозиторий mesto скопируется в ваш GitHub. Клонируйте репозиторий на свой компьютер через командную строку и работайте над проектом внутри папки mesto.
В этом и нескольких следующих месяцах вы будете работать над сервисом Mesto: интерактивной страницей, куда можно добавлять фотографии, удалять их и ставить лайки.
Вам предстоит сверстать сайт и опубликовать его в Git. Все необходимые для этого знания у вас уже есть. В следующих месяцах вы напишете логику проекта на JavaScript.
Задание
Описание этого проекта значительно меньше предыдущего. Мы предполагаем, что сначала вы выполните проект «Путешествие по России» и «набьёте руку». Хоть этот макет и меньше по объёму, в нём есть достаточно сложные реализации, с которыми можно справиться только после освоения тем про адаптивную вёрстку и формы. Про особенности реализации мы поговорим чуть позже.
Основные требования
- Внешний вид сайта соответствует макету: https://www.figma.com/file/2cn9N9jSkmxD84oJik7xL7/JavaScript.-Sprint-4?node-id=0%3A1.
- Файловая структура организована по БЭМу. Имена классов даны по БЭМ.
- Адаптивная вёрстка: ширина зоны с содержимым должна меняться вместе с шириной окна браузера. При этом не должна появляться горизонтальная полоса прокрутки. Минимальная ширина: 320px (одна карточка в ряд). Максимальная: 1280px (три карточки в ряд).
- Все интерактивные элементы обладают состоянием наведения или фокуса.
- На странице — 6 карточек с фотографиями. Снимки и названия мест вы можете выбрать сами.
- Подумайте, как можно на практике применить теоретические уроки, которые вы уже изучили. Например, как удобнее всего сверстать 6 карточек с фотографиями — с использованием Grid-layout или Flex.
Попап редактирования профиля
Реализуйте одно диалоговое окно из макета — «Редактировать профиль». В нём два поля: «Имя» и «О себе», а также кнопка «Сохранить».
Среди разработчиков такие диалоговые окна лаконично называют «попап» от английского глагола “pop-up”, который переводится как «неожиданно возникать» или «всплывать». В дальнейшем мы будем называть такие окна модальными.
Позиционируйте попап фиксированно по центру экрана и задайте окну полупрозрачный чёрный фон. Полупрозрачный фон верстайте отдельным блоком popup. Внутри него расположите само окно с формой popup__container, спозиционированное по центру.
Изначально попап не виден (display: none). Чтобы модальное окно открывалось, добавьте ему модификатор popup_opened с одним-единственным правилом. Оно должно изменять значение свойства display на block или flex. Чтобы закрыть попап, удалите у него модификатор popup_opened. Пока добавлять и удалять модификаторы придётся вручную, ведь мы ещё не изучали JavaScript. Но не переживайте — в следующем месяце модальные окна будут открываться по кликам на элементы интерфейса.
Внутри модального окна есть форма, которая состоит из трёх элементов: двух полей ввода и кнопки «Сохранить». Самостоятельно сверстайте форму и обратите внимание на то, что модальных окон и, соответственно, форм в проекте несколько. Заранее продумайте этот момент: модальные окна будут переиспользоваться, и должны быть одной БЭМ-сущностью в проекте.
Переполнение содержимого в блоке
В некоторых частях макета возможно переполнение содержимым. Так в карточке «Карачаево-Черкессия» не вместившийся в блок текст обрезан, и в конце появилось многоточие.
Для иконки сердечка подготовьте сразу и активное состояние — иконка должна закрашиваться чёрным. Сейчас это не пригодится, но потребуется в следующем спринте.
При редактировании данных профиля из попапа пользователь тоже может ввести длинный текст. Чтобы реализовать переполнение блока с появляющимся многоточием в конце, используйте такой набор свойств CSS:
.block {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Самостоятельно изучите свойства text-overflow и white-space в документации CSS.