cssBayan

[InventiveSpark]

1. Task: https://github.com/DrDiman/CSS-Bayan-task
2. Screenshot:
3. Deploy: https://inventivespark.github.io/cssBayan/cssBayan/index.html
4. Done 2023-03-10 01:23 UTC+5 / deadline 2023-03-10 05:00 UTC+5
5. Score: 140 / 140

• Создан публичный репозиторий с названием cssBayan (5)
• Создана ветка gh-pages (5)
• В ветке gh-pages создана папка cssBayan. Деплой доступен по ссылке, которая приведена выше (5)
• В ветке gh-pages не менее 5 коммитов с историей разработки проекта (5)
• Коммиты названы согласно гайдлайну, у кажого коммита создана метка времени (5)
• Открыт пулл-реквест из ветки gh-pages в ветку main. Имя пулл-реквеста совпадает с именем задания. Описание пулл-реквеста сделано согласно гайдлайну. Ссылка на пулл-реквест засабмичена на кросс-чек. Этот пулл-реквест мержить НЕ НУЖНО (5)
• Аккордеон центрирован, отступы слева и справа одинаковые (10)
• Добавлены иконки, тексты мемов и изображения мемов (5)
• Размещение мема, иконок и текста мема такое же, как и в примерах gif-изображений в описании задания (5)
• Реализована плавная смена (переход) состояний изображений и иконок мема (20)
• Реализован адаптивный дизайн с тремя контрольными точками для мобильных, планшетов и десктопов. Аккордеон корректно отображается на мобильных (320х568), планшетах (820х1180) и десктопах (1920х1080) (10)
• Реализованы все визуальные эффекты при наведении курсора на мемы, при клике на мем и при выборе мема (10)
• Вся строка (текст, значок и изображение мема) кликабельна (5)
• Используется подход Mobile first - ховер на мемах реализован только для десктопных устройств (10)

•  На тач девайсе (телефон, планшет) не должно быть ховера эффекта;
  

•  На компьютере должны быть ховер эффекты. 
  

• Вид курсора при наведении на ряды аккордеона меняется (5)
• Используются только относительные величины rem, em, %, vh, vw, fr и т. д. Для аккордеона применены подходы респонсив-дизайна. Только для медиа-запросов (media queries) разрешено использовать абсолютные единицы измерения px. (10)
• Все блоки/части аккордеона находятся в основном потоке DOM-элементов. Все элементы НЕ спозиционированы при помощи свойств top, left, right, bottom. Свойство float НЕ используется. Значение свойства position всегда ТОЛЬКО static (5)
• Псевдоэлементы НЕ используются (примечание: допускаются псевдоклассы) (5)
• Изначально первый мем раскрыт (виден) (5)
• Размер шрифта меняется на каждом устройстве (мобильный, планшет, десктоп) (5)

Примечание 1:
Лучший способ скрытия переключателей (радиокнопок) - это установить свойство "display: none". Но элемент, для которого задано значение "display: none", полностью удаляется из потока документа, поэтому он не отображается в дереве элементов, в отличие от "visibility: hidden". По условиям задачи все блоки аккордеона должны быть в основном потоке DOM-элементов, поэтому пришлось использовать свойство visibility.

Примечание 2:
Устройства с сенсорными экранами определяются посредством медиа-запроса @media (hover: hover).

Примечание 3:
Для того, чтобы вся строка (текст, значок и изображение мема) была кликабельна, весь контент строки обёрнут в элемент label.

Примечание 4:
Иконки выполняют чисто декоративную функцию, поскольку вся строка аккардеона итак кликабельна. Поэтому иконки вынесены в фоновый рисунок для того, чтобы вёрстка была более простой и надёжной.

Примечание 5:
Использовались следующие иконки:
favicon
cross