Wicked Grace (App)

<link href="https://fonts.googleapis.com/css?family=Open+Sans|Monda:400,900|Montseratt:600,800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
#wckdgrc {
 width: 780px;
 height: 550px;
 background: #623131;
 position: relative;
 margin: 0px auto;
 overflow: hidden;
 border: 9px solid #fff;
 outline: 1px solid #000;
}

#wckdgrc ::-webkit-scrollbar {
 width: 1px;
}

#wckdgrc ::-webkit-scrollbar-track {
 background: #333;
 border: 1px solid #333;
}

#wckdgrc ::-webkit-scrollbar-thumb {
 background: #623131;
}

#wckdgrc .title{
 position: absolute;
 top: 45px;
 left: 50px;
 width: 210px;
 height: 50px;
 background: transparent;
 text-align: left;
}
#wckdgrc .title t1{
 font-family: 'Montseratt', sans-serif;
 font-weight: 800;
 font-size: 21px;
 color: #fff;
 text-transform: uppercase;
 line-height: 27px;
 padding-bottom: 7px;
 letter-spacing: 0px;
}

#wckdgrc .info-box{
 position: absolute;
 top: 120px;
 left: 50px;
 width: 120px;
 height: 342px;
 padding: 20px;
 background: #fff;
}
#wckdgrc .info-1{
 position: relative;
 top: 0px;
 left: 0px;
 text-align: justify;
}

#wckdgrc .info-1 b{
 font-family: 'Montseratt', sans-serif;
 font-weight: 800;
 font-size: 7px;
 color: #fff;
 letter-spacing: 0.5px;
 line-height: 18px;
 background: #623131;
 padding: 3px 8px;
 text-transform: uppercase;
}
#wckdgrc .info-1 .w{
 font-family: 'Monda', sans-serif;
 font-weight: 900;
 font-size: 8px;
 color: #000;
 padding: 2px 6px;
 letter-spacing: 0.px;
 line-height: 17.5px;
 border-bottom: 0.5px solid #555;
 text-transform: uppercase;
 margin-bottom: 10px;
}

#wckdgrc .scrollbox{
 width: 200px;
 height: 280px;
 background: #111;
 border: 35px solid #111;
 position: absolute;
 bottom: 80px;
 left: 270px;
 overflow: auto;
 font-family: 'Open Sans', sans-serif;
 font-size: 9.5px;
 font-weight: 400;
 line-height: 12px;
 text-align: justify;
 padding-right: 10px;
 letter-spacing: 0px;
 color: #eee;
}

#wckdgrc .scrollbox b{
 font-family: 'Montseratt', sans-serif;
 font-weight: 800;
 font-size: 11px;
 text-transform: uppercase;
 line-height: 30px;
 letter-spacing: 0px;
 background: #fff;
 border-bottom: 2px solid #623131;
 padding: 5px 20px;
 margin-right: 0px;
 color: #623131;
}

#wckdgrc .left{
 width: 240px;
 height: 550px;
 border-right: 1px solid #fff;
 background: #111;
 position: absolute;
 top: 0px;
 left: 0px;
}

#wckdgrc .icon{
 position: absolute;
 top: 40px;
 left: 205px;
 width: 60px;
 height: 60px;
 border: 1px solid #fff;
 border-radius: 100px;
 background: #111;
 padding: 5px;
}

#wckdgrc .info-3{
 position: absolute;
 bottom: 50px;
 right: 230px;
}

#wckdgrc .info-3 t{
 background: #fff;
 padding: 3px 9px;
 font-family: 'Monda', sans-serif;
 font-weight: 900;
 font-size: 8px;
 color: #111;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 margin-left: 3px;

 border: 0.5px solid #111;
}

#wckdgrc .info-2{
 position: absolute;
 top: 85px;
 right: 230px;
}

#wckdgrc .info-2 t{
 background: #fff;
 padding: 3px 9px;
 font-family: 'Monda', sans-serif;
 font-weight: 900;
 font-size: 8px;
 color: #111;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 margin-left: 3px;
 border: 0.5px solid #111;
}

#wckdgrc .fa{
 font-size:10px;
 color:#623131;
 margin-right:5px;"
}

#wckdgrc a{
 text-decoration: none;
 color: #000;
}

#wckdgrc .avatar{
 position: absolute;
 top: 121px;
 right: 50px;
 width: 140px;
 height: 270px;
 background: #ddd;
 border: 10px solid #fff;
}

#wckdgrc .alias a{
 position: absolute;
 bottom: 90px;
 right: 59px;
 width: 115px;
 height: 20px;
 padding: 7px 13px 5px 13px;
 background: #111;
 border-top: 2px solid #623131;
 outline: 10px solid #111;
 color: #fff;
 font-family: 'Montseratt', sans-serif;
 font-weight: 800;
 font-size: 13px;
 text-transform: uppercase;
 letter-spacing: 0px;
 margin-right: 0px;
}


</style>

<center>
<div id='wckdgrc'>

   <div class='left'></div>

   <div class='title'><t1>First <br> Lastname.</t1></div>

   <div class='avatar'>
      <img src="http://via.placeholder.com/140x270">
   </div>

   <div class='alias'><a href="">member alias</a></div>

   <div class='icon'>
       <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
       <img src="http://via.placeholder.com/60x60" style="width:60px; border-radius:100px;">
       </a>
   </div>

   <div class='info-box'>
       <div class='info-1'>
          <b>User name</b><br>
          <div class='w'>field 1</div>

          <b>Gender</b><br>
          <div class='w'>field 2</div>

          <b>Race</b><br>
          <div class='w'>field 3</div>

          <b>Alignment</b><br>
          <div class='w'>field 4</div>

          <b>Group</b><br>
          <div class='w'>field 5</div>

          <b>Specialization 1</b><br>
          <div class='w'>field 6</div>

          <b>Specialization 2</b><br>
          <div class='w'>field 7</div>

       </div>
   </div>

   <div class='info-2'>
       <t>anything here</t> <t>time zone</t>
       <t><a href="#">contact</a></t>
   </div>

   <div class='scrollbox'>
       <b> <i class="fa fa-quote-left"></i> Personality</b> <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dolor ipsum, tempor at nisi a, bibendum fermentum metus. Donec ac euismod odio, id mattis ligula. Curabitur blandit, elit nec sollicitudin imperdiet, nisi diam molestie sem, sed iaculis massa mauris quis leo. Donec dignissim turpis condimentum ipsum fringilla eleifend. Ut diam diam, gravida at consectetur ut, tristique id lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus vestibulum, nisl ut scelerisque ultricies, libero dui hendrerit tortor, at ullamcorper diam arcu vitae lorem. Suspendisse non ornare eros.
       <p>
       Nunc suscipit, elit nec porttitor luctus, urna ipsum commodo ex, eu commodo augue sapien vitae nisi. Nullam erat nulla, vehicula in consectetur at, varius eu purus. Sed porttitor nibh nunc, id feugiat ipsum pulvinar nec. Nulla fermentum leo lectus, in eleifend urna porttitor at. Curabitur egestas posuere urna, at pulvinar sapien. Donec sit amet aliquam odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
       <p><br>

       <b> <i class="fa fa-history"></i> History</b><p>
       Donec et condimentum nisi. Vivamus nibh odio, imperdiet quis iaculis ut, laoreet eget ligula. Etiam lacinia turpis id porttitor dapibus. Mauris pretium ante id libero semper, nec pellentesque purus vehicula. Duis vitae ligula posuere, porttitor ex a, semper augue. Curabitur sagittis at turpis non luctus. Proin cursus bibendum vehicula. Curabitur ut lacus purus. Nulla finibus purus quis odio semper tincidunt. Nullam quis turpis et sapien pharetra accumsan sed id orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque ornare mi vitae ligula congue gravida vitae ac nunc.
       <p>
       Integer sit amet lacus ac quam fermentum tincidunt id in odio. Mauris vel sem iaculis, vestibulum lacus a, volutpat tortor. Proin sed lectus diam. Vivamus a semper lectus. Integer eget consectetur arcu. Aliquam consectetur risus et est commodo tempor. Phasellus id metus quis est ultricies imperdiet at vel felis. Nullam non velit rhoncus, fringilla mi in, consectetur dui. Cras sed quam non dolor suscipit lacinia at quis libero.
       <p><br>

       <b> <i class="fa fa-warning"></i> Triggers</b><p>
       Quisque nec tempus magna. Cras congue lacus sed nisl fermentum, vel ornare risus pellentesque. Aliquam in magna in odio euismod eleifend. Nullam urna leo, interdum sed metus a, tincidunt suscipit nulla. Donec varius nunc mi, sit amet viverra orci cursus eget. Sed dictum, elit vel convallis egestas, tortor erat tempor risus, at vehicula arcu dolor vel lectus. Donec posuere arcu dictum condimentum dignissim. Pellentesque ante odio, sodales sed nibh sit amet, pulvinar tempus diam. In lacus ex, placerat bibendum egestas eleifend, sodales at quam.
  </div>

   <div class='info-3'>
       <t><a href="#">shipper</a></t> <t><a href="#">mature threads ?</a></t>
   </div>

</div>
</center>