ModernChair.css

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900");

*,
*::before,
*::after {
margin:0;
padding:0;
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-size:16px;
    font-weight: 400;
    line-height:1.7;
    color:#fff;
    margin:0;
}

.section-fluid-main{
    position:relative;
    /* these two tag together ensures that the element 
    behaves as a block-level element and takes 
    up the full width of its parent container. */
    display:block;
    width:100%;
    overflow:hidden;
 
}

.section{
    position:relative;
    /*max-width: calc(100% - 40px);: This ensures that the element does not exceed the width of its parent container minus 40 pixels.
     This is particularly useful for smaller screens or when the parent container is narrower than 860 pixels. 
     It makes the element responsive by allowing it to shrink to fit within the available space.
*/
max-width:calc(100%-40px);
width:860px;
    /*margin: 0 auto;: This centers the element
     horizontally within its parent container by 
     setting the top and bottom 
    margins to 0 and the left and right margins to auto.*/
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
 
    padding:100px 0;
}

.section-fluid{
    position:relative;
    width:100%;
    display:block;

}

/* attribute selector*/
/*to remove circle from radio button*/
[type="radio"]:checked,
[type="radio"]:not(:checked){
  position:absolute;
    visibility: hidden;
}

/* Adjacent Sibling Selector (+)
The adjacent sibling selector is used to select an element that is directly after another specific element. */

.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("./images/color1.jpg");

}

label.color-2{
    background-image: url("./images/color2.jpg");
}
label.color-3{
    background-image: url("./images/color3.jpg");
 }
 label.color-4{
    background-image: url("./images/color4.jpg");
 }
 label.color-5{
    background-image: url("./images/color5.jpg"); 
 }
 label.color-6{
    background-image: url("./images/color6.jpg");
 }
 .img-wrap{
position:absolute;
top: 100px;
left: 0;
width:550px;
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://modernchair.netlify.app/images/chair1.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(https://modernchair.netlify.app/images/chair2.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(	https://modernchair.netlify.app/images/chair3.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(https://modernchair.netlify.app/images/chair4.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(https://modernchair.netlify.app/images/chair5.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(https://modernchair.netlify.app/images/chair6.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;
/*The display: inline-flex; property in CSS is used to create a flex container that behaves like an inline element. 
This means that the container itself will be inline, but its children will be laid out using the flexbox model.  */

    display:inline-flex;
    align-items: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: #333;
  }

.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;
  }