Sublime

<! A TEMPLATE BY HANIE(ORPHEUS) !>

<link href="https://fonts.googleapis.com/css?family=Montserrat:500,700|Unica+One" rel="stylesheet">

<style>
#sublime{
  width: 350px;
  height: 500px;
  outline: 2px solid #A4C895;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  background: #fff;
}

#sublime .cred a{
  position: absolute;
  bottom: 6px;
  right: 12px;
  text-decoration: none;
  color: #F2F2DA;
  font-family: calibri;
  font-size: 8px;
}

#sublime ::-webkit-scrollbar {
    width: 5px;
}

#sublime ::-webkit-scrollbar-track {
    background: #fff;
    border: 1px solid #fff;
}


#sublime ::-webkit-scrollbar-thumb {
    border: 1px solid #F2F2DA;
    background: #fff;
}

#sublime .base{
  margin: 10px;
  border: 1px solid #fff;
  position: absolute;
  top: 15px;
  left: 15px;
  background: url(http://static.colourlovers.com/images/patterns/1279/1279195.png);
}

#sublime .char-name{
  font-family: 'Unica One', cursive;
  font-size: 15px;
  font-weight: bold;
  letter-spacing:3px;
  background: #fff;
  width: 210px;
  height: 40px;
  color: #A4C895;
  text-align: center;
  margin: 10px;
  text-transform: uppercase;
}

#sublime .avatar{
  width: 30px;
  background: url(https://i.imgur.com/0jnfoan.gif);
  background-size: 32px;
  background-position: center;
  border: 4px solid #fff;
}

#sublime .container{
  position: absolute;
  top: 120px;
  left: 35px;
  background: #fff;
  width: 280px;
  height: 355px;
  overflow: auto;
  padding-right: 10px;
}

#sublime l{
  font-family: 'Unica One', cursive;
  font-size: 13px;
  font-weight: bold;
  padding: 15px 17px;
  margin: 30px;
  background: #fff;
  float: left;
  color: #A4C895;
  border: 1px solid #A4C895;
}

#sublime r{
  font-family: 'Unica One', cursive;
  font-size: 12px;
  font-weight: bold;
  padding: 15px 17px;
  margin: 30px;
  background: #fff;
  float: right;
  color: #618C75;
  border: 1px solid #618C75;
}

#sublime .texts{
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  font-weight: 500;
  text-align: justify;
  line-height: 12px;
  color: #444;
  border-bottom: 0.5px solid #ddd;
  padding-bottom: 20px;
}

#sublime .white{
  background: #fff;
  width: 200px;
}

</style>

<center>
<div id='sublime'>
    <div class='base'>
      <table cellspacing='17'>
        <tr>
          <td class='char-name'>first m. last</td>
          <td class='avatar'></td>
        </tr>
      </table>
    </div>

    <div class='container'>
      <table>
        <tr>
          <td class='texts'>
          <l title='about'>A</l>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet elit eget mauris interdum posuere eget ut velit. Nam enim arcu, malesuada ac rhoncus nec, eleifend sit amet leo. Aenean scelerisque sem in quam pellentesque, at venenatis ligula aliquam. Nulla maximus tempus vulputate.
          Phasellus et mollis mauris. In tincidunt consectetur tellus ac dapibus. Nulla facilisi. Ut condimentum, turpis nec congue viverra, urna tellus volutpat diam, a pellentesque lorem justo at mi. Donec egestas ligula ac augue varius.
          </td>
        </tr>
      </table>
      <p>
      <table>
        <tr>
          <td class='texts'>
          <r title='enemies'>E</r>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet elit eget mauris interdum posuere eget ut velit. Nam enim arcu, malesuada ac rhoncus nec, eleifend sit amet leo. Aenean scelerisque sem in quam pellentesque, at venenatis ligula aliquam. Nulla maximus tempus vulputate.
          Phasellus et mollis mauris. In tincidunt consectetur tellus ac dapibus. Nulla facilisi. Ut condimentum, turpis nec congue viverra, urna tellus volutpat diam, a pellentesque lorem justo at mi. Donec egestas ligula ac augue varius.

          </td>
        </tr>
      </table>
      <p>
       <table>
        <tr>
          <td class='texts'>
          <l title='friends'>F</l>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet elit eget mauris interdum posuere eget ut velit. Nam enim arcu, malesuada ac rhoncus nec, eleifend sit amet leo. Aenean scelerisque sem in quam pellentesque, at venenatis ligula aliquam. Nulla maximus tempus vulputate.
          Phasellus et mollis mauris. In tincidunt consectetur tellus ac dapibus. Nulla facilisi. Ut condimentum, turpis nec congue viverra, urna tellus volutpat diam, a pellentesque lorem justo at mi. Donec egestas ligula ac augue varius.
          </td>
        </tr>
      </table>
      <p></p>
      <table>
        <tr>
          <td class='texts'>
          <r title='lovers'>L</r>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet elit eget mauris interdum posuere eget ut velit. Nam enim arcu, malesuada ac rhoncus nec, eleifend sit amet leo. Aenean scelerisque sem in quam pellentesque, at venenatis ligula aliquam. Nulla maximus tempus vulputate.
          Phasellus et mollis mauris. In tincidunt consectetur tellus ac dapibus. Nulla facilisi. Ut condimentum, turpis nec congue viverra, urna tellus volutpat diam, a pellentesque lorem justo at mi. Donec egestas ligula ac augue varius.
          </td>
        </tr>
      </table>
    </div>

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

</div>
</center>