Design elements used to present website content to visitors in a structured and organized manner are called CSS cards. Product cards are one of these CSS cards. These product card CSS or product card HTML are rectangular or square type. Today we will design some Responsive Product Cards that will look a lot like the product cards of e-commerce websites. The video tutorial below shows how to create this snippet. Watch the video before collecting the source code.
Video Tutorial:
A CSS product or HTML Product Card usually contains elements such as an image, various information, call-to-action buttons, icons, etc. Products or services for sale are presented to visitors through this type of responsive product card. These product cards are often seen on e-commerce websites these days. These product cards are presented to potential customers in a clear and visually appealing way. In a word, product cards act as a valuable design element of any e-commerce website for positive user experience, sales increase, and engagement.
You May Also Like:
- CSS Flexbox Image Gallery
- Product Cards with JavaScript Modal Popup
- Animated Background using HTML CSS
In our snippet today, we've created six simple product cards. Each of them has an image, product name, ranking, and price mentioned. You can add more information if you want. Hovering over the image of the card will bring up two call-to-action buttons named 'Add to Court' and 'View Details' with a blackish overlay. CSS Flexbox's grid system has been used to design the cards. Finally, the layout is adjusted for smaller devices via CSS media queries.
Source Code
<!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%;
}
}
For Original Post Click Here
Top comments (0)