Арсений Матыцин

Просто скопировать из иллюстратора это не пытаться.

А информацию почерпнуть можно тут → css.yoksel.ru/svg-gradients/. В смысле да, это просто градиент в альфа-каналы.

В CSS нельзя вкладывать описания в описания, это фишка препроцессоров. На обычном CSS это выглядит так: .class .class.

Чтобы понять, зачем использовать тот или иной инструмент, необходимо в принципе понимать, для чего он создан.

https://ru.wikipedia.org/wiki/%D0%92%D0%B5%D1%80%D...
https://ru.wikipedia.org/wiki/%D0%9D%D0%B8%D0%B6%D...

Этого на первых порах должно хватить, но вообще это в рамках раздела типографики. Что интересно, увлекательно и звиздец, как непопулярно среди новичков и даже среднячков.

1. Пункт 3.8. правил сервиса.
2. Такое происходит, когда контент больше ширины экрана, поэтому он и увеличивает область видимости.

Ага, я понял. Стоит задавать такие штуки за счет псевдоэлемента before, либо на глаз, либо по метрикам шрифтов формировать размер (чтобы выровнялся относительно текста).

Я вижу явную систему (да, при привой пикче) поэтому на masonry можно, но в целом на кой оно надо.

Поэтому тут решают гриды (3 на 6) с объединениями (как в таблицах) и медиазапросы.

Пропорционально это:
background-size: contain;
Вот только то, как сейчас — это лучше, чем будет при отсутствии обрезки.

1. Использовать другое обтекание float;
2. На уровне flex блока использовать justify-content: flex-end;

И т.д.

Иконки вставляются:
1. SVG → Use (из svg-спрайтов);
2. Просто SVG;
3. PNG-шки (слабоактуально);
4. Иконочные шрифты (вызов символа по коду под капотом);
5. SVG в CSS (можно в before\after);
6. При наличии иконочного шрифта можно в before\after вставить описание стилей шрифта и код символа в content.

И т.д. Расположение иконок буквально зависит от положения в контексте, с помощью CSS можно указать порядок через order, но это такое.

Плохо искал: https://developer.mozilla.org/ru/docs/Web/CSS/transform

Конкретно это — смещение по X-корам влево относительно самого объекта смещения.

1. CSS-анимации.
2. JS-анимации (много подходов)
3. CSS-анимации на классах, которые переключаются на JS.
4. SMIL.

Глубже — JS-хуки (частое явление в JS-фреймворках), которые позволяют проводить анимацию по классу в несколько этапов. И т.д.

Резиновая и адаптивная верстка.

Заверни все все во flex-строки, в них по умолчанию высота всех элементов одинаковая, зависящая от большего в строке (stretch). И карточки тоже сделай флексами. Это позволит с помощью margin-top: auto заданным цене оттолкнуть ее в конец карточки. Карточка должна быть flex-direction: column.

Абсолютно спозиционированный элемент, блочный, теряет свои свойства, как блочный, его ширина перестает быть 100% от родителя. Поэтому необходимо это условие задавать вручную, как часть групп свойств при позиционировании.

Т.е. justfy-content работает, но т.к. размер блока = размеру содержимого, то, что оно работает просто не видно.

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_... читай.

Элементы со свойством display: flex игнорируют эти правила.

https://developer.mozilla.org/ru/docs/Web/CSS/:hover
Скрытый элемент должен находится внутри узла или находится на том же уровне вложенности после того, к которому применяется псевдокласс (в противом случае поможет только JS).

Появление дополнительной информации выбъет поток, если не показывать его с абсолютным позиционированием, это необходимо учесть.

Принцип работы такой же, как в документации на примере выпадающей навигации.

Держи размерности (отступы и т.д.) в процентах. Приправь медиа-запросами.
Или проще — делай под SVG.