Как создать: продуктовая карта

Учимся использовать CSS для создания продуктовой карты.

Jeans
Профильные джинсы

$19.99

Некоторый текст о джинсах. Очень узкие и удобные lorem ipsum lorem jeansum. Lorem jeamsun denim lorem jeansum.

Попробуйте сами

Как создать продуктовую карту

первый_шаг - добавить HTML:

<div class="card">
  <img src="jeans3.jpg" alt="Джинсы" style="ширина:100%">
  <h1>Профильные джинсы</h1>
  <p class="price">$19.99</p>
  <p>Некоторый текст о джинсах..</p>
  <p><button>Добавить в корзину</button></p>
</div>

второй_шаг - добавить CSS:

.card {
  тень: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  макс_ширина: 300px;
  отступ: auto;
  выравнивание_текста: по_центру;
  шрифт_семейство: arial;
}
.price {
  цвет: серый;
  размер_шрифта: 22px;
}
.card button {
  рамка: none;
  контур: 0;
  отступ: 12px;
  цвет: белый;
  цвет_фона: #000;
  выравнивание_текста: по_центру;
  курсор: указатель;
  ширина: 100%;
  размер_шрифта: 18px;
}
.card button:hover {
  opacity: 0.7;
}

Попробуйте сами