Привет, всем будущим фронтенд разработчикам! В этой статье мы разберем как удобно верстать различные карточки. Любая карточка состоит из изображения и контента: Красным выделена верхушка карточки (изображение), а оранжевым контент. Исходя из этого мы можем создать два контейнера: Зачем нам создавать отдельный див для изображения, почему не вставить ее фоном в .card? - Если вставлять ее фоном в .card, мы должны будем вручную высчитывать отступы контента от изображения и решать остальные мелкие проблемы по ходу адаптива наших карточек, а зачем, если можно сделать намного проще...

Для тех, кто не очень хорошо знаком с веб-дизайном, возможно, будут полезны некоторые подсказки по верстке на HTML. Если раньше вы уже создавали веб-страницы, то сможете избавиться от стиля верстка HTML-кода, который лучше быстрее забыть...