Homemade Dynamite (thread)

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,500" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
#homemade-dynamite {
  width: 500px;
  height: 500px;
  background: transparent;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
}

#homemade-dynamite ::-webkit-scrollbar {
  width: 3.5px;
}

#homemade-dynamite ::-webkit-scrollbar-track {
  background: #F5E5E9;
  border: 0.5px solid #F5E5E9;
}

#homemade-dynamite ::-webkit-scrollbar-thumb {
  background: #F5E5E9;
  border: 0.5px solid #C33E4C;
  border-radius: 10px;
}

#homemade-dynamite .base{
  width: 500px;
  height: 450px;
  background: #F5E5E9;
  position: absolute;
  top: 25px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 1s ease-in 1.2s;
  transition: 1s ease-in 1.2s;
}
#homemade-dynamite:hover .base{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 1s ease-in 0.8s;
  transition: 1s ease-in 0.8s;
}

#homemade-dynamite .box{
  position: absolute;
  top: -10px;
  left: 60px;
  width: 390px;
  height: 470px;
  background: transparent;
  border: 0.5px solid #434C60;
  overflow: hidden;
}

#homemade-dynamite .box2{
  position: absolute;
  bottom: -420px;
  left: 1px;
  width: 390px;
  height: 500px;
  background: transparent;
  -webkit-transition: 1s ease-in 0s;
  transition: 1s ease-in 0s;
  overflow: hidden;
}
#homemade-dynamite:hover .box2{
  bottom: 0px;
  -webkit-transition: 1s ease-in 2s;
  transition: 1s ease-in 2s;
}

#homemade-dynamite .scrollbox{
  position: absolute;
  overflow: auto;
  width: 210px;
  height: 200px;
  top: 173px;
  left: 87px;
  color: #434C60;
  font-family: 'Times';
  font-size: 10.5px;
  letter-spacing: 0px;
  text-align: justify;
  line-height: 13px;
  padding-right: 10px;
}

#homemade-dynamite .title{
  position: absolute;
  width: 150px;
  height: 40px;
  background: transparent;
  top: 95px;
  right: 77px;
  text-align: left;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  color: #C33E4C;
  font-size: 19px;
  letter-spacing: 0px;
  line-height: 20px;
  font-style: italic;
  text-transform: uppercase;
}

#homemade-dynamite .icon{
  position: absolute;
  width: 52px;
  height: 52px;
  background: transparent;
  border: 0.5px solid #434C60;
  border-radius: 100px;
  top: 85px;
  left: 93px;
  padding: 4px;
}

#homemade-dynamite .footer{
  position: absolute;
  width: 283px;
  background: #F5E5E9;
  bottom: 40px;
  left: 0px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: #C33E4C;
  font-size: 9px;
  letter-spacing: 0px;
  line-height: 10px;
  font-style: italic;
  text-transform: uppercase;
  border-top: 0.5px solid #434C60;
  padding: 15px 60px;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
  -webkit-transition: 0.3s ease-in 0s;
  transition: 0.3s ease-in 0s;
  opacity: 1;
}
#homemade-dynamite .footer:hover{
  opacity: 0;
}

#homemade-dynamite .footer2{
  position: absolute;
  width: 283px;
  background: transparent;
  bottom: 40px;
  left: 0px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: #C33E4C;
  font-size: 9px;
  letter-spacing: 0px;
  line-height: 10px;
  font-style: italic;
  text-transform: uppercase;
  border-top: 0.5px solid #434C60;
  padding: 15px 60px;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

#homemade-dynamite .title{
  position: absolute;
  width: 200px;
  height: 40px;
  background: transparent;
  top: 250px;
  right: 0px;
  text-align: left;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  color: #C33E4C;
  font-size: 26px;
  letter-spacing: 0px;
  line-height: 27px;
  font-style: italic;
  text-transform: uppercase;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: 1s ease-in 1.2s;
  transition: 1s ease-in 1.2s;
}
#homemade-dynamite:hover .title{
  -webkit-transition: 1s ease-in 0.8s;
  transition: 1s ease-in 0.8s;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 80px;
  right: 65px;
  font-size: 19px;
  line-height: 19px;
}

#homemade-dynamite .slash{
  position: absolute;
  width: 340px;
  background: transparent;
  bottom: 110px;
  left: 49px;
  border-top: 0.5px solid #434C60;
  -webkit-transform: rotate(2deg);
  transform: rotate(2deg);
  opacity: 1;
  -webkit-transition: 0.5s ease-in 2.5s;
  transition: 0.5s ease-in 2.5s;
}
#homemade-dynamite:hover .slash{
  opacity: 0;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}

#homemade-dynamite .big-icon{
  position: absolute;
  width: 120px;
  height: 120px;
  background: transparent;
  border: 0.5px solid #434C60;
  border-radius: 100px;
  top: 320px;
  left: 155px;
  padding: 8px;
  opacity: 1;
  -webkit-transition: 0.5s ease-in 2.5s;
  transition: 0.5s ease-in 2.5s;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#homemade-dynamite:hover .big-icon{
  opacity: 0;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}

</style>
<center>
<div id='homemade-dynamite'>

  <div class='base'>
    <div class='box'>

        <div class='box2'>
          <div class='icon'>
          <a href="http://candyland-couture.com/index.php?showuser=7400" title="hanie ©">
          <img src="https://i.imgur.com/kkJGSgZ.gif" style="border-radius:100px;width:52px;">
          </a></div>

          <div class='scrollbox'>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur, tellus porta aliquam pharetra, diam dui pharetra mauris, egestas feugiat risus sapien sed dui. Suspendisse mollis lectus erat, nec tincidunt mi congue sit amet. Vivamus vitae egestas ligula. Pellentesque volutpat sit amet nunc nec posuere. Suspendisse finibus nunc quis dolor rhoncus tincidunt. Etiam non ullamcorper tellus. Sed sit amet magna nunc. Vestibulum viverra nisl eu arcu pharetra, nec elementum mi bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubili.
              <p>
              Nulla consectetur tortor non dapibus lobortis. Phasellus laoreet convallis varius. Mauris vehicula fermentum dolor ut malesuada. Pellentesque porta tellus eu nisi finibus, eu placerat ex varius. Cras dapibus eros ut mollis euismod. Donec rhoncus orci quis justo tincidunt molestie. Aliquam scelerisque efficitur orci sed aliquet. Maecenas laoreet justo arcu, ac posuere velit malesuada malesuada. Nunc feugiat id risus vitae posuere. Pellentesque interdum sapien ac orci lacinia, eget rutrum urna tempor. Integer sollicitudin rutrum est eu auctor.
          </div>

          <div class='footer2'> " put your short lyrics here "</div>
          <div class='footer'> ## put some tags here // hover for lyrics</div>

        </div>

    </div>
  </div>

     <div class='single'>
          <div class='slash'></div>

          <div class='big-icon'><img src="https://i.imgur.com/p1IMUR4.gif" style="border-radius:100px;width:120px;"></div>

          <div class='title'>
              — Homemade<br> dynamite</p>
          </div>
     </div>

</div>
</center>