Pureblood (thread)

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<style>
#pureblood-thread{
  background: url(https://i.imgur.com/H5jwXe5.jpg);
  background-size: 600px;
  background-position: center;
  width: 350px;
  height: 600px;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
}

#pureblood-thread .overlay{
  background: #000;
  width: 350px;
  height: 600px;
  position: relative;
  opacity: 0.8;
}

#pureblood-thread ::-webkit-scrollbar {
  width: 0px;
}

#pureblood-thread ::-webkit-scrollbar-track {
  border: 1px solid #000;
}

#pureblood-thread ::-webkit-scrollbar-thumb {
  border: 1px solid #000;
}

#pureblood-thread .title{
  width: 350px;
  height: 42px;
  background: transparent;
  position: absolute;
  top: 55px;
  left: 5px;
  font-family: 'Roboto', serif;
  font-size: 12.5px;
  letter-spacing: 10px;
  line-height: 18px;
  color: #aaa;
  text-transform: uppercase;
  font-style: italic;
  opacity: 0.9;
}

#pureblood-thread .title2{
  width: 350px;
  height: 42px;
  background: transparent;
  position: absolute;
  top: 44px;
  left: -13px;
  font-family: 'Roboto', serif;
  font-size: 13px;
  letter-spacing: 10px;
  line-height: 18px;
  color: #1a472a;
  text-transform: uppercase;
  font-weight: bold;
}

#pureblood-thread .title3{
  width: 350px;
  height: 42px;
  background: transparent;
  position: absolute;
  top: 70px;
  left: 5px;
  font-family: 'Roboto', serif;
  font-size: 13px;
  letter-spacing: 10px;
  line-height: 18px;
  color: #1a472a;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0.8;
}

#pureblood-thread .border{
  width: 350px;
  height: 380px;
  background: #000;
  border-top: 1px solid #2a623d;
  border-bottom: 1px solid #2a623d;
  position: absolute;
  top: 145px;
}

#pureblood-thread .box{
  background: #111;
  border: 30px solid #111;
  width: 220px;
  height: 220px;
  margin: 0px auto;
  position: absolute;
  top: 65px;
  left: 35px;
  opacity: 0.75;
}

#pureblood-thread .textbox{
  background: #111;
  border: 30px solid #111;
  outline: 1.5px solid #3B8254;
  width: 200px;
  height: 200px;
  margin: 0px auto;
  position: absolute;
  top: -20px;
  left: -20px;
  color: #aaaaaa;
  overflow: auto;
  font-family: 'Roboto', sans-serif;
  font-size: 9px;
  letter-spacing: 0px;
  text-align: justify;
  line-height: 13px;
}

#pureblood-thread .icon{
  width: 350px;
  height: 380px;
  background: transparent;
  position: absolute;
  bottom: 0px;
  left: -43px;
  color: #5d5d5d;
  text-align: right;
  font-size: 380px;
  opacity: 0.35;
}

#pureblood-thread .tags{
  background: transparent;
  width: 260px;
  height: 30px;
  margin: 0px auto;
  position: absolute;
  bottom: 15px;
  left: 45px;
  text-transform: uppercase;
  text-align: right;
  color: #aaa;
  font-size: 8px;
  font-family: 'Roboto', sans-serif;
}
#pureblood-thread .tags t{
  color: #888;
  font-size: 8px;
  letter-spacing: 1.5px;
  font-weight: bold;
  margin-right: 10px;
}
#pureblood-thread .tags b{
  color: #3B8254;
  font-family: 'Roboto', sans-serif;
  font-size: 8px;
  letter-spacing: 2px;
  line-height: 10px;
  margin-left: 10px;
  border-bottom: 0.5px dashed #999;
  padding-bottom: 3px;
}

#pureblood-thread .avatar{
  background: #000;
  width: 55px;
  height: 55px;
  position: absolute;
  top: 114px;
  left: 144px;
  transform: rotate(-45deg);
  border: 5px solid #111;
  outline: 1.5px solid #2a623d;
}
#pureblood-thread .avatar img{
  width: 52px;
  height: 52px;
  opacity: 0.65;
  margin-top: 0.5px;
}

#pureblood-thread a{
  text-decoration: none;
  color: #3B8254;
}

</style>

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

  <div class='overlay'></div>

  <div class='title'>pureblood</div>
  <div class='title2'>pureblood</div>
  <div class='title3'>pureblood</div>

  <div class='border'>
     <div class='icon'>
        <span class="th th-cobra-o"></span>
     </div>

     <div class='box'>
       <div class='textbox'>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper neque non elit venenatis cursus in consectetur nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis viverra augue vitae velit convallis, in semper nulla eleifend. Quisque facilisis justo placerat, facilisis sapien ut, condimentum augue. Ut ut dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
       <p>
       Aenean et tellus est. Vestibulum et pharetra odio. Ut quis ipsum magna. Vestibulum euismod finibus mauris id accumsan. Nulla imperdiet ornare nisl quis condimentum. Nam et aliquam nulla, a varius justo. Donec laoreet mauris eget sem mattis euismod. Maecenas fringilla consequat libero, sed lobortis turpis dapibus sit amet. In porttitor lacinia turpis vel hendrerit. Nunc sit amet ultricies est. Vivamus enim ante, egestas eget efficitur sit amet, imperdiet ut nulla. Etiam dictum efficitur ullamcorper. Mauris vel auctor neque.
       <p>
       Aliquam dictum risus in enim euismod volutpat. In pulvinar erat et iaculis tincidunt. Integer ultrices malesuada sapien, quis molestie elit lobortis eu. Nullam dapibus semper nulla, eget accumsan sem pharetra a. In porttitor ipsum et ligula faucibus pellentesque. Nam vehicula, nibh auctor ornare fermentum, mauris felis mollis sem, id euismod ligula dolor at massa. Nam commodo metus ut vestibulum commodo. Morbi tincidunt pretium mi, quis consequat purus suscipit nec. Cras quis pulvinar elit.
       </div>
     </div>
  </div>

  <div class='avatar'>
    <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
    <img src='https://i.imgur.com/ZlleOrt.gif'></a>
  </div>

  <div class='tags'>
    <t>tags</t>// <a href='#'><b># your tag here #</b></a>
  </div>

</div>
</center>