Как сверстать данные карточки?

Question

[AvenueWork]

Как сверстать данные карточки?

Comments

[Юрий Иванов]

а в чем конкретно сложность? расположить сами блоки? спозиционирова картинки? нумерацию картинок сделать

[AvenueWork]

Юрий Иванов, расположение блоков, как на фото.

[AvenueWork]

Юрий Иванов, сами блоки я сверстал, но не знаю какие классы нужно задать, чтобы в CSS нормально блоки выставить, соблюдая формат, как на скрине выше... Код бы.

[Юрий Иванов]

AvenueWork, вот, кодепен https://codepen.io/scrappyjs666/pen/oNpWNvO, немного не красиво отображает блок, получается вот так

то что надо?

[AvenueWork]

Юрий Иванов, формально да, только есть еще вопросы. Возможно их задать тебе в Telegram?

[Юрий Иванов]

AvenueWork, Я сам учу верстку чуть больше месяца, так что не думаю, что это хорошая идея)

Answer 1

[Anonymous Penguin]

Лень полностью. Вот главное, а там разберешься.

<div class="course-modules">
  <div class="course-modules__wrapper">
    <div class="course-modules__card card">
      <div class="card__image">
        <img src="img/intro.png">
      </div>
      <div class="card__content">
        <h3 class="card__title">Введение</h3>
        <ul class="card__list">
          <li>Как работают сайты. Верстка</li>
          <li>Возможности HTML, CSS, JS</li>
          <li>Редактор кода. Codepen</li><li>
          </li><li>Работа с Devtools</li>
        </ul>
      </div>
      <p class="card__number">01</p>
    </div>
    <div class="course-modules__card card">
      <div class="card__image">
        <img src="img/intro.png">
      </div>
      <div class="card__content">
        <h3 class="card__title">Введение</h3>
        <ul class="card__list">
          <li>Как работают сайты. Верстка</li>
          <li>Возможности HTML, CSS, JS</li>
          <li>Редактор кода. Codepen</li><li>
          </li><li>Работа с Devtools</li>
        </ul>
      </div>
      <p class="card__number">01</p>
    </div>
    <div class="course-modules__card card">
      <div class="card__image">
        <img src="img/intro.png">
      </div>
      <div class="card__content">
        <h3 class="card__title">Введение</h3>
        <ul class="card__list">
          <li>Как работают сайты. Верстка</li>
          <li>Возможности HTML, CSS, JS</li>
          <li>Редактор кода. Codepen</li><li>
          </li><li>Работа с Devtools</li>
        </ul>
      </div>
      <p class="card__number">01</p>
    </div><div class="course-modules__card card">
      <div class="card__image">
        <img src="img/intro.png">
      </div>
      <div class="card__content">
        <h3 class="card__title">Введение</h3>
        <ul class="card__list">
          <li>Как работают сайты. Верстка</li>
          <li>Возможности HTML, CSS, JS</li>
          <li>Редактор кода. Codepen</li><li>
          </li><li>Работа с Devtools</li>
        </ul>
      </div>
      <p class="card__number">01</p>
    </div>
  </div>
</div>

.course-modules {}
.course-modules__wrapper {
  display: grid;
  grid-template-columns: 300px 300px;
}
.course-modules__card {
  border: 1px solid #000;
  margin: 10px;
}
.card {}
.card__wrapper {
  margin: 10px;
}
.card__image {
  
}
.card__img {
  width: 100%;
}
.card__content {
  padding: 15px 15px 0 15px;
}
.card__title {
  font-size: 25px;
  margin: 10px 0;
}
.card__list {
  list-style-type: none;
  display: block;
  padding: 0;
  margin: 0;
}
.card__number {
  margin: 5px 10px;
  font-size: 25px;
  text-align: right;
}

Comments

[AvenueWork]

Это то, что мне нужно!

[Anonymous Penguin]

AvenueWork, если помог, отметь решением, пожалуйста :)