Close Menu
    HTML & CSS

    How to make Animated Chair Product Page using HTML & CSS

    Coding StellaBy No Comments8 Mins Read

    Let’s build an Animated Chair Product Page using HTML and CSS. This project will showcase a stylish chair with smooth animations, making the product page more interactive and visually appealing.

    We’ll use:

    • HTML to create the structure of the product page (title, price, description, and product images).
    • CSS to style the layout and add engaging animations for the chair and other elements.

    This project is perfect for practicing UI design and adding a modern, animated touch to product showcases. Whether for e-commerce or a portfolio, it’s a great way to make products stand out with creativity. 🪑✨

    HTML :

    This HTML code creates an animated chair product page, showing a designer chair named “Arto Recline” with its price, description, and dimensions. Users can switch between “Description” and “Details,” choose different upholstery colors, and see multiple chair images. It includes a styled “Add to Cart” button, uses external CSS for layout and icons, and links a JavaScript file for interactive animations. The structure is clean with sections for product info, color options, and background effects.

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

<head>
	<meta charset="UTF-8">
	<title>Animated Chair Product Page | @coding.stella</title>
	<link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
	<link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="section-fluid-main">
    <div class="section">
      <div class="info-wrap mob-margin">
        <p class="title-up">Designer Chair</p>
        <h2>Arto Recline</h2>
        <h4>$199 <span>$259</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>This chair is crafted with solid beech wood and high-density foam cushioning. Ergonomic design ensures comfort for long seating.</p>
          </div>

          <div class="section-fluid desc-sec accor-2">
            <div class="section-inline"><p><span>82</span>cm<br>Length</p></div>
            <div class="section-inline"><p><span>70</span>cm<br>Width</p></div>
            <div class="section-inline"><p><span>92</span>cm<br>Height</p></div>
            <div class="section-inline"><p><span>14</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>

  <script src="./script.js"></script>
</body>


</html>

    CSS :

    This CSS styles the animated chair product page, giving it a dark modern look with a Poppins font. It sets up layouts, spacing, and typography for headings, paragraphs, buttons, and color selectors. The .img-wrap and .back-color classes handle chair images and background gradients, which change and animate when users select different colors. Radio inputs are hidden, and labels act as interactive color buttons. Animations like shake effects for chair images and smooth transitions for descriptions, buttons, and backgrounds enhance interactivity. Media queries ensure the page is responsive on tablets and mobiles.

    @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;
  border: none;
  cursor: pointer;
  color: #ffeba7;
  margin-right: 10px;
  box-shadow: 0 12px 35px 0 rgba(16, 39, 112, 0.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("/mat_images/mat1.png");
}
label.color-2 {
  background-image: url("/mat_images/mat2.png");
}
label.color-3 {
  background-image: url("/mat_images/mat3.png");
}
label.color-4 {
  background-image: url("/mat_images/mat4.png");
}
label.color-5 {
  background-image: url("/mat_images/mat5.png");
}
label.color-6 {
  background-image: url("/mat_images/mat6.png");
}

.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("/chair_images/ch1.png");
  opacity: 0;
}
.for-color-1:checked ~ .img-wrap.chair-1 {
  opacity: 1;
  animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-2 {
  background-image: url("/chair_images/ch2.png");
}
.for-color-2:checked ~ .img-wrap.chair-2 {
  opacity: 1;
  animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-3 {
  background-image: url("/chair_images/ch3.png");
}
.for-color-3:checked ~ .img-wrap.chair-3 {
  opacity: 1;
  animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-4 {
  background-image: url("/chair_images/ch4.png");
}
.for-color-4:checked ~ .img-wrap.chair-4 {
  opacity: 1;
  animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-5 {
  background-image: url("/chair_images/ch5.png");
}
.for-color-5:checked ~ .img-wrap.chair-5 {
  opacity: 1;
  animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.img-wrap.chair-6 {
  background-image: url("/chair_images/ch6.png");
}
.for-color-6:checked ~ .img-wrap.chair-6 {
  opacity: 1;
  animation: shake 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.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;
  color: #fff;
  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, 0.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, 0.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;
  }
}

    In conclusion, creating an Animated Chair Product Page with HTML and CSS is a fun way to practice web design. With animations and clean styling, you can turn a simple product page into something eye-catching and professional.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply