Lestat

[dohtml]
<! A TEMPLATE BY HANIE(ORPHEUS) !>

<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=Montserrat|Roboto:900|Lato|Montserrat:400,800" rel="stylesheet">

<style>

#lestat-shipper{
 width: 350px;
 height: 500px;
 position: relative;
 margin: 0 auto;
 overflow: hidden;
 outline: 1.5px solid #b8674a;
 border: 3px solid #fff;
}

#lestat-shipper ::-webkit-scrollbar {
 width: 2px;
}

#lestat-shipper ::-webkit-scrollbar-track {
 background: #222;
 border: 0.5px solid #eee;
}

#lestat-shipper ::-webkit-scrollbar-thumb {
 background: #AB5130;
}

#lestat-shipper .cred a{
 text-decoration: none;
 position: absolute;
 font-family: calibri;
 font-size: 7px;
 width: 10px;
 height: 10px;
 bottom: 10px;
 right: 10px;
 color: #ddd;
 opacity: 0.2;
}

#lestat-shipper .base{
 width: 350px;
 height: 500px;
 background: #1f1e22;
}

#lestat-shipper .namecard{
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 350px;
 height: 90px;
 background: #972e27;
}

#lestat-shipper .box{
 position: absolute;
 top: 10px;
 left: 9px;
 width: 333px;
 height: 390px;
}

#lestat-shipper .icon{
 border-radius: 10px;
 width: 35px;
 height: 35px;
 background: url(https://i.imgur.com/znfLBhb.gif);
 background-size: 35px;
 border: 4px solid #eee;
 margin-top: 7px;
}

#lestat-shipper .avatar{
 width: 60px;
 height: 70px;
 padding-left: 15px;
}

#lestat-shipper .fullname{
 padding-top: 7px;
 width: 190px;
 height: 70px;
}

#lestat-shipper f{
 color: #fff;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 1px;
}

#lestat-shipper m{
 color: #fff;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 font-weight: 400;
 text-transform: uppercase;
 letter-spacing: 1px;

}

#lestat-shipper l{
 color: #fff;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: 1px;
}

#lestat-shipper .fa{
 margin-left: 18px;
 text-align: center;
 font-size: 20px;
 color: #972e27;
 padding: 0px 17px 10px 17px;;
 width: 95px;
 border-bottom: 0.5px solid #000;
}

#lestat-shipper .minibox{
 width: 175px;
 height: 194px;
 background: #eee;
 transition: 0.7s;
 transform: scale(0);
}
#lestat-shipper .minibox:hover{
 width: 175px;
 height: 194px;
 background: #eee;
 transform: scale(1);
}

#lestat-shipper .scrollbox{
  font-family: courier;
  font-style: italic;
  font-size: 8px;
  text-align: justify;
  line-height: 10px;
  width: 105px;
  height: 137px;
  overflow: auto;
  padding-right: 5px;
  margin-left: 30px;
}

#lestat-shipper .hoverbox{
 width: 175px;
 height: 194px;
 background: #eee;
}

#lestat-shipper .titlebox{
  width: 75px;
  height: 130px;
  overflow: auto;
  padding: 20px;
  margin-left: 30px;
  line-height: 10px;
}

#lestat-shipper ttl{
  position: relative;
  top: 50px;
  left: 15px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 20px;
  text-align: justify;
  line-height: 10px;
  text-transform: uppercase;
  padding: 5px 15px;
  border-right: 2px solid #000;
  border-bottom: 0.5px solid #000;
  color: #AB5130;
  background: #fff;
}

#lestat-shipper min{
  position: relative;
  top: 50px;
  left: 15px;
  font-family: courier;
  font-size: 10px;
  font-style: italic;
  line-height: 10px;
  text-transform: lowercase;
}

#lestat-shipper .quote{
  font-family: courier;
  font-size: 8px;
  font-style: italic;
  color: #eee;
  text-transform: lowercase;
  line-height: 10px;
}

</style>

<center>
<div id='lestat-shipper'>

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

   <div class='box'>
         <table cellspacing='1'>
           <tr>
             <td class='hoverbox'>
                  <div class='titlebox'>
                     <ttl>A</ttl><p>
                     <min>about</min>
                   </div>
             </td>
             <td class='hoverbox'>
               <div class='titlebox'>
                     <ttl>L</ttl><p>
                     <min>lovers</min>
                   </div>
             </td>
           </tr>

           <tr>
             <td class='hoverbox'>
               <div class='titlebox'>
                     <ttl>F</ttl><p>
                     <min>friends</min>
                   </div>
             </td>
             <td class='hoverbox'>
               <div class='titlebox'>
                    <ttl>E</ttl><p>
                     <min>enemies</min>
                   </div>
             </td>
           </tr>
         </table>
   </div>

   <div class='box'>
         <table cellspacing='1'>
           <tr>
             <td class='minibox'>
                  <div class='scrollbox'>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper sodales imperdiet.
                     Nulla facilisi. Suspendisse semper tincidunt neque, sit amet commodo sapien.
                     Fusce vel pellentesque sem. Cras nisl nibh, faucibus eget neque sed.
                     tincidunt tempor augue.
                     Praesent vitae ante libero. Nullam venenatis semper est, at auctor dui rhoncus sed.
                     Ut tincidunt aliquet sem, eget mattis leo fermentum et. Etiam in ante et arcu porta accumsan.
                     Etiam dapibus mi vitae eros maximus, ut luctus nunc rhoncus.
                   </div>
             </td>
             <td class='minibox'>
               <div class='scrollbox'>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper sodales imperdiet.
                     Nulla facilisi. Suspendisse semper tincidunt neque, sit amet commodo sapien.
                     Fusce vel pellentesque sem. Cras nisl nibh, faucibus eget neque sed.
                     tincidunt tempor augue.
                     Praesent vitae ante libero. Nullam venenatis semper est, at auctor dui rhoncus sed.
                     Ut tincidunt aliquet sem, eget mattis leo fermentum et. Etiam in ante et arcu porta accumsan.
                     Etiam dapibus mi vitae eros maximus, ut luctus nunc rhoncus.
                   </div>
             </td>
           </tr>

           <tr>
             <td class='minibox'>
               <div class='scrollbox'>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper sodales imperdiet.
                     Nulla facilisi. Suspendisse semper tincidunt neque, sit amet commodo sapien.
                     Fusce vel pellentesque sem. Cras nisl nibh, faucibus eget neque sed.
                     tincidunt tempor augue.
                     Praesent vitae ante libero. Nullam venenatis semper est, at auctor dui rhoncus sed.
                     Ut tincidunt aliquet sem, eget mattis leo fermentum et. Etiam in ante et arcu porta accumsan.
                     Etiam dapibus mi vitae eros maximus, ut luctus nunc rhoncus.
                   </div>
             </td>
             <td class='minibox'>
               <div class='scrollbox'>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce semper sodales imperdiet.
                     Nulla facilisi. Suspendisse semper tincidunt neque, sit amet commodo sapien.
                     Fusce vel pellentesque sem. Cras nisl nibh, faucibus eget neque sed.
                     tincidunt tempor augue.
                     Praesent vitae ante libero. Nullam venenatis semper est, at auctor dui rhoncus sed.
                     Ut tincidunt aliquet sem, eget mattis leo fermentum et. Etiam in ante et arcu porta accumsan.
                     Etiam dapibus mi vitae eros maximus, ut luctus nunc rhoncus.
                   </div>
             </td>
           </tr>
         </table>
   </div>


   <div class='namecard'>
     <table>
       <tr>
         <td class='avatar'><div class='icon'></div></td>
         <td class='fullname'><f>first</f> <m>middle</m> <l>last</l>
           <div class='quote'>—— "Very few beings really seek knowledge in this world"<br>
            </div></td>
         </td>
       </tr>
     </table>
   </div>

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

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