77 lines
2.0 KiB
CSS
77 lines
2.0 KiB
CSS
.popular-products { /* Контейнер секции */
|
||
max-width: 1200px;
|
||
margin: 40px auto; /* Центрирование */
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.popular-products h2 { /* Заголовок */
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.products-grid { /* Сетка товаров */
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); /* Автоподбор колонок */
|
||
gap: 30px; /* Расстояние между карточками */
|
||
}
|
||
|
||
.product-card { /* Карточка товара */
|
||
border: 1px solid #eee;
|
||
border-radius: 12px;
|
||
overflow: hidden; /* Скрытие выходящего контента */
|
||
transition: transform 0.3s; /* Анимация */
|
||
}
|
||
|
||
.product-card:hover { /* Эффект при наведении */
|
||
transform: translateY(-5px); /* Сдвиг вверх */
|
||
}
|
||
|
||
.product-image { /* Изображение товара */
|
||
width: 100%;
|
||
height: 200px;
|
||
object-fit: cover; /* Обрезка изображения */
|
||
}
|
||
|
||
.product-card h3 { /* Название товара */
|
||
padding: 15px 15px 0;
|
||
margin: 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.product-card p { /* Описание товара */
|
||
padding: 10px 15px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin: 0;
|
||
}
|
||
|
||
.product-footer { /* Подвал карточки */
|
||
padding: 15px;
|
||
display: flex;
|
||
justify-content: space-between; /* Распределение пространства */
|
||
align-items: center;
|
||
}
|
||
|
||
.price {
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.details-btn { /* Кнопка "Подробнее" */
|
||
background: #f8f9fa;
|
||
border: 1px solid #ddd;
|
||
padding: 8px 15px;
|
||
border-radius: 20px;
|
||
cursor: pointer; /* Курсор-указатель */
|
||
transition: all 0.3s;
|
||
opacity: 0;
|
||
}
|
||
|
||
.product-card:hover .details-btn { /* Кнопка при наведении */
|
||
background: #6C63FF;
|
||
color: white;
|
||
border-color: #6C63FF;
|
||
opacity: 1; /* Показываем кнопку */
|
||
}
|