Product Card UI Design using HTML CSS and JavaScript

Hey Friends today in this blog I'll be teaching you how to create an animated product card using HTML CSS and JavaScript, in this project product card UI design you will see we have our basic product card like you see in some shopping site, at the top we've our image followed by the title of the product. At the bottom you can see we've some description text at the bottom of that you also can see the ratings of this product and the price of this product both in text form and numerical form. We have two buttons Purchase Now and an Add To Cart button, in this add to cart button this is where the JavaScript comes in, it is just a basic JavaScript code. Now back to the add to cart button when you click this button a message Pops up telling the user added to cart successful, if you know the basics of JavaScript and how to call and write a function you'll be able to make this message popup.

Video Tutorial on Product Card UI Design using HTML CSS and JavaScript

In the video, you’ve clearly seen how to design and create this Product Card if the user clicks the add to cart button a message Popsup and tell the user that his item has been successfully added to cart

With this project and aid of design I know I'll be able to inspire you in creating your own product card UI design.

If you have any issues with this project you can always contact me by going to our contact us page and send a mail to us or drop a comment here stating your error.

Source Code of Product Card UI Design using HTML CSS and JavaScript

To create this Product Card UI Design First you need three files a HTML file a CSS file and a JavaScript file once the files are created just copy the following codes into your file. You can also download the source code files of this Product Card UI Design from the given download link

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

HTML CODE

<!DOCTYPE html>
<!-- Coding By Code Block youtube.com/c/CodeBlockYT -->
<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>Animated Product Card using HTML & CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="message" id="message">Added To Cart Sucessfully</div>
    <div class="wrapper">
      <div class="card pro">
        <div class="images">
          <img src="airpod pro2.jpeg" alt="airpod pro2">
        </div>
        <div class="text">
          <div class="product-name">AIRPOD PRO HEADPHONES</div>
          <div class="spec">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem odio pariatur totam, consequatur nam enim tempore impedit consequuntur et rerum.</div>
        </div>
        <div class="ratings">
          <span><!-- ★ --></span>
          <span><!-- ★ --></span>
          <span><!-- ★ --></span>
          <span><!-- ★ --></span>
          <span><!-- ☆ --></span>
        </div>
        <div class="pricing">
          <div class="price-box">
            <h3 class="price-numb">$20.00</h3>
            <p class="price-text">Twenty Dollars only</p>
          </div>
        </div>
        <div class="button">
          <button class="purchase">Purchase Now</button>
          <button class="cart" id="cart">Add To Cart</button>
        </div>
      </div>
    </div>
</body>
</html>

CSS CODE

/* Imported Poppins Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;900&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
::selection{
  background: #FEABA1;
}
body{
  background: linear-gradient(#FEABC5 0%, #FEA891 100%);
}
.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-wrap: wrap;
}
.wrapper .card{
  max-width: 400px;
  width: 100%;
  padding: 20px 20px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 25px;
}
.wrapper .card .images img{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  left: 32px;
  box-shadow: 0 0 20px #FEABC5;
}
.wrapper .card .text .product-name{
  margin-top: 10px;
  font-size: 25px;
  font-weight: 600;
  text-align: center;
}
.wrapper .card .text .spec{
  margin-top: 10px;
  font-size: 14px;
  text-align: center;
}
.wrapper .card .ratings span{
  font-size: 23px;
  color: #333;
  position: relative;
  top: 35px;
  left: 15px;
  font-weight: 600;
  cursor: pointer;
}
.wrapper .card .pricing{
  display: flex;
  justify-content: space-evenly;
  position: relative;
  left: 120px;
  text-align: center;
}
.wrapper .card .pricing .price-box .price-numb{
  font-size: 28px;
  color: #333;
  font-weight: 600;
}
.wrapper .card .pricing .price-box .price-text{
  font-size: 12px;
  color: #333;
}
.wrapper .card .button{
  display: flex;
  margin-top: 20px;
}
.wrapper .card .button button{
  width: 200px;
  height: 50px;
  border: none;
  outline: none;
  background: #FEABA1;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
  box-shadow: 0 0 3px #FEABC5;
}
.wrapper .card .button button.cart{
  margin-left: 20px;
  background: none;
  border: 2px solid #FEABA1;
  color: #FEABA1;
}
.wrapper .card .button button.cart:hover{
  background: #FEABA1;
  color: #fff;
}
.message{
  position: absolute;
  left: -100%;
  top: 23px;
  padding: 10px 30px;
  z-index: 999;
  background: #2ecc71;
  color: #fff;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: all 0.3s ease;
}
.message.show{
  left: 32px;
}

JavaScript CODE

<script>
      let CartBtn = document.getElementById("cart");
      let Message = document.getElementById("message");

      CartBtn.onclick = function() {
        CartBtn.onclick = function() {
          Message.classList.add("show");

          setTimeout(()=> {
            Message.classList.remove("show");
          }, 3000);
        }
      }
    </script>

Download Code Files

Product Card UI Design using HTML CSS and JavaScript

Creative Tutorials

Post a Comment

Post a Comment

Contact Form