Create a Responsive Animated Product Page with HTML and CSS

By Faraz - August 09, 2022

Learn how to create a visually appealing and responsive product page using HTML and CSS. This tutorial covers best practices for front-end development, CSS animations, and responsive web design techniques.

Join us on Telegram

how to create a responsive animated product page using html and pure css.png

Read Also create-mahatma-gandhi-jayanti-tribute-blog-page-using-html-css-and-js.webp

Create a Mahatma Gandhi Jayanti Tribute Blog Page using HTML, CSS, and JS

In today's digital age, having a visually appealing and interactive product page can make all the difference when it comes to attracting and retaining customers. This tutorial will teach you how to create a responsive animated product page with HTML and CSS. This tutorial is perfect for web developers and designers looking to enhance their skills in front-end development. We'll cover the best practices for creating interactive and visually stunning product pages that are optimized for mobile and tablet devices.

Before you dive into creating your product page, it's important to identify your target audience and research design and development best practices. This will help you create a product page that is visually appealing and optimized for user experience. Once you've identified your target audience and researched best practices, create a wireframe or prototype of your product page to help you visualize the layout and design.

Creating an animated product page can be tricky, whether for a physical product or an e-commerce site. But with the help of HTML and CSS, you have full control over your website's design and how it functions.

This tutorial will show you how to create a responsive animated product page using HTML and pure CSS.

Let's start making an amazing responsive animated product page using HTML and pure CSS.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To create a responsive product page, you'll first need to create a base template for your product pages. This template will contain all of the necessary information, including the product images and the pricing information.

The first line declares the document type as HTML.

The second line specifies the language of the document as English.

The "head" section of the document contains several elements that provide information about the document, including the title, character set, and viewport settings.

The "link" element specifies the CSS stylesheet to be used for the page. It references two stylesheets - one from an external source and another from a local file called "styles.css".

The "body" section of the document contains several div elements with various classes that define the structure and content of the page.

Inside the body section, there is a section with class "section-fluid-main" that contains several divs with classes such as "info-wrap", "img-wrap", "back-color" and so on. These divs are used to define the various sections of the webpage such as the chair images, descriptions, and details.

There are also several input elements of type "radio" and labels associated with them that allow the user to choose different options for the chair's color and upholstery.

Lastly, there is a button labeled "Add to Cart" which is inside an "a" element that can be clicked to add the chair to the shopping cart.

After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our responsive product page using HTML, and now we can move on to styling it using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
  <div class="section-fluid-main">
  <div class="section">
        <div class="info-wrap mob-margin">
          <p class="title-up">Modern chair</p>
          <h2>Sella Gastro</h2>
          <h4>$174 <span>$237</span></h4>	
          <div class="section-fluid">
            <input class="desc-btn" type="radio" id="desc-1" name="desc-btn" checked/>
            <label for="desc-1">Description</label> 
            <input class="desc-btn" type="radio" id="desc-2" name="desc-btn"/>
            <label for="desc-2">Details</label> 
            <div class="section-fluid desc-sec accor-1">
              <p>The chair construction is made of ash tree. Upholstery and wood color at customer's request.</p>
            </div>	
            <div class="section-fluid desc-sec accor-2">
              <div class="section-inline">
                <p><span>76</span>cm<br>Lenght</p>
              </div>	
              <div class="section-inline">
                <p><span>68</span>cm<br>Width</p>
              </div>
              <div class="section-inline">
                <p><span>87</span>cm<br>Height</p>
              </div>
              <div class="section-inline">
                <p><span>10</span>kg<br>Weight</p>
              </div>
            </div>	
          </div>	
          <h5>Choose upholstery:</h5>
        </div>
        <div class="clearfix"></div>
        <input class="color-btn for-color-1" type="radio" id="color-1" name="color-btn" checked/>
        <label class="first-color" for="color-1"></label> 
        <input class="color-btn for-color-2" type="radio" id="color-2" name="color-btn"/>
        <label class="color-2" for="color-2"></label> 
        <input class="color-btn for-color-3" type="radio" id="color-3" name="color-btn"/>
        <label class="color-3" for="color-3"></label> 
        <input class="color-btn for-color-4" type="radio" id="color-4" name="color-btn"/>
        <label class="color-4" for="color-4"></label> 
        <input class="color-btn for-color-5" type="radio" id="color-5" name="color-btn"/>
        <label class="color-5" for="color-5"></label> 
        <input class="color-btn for-color-6" type="radio" id="color-6" name="color-btn"/>
        <label class="color-6" for="color-6"></label> 
        <div class="clearfix"></div>
        <div class="info-wrap">
      <a href="#" class="btn"><i class="uil uil-shopping-cart icon"></i> Add To Cart</a>
        </div>
        <div class="img-wrap chair-1"></div>
        <div class="img-wrap chair-2"></div>	
        <div class="img-wrap chair-3"></div>
        <div class="img-wrap chair-4"></div>
        <div class="img-wrap chair-5"></div>
        <div class="img-wrap chair-6"></div>		
        <div class="back-color"></div>	
        <div class="back-color chair-2"></div>	
        <div class="back-color chair-3"></div>	
        <div class="back-color chair-4"></div>	
        <div class="back-color chair-5"></div>	
        <div class="back-color chair-6"></div>	

  </div>
</div>
  </body>
</html>

Read Also Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrantjs.jpg

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

Step 2 (CSS Code):

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our responsive animated product page. we can use the font-size property to change the size of the text, and the font-weight property to change the weight of the text. we can also use margin and padding properties to modify the layout of the content blocks.

Next, we'll need to add a media query in our CSS file. This will allow you to differentiate between different screen sizes. In most cases, we'll want to include a media query for mobile devices first, followed by a media query for larger screens.

This will give our product page an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Finally, we will link the CSS file into HTML so that we can see the final result.

Created by: Ivan Grozdic

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');
*,
*::before,
*::after {
  box-sizing: border-box;
}
body{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.7;
	color: #fff;
  	background-color: #1f2029;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: none;
}
p{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: #fff;
  margin: 0;
}
.section-fluid-main{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}
.section{
  position: relative;
  max-width: calc(100% - 40px);
  width: 860px;
  margin: 0 auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 100px 0;
}
.section-fluid{
  position: relative;
  width: 100%;
  display: block;
}

[type="radio"]:checked,
[type="radio"]:not(:checked){
  position: absolute;
  visibility: hidden;
}
.color-btn:checked + label,
.color-btn:not(:checked) + label{
  position: relative;
  height: 40px;
  transition: all 200ms linear;
  border-radius: 4px;
  width: 40px;
  overflow: hidden;
  cursor: pointer;
  color: #ffeba7;
  margin-right: 10px;
  box-shadow: 0 12px 35px 0 rgba(16,39,112,.25);
  z-index: 10;
  background-position: center;
  background-size: cover;
  border: 3px solid transparent;
}
.color-btn:checked + label{
  border-color: #434343;
  transform: scale(1.1);
}
label.first-color{
  margin-left: 500px;
  background-image: url('https://assets.codepen.io/1462889/mat1.jpg');
}
label.color-2{
  background-image: url('https://assets.codepen.io/1462889/mat2.jpg');
}
label.color-3{
  background-image: url('https://assets.codepen.io/1462889/mat3.jpg');
}
label.color-4{
  background-image: url('https://assets.codepen.io/1462889/mat4.jpg');
}
label.color-5{
  background-image: url('https://assets.codepen.io/1462889/mat5.jpg');
}
label.color-6{
  background-image: url('https://assets.codepen.io/1462889/mat6.jpg');
}

.img-wrap{
  position: absolute;
  top: 100px;
  left: 0;
  width: 500px;
  height: 410px;
  display: inline-block;
  z-index: 9;
  transition: all 550ms linear;
  transition-delay: 100ms;
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url('https://assets.codepen.io/1462889/ch1.png');
  opacity: 0;
}
.for-color-1:checked ~ .img-wrap.chair-1{
  opacity: 1;
  animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
}
.img-wrap.chair-2{
  background-image: url('https://assets.codepen.io/1462889/ch2.png');
}
.for-color-2:checked ~ .img-wrap.chair-2{
  opacity: 1;
  animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
}
.img-wrap.chair-3{
  background-image: url('https://assets.codepen.io/1462889/ch3.png');
}
.for-color-3:checked ~ .img-wrap.chair-3{
  opacity: 1;
  animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
}
.img-wrap.chair-4{
  background-image: url('https://assets.codepen.io/1462889/ch4.png');
}
.for-color-4:checked ~ .img-wrap.chair-4{
  opacity: 1;
  animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
}
.img-wrap.chair-5{
  background-image: url('https://assets.codepen.io/1462889/ch5.png');
}
.for-color-5:checked ~ .img-wrap.chair-5{
  opacity: 1;
  animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
}
.img-wrap.chair-6{
  background-image: url('https://assets.codepen.io/1462889/ch6.png');
}
.for-color-6:checked ~ .img-wrap.chair-6{
  opacity: 1;
  animation: shake 0.7s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0) rotate(-1deg);
  }  
  20%, 80% {
    transform: translate3d(2px, 0, 0) rotate(2deg);
  }
  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0) rotate(-3deg);
  }
  40%, 60% {
    transform: translate3d(3px, 0, 0) rotate(3deg);
  }
}


.back-color {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  background-image: linear-gradient(196deg,#f1a9a9,#e66767);
  transition: all 250ms linear;
  transition-delay: 300ms;
}
.back-color.chair-2 {
  background-image: linear-gradient(196deg,#4c4c4c,#262626);
  opacity: 0;
}
.for-color-2:checked ~ .back-color.chair-2{
  opacity: 1;
}
.back-color.chair-3 {
  background-image: linear-gradient(196deg,#8a9fb2,#5f7991);
  opacity: 0;
}
.for-color-3:checked ~ .back-color.chair-3{
  opacity: 1;
}
.back-color.chair-4 {
  background-image: linear-gradient(196deg,#97afc3,#6789a7);
  opacity: 0;
}
.for-color-4:checked ~ .back-color.chair-4{
  opacity: 1;
}
.back-color.chair-5 {
  background-image: linear-gradient(196deg,#afa6a0,#8c7f76);
  opacity: 0;
}
.for-color-5:checked ~ .back-color.chair-5{
  opacity: 1;
}
.back-color.chair-6 {
  background-image: linear-gradient(196deg,#aaadac,#838786);
  opacity: 0;
}
.for-color-6:checked ~ .back-color.chair-6{
  opacity: 1;
}

.info-wrap{
  position: relative;
  margin-left: 500px;
  z-index: 10;
  display: block;
  text-align: left;
}
.title-up {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  line-height: 1.2;
  color: #fff;
  margin-top: 0;
  margin-bottom: 10px;
}
h2{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 34px;
  line-height: 1.2;
  color: #fff;
  margin-top: 0;
  margin-bottom: 10px;
}
h4{
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
  margin-top: 0;
  margin-bottom: 30px;
}
h4 span{
  text-decoration: line-through;
  font-size: 20px;
  opacity: 0.6;
  padding-left: 15px;
}
h5{
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
  margin-top: 0;
  margin-bottom: 20px;
}
.desc-btn:checked + label,
.desc-btn:not(:checked) + label{
  position: relative;
  transition: all 200ms linear;
  display: inline-block;
  border: none;
  cursor: pointer;
  color: #ffeba7;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  margin-right: 25px;
  opacity: 0.5;
}
.desc-btn:checked + label{
  opacity: 1;
}
.desc-btn:not(:checked) + label:hover {
  opacity: 0.8;
}

.desc-sec {
  padding-top: 20px;
  padding-bottom: 30px;
  transition: all 250ms linear;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(20px);
}
.desc-sec.accor-2 {
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  z-index: 2;
}
#desc-1:checked ~ .desc-sec.accor-1 {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#desc-2:checked ~ .desc-sec.accor-2 {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.section-inline{
  position: relative;
  display: inline-block;
  margin-right: 20px;
}
.section-inline p span{
  font-size: 30px;
  line-height: 1.1;
}

.btn{
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  height: 48px;
  border-radius: 4px;
  width: 210px;
  letter-spacing: 1px;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background-color: transparent;
  color: #fff;
  box-shadow: 0 6px 15px 0 rgba(16,39,112,.15);
  transition: all 250ms linear;
  text-decoration: none;
  margin-top: 50px;
}
.icon {
  padding-right: 7px;
  font-size: 20px;
}
.btn:before{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  z-index: -1;
  background-color: #944852;
  transition: background-color 250ms 300ms ease;
}
.btn:hover{
  box-shadow: 0 12px 35px 0 rgba(16,39,112,.25);
  background-color: #000;
}
.for-color-2:checked ~ .info-wrap .btn:before{
  background-color: #1a1a1a;
}
.for-color-3:checked ~ .info-wrap .btn:before{
  background-color: #40566e;
}
.for-color-4:checked ~ .info-wrap .btn:before{
  background-color: #5e89b2;
}
.for-color-5:checked ~ .info-wrap .btn:before{
  background-color: #8c7f76;
}
.for-color-6:checked ~ .info-wrap .btn:before{
  background-color: #5d6160;
}

.clearfix {
  width: 100%;
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.logo {
	position: fixed;
	top: 25px;
	left: 25px;
	display: block;
	z-index: 1000;
	transition: all 250ms linear;
}
.logo img {
	height: 26px;
	width: auto;
	display: block;
	transition: filter 250ms 700ms linear;
}

@media screen and (max-width: 991px) {
  .section{
    margin: 0 auto;
    text-align: center;
    max-width: calc(100% - 40px);
    width: 370px;
  }
  label.first-color{
    margin-left: 0;
  }
  .info-wrap{
    margin-left: 0;
    width: 370px;
    margin: 0 auto;
    text-align: center;
  }
  .img-wrap{
    width: 375px;
    height: 308px;
    left: 50%;
    margin-left: -190px;
  }
  .mob-margin {
    margin-top: 320px;
  }
  .desc-btn:checked + label,
  .desc-btn:not(:checked) + label{
    margin-right: 15px;
    margin-left: 15px;
  }
  .color-btn:checked + label,
  .color-btn:not(:checked) + label{
    height: 40px;
    width: 40px;
    margin: 5px auto;
    text-align: center;
  }
  .section-inline{
    margin: 0 5px;
  }
}

@media screen and (max-width: 575px) {
  .section{
    width: 280px;
  }
  .info-wrap{
    width: 280px;
  }
  .color-btn:checked + label,
  .color-btn:not(:checked) + label{
    height: 30px;
    width: 30px;
  }
  .section-inline p span{
    font-size: 24px;
    line-height: 1.1;
  }
  .section-inline p{
    font-size: 14px;
  }
}

Final Output:

how to create a responsive animated product page using html and pure css.gif

Read Also create a subscription form with personalized messaging using html, css and javascript.jpg

Create a Subscription Form with Personalized Messaging

Conclusion:

In this tutorial, we've covered the basics of creating a responsive animated product page with HTML and CSS. By using a combination of HTML structure, CSS styling, and user interactivity, you can create a visually appealing and engaging product page that is optimized for both desktop and mobile devices. Keep in mind the importance of designing for your target audience and using best practices in front-end development. With these tips and techniques, you'll be well on your way to creating a product page that stands out from the crowd.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: html, css, animated product page, responsive web design, front-end development, animated product page design, responsive web design techniques, html and css animations, front-end web development best practices, creating interactive web pages

End of the article