Cupcake (thread)

<link href="https://fonts.googleapis.com/css?family=Montserrat:500,600" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<style>
#cupcake-thread{
  position: relative;
  margin: 10px auto;
  background: #ffffff;
  width: 500px;
  height: 520px;
  overflow: hidden;
  border: 1px solid #dddddd;
  border-radius: 20px;
}

#cupcake-thread ::-webkit-scrollbar{
  width: 6px;
}

#cupcake-thread ::-webkit-scrollbar-track{
  background: #fff;
  border-radius: 50px;
  border: 1px solid #dddddd;
}

#cupcake-thread ::-webkit-scrollbar-thumb{
  background: #ffc6e5;
  border-radius: 50px;
  border: 1px solid #F3A6D0;
}

#cupcake-thread .header{
  position: absolute;
  background: #f8ff89;
  width: 488px;
  height: 105px;
  top: 5px;
  left: 5px;
  border-radius: 15px 15px 0px 0px;
  border: 1px solid #E2EA6E;
  overflow: hidden;
}

#cupcake-thread .header-icon{
  position: absolute;
  top: -15px;
  left: 45px;
  color: #E2EA6E;
  font-size: 150px;
  transform: rotate(15deg);
}

#cupcake-thread .quote-box{
  position: absolute;
  background: #ffffff;
  width: 380px;
  padding: 15px;
  top: 32px;
  right: -10px;
  border-radius: 20px 0px 0px 20px;
  border: 1px solid #E2EA6E;
  text-align: justify;
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 9px;
  color: #222222;
  text-align: center;
}

#cupcake-thread .avatar{
  position: absolute;
  background: #ffffff;
  width: 210px;
  height: 320px;
  bottom: 81px;
  left: 5px;
  border: 1px solid #dddddd;
}

#cupcake-thread .avatar img{
  margin-left: 5px;
  margin-bottom: 5px;
  position: absolute;
  background: #eee;
  bottom: 0px;
  left: 0px;
}

#cupcake-thread .text-bg{
  position: absolute;
  background: url(https://i.imgur.com/X9VW1L9.jpg);
  background-size: 350px;
  width: 271.5px;
  height: 320px;
  bottom: 81px;
  right: 5px;
  border: 1px solid #F3A6D0;
}

#cupcake-thread .textbox{
  position: absolute;
  background: #ffffff;
  background-size: 400px;
  width: 239px;
  height: 283px;
  bottom: 16px;
  right: 15px;
  border-radius: 5px;
  border: 1px solid #F3A6D0;
  opacity: 0.93;
}

#cupcake-thread .text-scroll{
  position: absolute;
  background: #ffffff;
  background-size: 400px;
  width: 162px;
  height: 222px;
  bottom: 30px;
  right: 30px;
  overflow: auto;
  text-align: justify;
  padding-right: 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 15px;
  color: #222222;
}

#cupcake-thread .footer{
  position: absolute;
  background: #71EDE4;
  width: 488px;
  height: 70px;
  bottom: 5px;
  left: 5px;
  border-radius: 0px 0px 15px 15px;
  border: 1px solid #6DD8D1;
  overflow: hidden;
}

#cupcake-thread .footer-icon{
  position: absolute;
  bottom: -20px;
  right: 50px;
  color: #6DD8D1;
  font-size: 120px;
  transform: rotate(-20deg);
}

#cupcake-thread .tags{
  position: absolute;
  width: 488.5px;
  bottom: 28px;
  left: 5px;
}

#cupcake-thread .footer c{
  background: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 9px;
  color: #333333;
  padding: 5.5px 15px;
  border-radius: 25px;
  border: 1.5px solid #6DD8D1;
}

#cupcake-thread .footer a{
  text-decoration: none;
  color: #333333;
}

</style>
<center>
<div id="cupcake-thread">

  <div class="header">
      <div class="header-icon"><span class="sf sf-cupcake-o"></span></div>

      <div class="quote-box">
        Put your short lyrics or quotes here
      </div>
  </div>

  <div class="avatar">
    <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
    <img src="https://via.placeholder.com/200x310" width="200" height="310"></a>
  </div>

  <div class="text-bg">
    <div class="textbox">
        <div class="text-scroll">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam maximus ullamcorper nulla, ut sagittis arcu porttitor feugiat.
          Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla sed consequat nisl.
          Phasellus imperdiet ut risus at aliquet. Vivamus egestas efficitur pharetra.
          <br><br>
          Aliquam bibendum, quam vitae malesuada ullamcorper, metus tortor interdum ipsum, ultrices tempus libero ipsum a odio.
          Donec vitae efficitur odio. Nullam sollicitudin maximus lacus, nec blandit velit. In hac habitasse platea dictumst.
          Aliquam ac nisl quis risus placerat pretium. Phasellus mollis ante non sollicitudin commodo.
          <br><br>
          Morbi lorem felis, dignissim vitae gravida ut, fermentum sed ipsum. Nunc risus erat, cursus eu placerat vitae, aliquam ac mi.
          Donec nec ullamcorper turpis, id porttitor magna.
        </div>
    </div>
  </div>

  <div class="footer">
    <div class="footer-icon"><span class="sf sf-cupcake-o"></span></div>

    <div class="tags">
        <c>notes here</c> <c>@ tagging</c> <c># word count</c>
    </div>
  </div>

</div>
</center>