navoznova / profittesttask Goto Github PK

Нужно сверстать карточку продукта. Макет в формате Figma можно скачать по ссылке:

https://www.dropbox.com/s/oyfxw7yt5wp6iuh/Product%20card.fig?dl=0

Условия:

1. Карточка тянется на всю ширину контейнера, в который помещается. Предположим, что он может быть от 960 до 1440 пикселов. Подозреваю, что на меньших или больших размерах потребуется радикально менять внешиний вид. Оставим это за рамками задания.

2. Высота карточки подстраивается под её содержимое.

3. Картина всегда сохраняет свои пропорции 4:3 и вытягивается на всю высоту карточки. Максимальная ширина картинки должна быть не более 45% ширины карточки. Можно использовать любую подходящую иллюстрацию.

4. Текстовый контент может быть различной длинны и содержания. Карточка должна подстаиваться под него не ломаясь. В макете представлены некоторые возможные варианты.

5. Цена может быть как 2-3 символа, так и 5-6. На это тоже нужно обратить внимание.

6. Теги выводятся в одну строку. Их может быть много. Те, которые не уместились, полностью скрываются. Нельзя обрезать или переносить отдельные слова в тегах.

7. Локация всегда прибивается к нижнему краю карточки. Выводится в одну строку. Лишняя часть скрывается за троеточием.