Создание карточек товаров [Модуль 13: Практические проекты]: Тренажер CSS

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

В этой серии упражнений вы попрактикуетесь в создании и стилизации карточек товаров с использованием CSS. Каждое задание потребует от вас дополнить предоставленный CSS-код, чтобы достичь желаемого визуального результата. Задания охватывают основы блочной модели, стилизацию текста и изображений, добавление кнопок, использование Flexbox для компоновки элементов внутри карточки и между карточками, а также добавление интерактивности с помощью псевдоклассов и переходов. Вам будет предоставлен HTML-код, который изменять не нужно. Сосредоточьтесь на заполнении пропусков в CSS для стилизации элементов.

Список тем

Базовая структура карточки

id: 37526_product-card-1

Создайте основу для карточки товара. Задайте внешние отступы, внутренние отступы и добавьте рамку вокруг карточки, чтобы визуально выделить её на странице. Это первый шаг к формированию контейнера для содержимого товара.

CSS

.product-card {
  width: 200px; /* Ширина задана для примера */
  input1: 15px; /* Внешний отступ */
  input2: 10px; /* Внутренний отступ */
  input3: 1px solid #ccc; /* Рамка */
  background-color: #fff;
}

                     .product-card {
  width: 200px; /* Ширина задана для примера */
  input1: 15px; /* Внешний отступ */
  input2: 10px; /* Внутренний отступ */
  input3: 1px solid #ccc; /* Рамка */
  background-color: #fff;
}

HTML

<div class="product-card">
  <p>Карточка товара</p>
</div>

Используйте свойства `margin` для создания внешних отступов (например, `margin: 15px;`), `padding` для внутренних отступов (например, `padding: 10px;`) и `border` для добавления рамки (например, `border: 1px solid #ccc;`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление изображения товара

id: 37526_product-card-2

Добавьте изображение в карточку товара. Убедитесь, что изображение не выходит за пределы карточки и его ширина адаптируется к ширине контейнера. Это сделает карточку более информативной и визуально привлекательной.

CSS

.product-card {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
}

.product-card input1 {
  input2: 100%;
  height: auto; /* Сохраняем пропорции */
  input3: block; /* Убираем лишний отступ снизу */
}

                     .product-card {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
}

.product-card input1 {
  input2: 100%;
  height: auto; /* Сохраняем пропорции */
  input3: block; /* Убираем лишний отступ снизу */
}

HTML

<div class="product-card">
  <img src="https://naytikurs.ru/img/1.png" alt="Товар 1">
  <p>Описание товара...</p>
</div>

Используйте селектор для тега `img` внутри `.product-card`. Чтобы изображение масштабировалось и не превышало ширину родительского контейнера, используйте свойство `max-width` со значением `100%`. Добавьте `display: block;`, чтобы убрать возможный нижний отступ у изображения.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Стилизация текста: Заголовок и Цена

id: 37526_product-card-3

Отформатируйте заголовок и цену товара. Сделайте заголовок более заметным, используя жирное начертание, а цену выровняйте по правому краю карточки для лучшей читаемости и визуальной структуры.

CSS

.product-card {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
}

.product-card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px; /* Добавим отступ снизу */
}

.product-title {
  input1: bold;
  margin-bottom: 5px;
  font-size: 1.1em;
}

.product-price {
  input2: right;
  font-size: 1.2em;
  color: #e44d26;
  margin-top: 10px;
}

                     .product-card {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
}

.product-card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px; /* Добавим отступ снизу */
}

.product-title {
  input1: bold;
  margin-bottom: 5px;
  font-size: 1.1em;
}

.product-price {
  input2: right;
  font-size: 1.2em;
  color: #e44d26;
  margin-top: 10px;
}

HTML

<div class="product-card">
  <img src="https://naytikurs.ru/img/2.png" alt="Товар 2">
  <h3 class="product-title">Название товара</h3>
  <p>Краткое описание этого замечательного товара.</p>
  <div class="product-price">999 руб.</div>
</div>

Для заголовка (`.product-title`) используйте свойство `font-weight` со значением `bold`. Для цены (`.product-price`) используйте свойство `text-align` со значением `right`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Добавление и стилизация кнопки

id: 37526_product-card-4

Добавьте кнопку "Купить" в карточку товара. Задайте ей базовые стили: цвет фона, цвет текста, внутренние отступы. Также уберите стандартную рамку и измените вид курсора при наведении на кнопку, чтобы пользователь понимал, что это интерактивный элемент.

CSS

.product-card {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
}

/* Стили для img, title, price из предыдущих шагов */
.product-card img {
  max-width: 100%; height: auto; display: block; margin-bottom: 10px;
}
.product-title {
  font-weight: bold; margin-bottom: 5px; font-size: 1.1em;
}
.product-price {
  text-align: right; font-size: 1.2em; color: #e44d26; margin-top: 10px;
}

.product-button {
  display: block; /* Чтобы кнопка заняла всю доступную ширину */
  width: 100%;
  padding: 8px 0;
  margin-top: 15px;
  background-color: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  input1: none;
  border-radius: 5px;
  input2: pointer;
}

                     .product-card {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
}

/* Стили для img, title, price из предыдущих шагов */
.product-card img {
  max-width: 100%; height: auto; display: block; margin-bottom: 10px;
}
.product-title {
  font-weight: bold; margin-bottom: 5px; font-size: 1.1em;
}
.product-price {
  text-align: right; font-size: 1.2em; color: #e44d26; margin-top: 10px;
}

.product-button {
  display: block; /* Чтобы кнопка заняла всю доступную ширину */
  width: 100%;
  padding: 8px 0;
  margin-top: 15px;
  background-color: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  input1: none;
  border-radius: 5px;
  input2: pointer;
}

HTML

<div class="product-card">
  <img src="https://naytikurs.ru/img/4.png" alt="Товар 3">
  <h3 class="product-title">Еще один товар</h3>
  <div class="product-price">1200 руб.</div>
  <a href="#" class="product-button">Купить</a>
</div>

Используйте селектор `.product-button`. Задайте `background-color`, `color`, `padding`. Чтобы убрать рамку, используйте `border: none;`. Для изменения курсора при наведении используйте свойство `cursor` со значением `pointer`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Внутренняя структура карточки (Flexbox)

id: 37526_product-card-5

Используйте Flexbox для управления расположением элементов внутри карточки. Сделайте так, чтобы карточка стала flex-контейнером, а её дочерние элементы располагались в колонку. Это подготовит основу для более сложного позиционирования, например, прижатия кнопки к низу.

CSS

.product-card {
  width: 220px; /* Немного увеличим ширину */
  height: 350px; /* Зададим фиксированную высоту для демонстрации */
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
  input1: flex;
  input2: column;
}

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

.product-title {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 1.1em;
}

.product-description {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 10px;
  /* Добавим свойство для растяжения описания */
  flex-grow: 1; 
}

.product-price {
  text-align: right;
  font-size: 1.2em;
  color: #e44d26;
  margin-top: auto; /* Отодвинем цену и кнопку вниз */
  padding-top: 10px; /* Добавим отступ сверху для цены */
}

.product-button {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin-top: 10px; /* Отступ кнопки от цены */
  background-color: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

                     .product-card {
  width: 220px; /* Немного увеличим ширину */
  height: 350px; /* Зададим фиксированную высоту для демонстрации */
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
  input1: flex;
  input2: column;
}

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

.product-title {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 1.1em;
}

.product-description {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 10px;
  /* Добавим свойство для растяжения описания */
  flex-grow: 1; 
}

.product-price {
  text-align: right;
  font-size: 1.2em;
  color: #e44d26;
  margin-top: auto; /* Отодвинем цену и кнопку вниз */
  padding-top: 10px; /* Добавим отступ сверху для цены */
}

.product-button {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin-top: 10px; /* Отступ кнопки от цены */
  background-color: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

HTML

<div class="product-card">
  <img src="https://naytikurs.ru/img/5.png" alt="Товар 4">
  <h3 class="product-title">Товар с описанием</h3>
  <p class="product-description">Это более подробное описание товара, которое может занимать несколько строк.</p>
  <div class="product-price">1500 руб.</div>
  <a href="#" class="product-button">В корзину</a>
</div>

Примените к классу `.product-card` свойство `display` со значением `flex`. Затем используйте свойство `flex-direction` со значением `column`, чтобы элементы выстроились вертикально.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Выравнивание элементов во Flex-контейнере

id: 37526_product-card-6

Теперь, когда карточка является flex-контейнером с вертикальным расположением элементов, используйте возможности Flexbox, чтобы прижать кнопку к самому низу карточки, независимо от высоты описания товара. Описание должно занимать все доступное пространство между заголовком и блоком цены/кнопки.

CSS

.product-card {
  width: 220px;
  height: 380px; /* Увеличим высоту для наглядности */
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
  input1: flex;
  input2: column;
}

.product-card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  flex-shrink: 0; /* Предотвращаем сжатие картинки */
}

.product-title {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 1.1em;
  flex-shrink: 0;
}

.product-description {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 10px;
  input3: 1; /* Растягиваем описание */
}

.product-price {
  text-align: right;
  font-size: 1.2em;
  color: #e44d26;
  input4: auto; /* Отодвигаем цену и кнопку вниз */
  padding-top: 10px;
  flex-shrink: 0;
}

.product-button {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin-top: 10px;
  background-color: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
}

                     .product-card {
  width: 220px;
  height: 380px; /* Увеличим высоту для наглядности */
  padding: 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px;
  input1: flex;
  input2: column;
}

.product-card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  flex-shrink: 0; /* Предотвращаем сжатие картинки */
}

.product-title {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 1.1em;
  flex-shrink: 0;
}

.product-description {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 10px;
  input3: 1; /* Растягиваем описание */
}

.product-price {
  text-align: right;
  font-size: 1.2em;
  color: #e44d26;
  input4: auto; /* Отодвигаем цену и кнопку вниз */
  padding-top: 10px;
  flex-shrink: 0;
}

.product-button {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin-top: 10px;
  background-color: #007bff;
  color: white;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
}

HTML

<div class="product-card">
  <img src="https://naytikurs.ru/img/6.png" alt="Товар 5">
  <h3 class="product-title">Длинное название товара, которое может переноситься</h3>
  <p class="product-description">Это описание товара. Оно должно растягиваться, чтобы заполнить доступное пространство, отодвигая цену и кнопку вниз.</p>
  <div class="product-price">2500 руб.</div>
  <a href="#" class="product-button">Добавить</a>
</div>

Чтобы описание (`.product-description`) растягивалось, используйте свойство `flex-grow: 1;`. Чтобы блок с ценой и кнопкой прижался к низу, можно обернуть их в дополнительный `div` и применить к нему `margin-top: auto;`, либо применить `margin-top: auto;` к первому элементу, который нужно 'оттолкнуть' вниз (в данном случае, это может быть `.product-price`, если он идет перед кнопкой). В текущей структуре HTML и CSS `margin-top: auto;` уже применен к `.product-price`, а `flex-grow: 1;` к `.product-description`. Ваша задача - убедиться, что карточка является flex-контейнером (`display: flex`) и элементы расположены в колонку (`flex-direction: column`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Эффект при наведении на кнопку

id: 37526_product-card-7

Добавьте визуальный отклик при наведении курсора на кнопку "Купить". Измените её цвет фона, чтобы пользователь получал обратную связь о своих действиях. Это стандартная практика для интерактивных элементов.

CSS

/* ... предыдущие стили ... */
.product-card {
  width: 220px; height: 380px; padding: 15px; border: 1px solid #ccc;
  background-color: #fff; margin: 15px; display: flex; flex-direction: column;
}
.product-card img { max-width: 100%; height: auto; display: block; margin-bottom: 10px; flex-shrink: 0; }
.product-title { font-weight: bold; margin-bottom: 5px; font-size: 1.1em; flex-shrink: 0; }
.product-description { font-size: 0.9em; color: #555; margin-bottom: 10px; flex-grow: 1; }
.product-price { text-align: right; font-size: 1.2em; color: #e44d26; margin-top: auto; padding-top: 10px; flex-shrink: 0; }

.product-button {
  display: block; width: 100%; padding: 8px 0; margin-top: 10px;
  background-color: #007bff; color: white; text-align: center;
  text-decoration: none; border: none; border-radius: 5px; cursor: pointer; flex-shrink: 0;
}

input1 {
  input2: #0056b3; /* Новый цвет фона при наведении */
}

                     /* ... предыдущие стили ... */
.product-card {
  width: 220px; height: 380px; padding: 15px; border: 1px solid #ccc;
  background-color: #fff; margin: 15px; display: flex; flex-direction: column;
}
.product-card img { max-width: 100%; height: auto; display: block; margin-bottom: 10px; flex-shrink: 0; }
.product-title { font-weight: bold; margin-bottom: 5px; font-size: 1.1em; flex-shrink: 0; }
.product-description { font-size: 0.9em; color: #555; margin-bottom: 10px; flex-grow: 1; }
.product-price { text-align: right; font-size: 1.2em; color: #e44d26; margin-top: auto; padding-top: 10px; flex-shrink: 0; }

.product-button {
  display: block; width: 100%; padding: 8px 0; margin-top: 10px;
  background-color: #007bff; color: white; text-align: center;
  text-decoration: none; border: none; border-radius: 5px; cursor: pointer; flex-shrink: 0;
}

input1 {
  input2: #0056b3; /* Новый цвет фона при наведении */
}

HTML

<div class="product-card">
  <img src="https://naytikurs.ru/img/7.png" alt="Товар 6">
  <h3 class="product-title">Интерактивный товар</h3>
  <p class="product-description">Описание товара с кнопкой, которая меняет цвет при наведении.</p>
  <div class="product-price">850 руб.</div>
  <a href="#" class="product-button">Купить</a>
</div>

Используйте псевдокласс `:hover` для селектора кнопки (`.product-button:hover`). Внутри этого правила измените свойство `background-color` на другой цвет (например, `#0056b3`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Эффект тени при наведении на карточку

id: 37526_product-card-8

Добавьте эффект при наведении на всю карточку товара. При наведении курсора на карточку должна появляться легкая тень. Это сделает интерфейс более динамичным и выделит активную карточку.

CSS

.product-card {
  width: 220px; height: 380px; padding: 15px; border: 1px solid #ccc;
  background-color: #fff; margin: 15px; display: flex; flex-direction: column;
  /* Добавим transition для плавности */
  transition: box-shadow 0.3s ease;
}

/* ... остальные стили ... */
.product-card img { max-width: 100%; height: auto; display: block; margin-bottom: 10px; flex-shrink: 0; }
.product-title { font-weight: bold; margin-bottom: 5px; font-size: 1.1em; flex-shrink: 0; }
.product-description { font-size: 0.9em; color: #555; margin-bottom: 10px; flex-grow: 1; }
.product-price { text-align: right; font-size: 1.2em; color: #e44d26; margin-top: auto; padding-top: 10px; flex-shrink: 0; }
.product-button { display: block; width: 100%; padding: 8px 0; margin-top: 10px; background-color: #28a745; color: white; text-align: center; text-decoration: none; border: none; border-radius: 5px; cursor: pointer; flex-shrink: 0; }
.product-button:hover { background-color: #218838; }

input1 {
  input2: 0 4px 8px rgba(0, 0, 0, 0.1);
}

                     .product-card {
  width: 220px; height: 380px; padding: 15px; border: 1px solid #ccc;
  background-color: #fff; margin: 15px; display: flex; flex-direction: column;
  /* Добавим transition для плавности */
  transition: box-shadow 0.3s ease;
}

/* ... остальные стили ... */
.product-card img { max-width: 100%; height: auto; display: block; margin-bottom: 10px; flex-shrink: 0; }
.product-title { font-weight: bold; margin-bottom: 5px; font-size: 1.1em; flex-shrink: 0; }
.product-description { font-size: 0.9em; color: #555; margin-bottom: 10px; flex-grow: 1; }
.product-price { text-align: right; font-size: 1.2em; color: #e44d26; margin-top: auto; padding-top: 10px; flex-shrink: 0; }
.product-button { display: block; width: 100%; padding: 8px 0; margin-top: 10px; background-color: #28a745; color: white; text-align: center; text-decoration: none; border: none; border-radius: 5px; cursor: pointer; flex-shrink: 0; }
.product-button:hover { background-color: #218838; }

input1 {
  input2: 0 4px 8px rgba(0, 0, 0, 0.1);
}

HTML

<div class="product-card">
  <img src="https://naytikurs.ru/img/8.png" alt="Товар 7">
  <h3 class="product-title">Товар с тенью</h3>
  <p class="product-description">Эта карточка будет отбрасывать тень при наведении на нее курсора.</p>
  <div class="product-price">1100 руб.</div>
  <a href="#" class="product-button">Подробнее</a>
</div>

Используйте псевдокласс `:hover` для селектора карточки (`.product-card:hover`). Внутри этого правила добавьте свойство `box-shadow` для создания тени. Пример значения: `0 4px 8px rgba(0, 0, 0, 0.1);`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Размещение нескольких карточек (Flexbox)

id: 37526_product-card-9

Расположите несколько карточек товаров в ряд. Используйте Flexbox для контейнера, оборачивающего карточки, чтобы они выстроились горизонтально и переносились на следующую строку, если не помещаются в одну. Установите отступы между карточками.

CSS

.product-list {
  input1: flex;
  input2: wrap;
  input3: 15px; /* Отступ между карточками */
  /* Центрируем карточки, если в последней строке их меньше */
  justify-content: center; 
}

.product-card {
  width: 150px; /* Уменьшим ширину для размещения в ряд */
  height: 300px; /* Уменьшим высоту */
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  /* margin убран, т.к. используется gap */
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}

.product-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ... Упрощенные стили для элементов внутри карточки ... */
.product-card img { max-width: 100%; height: auto; display: block; margin-bottom: 8px; flex-shrink: 0; }
.product-title { font-weight: bold; margin-bottom: 4px; font-size: 1em; flex-shrink: 0; }
.product-description { font-size: 0.8em; color: #555; margin-bottom: 8px; flex-grow: 1; overflow: hidden; }
.product-price { text-align: right; font-size: 1em; color: #e44d26; margin-top: auto; padding-top: 8px; flex-shrink: 0; }
.product-button { display: block; width: 100%; padding: 6px 0; margin-top: 8px; background-color: #007bff; color: white; text-align: center; text-decoration: none; border: none; border-radius: 4px; cursor: pointer; flex-shrink: 0; font-size: 0.9em; }
.product-button:hover { background-color: #0056b3; }

                     .product-list {
  input1: flex;
  input2: wrap;
  input3: 15px; /* Отступ между карточками */
  /* Центрируем карточки, если в последней строке их меньше */
  justify-content: center; 
}

.product-card {
  width: 150px; /* Уменьшим ширину для размещения в ряд */
  height: 300px; /* Уменьшим высоту */
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  /* margin убран, т.к. используется gap */
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}

.product-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ... Упрощенные стили для элементов внутри карточки ... */
.product-card img { max-width: 100%; height: auto; display: block; margin-bottom: 8px; flex-shrink: 0; }
.product-title { font-weight: bold; margin-bottom: 4px; font-size: 1em; flex-shrink: 0; }
.product-description { font-size: 0.8em; color: #555; margin-bottom: 8px; flex-grow: 1; overflow: hidden; }
.product-price { text-align: right; font-size: 1em; color: #e44d26; margin-top: auto; padding-top: 8px; flex-shrink: 0; }
.product-button { display: block; width: 100%; padding: 6px 0; margin-top: 8px; background-color: #007bff; color: white; text-align: center; text-decoration: none; border: none; border-radius: 4px; cursor: pointer; flex-shrink: 0; font-size: 0.9em; }
.product-button:hover { background-color: #0056b3; }

HTML

<div class="product-list">
  <div class="product-card">
    <img src="https://naytikurs.ru/img/1.png" alt="Товар A">
    <h3 class="product-title">Товар A</h3>
    <p class="product-description">Описание A</p>
    <div class="product-price">500 р.</div>
    <a href="#" class="product-button">Купить</a>
  </div>
  <div class="product-card">
    <img src="https://naytikurs.ru/img/9.png" alt="Товар B">
    <h3 class="product-title">Товар B</h3>
    <p class="product-description">Описание B</p>
    <div class="product-price">600 р.</div>
    <a href="#" class="product-button">Купить</a>
  </div>
   <div class="product-card">
    <img src="https://naytikurs.ru/img/4.png" alt="Товар C">
    <h3 class="product-title">Товар C</h3>
    <p class="product-description">Описание C</p>
    <div class="product-price">700 р.</div>
    <a href="#" class="product-button">Купить</a>
  </div>
</div>

Создайте класс для контейнера (например, `.product-list`). Примените к нему `display: flex;`. Чтобы карточки переносились на новую строку, используйте `flex-wrap: wrap;`. Для создания отступов между карточками используйте свойство `gap` (например, `gap: 15px;`) или задайте `margin` для самих карточек.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Плавные переходы для эффектов

id: 37526_product-card-10

Сделайте эффекты наведения на карточку (тень) и кнопку (изменение фона) более плавными. Используйте CSS-переходы, чтобы изменение стилей происходило не мгновенно, а в течение заданного времени.

CSS

.product-list {
  display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;
}

.product-card {
  width: 150px; height: 300px; padding: 10px; border: 1px solid #ccc;
  background-color: #fff; display: flex; flex-direction: column;
  input1: box-shadow 0.3s ease; /* Плавный переход для тени */
}

.product-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ... стили для img, title, description, price ... */
.product-card img { max-width: 100%; height: auto; display: block; margin-bottom: 8px; flex-shrink: 0; }
.product-title { font-weight: bold; margin-bottom: 4px; font-size: 1em; flex-shrink: 0; }
.product-description { font-size: 0.8em; color: #555; margin-bottom: 8px; flex-grow: 1; overflow: hidden; }
.product-price { text-align: right; font-size: 1em; color: #e44d26; margin-top: auto; padding-top: 8px; flex-shrink: 0; }

.product-button {
  display: block; width: 100%; padding: 6px 0; margin-top: 8px;
  background-color: #28a745; color: white; text-align: center;
  text-decoration: none; border: none; border-radius: 4px; cursor: pointer;
  flex-shrink: 0; font-size: 0.9em;
  input2: background-color 0.3s ease; /* Плавный переход для фона */
}

.product-button:hover {
  background-color: #218838;
}

                     .product-list {
  display: flex; flex-wrap: wrap; gap: 15px; justify-content: center;
}

.product-card {
  width: 150px; height: 300px; padding: 10px; border: 1px solid #ccc;
  background-color: #fff; display: flex; flex-direction: column;
  input1: box-shadow 0.3s ease; /* Плавный переход для тени */
}

.product-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ... стили для img, title, description, price ... */
.product-card img { max-width: 100%; height: auto; display: block; margin-bottom: 8px; flex-shrink: 0; }
.product-title { font-weight: bold; margin-bottom: 4px; font-size: 1em; flex-shrink: 0; }
.product-description { font-size: 0.8em; color: #555; margin-bottom: 8px; flex-grow: 1; overflow: hidden; }
.product-price { text-align: right; font-size: 1em; color: #e44d26; margin-top: auto; padding-top: 8px; flex-shrink: 0; }

.product-button {
  display: block; width: 100%; padding: 6px 0; margin-top: 8px;
  background-color: #28a745; color: white; text-align: center;
  text-decoration: none; border: none; border-radius: 4px; cursor: pointer;
  flex-shrink: 0; font-size: 0.9em;
  input2: background-color 0.3s ease; /* Плавный переход для фона */
}

.product-button:hover {
  background-color: #218838;
}

HTML

<div class="product-list">
  <div class="product-card">
    <img src="https://naytikurs.ru/img/1.png" alt="Товар A">
    <h3 class="product-title">Плавный Товар A</h3>
    <p class="product-description">Описание A</p>
    <div class="product-price">500 р.</div>
    <a href="#" class="product-button">Купить</a>
  </div>
  <div class="product-card">
    <img src="https://naytikurs.ru/img/9.png" alt="Товар B">
    <h3 class="product-title">Плавный Товар B</h3>
    <p class="product-description">Описание B</p>
    <div class="product-price">600 р.</div>
    <a href="#" class="product-button">Купить</a>
  </div>
</div>

Добавьте свойство `transition` к элементам, для которых вы определяли стили в `:hover`. Для карточки (`.product-card`) добавьте `transition: box-shadow 0.3s ease;`. Для кнопки (`.product-button`) добавьте `transition: background-color 0.3s ease;`. Число `0.3s` задает длительность перехода, а `ease` — функцию времени (характер анимации).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку