Responsive product card design HTML CSS

When we go to buy some clothes or gadgets on an online store website, we notice some special cards that give an idea about that product. These cards are product cards which can be called mini pages that contain a lot of important information. Today's snippet is about Responsive product card design HTML CSS. The coding process of this product card design is shown in the video tutorial below. Take a look at the video tutorial before collecting the code.

Video Tutorial:

We hope you have watched the video tutorial. Any HTML CSS product card has a large image that lets us know what the product will look like. Below the image is the name of the product and the amount to be paid to buy it. This Responsive Product Card has a small description of what it is and what we can do with it. Some product cards have a heart or stars option to let us know how much other customers have liked the product. It can be called a review system. Online products cannot be touched, right? So there is a special button on that product card which is known as 'add to cart'. After choosing the product and clicking on that button, it goes to a virtual shopping cart. It's like a real cart that we use in the store. After adding all the desired items to the cart, you have to buy them.

We have added three cards to our 'Product Card Design HTML CSS' snippet. Each card has an image, product name, price, and a brief description. If you hover over the cards, a blue overlay will appear on the image. We will also see two buttons on that overlay. One is the Add to Cart button and the other is the View Details button. We added a little animation to the hover state to make the snippet a little more interesting. The snippet is designed using the CSS FlexBox property so it is auto-responsive.

You May Also Like:

Responsive product card design HTML CSS [ Source Code ]:

To create this responsive product card with image HTML CSS, first, we need to create some files like HTML and CSS. We need to link the CSS file to the HTML file. After that, you need to copy the code from the code boxes below. Then paste the code you copied into your file. If you find any errors after checking the code in your browser, download it using 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="style.css">
</head>
<body>
    
  <div class="wrapper">

    <div class="single-card">
      <div class="img-area">
        <img src="img/1.jpg" alt="">
        <div class="overlay">
          <button class="add-to-cart">Add to Cart</button>
          <button class="view-details">View Details</button>
        </div>
      </div>
      
      <div class="info">
        <h3>Mobile Phone</h3>
        <p class="price">$199.99</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
      </div>
    </div>
  
    <div class="single-card">
      <div class="img-area">
        <img src="img/2.jpg" alt="">
        <div class="overlay">
          <button class="add-to-cart">Add to Cart</button>
          <button class="view-details">View Details</button>
        </div>
      </div>
      <div class="info">
        <h3>Laptop</h3>
        <p class="price">$599.99</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
      </div>
    </div>
  
    <div class="single-card">
      <div class="img-area">
        <img src="img/3.jpg" alt="">
        <div class="overlay">
          <button class="add-to-cart">Add to Cart</button>
          <button class="view-details">View Details</button>
        </div>
      </div>
      <div class="info">
        <h3>Headphone</h3>
        <p class="price">$29.99</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
      </div>
    </div>
  </div>
    
</body>
</html>

ADD CSS:

body {
	background: #414852;
	font-family: 'Montserrat', sans-serif;
}
.wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin: 6% auto 0;
}
.single-card {
	position: relative;
	width: 280px;
	height: 400px;
	margin: 15px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
	transition: box-shadow 0.3s ease;
	overflow: hidden;
	background: #414852;
	border-radius: 15px;
	transition: all 0.8s ease-in-out;
}
.single-card:hover {
	transform: translateY(-10px);
}
.img-area {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
}
.img-area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.img-area:hover img {
	transform: scale(1.1);
}
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 174, 255, 0.8);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.single-card:hover .overlay {
	opacity: 1;
}
.add-to-cart, .view-details {
	background-color: #fff;
	color: #333;
	padding: 10px 15px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
	margin-bottom: 10px;
}
.add-to-cart:hover, .view-details:hover {
	background-color: orangered;
	color: #fff;
	border: none;
}
.info {
	padding: 10px;
	text-align: center;
	color: #ddd;
}
.info h3 {
	margin: 15px 0 10px;
	font-size: 30px;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Bebas Neue', sans-serif;
}
.info .price {
	margin: 0;
	font-size: 30px;
	font-weight: bold;
	color: aqua;
}

In conclusion, Responsive Product Card Design HTML CSS is a worthwhile project, especially for those who are new to web development. You can also create a responsive product card by following the steps in the video tutorial and source code provided by us. We strongly recommend you to visit our other amazing snippets on this website If you enjoy what you see on this website, please let others know by sharing it on social media. Thank you for visiting the blog.

DOWNLOAD CODE

Video Tutorial:

Responsive product card design HTML CSS [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive product card design HTML CSS

Video Tutorial:

Responsive product card design HTML CSS [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form