A product card is an element that looks like a card. It is on commercial websites to show the products, various pricing plans, subscriptions, or comparing prices.
In Our design [Awesome Product Card], there is a single card in the middle of the screen as you can see in the image above. At the top, there is the Image of the product and after the product's image there is the title of the product and after that, there is the description of the product after the description on the left side we have the price of the product and in the right side, we have the time it shows the product is for a limited period and after that, on the bottom, we have the seller's profile and the seller name.
You may like these:-
If you are a bit confused that how we can make this type of pricing card. So you can check it by yourself and you can also check the code.
Video Tutorial of Responsive Product Preview Card
Awesome Responsive Product Preview Card [Source Code]
HTML Code
<!------------------- Created By InCoder ----------------- -->
<!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>NFT preview card component</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body class="bg-dark-blue full-wh">
<div class="card">
<div class="header">
<img src="Images/image-equilibrium.jpg" class="CardImage" alt="NFT preview card component">
<div class="overlay"></div>
<div class="icon"><i class="fas fa-eye"></i></div>
</div>
<div class="card-body">
<h3>Equilibrium #8488</h3>
<p>Our Equilibrium collection promotes balance and calm.</p>
<div class="details">
<div class="priceBox">
<svg width="11" height="18" xmlns="http://www.w3.org/2000/svg" style="user-select: auto;">
<path d="M11 10.216 5.5 18 0 10.216l5.5 3.263 5.5-3.262ZM5.5 0l5.496 9.169L5.5 12.43 0 9.17 5.5 0Z"
fill="#00FFF8" style="user-select: auto;"></path>
</svg>
<span>0.041 ETH</span>
</div>
<div class="timeBox">
<span><i class="fas fa-clock"></i></span>
8 Days Left
</div>
</div>
</div>
<div class="card-footer">
<div class="profile">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUrwDN7dzvuPgvw5BlMIpjx9SpmlY9ojhDjha_3Lh7EXFisYDbJoc8aCbIbqyug1BA0TCYz97-9lQuHQ170Hi9rLVbG-rIuS01kZAPZ8CN4YcsIkEKDvwf_D0r4o7ggbu2Uihh5ZiXijbmuFZNTeQPBMXmaQlpEQMEukTTcS8ldE/s56-c/profile-pic.png" alt="Creator Profile">
<p>Created By <span>Ashutosh Tiwari</span></p>
</div>
</div>
</div>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;
justify-content: center;
}
.full-wh{
width: 100vw;
height: 100vh;
}
.bg-dark-blue{
background: linear-gradient(#161647, #0b0b29);
}
.card{
width: 20rem;
margin: 10px 10px;
padding: 12px 20px;
border-radius: 1rem;
font-family: 'Poppins', sans-serif;
background: linear-gradient(#1b1b53, #1a1a55);
}
.header{
position: relative;
}
.header .CardImage{
max-width: 100%;
border-radius: .5rem;
}
.header .overlay{
left: 0;
top: 0px;
opacity: 1;
height: 98%;
width: 100%;
cursor: pointer;
font-size: 2rem;
position: absolute;
border-radius: 0.5rem;
}
.header:hover .overlay{
opacity: .4;
background: cyan;
}
.header:hover .icon{
display: block;
}
.icon{
top: 50%;
left: 50%;
color: #fff;
display: none;
font-size: 3rem;
position: absolute;
transform: translate(-50%, -50%);
}
.card-body{
color: #fff;
margin-top: .5rem;
}
.card-body h3{
font-weight: 600;
font-size: 1.3rem;
}
.card-body p{
font-size: 16px;
margin-top: 10px;
color: #a7c9e1;
}
.details{
display: flex;
margin-top: 1.5rem;
justify-content: space-between;
}
.details .priceBox,
.details .timeBox{
display: flex;
color: #a7c9e1;
align-items: center;
}
.details .timeBox span{
margin-right: 4px;
}
.details .priceBox span{
color: #00fff8;
margin-left: 4px;
}
.card-footer{
margin-top: 1rem;
padding-top: 1rem;
border-top: .1rem solid #294164;
}
.card-footer .profile{
display: flex;
font-size: 18px;
color: #a7c9e1;
align-items: center;
}
.card-footer .profile img{
max-width: 2.5rem;
max-height: 2.5rem;
border-radius: 50%;
margin-right: .6rem;
border: 2px solid #fff;
}
.card-footer .profile span{
color: #00fff8;
}
Here is the final output:
I hope you liked it. So if you want to make it then you've to create two files HTML & CSS. you can name it whatever want but make sure that the extension of the HTML file is [.HTML] and the CSS file's extension is [.CSS] after creating these two files simply copy the HTML code in the HTML's file and CSS code in CSS's File. Make sure one thing that both files are on the same destination and link CSS File properly in HTML File. If you simply want to download files you can download them here.