https://github.com/nda17/product-cards-cats-food

Product-cards-Сat-food
https://github.com/nda17/product-cards-cats-food

Last synced: 3 months ago
JSON representation

Product-cards-Сat-food

• Host: GitHub
• URL: https://github.com/nda17/product-cards-cats-food
• Owner: nda17
• Created: 2023-02-01T21:22:27.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-23T00:32:49.000Z (about 1 year ago)
• Last Synced: 2025-01-09T10:24:56.829Z (5 months ago)
• Language: CSS
• Homepage: https://nda17.github.io/Product-cards-Cats-food/
• Size: 5.53 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# «Product card Cats food» 

## [Demo](https://nda17.github.io/Product-cards-Cats-food/)

- Верстка реализована c использованием препроцессора Sass и методологии БЭМ.

- Логика реализована на JavaScript 

## Требования к проекту (бизнес-логика):

- Фон занимает всю площадь экрана, блок находится по центру вертикально и горизонтально.

- На планшетах в портретной ориентации упаковки располагаются треугольником, на смартфонах в портретной ориентации друг под другом.

- В стандратном состоянии при наведении курсора мыши на карточку, меняется цвет некоторых элементов и рамки карточки на светло-голубой.

- В активном состоянии при клике мыши на карточку, меняется цвет некоторых элементов и рамки карточки на розовый. Также изменяется текст под карточкой.

- При перемещении курсора мыши с активной карточки, меняется текст слогана вверху карточки и его цвет. 

- В активном состоянии при наведении курсора мыши на карточку, меняется цвет некоторых элементов и рамки карточки на светло-розовый.

- При повторном клике мышью по активной карточке, текст и цвет возвращаются в стандартное состояние.

- Состояние наведения применяется к выбранной карточке не сразу, а после того, как курсор ушел с нее после первоначального выбора.

- Каждая из упаковок может быть выбрана или недоступна для выбора. Выбор осуществляется нажатием на упаковку или на текст «купи» в описании.

- При клике на третью карточку - она блокируется и становится недоступной для выбора.

- Можно выбрать одновременно несколько упаковок, а также отменить свой выбор повторным нажатием на упаковку.

- Состояние наведения применяется к выбранной упаковке не сразу, а после того, как курсор ушел с нее после первоначального выбора.