insane-idea / cssmemslider

CSS Meme Slider

Watch deploy

Технические требования

• Запрещается использование CSS-фреймворков (bootstrap, foundation и т.д.)
• Запрещается использование каких-либо js скриптов и нпм пакетов
• Запрещается использование CSS препроцессоров (необходимо использовать только чистый CSS)
• Поддержка браузера Google Chrome
• Допускается добавление тегов типа h1, footer, header и т.д. для увеличения контента всей страницы
• Разрешается/допускается использование gif картинок
• Разрешается/допускается px для синтаксиса медиа квери
• Разрешается/допускается, что в репозитории есть первый коммит, генерируемый автоматически гитхабом Initial commit
• Разрешается/допускается использование reset.css и normalize.css

Критерии оценки

1. Слайдер позиционируется с равными отступами слева и справа
2. Соблюдено расположение картинок, подписей к ним и контролов
3. Имеется плавная анимация смены картинок
4. Имеется плавная анимация смены подписей к картинкам
5. Подписи к картинкам должны быть строковыми значениями (текстом), т.е. текст не должен быть частью картинки
6. Каждый контрол имеет большую область нажатия, чем размер самого контрола
7. Контролы имеют интерактивность (момент наведения, момент нажатия, активный контрол, изменение курсора)
8. Используются только относительные единицы измерения для основных блоков (картинки, контролы, подписи). Относительные единицы: rem, em, %, vh, vw, fr and etc... - присутствует "резиновость" слайдера
9. Все блоки/составные части слайдера (контролы, картинки, подписи к слайдеру) находятся в базовом потоке дом-элементов, не позиционируются (position) с помощью top, left, right, bottom, не используется float. Можно: flex, grid, margin-left and etc... - все, что не упомянуто в запретах выше.
10. Не используются псевдоэлементы (не путать с псевдоклассами, псевдоклассы можно).
11. Каждый коммит должен содержать тайм-стемп. Тайм-стемп может быть на любом языке; по тайм-стемпу должно быть понятно, когда этот коммит был сделан: день недели, месяц, число, год, точное время до секунд. Например, можно использовать следующий шаблон коммита:

git commit -m "init: start cssMemeSlider-task LANG=en_EN date +'(%a, %b %d, %Y %r)'"