Skip to content

urfu-2016/markup-task-6

Repository files navigation

Задача «Бабуленькин урожай»

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

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

Задание необходимо решить без использования JS и flex/grid (если вы знаете, что это)

Уж небо осенью дышало,
Уж реже солнышко блистало,
Короче становился день,
Лесов таинственная сень
С печальным шумом обнажалась.

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

Самое очевидное – это сверстать интерактивную галерею фотографий лучших экземпляров осеннего урожая. Образцовый дизайн «от Олега» уже готов:

Требования:

  • На странице отображается 4 фотографии (Макет №1)
  • При наведении на фотографию появляется карточка с описанием (Макет №2)
  • При клике на фотографию, появляется модальное окно с крупной версией фотографии (Макет №3):
    • Фотография должна вмещаться в экран, даже если она сама по себе больше него
    • Под модальным окном – затемнение на всю страницу
    • В правом верхнем углу – крестик, закрывающий модальное окно
  • Под фотографиями – набор радиокнопок, по умолчанию выбран первый. При нажатии на второй, фотографии прокручиваются слева-направо и показывается второй блок из 4-х фотографий (Макет №4)

Дополнительное задание (+27 к здоровью)

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

Слайдер с кружочками радиокнопок выглядят совсем не эстетично, будет без сомнения круто сделать переключение стрелками (Макет №4).

При нажатии на серую стрелку вправо, фотографии прокручиваются слева-направо и показывается следующий блок из 4-х фотографий.

При нажатии на серую стрелку влево, фотографии прокручиваются справа-налево и показывается предыдущий блок из 4-х фотографий.

⚠️ При написании задания ни одна морковка не была съедена , только печеньки :(

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages