for Krista

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

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

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

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

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

#for-krista .base{
position: absolute;
top: 0px;
width: 500px;
height: 200px;
background: #ddd;
opacity: 0;
webkit-transition: 0.7s ease-in 1s;
transition: 0.7s ease-in 1s;
}
#for-krista:hover .base{
opacity: 0.95;
webkit-transition: 0.7s ease-in 0s;
transition: 0.7s ease-in 0s
}

#for-krista .left{
width: 204.5px;
height: 200px;
background: transparent;
position: absolute;
border-right: 0.5px solid #999;
top: -200px;
left: 95px;
webkit-transition: 0.7s ease-in 1s;
transition: 0.7s ease-in 1s;
}

#for-krista:hover .left{
top: 0px;
webkit-transition: 0.7s ease-in 0s;
transition: 0.7s ease-in 0s;
}

#for-krista .title{
position: absolute;
top: 23px;
left: 0px;
width: 184px;
background: transparent;
border-bottom: 1px solid #FF4431;
color: #FF4431;
font-family: 'Playfair Display', serif;
font-size: 18px;
text-align: left;
text-transform: uppercase;
padding: 9px 10px;
letter-spacing: 0px;
line-height: 20px;
font-style: italic;
}

#for-krista .scrollbox{
width: 155px;
height: 40px;
background: #fff;
border: 20px solid #fff;
border-top: 58px solid #fff;
position: absolute;
top: 20px;
left: 0px;
overflow: auto;
padding-right: 9px;
line-height: 10px;
letter-spacing: 0px;
text-align: justify;
font-family: 'Poppins', sans-serif;
font-size: 8.5px;
font-weight: 400;
color: #084E69;
outline: 1px solid #999;
}
#for-krista .scrollbox b{
color: #FF4431;
padding: 8px;
margin-left: 5px;
float: right;
font-family: 'Playfair Display', serif;
font-weight: 200;
font-size: 15px;
}

#for-krista .right{
width: 120px;
height: 200px;
background: transparent;
position: absolute;
bottom: -200px;
right: 80.5px;
border-left: 0.5px solid #999;
webkit-transition: 0.7s ease-in 1s;
transition: 0.7s ease-in 1s;
}
#for-krista:hover .right{
bottom: 0px;
webkit-transition: 0.7s ease-in 0s;
transition: 0.7s ease-in 0s;
}

#for-krista .icon{
width: 85px;
height: 85px;
background: transparent;
position: absolute;
bottom: 20px;
right: 14.5px;
border: 10px solid #fff;
outline: 1px solid #999;
}

#for-krista .navbox{
width: 192px;
height: 28px;
background: #fff;
position: absolute;
bottom: 20px;
left: 95px;
border: 0.5px solid #999;
border-radius: 0px 0px 0px 50px;
webkit-transform: scale(0);
transform: scale(0);
webkit-transition: 0.7s ease-in 0s;
transition: 0.7s ease-in 0s;
}
#for-krista:hover .navbox{
transform: scale(1);
webkit-transition: 0.7s ease-in 1s;
transition: 0.7s ease-in 1s;
}

#for-krista .navbox .fa{
color: #085472;
font-size: 11px;
padding: 9px 0px 0px 13px;
webkit-transition: 0.5s ease-in 0s;
transition: 0.3s ease-in 0s;
}

#for-krista .navbox .fa:hover{
color: #FF4431;
transform: rotate(-15deg);
}

#for-krista .navbox-2{
width: 95px;
height: 28px;
background: #fff;
position: absolute;
top: 35px;
right: 95px;
border: 0.5px solid #999;
border-radius: 0px 50px 0px 0px;
transform: scale(0);
webkit-transition: 0.7s ease-in 0s;
transition: 0.7s ease-in 0s;
}
#for-krista:hover .navbox-2{
transform: scale(1);
webkit-transition: 0.7s ease-in 1s;
transition: 0.7s ease-in 1s;
}

#for-krista .navbox-2 .fa{
color: #085472;
font-size: 11px;
padding: 9px 11px 0px 0px;
webkit-transition: 0.5s ease-in 0s;
transition: 0.3s ease-in 0s;
}

#for-krista .navbox-2 .fa:hover{
color: #FF4431;
transform: rotate(15deg);
}

</style>

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

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

<div class='left'>
  <div class='scrollbox'>
     <b>15/2</b>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tempor neque. Donec vel finibus velit, et ultricies justo.
     <br><br>

     <hr></hr>

     <br>
     <b>07/4</b>
     Donec a lorem maximus, commodo augue non, iaculis odio. Nunc porta dolor ullamcorper, imperdiet leo quis, varius massa. Maecenas rutrum mi ac accumsan imperdiet.
  </div>

  <div class='title'>updates</div>
</div>

<div class='right'>
  <div class='icon'>
    <a href="http://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
    <img src="http://via.placeholder.com/85x85" style="width:85px;"></a>
  </div>
</div>

<div class='navbox'>
  <a href="#" title="graphic"><i class="fa fa-paint-brush"></i></a>
  <a href="#" title="coding"><i class="fa fa-code"></i></a>
  <a href="#" title="writing"><i class="fa fa-pencil"></i></a>
  <a href="#" title="hall of records"><i class="fa fa-sticky-note-o"></i></a>
  <a href="#" title="playground"><i class="fa fa-rocket"></i></a>
  <a href="#" title="hall of fame"><i class="fa fa-trophy"></i></a>
</div>

<div class='navbox-2'>
  <a href="#" title="archive"><i class="fa fa-navicon"></i></a>
  <a href="#" title="tumblr"><i class="fa fa-tumblr"></i></a>
  <a href="#" title="message"><i class="fa fa-reply"></i></a>
</div>


</div>
</center>