frosthamster / markup-task-5

Задача «Мурмаркет»

Задача «Мурмаркет»

Перед выполнением задания внимательно прочитайте:

• О всех этапах проверки задания
• Как отправить пулл
• Как пройти тесты
• Правила оформления JavaScript, HTML и CSS кода

Основное задание

⚠️ Задание по-прежнему необходимо решить без использования JS и flex/grid (даже если вы уже погуглили что это такое).

В прошлый раз вы очень помогли бабуле, сверстав сайт с котиками.

Но очень-очень жаль, что у нашего сайта нет названия. К тому же, мы совершенно не позаботились о том, чтобы рассказать куда писать, если котик приглянулся.

Будьте добры, добавьте к существующему сайту шапку с названием и футер с контактами. Примерно так:

Размер текста в шапке: 32px, шрифт: PT SansNarrow

Размер текста в футере: 14px, цвет ссылок - #4c4cd8, шрифт - Arial

Условия: футер всегда должен быть прибит к низу, шапка должна всегда отображаться вверху, даже при скролле страницы.

К тому же на большом экране список смотрится не так уж и эффектно. Давайте откажемся от плиток и переделаем на галерею-карусель. Так же будет сильно лучше, правда?)

Описание галереи:

• фотографии листаются по клику на неактивную фотку. На скриншоте выше изначальное состояние галереи, ниже – сотстояние после того, как галерею пролистнули на 1 фото влево

• активная фотография всегда находится по центру и имеет opacity: 1
• неактивные фотографии имеют opacity: 0.7, и высоту - 80% от главной
• при ховере на активную фотографию фотография немного затемняется и видно имя котика. Так:

• при нажатии на активную фотографию открывается модальное окно. Вот так:

• модальное окно можно закрыть с помощью крестика в правом верхнем углу

Содержимое центрируется по вертикали и горизонтали.

⚠️ Не забывайте про валидность и доступность вашей верстки.