for Yuki

<link href="https://fonts.googleapis.com/css?family=Open+Sans|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>
#yuki-sig{
  width: 500px;
  height: 200px;
  background: url(https://images2.imgbox.com/cc/2d/NCtjCZWi_o.png);
  position: relative;
  overflow: hidden;
  margin: 10px auto;
  border: 0.5px solid #9E3036;
  outline: 7px solid #222;
}

#yuki-sig ::-webkit-scrollbar {
  width: 6px;
  border-radius: 50px;
}

#yuki-sig ::-webkit-scrollbar-track {
  background: #9E3036;
  border: 2.5px solid #222;
}

#yuki-sig ::-webkit-scrollbar-thumb {
  background: #222;
  border-top: 0.5px solid #bbb;
  border-bottom: 0.5px solid #bbb;
}

#yuki-sig .base{
  width: 500px;
  height: 200px;
  background: #222;
  opacity: 0;
  position: relative;
  transition: 0.3s ease-in 0.7s;
  -webkit-transition: 0.3s ease-in 0.7s;
}
#yuki-sig:hover .base{
  opacity: 0.97;
  transition: 0.3s ease-in 0s;
  -webkit-transition: 0.3s ease-in 0s;
}

#yuki-sig .icon{
  width: 100px;
  height: 100px;
  background: #eee;
  position: absolute;
  bottom: 60px;
  right: 90px;
  border: 5px solid #222;
  outline: 1px solid #9E3036;
  z-index: 2;
}

#yuki-sig .icon img{
  width: 100px;
  height: 100px;
}

#yuki-sig .line{
  width: 299.5px;
  height: 59.5px;
  background: transparent;
  position: absolute;
  bottom: 0px;
  left: 0px;
  border-top: 0.5px solid #9E3036;
  border-right: 0.5px solid #9E3036;
}

#yuki-sig .textbox{
  width: 165px;
  height: 60px;
  background: #222;
  opacity: 0.95;
  position: absolute;
  bottom: 75px;
  left: 90px;
  color: #ddd;
  overflow: auto;
  text-align: justify;
  padding-right: 7px;
  line-height: 10px;
  font-family: 'Courier', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: 0.3s ease-in 0s;
  -webkit-transition: 0.3s ease-in 0s;
  z-index: 3;
}
#yuki-sig:hover .textbox{
  opacity: 1;
  transition: 0.3s ease-in 1s;
  -webkit-transition: 0.3s ease-in 1s;
}

#yuki-sig .title{
  width: 171px;
  height: 25px;
  background: #222;
  position: absolute;
  top: 27px;
  left: 90px;
  border-bottom: 0.5px solid #9E3036;
  color: #ccc;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0px;
  line-height: 22px;
  transition: 0.3s ease-in 0s;
  -webkit-transition: 0.3s ease-in 0s;
  opacity: 0;
}
#yuki-sig:hover .title{
  opacity: 1;
  transition: 0.3s ease-in 1s;
  -webkit-transition: 0.3s ease-in 1s;
}

#yuki-sig .navbar{
  width: 171px;
  height: 34px;
  background: transparent;
  position: absolute;
  bottom: 25px;
  left: 90px;
  border: 0.5px solid #9E3036;
  color: #bbb;
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

#yuki-sig .navbar .fa{
  color: #9E3036;
  margin-left: 11px;
  margin-right: 3px;
  margin-top: 9px;
  font-size: 14px;
  transition: 0.3s ease-in 0s;
  -webkit-transition: 0.3s ease-in 0s;
}
#yuki-sig .navbar .fa:hover{
  color: #bbb;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

#yuki-sig .right{
  width: 500px;
  height: 200px;
  position: absolute;
  right: 0px;
  top: -145px;
  transition: 0.5s ease-in 0s;
  -webkit-transition: 0.5s ease-in 0s;
}
#yuki-sig:hover .right{
  top: 0px;
  transition: 0.5s ease-in 0.4s;
  -webkit-transition: 0.5s ease-in 0.4s;
}

#yuki-sig .left{
  width: 500px;
  height: 200px;
  position: absolute;
  left: 0px;
  bottom: -145px;
  transition: 0.5s ease-in 0s;
  -webkit-transition: 0.5s ease-in 0s;
}
#yuki-sig:hover .left{
  bottom: 0px;
  transition: 0.5s ease-in 0.4s;
  -webkit-transition: 0.5s ease-in 0.4s;
}

</style>

<center>
<div id='yuki-sig'>

  <div class='base'>

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

    <div class='left'>
        <div class='title'>put your title here</div>

        <div class='textbox'>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tempor neque. Donec vel finibus velit, et ultricies justo. 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='line'></div>

        <div class='navbar'>
          <a href="#" title="coding"><i class="fa fa-codepen"></i></a>
          <a href="#" title="writing"><i class="fa fa-pencil"></i></a>
          <a href="#" title="graphic"><i class="fa fa-diamond"></i></a>
          <a href="#" title="hof"><i class="fa fa-trophy"></i></a>
          <a href="#" title="deviantart"><i class="fa fa-deviantart"></i></a>
        </div>
    </div>

  </div>
</div>
</center>