Как сверстать такую карточку?

Для того чтобы сверстать карточку в HTML, вам потребуется использовать комбинацию различных элементов и стилей. Вот подробная инструкция о том, как сверстать такую карточку:

Шаг 1: Создайте HTML-структуру карточки
Начните с создания контейнера-обертки для карточки:

<div class="card">
  <!-- Ваш контент будет здесь -->
</div>

Шаг 2: Добавьте изображение на карточку
Внутри контейнера-обертки добавьте элемент <img> для отображения изображения:

<div class="card">
  <img src="path/to/image.jpg" alt="Картинка">
</div>

Шаг 3: Добавьте заголовок и описание на карточку
Добавьте элементы <h> для заголовка и <p> для описания:

<div class="card">
  <img src="path/to/image.jpg" alt="Картинка">
  <h2>Заголовок карточки</h2>
  <p>Описание карточки</p>
</div>

Шаг 4: Примените стили к карточке
Теперь добавьте CSS-стили для карточки. Вы можете задать стили класса .card внутри тега <style> или в отдельном файле CSS:

<style>
.card {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 10px;
}

h2 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 16px;
  color: #666;
}
</style>

Шаг 5: Дополнительные стили и элементы контроля
Вы также можете добавить дополнительные стили и элементы контроля, такие как кнопка "Подробнее" или иконки социальных сетей. Например:

<div class="card">
  <img src="path/to/image.jpg" alt="Картинка">
  <h2>Заголовок карточки</h2>
  <p>Описание карточки</p>
  <a href="#" class="button">Подробнее</a>
  <div class="social-icons">
    <a href="#" class="icon-facebook"></a>
    <a href="#" class="icon-twitter"></a>
    <a href="#" class="icon-instagram"></a>
  </div>
</div>

Вы также можете добавить стили для кнопки и иконок:

<style>
.button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #666;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.icon-facebook {
  background-image: url(path/to/facebook-icon.png);
  /* Дополнительные стили для иконки */
}

.icon-twitter {
  background-image: url(path/to/twitter-icon.png);
  /* Дополнительные стили для иконки */
}

.icon-instagram {
  background-image: url(path/to/instagram-icon.png);
  /* Дополнительные стили для иконки */
}
</style>

Теперь у вас есть подробная инструкция о том, как сверстать карточку в HTML. Вы можете настроить эти стили согласно вашим требованиям и дополнительно добавить контент или элементы управления на карточку.