Как зделать такое на HTML/css

Всё понял, давай с этим разберёмся. На картинке видно, что у нас есть три карточки с текстом и иконкой сердца сверху, и на каждой карточке есть заголовок "Bootstrap4". Это типовые компоненты карточек, которые можно выполнить с использованием HTML и CSS, а также фреймворка Bootstrap для стилей и сетки.

Для создания таких карточек в HTML/CSS тебе нужно будет сделать следующее:

1. Сначала, подключим Bootstrap к твоему проекту. Это можно сделать, добавив ссылки на Bootstrap CSS и JS в твой HTML файл:

<!-- Вставить внутри <head> тега -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3pV0tJpgO3jkF3EgtJxMlO3THiOAXsUTP5TrEiSymIDomdoQ9Il7PxMj0U" crossorigin="anonymous">

<!-- Вставить перед закрывающим тегом </body> -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

2. Затем создаем структуру карточек с использованием сетки Bootstrap (например, классы .row и .col-md-4 для разделения пространства на три равные колонки):

<div class="container">
  <div class="row">
    <!-- Карточка -->
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Bootstrap4</h5>
          <p class="card-text">Lorem ipsum...</p>
        </div>
      </div>
    </div>
    <!-- Повторяем блок карточки ещё два раза -->
  </div>
</div>

3. Для иконки сердца можно использовать Unicode символ сердца или Font Awesome иконку:

<div class="card-body">
  <div class="card-icon-top text-center">
    <!-- Пример с Unicode символом -->
    <p>&#x2764;</p>
    <!-- Пример с Font Awesome -->
    <i class="fa fa-heart"></i>
  </div>
  <h5 class="card-title">Bootstrap4</h5>
  <p class="card-text">Lorem ipsum...</p>
</div>

Если используешь Font Awesome, не забудь подключить их библиотеку:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

4. Стили для карточки и иконки сердца можешь добавить в свой CSS файл для дополнительной настройки внешнего вида. Например:

.card-icon-top {
  font-size: 24px; /* Регулируем размер иконки */
  color: #000; /* Цвет иконки */
  margin-bottom: 15px; /* Отступ снизу */
}

.card-title {
  text-align: center; /* Заголовок по центру */
  margin-bottom: 20px; /* Отступ снизу */
}

/* Дальше можешь добавить любые CSS стили, которые тебе нужны. */

Используя эти шаги ты сможешь создать похожие карточки. Если нужны именно такие же стили, как на картинке, то задай CSS свойства для шрифтов, цветов и прочего, основываясь на своем дизайне или требованиях. Удачи с проектом!