Coven (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=Muli|Montserrat:800" rel="stylesheet">

<style>
#coven-thread{
  width: 500px;
  height:500px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  background: #222;
  border: 4px solid #fff;
  outline: 1px solid #333;
}

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

#coven-thread ::-webkit-scrollbar-track {
    background: #444;
    border: 1px solid #eee;
}

#coven-thread ::-webkit-scrollbar-thumb {
    background: #333;
    border: 1px solid #333;
}

#coven-thread .main{
  position: absolute;
  bottom: 33px;
  right: 34px;
}

#coven-thread .textbox{
  font-family: 'Muli', sans-serif;
  font-size: 9px;
  color: #111;
  text-align: justify;
  width: 240px;
  height: 249px;
  overflow: auto;
  background: #eee;
  border: 30px solid #eee;
  outline-offset: 1px;
  outline: 4px solid #eee;
  padding-right: 10px;
  line-height: 12px;
}

#coven-thread .header{
  position: absolute;
  left: 30px;
  top: 30px;
  background: #B8B2A8;
  width: 438px;
  height: 110px;
}

#coven-thread .icon{
  position: absolute;
  top: 156px;
  left: 37px;
  background: url(https://i.imgur.com/dOe2kHj.gif);
  background-size: 170px;
  background-position: center;
  width: 90px;
  height: 90px;
  outline: 2px solid #799f94;
  outline-offset: 4px;
}

#coven-thread .tag-bar{
  position: absolute;
  top: 270px;
  left: 31px;
  width: 102px;
  height: 209px;
  background: transparent;
}

#coven-thread .tags{
  font-family: 'Muli', sans-serif;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ccc;
  width: 102px;
  background: transparent;
  border-bottom: 0.5px solid #666;
  padding: 10px 0px;
  text-align: center;
  line-height: 12px;
}

#coven-thread pt{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #799f94;
  width: 102px;
  background: transparent;
  padding: 10px 0px;
  text-align: center;
  line-height: 10px;
}

#coven-thread .title{
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  color: #B8B2A8;
  top: 5px;
  left: 5px;
  width: 427px;
  height: 69px;
  padding-top: 30px;
  background: #222;
}

#coven-thread .subttl{
  font-family: 'Muli', sans-serif;
  font-size: 9px;
  position: absolute;
  color: #bbb;
  top: 62px;
  left: 92px;
  border-top: 0.5px solid #777;
  padding: 3px 5px;
  line-height: 10px;
}

#coven-thread i2{
  color: #799f94;
  font-style: italic;
  line-height: 12px;
}

#coven-thread .cred a{
  position: absolute;
  bottom: 50px;
  left: 80px;
  text-decoration: none;
  color: #555;
  font-family: calibri;
  font-size: 8px;
}

</style>
<center>
<div id='coven-thread'>

  <div class='header'>
     <div class='title'>dys<i2>functional</i2></div>
     <div class='subttl'>
        <i class="fa fa-quote-left" style="font-size:8px;color:#799f94;;margin-right:2px;font-style:italic;"></i>
                i'm a <i2>miserable</i2>, <b>mean</b>, <s>goddamn bitch</s>. i always have been
        <i class="fa fa-quote-right" style="font-size:8px;color:#799f94;;margin-leftt:3px;font-style:italic;"></i>
      </div>
  </div>

  <div class='icon'></div>

  <div class='tag-bar'>
      <table>
        <tr>
          <td><i class="fa fa-tags" style="font-size:18px;color:#799f94;"></i></td>
        </tr>
      </table>

      <table>
        <tr>
          <td class='tags'>#anything #anythingatall #moretagshere #blabla</td>
        </tr>
        <tr>
          <td class='tags'><b><i>words count:</i></b><p>
                          <pt>1305</pt>
          </td>
        </tr>
      </table>
  </div>

  <table class='main'>
    <tr>
      <td>
      <div class='textbox'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis enim nisl, condimentum a ullamcorper quis, volutpat sit amet nisl. Aliquam a dolor id tortor egestas tempus vel at nulla. Praesent dolor nisl, varius sed varius ac, sagittis fermentum arcu. Morbi at urna posuere, accumsan sem vitae, fermentum nisl. In mollis enim id ante dapibus malesuada vel sed ipsum. Morbi mollis eros at blandit tincidunt. Maecenas dictum tempor euismod. Ut vehicula varius sem, at efficitur metus gravida sit amet. Cras sit amet sapien in eros tempor ultrices. Vestibulum vehicula vel nisl ut porttitor. Morbi et sem massa. Curabitur lobortis ipsum eu turpis varius elementum. Sed auctor nunc non sodales bibendum.
        <p>
        Praesent eu tortor id odio mollis pulvinar vel sit amet elit. Donec quis tristique sapien. Maecenas eget metus eu libero interdum vehicula. Phasellus ultricies egestas tincidunt. Vestibulum volutpat nisl et felis dictum hendrerit. Curabitur at commodo ex, at vestibulum eros. Curabitur ipsum elit, tempus sit amet ex non, sollicitudin maximus urna. Aenean viverra sapien id dui tristique, eu consequat orci convallis. Ut condimentum bibendum fringilla. Donec efficitur dictum purus vel porta. Mauris fermentum blandit neque ac condimentum. Nam ut mollis nulla. Vivamus tortor arcu, iaculis vitae malesuada eget, gravida quis risus. Integer fringilla, dui vel volutpat faucibus, neque ex fermentum sapien, ac ultricies metus turpis nec enim. Vivamus vestibulum accumsan risus eget tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        <p>
        Ut convallis lectus ut eros porta, viverra dapibus purus congue. Phasellus sit amet fringilla libero. Donec vestibulum porta metus, suscipit vulputate mauris euismod et. Sed semper rutrum pellentesque. Donec sit amet turpis vitae tortor viverra pulvinar. Donec sed purus consectetur, pulvinar nisl eget, tincidunt nisl. In faucibus venenatis congue. Fusce ac purus in orci blandit rutrum in rutrum urna. Integer pretium fringilla nisi. Aliquam lacus ex, egestas id nisl vel, dapibus faucibus massa. Suspendisse ullamcorper mattis nulla, sit amet ornare erat ultrices sed. Curabitur consequat diam ipsum, in sodales est rhoncus et. Cras lacinia consequat lacus a interdum. Curabitur ante justo, hendrerit in eleifend at, ultrices eu nisi. Ut eget justo ac purus maximus gravida eu quis felis.
        <p>
        Curabitur nibh odio, malesuada fermentum metus et, vulputate egestas leo. Proin nisl sapien, semper at lacus quis, ultrices feugiat turpis. Sed hendrerit justo ut dui ornare ornare. Donec vehicula tincidunt volutpat. Quisque volutpat ornare nulla id rhoncus. Duis sodales, turpis ut consequat finibus, magna turpis finibus ipsum, et suscipit orci nisi in ex. Nulla dapibus ornare diam vel gravida. Pellentesque commodo urna sed maximus accumsan. In accumsan felis ut pulvinar consectetur. Praesent aliquet eu urna sed efficitur. Curabitur rutrum eros quam, at euismod leo pellentesque ac. Aenean quis posuere sapien.
      </div>
      </td>
    </tr>
 </table>

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

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