Responsive Product Preview Card using HTML and CSS

Hello readers, welcome to this blog, today we'll see how to make an Awesome Product Card using HTML & CSS. In our previous post, we saw how to make simple buttons with a hover effect.

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.

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.

Preview of this is available here.

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="https://blogger.googleusercontent.com/img/a/AVvXsEgKnmCh6IsgsDrEUWO2m6yyuJXx1ctghfweiI-6vgpTCHpvfgnA5ZC8FISiMz6oD89fQTrK1nL7QdPr63qv9BKev5k9BQoZC5BS4A4pAWPWQ5w7DLgVJJA0ytfU0Bll6GSoyjqqGvOOwhv4n8wFgRxrwgpPOF4FUh9Kq3VLGeEaGYEbrcgKQa3058STlg=s604" 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://1.bp.blogspot.com/-Q3I_W0x3yYQ/YdABortIzlI/AAAAAAAAD-Y/8tk7dBcu1yMXJm-AGwacS5YZj0I_bYYOwCK4BGAYYCw/s56-c/217519793_255545932643823_6246540766433937605_n.jpg" 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: 0.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: 0.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: 0.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: 0.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: 0.6rem;
  border: 2px solid #fff;
}

.card-footer .profile span {
  color: #00fff8;
}

Blog

Responsive Product Preview Card using HTML and CSS

Ashutosh Tiwari

HTML Code

CSS Code

Join Our Newsletter. No Spam, Only the good stuff.

Related