for Charlotte

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

<style>
#for-charlotte{
 width: 500px;
 height: 200px;
 background: url(http://via.placeholder.com/500x200);
 border: 4px solid #fff;
 outline: 1px solid #bbb;
 position: relative;
 margin: 0px auto;
 overflow: hidden;
}

#for-charlotte ::-webkit-scrollbar {
 width: 1px;
}

#for-charlotte ::-webkit-scrollbar-track {
 background: #fff;
 border: 0.5px solid #ddd;
}

#for-charlotte ::-webkit-scrollbar-thumb {
 background: #ddd;
 border: 0.5px solid #555;
}

#for-charlotte .right{
 position: absolute;
 width: 320px;
 height: 200px;
 bottom: 0px;
 right: -320px;
 background: #000;
 opacity: 0.85;
 -webkit-clip-path: polygon(51% 0, 100% 0, 100% 100%, 0% 100%);
 clip-path: polygon(37.5% 0, 100% 0, 100% 100%, 0% 100%);
 -webkit-transition: 1s ease-in 1s;
 transition: 1s ease-in 1s;
}
#for-charlotte:hover .right{
 right: 0px;
 -webkit-transition: 1s ease-in 0s;
 transition: 1s ease-in 0s;
}

#for-charlotte .left{
 position: absolute;
 width: 300px;
 height: 200px;
 top: 0px;
 left: -300px;
 background: #444;
 webkit-clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
 clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
 -webkit-transition: 1s ease-in 1s;
 transition: 1s ease-in 1s;
}
#for-charlotte:hover .left{
 left: 0px;
 -webkit-transition: 1s ease-in 0s;
 transition: 1s ease-in 0s;
}

#for-charlotte .side{
 position: absolute;
 top: 5px;
 left: -300px;
 width: 250px;
 height: 110px;
 background: transparent;
 -webkit-transition: 1s ease-in 1s;
 transition: 1s ease-in 1s;
}
#for-charlotte:hover .side{
 -webkit-transition: 1s ease-in 0s;
 transition: 1s ease-in 0s;
 left: 0px;
}

#for-charlotte .icon{
 position: absolute;
 width: 60px;
 height: 60px;
 top: 30px;
 left: 150px;
 opacity: 0.95;
 border: 0.5px solid #111;
 padding: 5px;
 border-radius: 100px;
 background: #fff;
}

#for-charlotte img{
width:60px;
border-radius:100px;
}

#for-charlotte .title{
 font-family: 'Playfair Display', serif;
 font-size: 14px;
 font-weight: 400;
 text-transform: lowercase;
 letter-spacing: 0px;
 line-height: 15px;
 position: absolute;
 padding: 5px 10px;
 top: 33px;
 left: 40px;
 color: #000;
 width: 80px;
 font-style: italic;
 text-align: right;
}

#for-charlotte .left-2{
 position: absolute;
 width: 275px;
 height: 170px;
 top: 15px;
 left: 15px;
 background: #F0D5C2;
 webkit-clip-path: polygon(0 0, 100% 0, 63% 100%, 0 100%);
 clip-path: polygon(0 0, 100% 0, 63% 100%, 0 100%);
}

#for-charlotte .scrollbox{
 position: absolute;
 width: 90px;
 height: 42px;
 bottom: 35px;
 right: -250px;
 overflow: auto;
 text-align: justify;
 font-family: 'Open Sans', sans-serif;
 font-size: 8.5px;
 font-weight: 400;
 color: #111;
 line-height: 11px;
 padding-right: 9px;
 letter-spacing: 0px;
 background: #fff;
 border: 18px solid #fff;
 outline: 1px solid #999;
 outline-offset: 4px;
 -webkit-transition: 1s ease-in 1s;
 transition: 1s ease-in 1s;
}
#for-charlotte:hover .scrollbox{
 right: 80px;
 -webkit-transition: 1s ease-in 1s;
 transition: 1s ease-in 0s;
}

#for-charlotte .nav-1{
 position: absolute;
 bottom: -50px;
 left: 65px;
 width: 120px;
 height: 25px;
 background: transparent;
 -webkit-transition: 0.7s ease-in 0s;
 transition: 0.7s ease-in 0s;
}
#for-charlotte:hover .nav-1{
 bottom: 50px;
 -webkit-transition: 0.7s ease-in 1s;
 transition: 0.7s ease-in 1s;
}

#for-charlotte .nav-1 .fa{
 color: #111;
 font-size: 9px;
 transition: 0.7s;
 border: 0.5px solid #333;
 padding: 10px 5px 0px 4px;
 width: 17px;
 height: 17px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
#for-charlotte .nav-1 .fa:hover{
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 background: #fff;
}

#for-charlotte .nav-2{
 position: absolute;
 top: -50px;
 right: 85px;
 width: 120px;
 height: 25px;
 background: transparent;
 -webkit-transition: 0.7s ease-in 0s;
 transition: 0.7s ease-in 0s;
}
#for-charlotte:hover .nav-2{
 top: 35px;
 -webkit-transition: 0.7s ease-in 1s;
 transition: 0.7s ease-in 1s;
}

#for-charlotte .nav-2 .fa{
 color: #F0D5C2;
 font-size: 9px;
 transition: 0.7s;
 border: 0.5px solid #bbb;
 padding: 10px 5px 0px 4px;;
 width: 17px;
 height: 17px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
#for-charlotte .nav-2 .fa:hover{
  -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 background: #F0D5C2;
 color: #111;
}

#for-charlotte a{
 text-decoration: none;
}

</style>

<center>
<div id='for-charlotte'>

   <div class='right'></div>

   <div class='left'>

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

   <div class="side">
       <div class='icon'>
         <a href="http://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
         <img src="http://via.placeholder.com/60x60"></a>
       </div>

       <div class='title'>
          put your short title here.<br> —
       </div>
   </div>

   <div class='nav-1'>
      <a href=" # " title="graphic"><i class="fa fa-paint-brush"></i></a>
      <a href=" # " title="writing"><i class="fa fa-pencil"></i></a>
      <a href=" # " title="coding"><i class="fa fa-paper-plane"></i></a>
   </div>

   <div class='nav-2'>
       <a href=" # " title="tumblr"><i class="fa fa-tumblr"></i></a>
       <a href=" # " title="deviantart"><i class="fa fa-deviantart"></i></a>
       <a href=" # " title="hof"><i class="fa fa-trophy"></i></a>
   </div>

   <div class='scrollbox'>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tristique lacinia dolor vel blandit. Suspendisse sapien mauris, fermentum ut auctor non, ultricies id dolor. Nullam eget tempus elit.
   </div>

</div>
</center>