Самый популярный тариф

Большинство людей выбирает «Забота», и страница должна об этом сказать. Мы добавили в её карточку метку: span с классом badge, внешний вид которой уже описан в style.css. У карточки появился и новый класс — popular.

Метка сидит на верхнем краю карточки: частично над карточкой, частично в ней, в правой половине карточки. Она не занимает места в карточке, поэтому заголовок и остальное содержимое стоят там же, где и в других карточках.

Вся карточка ещё и на 8px выше остальных, чтобы выделяться. Другие карточки не двигаются.

Готовая страница выглядит так (в уменьшенном виде):

Подсказка: в уроке «Display и позиционирование» вы ставили один элемент в угол другого. Это же свойство может сдвинуть и саму карточку.

На этом проект закончен. Вы разложили целую страницу: панель навигации, карточки, которые подстраиваются под ширину экрана, кнопки, выровненные по низу, и метку точно на своём месте. В следующем уроке, «CSS Grid», вы научитесь раскладывать элементы сразу по строкам и столбцам.