How to create product card design using html css and JavaScript

Hello friends, in this blog you will learn how to make a product card with the help of html CSS and JavaScript. We have designed a beautiful and attractive product card with the help of html CSS and JavaScript which we have shared to you which you can easily create.

You will know what a product card is and what it is used for when you buy something similar on an online shopping website, then the same size, color, buy, ad cart, etc. is given which we will choose according to your choice. Let's buy it is called the product card, which you can see in the image below.

You must have seen a lot of product cards on the online shopping website, which are designed differently, you will also learn to create a beautiful and attractive product card design with the help of html, CSS and JavaScript. Which you will learn to make easily.

You can see in the image above, a product card has been designed using html, CSS and JavaScript, in which different colors will be found which when you click on these colors, the color of the product card's background, shoes, prize and add to cart Also changes which is designed for codding car with such JavaScript that you will learn how to make it easily in this blog.

If you are having difficulty in understanding this product card, then you can see the full video tutorial of this card, whose video is given below.

Video Tutorial of  Product Card Design Using Html CSS And JavaScript 

I am sure you must have liked this product card as you saw in this video. It has been designed using html CSS and JavaScript. I mean to say that with the help of html CSS and JavaScript it means You will learn how to make it easily.

If you are a beginner in all these, you have knowledge of html CSS and JavaScript, then you can easily create this type of product card, I mean to say that you will learn how to make this product card easily by getting the source code. 

 Product Card Design Using Html CSS And JavaScript Source Codes

We know about the html tag of this product card. We first took a div inside the body tag whose class name is card-producto. An h1 and p tag is taken. The h1 tag is called big heading and the p tag is called a paragraph. The tag is called and this tag is called inline-block element. This h1 has three divs below the p tag whose class names are pic-producto colors-producto and info-producto

The four span tags are taken inside the class name colors-producto. Span tag. This is an inline element that is used to write in a line. The class names of all these span tags are blue active, pink, green and purple. A data-color has been inserted with the class, all of whose colors are separated and the image is linked within the span.

A div and a a tag are taken inside the class info-producto. A tag is called an anchor tag. This tag is used to link the class name of the div is given price-producto and it has a price of 30 $ written inside it. Which you are seeing in the image above and a tag has also been given a class name whose class name is button-producto with its under text Add to Cart

After this, we know about the css style of the product card. Like this one, this time also zeroed the margin and padding to * and font-family name font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; Border-boxed the box size.

tag body to background-color and transition: 0.6s ease-in; It has been styled like this by giving width-height and background color to the card-producto which you are seeing in the image. This card changes the color by clicking on the color button with the help of JavaScript. You have started seeing that this type of card will be very important for you, which is getting the design of the product card on it.

If you like this product card, then you can easily get the source code of this card. To get this source code, two files have been given below: first html code file and second CSS code file which you can easily scroll down Can be obtained

In this product card, four shoes image has been added and downloaded by clicking on download image button.

HTML CODE FILE :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="pruductcard.css" rel="stylesheet">
</head>

<body>
  <div class="card-producto">
    <h1>
      Adidas Shoes</h1>
    <p>
      The best shoes in marketplace</p>
    <div class="pic-producto">
    </div>
    <div class="colors-producto">
      <span class="blue active" data-color="#74b9ff" data-pic="url(image/.1.png)"></span>
      <span class="pink" data-color="#fab1a0" data-pic="url(image/2.png)"></span>
      <span class="green" data-color="#55efc4" data-pic="url(image/3.png)"></span>
      <span class="purple" data-color="#686de0" data-pic="url(image/4.png)"></span>
    </div>
    <div class="info-producto">
      <div class="price-producto">
        30$</div>
      <a href="#" class="button-producto">Add to Cart</a>
    </div>
  </div>

</body>

</html>

CSS CODE FILE :

* {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-sizing: border-box;
}

body {
  background: #74b9ff;
  transition: 0.6s ease-in;
}

.card-producto {
  width: 400px;
  background: white;
  padding: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  box-shadow: -25px 25px 10px rgba(0, 0, 0, 0.1);

}

.card-producto h1 {
  font-size: 22px;
  margin-bottom: 4px;
  color: #404040;
}

.card-producto p {
  font-size: 13px;
  color: #bbb;
}

.pic-producto {
  background-image: url(image/1.png);
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  transition: .6s ease-in;

}

.colors-producto {
  margin-bottom: 40px;
  display: flex;
  justify-content: center;

}

.colors-producto span {
  width: 14px;
  height: 14px;
  margin: 0 10px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;

}

.blue {
  background: #74b9ff;
}

.pink {
  background: #fab1a0;
}

.green {
  background: #55efc4;
}

.purple {
  background: #686de0;
}

.colors-producto .active:after {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid #8888;
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  left: -4px;
  top: -4px;
}

.info-producto {
  display: flex;
  align-items: center;
}

.price-producto {
  color: #74b9ff;
  font-size: 26px;
  font-weight: 600;
}

.button-producto {
  margin-left: auto;
  color: #74b9ff;
  text-decoration: none;
  border: 2px solid;
  padding: 8px 24px;
  border-radius: 20px;
  transition: .4s ease-in;
}

.button-producto:hover {
  transform: scale(1.06);
}

JAVASCRIPT CODE FILE :

 $(".colors-producto span").click(function () {
      $(".colors-producto span").removeClass("active");
      $(this).addClass("active");
      $("body").css("background", $(this).attr("data-color"));
      $(".price-producto").css("color", $(this).attr("data-color"));
      $(".button-producto").css("color", $(this).attr("data-color"));
      $(".pic-producto").css("background-image", $(this).attr("data-pic"));
    });