CSS Meme Slider

[Dmitriy-Frostoff]

1. Task link
2. Screenshot:
   
3. Deploy: link
4. Done 18.09.2023 / deadline 18.09.2023
5. Score: 150 / 150

• Выполнено всё из секции Требования к репозиторию и как сабмитить задание max +30
  В текущем требовании предусматривается выполнение 6 пунктов задания => 30баллов / 6 = +5 за каждый пункт.
  =>

  • Создайте личный публичный репозиторий cssMemeSlider - Выполнено, +5

  • Создайте gh-pages ветку (если таковой не имеется) - Выполнено, +5

  • Перейдите в эту (gh-pages) ветку и создайте папку cssMemeSlider. Ваша работа будет доступна по ссылке,
    например: https://${YOUR_GITHUB_NAME}.github.io/cssMemeSlider/cssMemeSlider/index.html. Выполнено, +5

  • Выполняете таску в этой папке (cssMemeSlider). В процессе выполнения задания должно быть не менее 5
    коммитов. Выполнено, +5

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

    Тайм-стемп может быть на любом языке; по тайм-стемпу должно быть понятно, когда этот коммит был 
    сделан: день недели, месяц, число, год, точное время до секунд (очередность может быть произвольная) 
    например название коммитов:   
      `init: start cssMemeSlider-task (Mon, Sep 13, 2021 10:12:24 PM)`   
      `feat: add basic page layout (Mon, Sep 13, 2021 10:25:24 PM)` .  
    
    **Выполнено**, +5   
    

    • После завершения работы откройте Pull Request из ветки gh-pages в ветку main. Название Pull Request дайте
      по названию задания. Описание Pull Request дайте по схеме . Мержить данный Pull Request не нужно. Ссылку на данный пулл реквест необходимо
      сабминтуть в форму кросс-чека. В пулл реквесте необходимо досконально описать, что сделано и что нет. В
      частности - описаны все разрешения, при которых проверяющему необходимо смотреть - например:
      мобильная версия 320x568, версия для ПК - 1920×1080.
      Выполнено, +5

      **Итого за пункт Требования к репозиторию и как сабмитить задание** +30    
      

• Слайдер позиционируется с равными отступами слева и справа max +10
  Можно проверить посмотрев, например: container main__container;
  и .carousel__wrapper > justify-content: space-evenly;
  Выполнено, +10

• Соблюдено расположение картинок, подписей к ним и контролов max +10
  Картинки имеют разную ширину и высоту. Поэтому я использовал контейнер div.carousel__image с жёстко
  заданными width и height, внутри в качестве background-image использовал картинки с параметром background- size: contain;. Таким образом, контейнер картинки, подписи и контролы расположены как того требует ТЗ.
  Выполнено, +10

• Имеется плавная анимация смены картинок max +20
  Я выстроил структуру слайдера таким образом, что при смене radio-button просисходит смещение transform: translateX(units); на заданную величину оболочки с картинками div.layout-multiple-columns.carousel__content и оболочки с подписями div.layout-multiple-columns.carousel__content-description. Для плавности перемещения указанных оболочек им присвоено transition: all 0.7s ease 0s;.
  Выполнено, +20

• Имеется плавная анимация смены подписей к картинкам max +10
  Описал выше.
  Выполнено, +10

• Подписи к картинкам должны быть строковыми значениями (текстом), т.е. текст не должен быть частью картинки max +15
  Все подписи заданы в теге p.paragraph-l.paragraph_width и могут быть выделены и скопированы.
  Выполнено, +15

• Каждый контрол имеет большую область нажатия, чем размер самого контрола max +5
  Каждый контрол обёрнут в label.layout-one-column.carousel__button, которому задана ширина и высота большая, чем radio-button input.carousel__button-inner.
  габариты label .carousel__button width: 3vw; height: 3vh;;
  габариты input .carousel__button-inner width: 3vw; height: 3vh;;
  Для input отключил указатели, задав свойство pointer-events: none
  Для label: hover задал cursor: pointer.
  Выполнено, +5

• Контролы имеют интерактивность (момент наведения, момент нажатия, активный контрол, изменение курсора) max +10
  Для стилизации radio-buttons я использовал свойство appearence: none.
  Далее задал изменение цвета активного контрола, на :hover по контролу, изменение курсора cursor: pointer;.
  Интерактивноть и плавность наведения приблизил к указанному в ТЗ. (background синий полностью по
  умолчанию, у активного контрола - синий border и тёмный background.
  На :hover контрол становится белым, а активный (:checked) - меняет только цвет border.
  Выполнено, +10

• Имеется мобильная версия слайдера, и соблюдено расположение картинок, подписей к ним и контролов max +20
  Слайдер адаптирован и проверен на соответствие ТЗ на разрешениях экрана mobile 500px ... desktop 1024px.
  Так как слайдер выполнен по адаптивной технологии, предельные разрешения экрана: mobile 320px, desktop 2560px.
  Выполнено, +20

• Используются только относительные единицы измерения для основных блоков (картинки, контролы, подписи).
  Относительные единицы: rem, em, %, vh, vw, fr and etc... - присутствует "резиновость" слайдера max +10
  Везде применены относительные единицы vw, vh, %.
  PX использованы только в @media. Вёрстка выполнена по адаптивной технологии.
  Выполнено, +10

• Все блоки/составные части слайдера (контролы, картинки, подписи к слайдеру) находятся в базовом потоке дом-элементов, не позиционируются (position) с помощью top, left, right, bottom, не используется float. Можно: flex, grid, margin-left and etc... - все, что не упомянуто в запретах выше. Свойство position может быть только static. max +5
  Применялся только flex с margin, padding
  Выполнено, +5

• Не используются псевдоэлементы (не путать с псевдоклассами, псевдоклассы можно). max +5
  Использовал только псевдоклассы. Основной: :has, без него было бы крайне проблематично выполнить слайдер с использованием radio-buttons.
  Выполнено, +5