Как сделать адаптивную карточку товара с кнопками при наведении используя HTML и CSS | How to make Responsive Product Card
Карточка товара обычно содержат такие элементы, как изображение, различную информацию, кнопки призыва к действию, значки и т. д. Товары или услуги для продажи представлены посетителям через этот тип адаптивной карточки товара. Эти карточки товаров в наши дни часто можно увидеть на сайтах электронной коммерции. Они представлены потенциальным клиентам в четкой и визуально привлекательной форме. Одним словом, карточки товаров выступают в качестве ценного элемента дизайна любого сайта электронной коммерции, обеспечивающего пользовательское увеличение продаж и вовлеченности.
Сегодня мы создали шесть простых карточек товаров. У каждого из них есть изображение, название продукта, рейтинг и цена. При желании вы можете добавить дополнительную информацию. При наведении курсора на изображение карточки появятся две кнопки призыва к действию: «Добавить в корзину» и «Просмотреть подробности» с тёмным наложением фона на изображение. Для разработки карточек использовалась сетка CSS Flexbox. Наконец, макет настраивается для небольших устройств с помощью медиазапросов CSS.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете загрузить исходный код, нажав кнопку «СКАЧАТЬ». Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, оставьте комментарий ниже.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Product Card</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="product-area">
<div class="img-area">
<img alt="Product 1" src="img/1.jpg">
<div class="product-overlay">
<div class="overlay">
<a class="btn-1" href="#">Add to Cart</a>
<a class="btn-2" href="#">View Details</a>
</div>
</div>
</div>
<div class="info-area">
<h3>Product name</h3>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<div class="product-price">
$19.99
</div>
</div>
</div>
<div class="product-area">
<div class="img-area">
<img alt="" src="img/2.jpg">
<div class="product-overlay">
<div class="overlay">
<a class="btn-1" href="#">Add to Cart</a>
<a class="btn-2" href="#">View Details</a>
</div>
</div>
</div>
<div class="info-area">
<h3>Product name</h3>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<div class="product-price">
$24.99
</div>
</div>
</div>
<div class="product-area">
<div class="img-area">
<img alt="" src="img/3.jpg">
<div class="product-overlay">
<div class="overlay">
<a class="btn-1" href="#">Add to Cart</a>
<a class="btn-2" href="#">View Details</a>
</div>
</div>
</div>
<div class="info-area">
<h3>Product name</h3>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</div>
<div class="product-price">
$39.99
</div>
</div>
</div>
<div class="product-area">
<div class="img-area">
<img alt="" src="img/4.jpg">
<div class="product-overlay">
<div class="overlay">
<a class="btn-1" href="#">Add to Cart</a>
<a class="btn-2" href="#">View Details</a>
</div>
</div>
</div>
<div class="info-area">
<h3>Product name</h3>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<div class="product-price">
$12.99
</div>
</div>
</div>
<div class="product-area">
<div class="img-area">
<img alt="" src="img/5.jpg">
<div class="product-overlay">
<div class="overlay">
<a class="btn-1" href="#">Add to Cart</a>
<a class="btn-2" href="#">View Details</a>
</div>
</div>
</div>
<div class="info-area">
<h3>Product name</h3>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<div class="product-price">
$9.99
</div>
</div>
</div>
<div class="product-area">
<div class="img-area">
<img alt="" src="img/6.jpg">
<div class="product-overlay">
<div class="overlay">
<a class="btn-1" href="#">Add to Cart</a>
<a class="btn-2" href="#">View Details</a>
</div>
</div>
</div>
<div class="info-area">
<h3>Product name</h3>
<div class="rating">
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<div class="product-price">
$29.99
</div>
</div>
</div>
</div>
</body>
</html>
CSS КОД:
body {
background: #262626;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 80%;
margin: 5% auto;
}
.product-area {
width: 30%;
margin-bottom: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
background-color: #fff;
border-radius: 25px;
}
.img-area {
position: relative;
width: 100%;
}
.img-area img {
width: 100%;
height: auto;
display: block;
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0
}
.product-overlay:hover {
opacity: 0.9;
background-color: rgba(0, 0, 0, 0.6);
transition: opacity 0.5s ease;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.btn-1 {
display: inline-block;
padding: 10px 20px;
background-color: #e74c3c;
color: #fff;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
}
.btn-2 {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
}
.info-area {
padding: 10px 20px;
text-align: center;
background: #000;
}
.info-area h3 {
font-size: 30px;
margin: 0;
margin-bottom: 10px;
color: #fff;
font-family: 'Bebas Neue', sans-serif;
}
.rating {
margin-bottom: 10px;
}
.rating span {
color: #fff;
}
.checked {
color: orange !important;
}
.product-price {
font-size: 25px;
color: #fff;
font-weight: bold;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.product-area {
width: 48%;
}
}
@media (max-width: 576px) {
.product-area {
width: 100%;
}
}
Пожалуйста, поделитесь содержанием нашего сайта с другими, если вы считаете его полезным. Большое спасибо за посещение нашего сайта.
0 Комментарии