🆘 Как создать Pull Request
Мы очень хотим, чтобы код вы написали сами на чистом CSS и HTML, а не пользовались внешними библиотеками, пост и препроцессорами.
Прежде чем отправлять решение, проверьте его на соответствие требованиям к HTML коду
и требованиям к CSS.
Когда вы создадите или обновите пулл-реквест, он частично будет проверен автоматически. Результаты вы увидите внизу:
Проверить HTML и CSS можно и вручную:
# Устанавливаем проверяльщик
npm install
# Проверяем
npm test
# В результате выведутся ошибки, если они есть.
# Если какие-либо ошибки будут не понятны – смело спрашиваем у ментора.
В помощь вам мы разместили файл .editorconfig
. Этот файл содержит базовые
правила оформления кода (codestyle), понятные для большинства редакторов.
Прочитайте о нём подробнее.
Уж небо осенью дышало,
Уж реже солнышко блистало,
Короче становился день,
Лесов таинственная сень
С печальным шумом обнажалась.
Каждую осень моя бабуленька участвует в осенней ярмарке вместе с бабуленьками других внучков. Так как внучок моей бабуленьки – js-программист, он предложил провести ярмарку и в интернете, чтобы бабуленьки из соседних деревень смогли восхититься передовыми достижениями на ниве сельского хозяйства.
Самое очевидное – это сверстать интерактивную галерею фотографий лучших экземпляров осеннего урожая. Образцовый дизайн «от Олега» уже готов:
Обязательное задание:
- На странице отображается 4 фотографии (Макет №1)
- При наведении на фотографию появляется карточка с описанием (Макет №2)
- При клике на фотографию, появляется модальное окно с крупной версией фотографии (Макет №3):
- Фотография должна вмещаться в экран, даже если она сама по себе больше него
- Под модальным окном – затемнение на всю страницу
- В правом верхнем углу – крестик, закрывающий модальное окно
- Под фотографиями – набор радиокнопок, по умолчанию выбран первый. При нажатии на второй, фотографии прокручиваются слева-направо и показывается второй блок из 4-х фотографий (Макет №4)
Задание необходимо решить без использования JS и flex/grid (если вы знаете, что это)
Слайдер с кружочками радиокнопок выглядят совсем не эстетично, будет без сомнения круто сделать переключение стрелками (Макет №4).
При нажатии на серую стрелку вправо, фотографии прокручиваются слева-направо и показывается следующий блок из 4-х фотографий.
При нажатии на серую стрелку влево, фотографии прокручиваются справа-налево и показывается предыдущий блок из 4-х фотографий.
Дополнительное задание необходимо решить без использования JS и flex/grid (если вы знаете, что это)