How to make Responsive Product Card

responsive product card design

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. Subscribe to our YouTube channel if you like the content.

Video Tutorial:

Hope you have watched this responsive product card 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

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.

You may like this:

How to Make Responsive Product Card [ Source Code ]:

To create this snippet, create a CSS and an HTML file and paste the following code into it. Save and open the file in your browser. If the code does not work properly, download the code from the download button below.

ADD 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>

ADD 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%;
	}
}

Hope the code works. Our website has over 100 snippets of CSS Animation, Full Website Design, JavaScript Projects, CSS Text Animation, CSS Background Animation, etc. Click on the Load More button below our website homepage to get them. Please share our website content with others if you find it useful. Thank you very much for visiting our website.

Post a Comment

Please Do not Enter any spam link in the comment box