Элементы дизайна, используемые для структурированного и организованного представления контента веб-сайта посетителям, называются CSS-карточками. Карточки товаров — это одна из таких карточек CSS. CSS-код карточки товара или HTML-код карточки товара имеют прямоугольный или квадратный тип. Сегодня мы разработаем адаптивные карточки товаров, которые будут очень похожи на карточки товаров на сайтах электронной коммерции.
Продукт CSS или карточка продукта HTML обычно содержат такие элементы, как изображение, различную информацию, кнопки призыва к действию, значки и т. д. Продукты или услуги для продажи представлены посетителям через этот тип адаптивной карты продукта. Эти карточки товаров в наши дни часто можно увидеть на сайтах электронной коммерции. Эти карточки товаров представлены потенциальным клиентам в четкой и визуально привлекательной форме. Одним словом, карточки товаров выступают в качестве ценного элемента дизайна любого веб-сайта электронной коммерции, обеспечивающего положительный пользовательский опыт, увеличение продаж и вовлеченности.
В нашем сегодняшнем фрагменте мы создали шесть простых карточек товаров. У каждого из них есть изображение, название продукта, рейтинг и цена. При желании вы можете добавить дополнительную информацию. При наведении курсора на изображение карточки появятся две кнопки призыва к действию: «Добавить в суд» и «Просмотреть подробности» с черноватым наложением. Для разработки карточек использовалась сетка CSS Flexbox. Наконец, макет настраивается для небольших устройств с помощью медиазапросов CSS.
Как сделать адаптивную карточку продукта [Исходный код]:
Чтобы создать этот фрагмент, создайте файл CSS и HTML и вставьте в него следующий код. Сохраните и откройте файл в браузере.
Если у вас возникнут какие-либо проблемы при создании этого кода, вы можете загрузить исходный код, нажав кнопку «СКАЧАТЬ». Кроме того, если у вас есть какие-либо вопросы, предложения или отзывы, оставьте комментарий ниже.
<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<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>
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 Комментарии