Animations, Card Design, Landing Page

The product page in Html and CSS with source code

Hello everyone, in this post we are going to develop the product page in Html and CSS. In the last post, we created/designed a Linkedin loader in css. But in this post, we are going to create a responsive product page for our website in HTML and CSS.

Product page:

This page is created by that website which is selling its products online. After adding the title we have a small description of the product. If there is a product page then there must be an image of the product as well. The image of this product page is used using <img> tag. Below the product page image, we have four buttons and they change the product image related to that color. Price is added at the left bottom. Add to cart button is also there for purchasing the products. It is created using <button> tag and later on designed using CSS multiple design properties.

As you can see in the image we have a beautiful background for the product page. Then it has a box at the centre of the page. This box has all the information about the product. Then it has the title of the product.

The product page in Html and CSS - Blue Shoes — Blue

Then we have the option of colors and buyers can select any color related to this product. On the left side, it has the price of the product and on the right side, it has an add to cart button. When you move your cursor over this button then it expands or shows a hover effect and it is created with the help of CSS.

How to design a product page in Html and CSS?

Follow the below steps.

Download a code editor
Download Html code
Download CSS code
Otherwise download source code

Source code of Html:

All the text, buttons, images, and headings are created with the help of Html but they are not designed with Html.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Product Page - FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="product-card">
      <h1>Best Shoes</h1>
      <p>Lorem ipsum, or lipsum as it is sometimes known</p>
      <div class="product-pic"></div>
      <div class="product-colors">
        <span class="blue active" data-color="#7ed6df" data-pic="url(1.png)"></span>
        <span class="green" data-color="#badc58" data-pic="url(2.png)"></span>
        <span class="yellow" data-color="#f9ca24" data-pic="url(3.png)"></span>
        <span class="rose" data-color="#ff7979" data-pic="url(4.png)"></span>
      </div>
      <div class="product-info">
        <div class="product-price">$90</div>
        <a href="#" class="product-button">Add to Cart</a>
      </div>
    </div>

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

<!DOCTYPE html>

<head>

<title>Product Page - FantacyDesigns</title>

</head>

<body>

<h1>Best Shoes</h1>

<p>Lorem ipsum, or lipsum as it is sometimes known</p>

</div>

</div>

$(".product-colors span").click(function(){

$(".product-colors span").removeClass("active");

$(this).addClass("active");

$("body").css("background",$(this).attr("data-color"));

$(".product-price").css("color",$(this).attr("data-color"));

$(".product-button").css("color",$(this).attr("data-color"));

$(".product-pic").css("background-image",$(this).attr("data-pic"));

});

</script>

</body>

</html>

Source code of CSS:

For design, the code is given below so paste it there into your CSS file.

*{
  margin: 0;
  padding: 0;
  font-family: "Open Sans",sans-serif;
  box-sizing: border-box;
}

body{
  background: #7ed6df;
  transition: 0.6s linear;
}

.product-card{
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  width: 400px;
  background: #ecedef;
  padding: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-transform: uppercase;
  border-radius: 20px;
}
.product-card h1{
  font-size: 22px;
  margin-bottom: 4px;
}
.product-card p{
  font-size: 13px;
  color: #bbb;
}
.product-pic{
  background-image: url(1.png);
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: center;
  transition: .6s linear;
}
.product-colors{
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}

.product-colors span{
  width: 14px;
  height: 14px;
  margin: 0 10px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.blue{
  background: #7ed6df;
}
.green{
  background: #badc58;
}
.yellow{
  background: #f9ca24;
}
.rose{
  background: #ff7979;
}

.product-colors .active:after{
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid #8888;
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  left: -4px;
  top: -4px;
}
.product-info{
  display: flex;
  align-items: center;
}
.product-price{
  color: #7ed6df;
  font-size: 26px;
}
.product-button{
  margin-left: auto;
  color: #7ed6df;
  text-decoration: none;
  border: 2px solid;
  padding: 8px 24px;
  border-radius: 20px;
  transition: .4s linear;
}

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

margin: 0;

padding: 0;

font-family: "Open Sans",sans-serif;

box-sizing: border-box;

}

body{

background: #7ed6df;

transition: 0.6s linear;

}

.product-card{

box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

width: 400px;

background: #ecedef;

padding: 40px;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

text-transform: uppercase;

border-radius: 20px;

}

.product-card h1{

font-size: 22px;

margin-bottom: 4px;

}

.product-card p{

font-size: 13px;

color: #bbb;

}

.product-pic{

background-image: url(1.png);

width: 100%;

height: 200px;

background-size: cover;

background-position: center;

transition: .6s linear;

}

.product-colors{

margin-bottom: 40px;

display: flex;

justify-content: center;

}

.product-colors span{

width: 14px;

height: 14px;

margin: 0 10px;

border-radius: 50%;

cursor: pointer;

position: relative;

}

.blue{

background: #7ed6df;

}

.green{

background: #badc58;

}

.yellow{

background: #f9ca24;

}

.rose{

background: #ff7979;

}

.product-colors .active:after{

content: "";

width: 22px;

height: 22px;

border: 2px solid #8888;

position: absolute;

border-radius: 50%;

box-sizing: border-box;

left: -4px;

top: -4px;

}

.product-info{

display: flex;

align-items: center;

}

.product-price{

color: #7ed6df;

font-size: 26px;

}

.product-button{

margin-left: auto;

color: #7ed6df;

text-decoration: none;

border: 2px solid;

padding: 8px 24px;

border-radius: 20px;

transition: .4s linear;

}

.product-button:hover{

transform: scale(1.06);

}

Therefore, by using both the codes of Html and CSS in your files of Html and CSS in your editor you can create a product page for your website.

Download source code:

Sometimes for users, it is difficult to create files and then connect them with each other. For those, we have created a file it has images and files of Html and CSS. Just download it and then run the file Html for the result.

Task:

You have seen the complete structure of the product page. Now you have an idea of product page design. Add the title at the title. Then add the image and below the image, add the description of the product. The price should be at the bottom. Align the different color buttons in a vertical position on the left side of the image. Also, fill the color of add to cart image using hex color format.

I hope you like this post it is helpful for you. Follow us if you are looking for premium templates. You can also follow us on different platforms for more content.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download