Перед выполнением задания внимательно прочитайте:
- О всех этапах проверки задания
- Как отправить пулл
- Как пройти тесты
- Правила оформления JavaScript, HTML и CSS кода
В прошлый раз вы очень помогли бабуле, сверстав сайт с котиками.
Но очень-очень жаль, что у нашего сайта нет названия. К тому же, мы совершенно не позаботились о том, чтобы рассказать куда писать, если котик приглянулся.
Будьте добры, добавьте к существующему сайту шапку с названием и футер с контактами. Примерно так:
Размер текста в шапке: 32px, шрифт: PT SansNarrow
Размер текста в футере: 14px, цвет ссылок - #4c4cd8, шрифт - Arial
Условия: футер всегда должен быть прибит к низу, шапка должна всегда отображаться вверху, даже при скролле страницы.
К тому же на большом экране список смотрится не так уж и эффектно. Давайте откажемся от плиток и переделаем на галерею-карусель. Так же будет сильно лучше, правда?)
Описание галереи:
- фотографии листаются по клику на неактивную фотку. На скриншоте выше изначальное состояние галереи, ниже – сотстояние после того, как галерею пролистнули на 1 фото влево
- активная фотография всегда находится по центру и имеет opacity: 1
- неактивные фотографии имеют opacity: 0.7, и высоту - 80% от главной
- при ховере на активную фотографию фотография немного затемняется и видно имя котика. Так:
- при нажатии на активную фотографию открывается модальное окно. Вот так:
- модальное окно можно закрыть с помощью крестика в правом верхнем углу
Содержимое центрируется по вертикали и горизонтали.