Создание карточек товаров: Тренажер CSS

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

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

Список тем

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

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

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;`).

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

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

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;`, чтобы убрать возможный нижний отступ у изображения.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

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

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`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

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

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)

Используйте 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-контейнере

Теперь, когда карточка является 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`).

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

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

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`).

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

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

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)

Расположите несколько карточек товаров в ряд. Используйте 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` для самих карточек.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Сделайте эффекты наведения на карточку (тень) и кнопку (изменение фона) более плавными. Используйте 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` — функцию времени (характер анимации).

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

Результат

Сообщения

Выполнить

Отметить решенным

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