for Ellie

<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=Muli|Montserrat:500,800" rel="stylesheet">

<style>
#for-ellie{
  width: 500px;
  height: 200px;
  outline: 1px solid #999;
  border: 4px solid #ddd;
  margin: 0px auto;
  overflow: hidden;
  position: relative;
  background: url(https://i.imgur.com/Pki7Bkc.png);
}

#for-ellie ::-webkit-scrollbar {
   width: 5px;
}

#for-ellie ::-webkit-scrollbar-track {
 background: #333;
 border: 2px solid #ccc;
}

#for-ellie ::-webkit-scrollbar-thumb {
   background: #323BBA;
   border: 0.5px solid #323BBA;
}

#for-ellie .base{
  width: 500px;
  height: 160px;
  background: #fff;
  position: absolute;
  top: -160px;
  transition: 0.7s;
}
#for-ellie:hover .base{
  top: 0px;
}
#for-ellie:not(:hover) .base{
 transition-duration: 0.5s;
 transition-delay: 0s;
 opacity: 0;
}

#for-ellie .avatar{
  position: absolute;
  top: 24px;
  left: 75px;
  width: 100px;
  height: 100px;
  background: url(https://i.imgur.com/4334zbm.png);
  background-size: 100px;
  border: 7px solid #323BBA;
  border-radius: 100px;
}

#for-ellie .textbox{
  overflow: auto;
  position: absolute;
  top: 63px;
  left: 220px;
  width: 160px;
  height: 48px;
  background: #ccc;
  border: 14px solid #ccc;
  text-align: justify;
  font-family: 'Muli', sans-serif;
  font-size: 9px;
  line-height: 11.5px;
  padding-right: 8px;
  color: #000;
  outline: 1px solid #bbb;
  outline-offset: 2px;
}
#for-ellie .title{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 15px;
  position: absolute;
  top: 10px;
  left: 50px;
  width: 500px;
  height: 30px;
  text-transform: uppercase;
  font-style: italic;
  padding-top: 10px;
  padding-left: 15px;
}

#for-ellie l{
  color: #333;
  border-bottom: 3px solid #333;
  padding-bottom: 5px;
}

#for-ellie r{
  color: #323BBA;
  border-bottom: 0.5px solid #323BBA;
  padding-bottom: 5px;
  padding-left: 5px;
}

#for-ellie .navbase{
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 500px;
  height: 30px;
  background: #323BBA;
  padding-top: 12px;
  padding-left: 85px;
  opacity: 0;
  transition: 0.7s;
}
#for-ellie:hover .navbase{
  opacity: 1;
}
#for-ellie:not(:hover) .navbase{
 transition-duration: 0.5s;
 transition-delay: 0s;
 opacity: 0;
}

#for-ellie .navbar{
  position: absolute;
  left: -420px;
  bottom: 0px;
  width: 500px;
  height: 30px;
  padding-top: 12px;
  padding-left: 85px;
  transition-delay: 1s;
  transition-duration: 0.7s;
  line-height: 10px;
}
#for-ellie:hover .navbar{
  left: 0px;
}
#for-ellie:not(:hover) .navbar{
 transition-duration: 0.5s;
 transition-delay: 0s;
 opacity: 0;
}

#for-ellie .fa{
  font-size: 11px;
  width: 28px;
  text-align: center;
  color: #fff;
  transition: 0.3s;
}
#for-ellie .fa:hover{
 color: #000;
}


#for-ellie .line{
  position: absolute;
  bottom: 21px;
  left: 75px;
  width: 150px;
  height: 10px;
  border-bottom: 0.5px solid #fff;
  background: #323BBA;
}

</style>

<center>
<div id="for-ellie">

    <div class="base">
        <div class="title"><l>Put your</l><r>title here</r></div>
        <div class="avatar"></div>

        <div class="textbox">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in consectetur dolor. Duis vel auctor arcu. Cras consequat ut nunc at imperdiet. Proin semper, odio ut tempor sollicitudin, felis dui pretium nunc, tempus aliquam diam felis in diam. Mauris dapibus elit ut libero mattis ultricies. Vivamus fermentum porttitor tellus, vitae lobortis massa euismod elementum. Donec pellentesque ac urna at vulputate. Sed vel scelerisque sem, quis venenatis massa. Curabitur et bibendum mi. Nulla sodales porta lacus auctor eleifend. Aliquam elementum sodales tellus at feugiat.
        </div>
    </div>

    <div class="navbase"></div>

    <div class="navbar">
        <div class="line"></div>
        <table>
          <td><a href="YOURLINKHERE" title="deviantart"><i class="fa fa-deviantart"></i></a></td>
          <td><a href="YOURLINKHERE" title="potterworld"><i class="fa fa-bolt"></i></a></td></td>
          <td><a href="YOURLINKHERE" title="gallery"><i class="fa fa-paint-brush"></i></a></td>
          <td><a href="YOURLINKHERE" title="hof"><i class="fa fa-trophy"></i></a></td></td>
          <td><a href="YOURLINKHERE" title="pm"><i class="fa fa-envelope"></i></a></td>
          <td><a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©"><i class="fa fa-heart-o"></i></a></td></td>
        </table>
     </div>

</div>
</center>