Победитель

Голосование закончилось, и победило фото Анны, «Воскресный сон»! Мы добавили для него значок: span в начале его карточки. Пока значок мешает: он сдвигает фото вниз.

• Карточка победителя выделяется: её рамка шириной не меньше 2 px и другого цвета, чем у рамок остальных карточек, например янтарного (amber).
• Значок 🏆 Победитель лежит поверх фото, в левом верхнем углу карточки, на расстоянии 12 px от её верхнего и левого краёв. Фото снова начинается у верхнего края карточки, как будто значка нет.
• Ева сняла своё фото «Снежная королева» с конкурса. Его карточка блёклая, с непрозрачностью не больше 60%, так что её ещё видно, но она уже не привлекает внимание. Остальные карточки остаются как есть.

Подсказка: вспомните значок на карточке Оскара в уроке «Flexbox, Grid и позиционирование»: значку нужно позиционирование, и элементу, от которого отсчитываются его смещения, тоже.

Вот и вся галерея. Благодаря двум последним урокам вы превратили обычные фото в карточки с рамками, скруглёнными углами и тенями, разместили их в сетке и поставили значок точно туда, куда хотели. На следующем уроке, «Наведение, фокус и другие состояния», вы сделаете так, чтобы кнопки вроде кнопки голосования реагировали, когда над ними курсор мыши или на них нажимают.