Создание карточки товара на CSS можно выполнить разными способами. Рассмотрим один из них.

HTML:

<div class="product-card">
  <h2>Название товара</h2>
  <img src="тут ссылка на изображение">
  <p>Описание товара</p>
  <button>Добавить в корзину</button>
</div>

CSS:

.product-card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.product-card h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.product-card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-card p {
  font-size: 16px;
  color: #888;
  margin-bottom: 10px;
}

.product-card button {
  background-color: #42b983;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.product-card button:hover {
  background-color: #36a374;
}

Код создает блок с классом “product-card”, который содержит название товара в заголовке h2, изображение, описание товара в абзаце p и кнопку “Добавить в корзину”. Блок имеет заданные размеры и закругленные углы, тень на периметре блока. С помощью CSS задаем основные стили элементов внутри блока. Также стилизуем кнопку, добавляя hover-эффект в виде смены цвета фона на более темный при наведении.

Вы можете изменять стили элементов на свое усмотрение, чтобы создать уникальный дизайн карточки товара.