Как правильно верстать карточки?

Question

Необходимо сверстать карточку (решила делать через background-image), но не очень понимаю как сделать:

отступ от картинки для текста (без понятия как задать display: block к background-image)
как разместить так изображение чтобы оно было вверху а после уже на белом текст

Если есть другой более удобный способ сверстать карточку, то подскажите :_)

Answer 1

Вот так

.background {
  display: flex;
  width: 50%;
}

.text {
  display: flex;
}

<div class="container">
  <div class="background">
    <img src="//i.imgur.com/peR92ya.png">
  </div>
  <h2>Введение</h2>
  <div class="text">
    <ul>
      <li>Как работают сайты. Верстка</li>
      <li>Возможности html, Css, js</li>
      <li>Редактор кода</li>
    </ul>
  </div>
</div>

Answer 2

Просто хочу сверстать карточку для практики ?

body {overflow: hidden auto;}

.cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: streach;
  flex-wrap: wrap;
  width: calc(100% + 20px);
  margin-right: -20px;
  margin-bottom: -20px;
  counter-reset: steps;
}

.card {
  display: block;
  width: calc(100% / 2 - 20px);
  min-height: 380px;
  background: #fff;
  box-shadow: 0 5px 10px 0 rgba(0,0,0, .15);
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
}

.card::after {
  counter-increment: steps;
  content: counter(steps, decimal-leading-zero);
  display: inline-block;
  position: absolute;
  font-size: 200%;
  color: rgba(0,0,0, .2);
  right: 10px;
  bottom: 15px;
  pointer-events: none;
}

.card__image {
  display: block;
  width: 100%;
  position: relative;
}

.card__image::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 34.16%;
}

.card__image img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
}

.card__info {
  display: block;
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;
}

.card__info-title {
  font-size: 150%;
  font-weight: bold;
  color: #3015e9;
  margin: 0;
  margin-bottom: 19px;
}

.card__info-list {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card__info-list > li {
  margin-bottom: .5em;
}

<div class="cards">

  <div class="card">
    <div class="card__image">
      <img src="//i.imgur.com/gQpwb7j.png" alt="">
    </div>
    <div class="card__info">
      <h3 class="card__info-title">Введение</h3>
      <ul class="card__info-list">
        <li>Как работают сайты. Верстка</li>
        <li>Возможности HTML, CSS, JS</li>
        <li>Редактор кода. Codepen</li>
        <li>Работа с DevTools</li>
      </ul>
    </div>
  </div>

  <div class="card">
    <div class="card__image">
      <img src="//i.imgur.com/gQpwb7j.png" alt="">
    </div>
    <div class="card__info">
      <h3 class="card__info-title">Введение</h3>
      <ul class="card__info-list">
        <li>Как работают сайты. Верстка</li>
        <li>Возможности HTML, CSS, JS</li>
        <li>Редактор кода. Codepen</li>
        <li>Работа с DevTools</li>
      </ul>
    </div>
  </div>

</div>

БЛОГ НА HUSL

Как правильно верстать карточки?

Ответы (2 шт):