Create a Responsive Product Card Design Using HTML and CSS

21:11
Create a Responsive Product Card Design Using HTML and CSS

 In today's world  e-commerce, product card design plays a crucial role in attracting customers and increasing sales. A well-designed product card can make a significant difference in the user's shopping experience. Therefore, it is essential to create a visually appealing and user-friendly product card that showcases the product's key features and benefits. In this blog, we will discuss how to create a Product Card Design using HTML and CSS only.


What is a Product Card?


A product card is a visual representation of a product that displays key information such as product name, image, price, rating, and description. Product cards are typically used in e-commerce websites and mobile applications to showcase products in a clean and organised way. They help users quickly scan through different products and make an informed purchase decision.


Why is Product Card Design Important?


Product card design is important for several reasons. First, it helps create a good first impression and attract potential customers. Second, it allows users to quickly find the information they need, such as product features, price, and rating. Third, a well-designed product card can increase the chances of making a sale by showcasing the product's key benefits and advantages.


Now that we understand the importance of product card design let's dive into how to create Product Card Design using HTML and CSS only.


Create a Product Card Design Using HTML and CSS [Source Code]


To create this  Product Card Design. First, you need to create two files, one HTML, and another one is a CSS File. After creating these files just paste the following codes in your file. 


After creating an HTML file with the name of index.html and copy and paste the given codes in your HTML file. Remember, you’ve to create a file with the .html extension. You’ve to download files from the given download button to use.

    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Product Card UI Design HTML CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="slider">
    <div class="card">
      <div class="card-content">
        <img src="images/laptop.png" alt="" class="card-img">
        <h1 class="card-title">Deal MSI Raider GE67HX </h1>
        <div class="card-body">
          <div class="card-star">
            <span class="rating-value">4.3</span>
            <span class="star">&#9733;</span>
          </div>
          <p class="card-price">$540.99</p>
        </div>
        <div class="card-footer">
          <button class="btn btn-success">Buy Now</button>
          <button class="btn btn-border">Add To Cart</button>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <img src="images/iPhone-12-Pro.png" alt="" class="card-img">
        <h1 class="card-title">Apple iPhone 12 Pro</h1>
        <div class="card-body">
          <div class="card-star">
            <span class="rating-value">4.5</span>
            <span class="star">&#9733;</span>
          </div>
          <p class="card-price">$1400.99</p>
        </div>
        <div class="card-footer">
          <button class="btn btn-success">Buy Now</button>
          <button class="btn btn-border">Add To Cart</button>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <img src="images/headset.png" alt="" class="card-img">
        <h1 class="card-title">g233 prodigy gaming headset</h1>
        <div class="card-body">
          <div class="card-star">
            <span class="rating-value">4.1</span>
            <span class="star">&#9733;</span>
          </div>
          <p class="card-price">$335.99</p>
        </div>
        <div class="card-footer">
          <button class="btn btn-success">Buy Now</button>
          <button class="btn btn-border">Add To Cart</button>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <img src="images/Shoese.png" alt="" class="card-img">
        <h1 class="card-title">Nike Running Shoese</h1>
        <div class="card-body">
          <div class="card-star">
            <span class="rating-value">4.3</span>
            <span class="star">&#9733;</span>
          </div>
          <p class="card-price">$259.99</p>
        </div>
        <div class="card-footer">
          <button class="btn btn-success">Buy Now</button>
          <button class="btn btn-border">Add To Cart</button>
        </div>
      </div>
    </div>
  </section>
</body>
</html>

Now that we have created the basic HTML markup, we can style the page using CSS. After that Create a Css file with the name of style.css and copy and paste in your css file. Remember, you’ve to create a file with the .css extension.

    
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgba(219, 222, 253, 1);
}

.slider {
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  grid-gap: 2rem;
  font: normal 1rem sans-serif;
}

.card {
  position: relative;
  width: 17rem;
  height: 23rem;
  background-color: #18253c;
  color: #fff;
  border-radius: 1rem;
  border: .1rem solid transparent;
  overflow: hidden;
  box-shadow: 0 .2rem .6rem #0003;
  transition: .5s ease-in-out;
}

.card:hover {
  border: .1rem solid #00dd53;
  transform: scale(1.05);
}

.card::before,
.card::after {
  position: absolute;
  content: "";
  background-color: #00dd53;
  border-radius: 50%;
  transition: .5s ease-in-out;
  z-index: 100;
}

.card::before {
  top: -6%;
  right: -6%;
  width: 9rem;
  height: 9rem;
}

.card::after {
  bottom: -6%;
  left: -6%;
  width: 5rem;
  height: 5rem;
}

.card:hover::before {
  transform: scale(1.8);
}

.card:hover::after {
  transform: scale(0);
}

.card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  z-index: 200;
}

.card-img,
.card-title {
  transform: translateY(4rem);
  transition: .5s ease-in-out;
}

.card-img {
  width: auto;
  height: 9.5rem;
}

.card-title {
  font-size: 1rem;
  text-transform: capitalize;
  transition-delay: .1s;
}

.card-body,
.card-footer {
  transform: translateY(8rem);
  transition: .5s ease-in-out;
}

.card-body {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition-delay: .2s;
}

.card:hover .card-img,
.card:hover .card-title,
.card:hover .card-body,
.card:hover .card-footer {
  transform: translateY(0);
}

.card-footer {
  transition-delay: .3s;
}

.star {
  font-size: 1.4rem;
  color: gold;
}

.card-price {
  font: bolder 1.5rem sans-serif;
}

.btn {
  padding: 1rem 2rem;
  background-color: unset;
  border: none;
  outline: none;
  border-radius: 2rem;
  color: #fff;
  cursor: pointer;
}

.btn-success {
  background-color: #00dd53;
}

.btn-border {
  border: .1rem solid #00dd53;
}

In this blog post, we have explored how to create a Product Card Design using HTML and CSS. Finally You Product Card Design using HTML and CSS. You can modify your code to give the batter a look at your Cards Design. I hope you like it. Enjoy your wonderful Product Card Design within a time. 


You can also download the source code Directly to clicking on the download button below. Click the download button. It takes a few seconds and automatically redirects to source code download or automatic download and you can easily download code here.

Tags

Post a Comment

0 Comments