Dandy Mott (Thread)

[dohtml]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<style>
#dandy-thread{
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 300px;
  height: 450px;
  background: #ddd;
  border: 5px solid #fff;
  outline: 1px solid #6AC3E7;
  transition: 0.7s;
}
#dandy-thread:hover{
  background: #6AC3E7;
}

#dandy-thread ::-webkit-scrollbar {
    width: 3.5px;
}

#dandy-thread ::-webkit-scrollbar-track {
    background: #ddd;
    border: 1px solid #fff;
}

#dandy-thread ::-webkit-scrollbar-thumb {
    background: #fff;
    border: 0.5px solid #6AC3E7;
}

#dandy-thread .base{
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #fff;
  width: 260px;
  height: 370px;
}

#dandy-thread .avatar{
  border-radius: 100px;
  position: absolute;
  top: 20px;
  left: 105px;
  background: url(https://i.imgur.com/RaPkzhn.gif);
  background-size: 80px;
  width: 80px;
  height: 80px;
  border: 5px solid #fff;
}

#dandy-thread .tagbox{
  line-height: 13px;
  font-family: 'Lato', sans-serif;
  font-size: 8.5px;
  position: absolute;
  color: #111;
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: #ddd;
  width: 260px;
  height: 25px;
  padding-top: 10px;
  border-top: 0.5px solid #6AC3E7;
}

#dandy-thread .quotebox{
  line-height: 12px;
  font-family: 'Lato', sans-serif;
  font-size: 8.5px;
  position: absolute;
  color: #fff;
  bottom: 20px;
  left: 20px;
  background: #6AC3E7;
  width: 260px;
  height: 25px;
  transition: 0.7s;
  padding-top: 10px;
}

#dandy-thread:hover .quotebox{
  opacity: 0;
}

#dandy-thread .textbox{
  font-family: 'Lato', sans-serif;
  font-size: 9px;
  line-height: 12px;
  color: #111;
  text-align: justify;
  overflow: auto;
  position: absolute;
  bottom: 90px;
  left: 60px;
  background: #fff;
  width: 180px;
  height: 227px;
  transition: 0.7s;
  padding-right: 10px;
}

#dandy-thread n {
  font-style: italic;
  color: #000;
  border-bottom: 0.5px solid #fff;
}
#dandy-thread .cred a{
  position: absolute;
  bottom: 2px;
  font-family: calibri;
  margin-left: 5px;
  text-decoration: none;
  font-size: 7px;
  color: #fff;
  opacity: 0.1;
}

</style>

<center>
<div id='dandy-thread'>

    <div class='base'></div>

    <div class='avatar'></div>

    <div class='textbox'>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed libero ligula. Ut vestibulum pellentesque maximus. Sed feugiat, lorem a accumsan facilisis, dui nulla lobortis est, et convallis nulla nibh sed erat. Praesent sagittis tincidunt ipsum, id maximus urna iaculis vitae. Donec id tincidunt tortor, porta laoreet felis. Sed rutrum dui enim, non maximus orci eleifend commodo.
          <p>
          Cras lacus nunc, luctus sed quam eu, venenatis faucibus ipsum. Aliquam in risus vel felis commodo fermentum a et metus.Proin pellentesque ac lorem eleifend posuere. Maecenas dolor justo, venenatis ac urna eu, venenatis tincidunt dolor. Maecenas sagittis egestas mollis. Aliquam fermentum eros in interdum auctor. Nunc a sem commodo, sagittis enim eget, interdum dolor. In hac habitasse platea dictumst.
          <p>
          Fusce at finibus sapien. Aenean auctor, libero vitae faucibus volutpat, ipsum leo pulvinar felis, eu commodo elit ex ut tortor. Praesent sit amet purus urna. Pellentesque ullamcorper ex a nulla varius, at eleifend nibh elementum. Duis faucibus, enim pretium auctor sagittis, quam sem condimentum est, eu molestie enim eros et dui. Sed dictum libero a dapibus molestie. Duis a quam placerat, tempus velit eleifend, dictum ante.
          <p>
          Donec tempus accumsan tempor. Ut ac turpis sit amet tellus bibendum pharetra. Pellentesque rutrum efficitur massa at venenatis. Ut erat libero, lobortis vitae porttitor sed, luctus nec ante. Duis risus eros, tincidunt vel rhoncus id, tristique vitae lectus.
    </div>

    <div class='tagbox'>
        <i class="fa fa-tags" style="font-size:11px;color:#222;margin-right:8px;"></i>
         #tags #moretagshere #justkeepitshort
       </div>

    <div class='quotebox'>
        <i class="fa fa-quote-left" style="font-size:7px;color:#fff;margin-right:2px;font-style:italic;"></i>
        Your silence is utterly provocative.
        <i class="fa fa-quote-right" style="font-size:7px;color:#fff;margin-left:1px;margin-right:3px;font-style:italic;"></i>
        — <n>Dandy Mott</n>
    </div>

    <div class='cred'><a href="https://shadowplayers.jcink.net/index.php?showuser=95" title='hanie@SP'>©</a></div>

</div>
</center>
[/dohtml]