for Tany

<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>
#for-tany{
  width: 500px;
  height: 200px;
  outline: 9px solid #F5E6E6;
  background: url(http://via.placeholder.com/500x200);
  border: 0.5px solid #E37191;
  margin: 15px auto;
  overflow: hidden;
  position: relative;
}

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

#for-tany ::-webkit-scrollbar-track {
  background: #eee;
  border: 0.5px solid #eee;
}

#for-tany ::-webkit-scrollbar-thumb {
  background: #fff;
  border: 0.5px solid #E37191;
}

#for-tany .fade{
  position: absolute;
  width: 499px;
  height: 200px;
  top: 0.5px;
  left: 0px;
  background: #F5E6E6;
  opacity: 0;
  -o-transition: 0.3s ease-in 0.8s;
  -webkit-transition: 0.3s ease-in 0.8s;
  transition: 0.3s ease-in 0.8s;
}
#for-tany:hover .fade{
  opacity: 1;
  -o-transition: 0.3s ease-in 0s;
  -webkit-transition: 0.3s ease-in 0s;
  transition: 0.3s ease-in 0s;
}

#for-tany .base{
  position: absolute;
  width: 500px;
  height: 200px;
  top: 0.5px;
  left: 0px;
}

#for-tany .front{
  width: 165px;
  height: 165px;
  background: #fff;
  position: absolute;
  left: 130px;
  top: 11px;
  outline: 1px solid #E37191;
  border: 6.5px solid #F5E6E6;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#for-tany .left{
  position: absolute;
  width: 500px;
  height: 200px;
  top: 0px;
  left: -350px;
  -o-transition: 0.7s ease-in 0.4s;
  -webkit-transition: 0.7s ease-in 0.4s;
  transition: 0.7s ease-in 0.4s;
}
#for-tany:hover .left{
  left: 0px;
}

#for-tany .right{
  position: absolute;
  width: 500px;
  height: 200px;
  top: 0px;
  right: -350px;
  -o-transition: 0.7s ease-in 0.4s;
  -webkit-transition: 0.7s ease-in 0.4s;
  transition: 0.7s ease-in 0.4s;
}
#for-tany:hover .right{
  right: 0px;
}

#for-tany .icon{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 58px;
  top: 52px;
  border-radius: 100px;
  z-index: 3;
}
#for-tany .icon img{
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: 1px solid #fff;
}

#for-tany .icon-base{
  width: 115px;
  height: 115px;
  position: absolute;
  left: 50px;
  top: 45px;
  border-radius: 100px;
  background: #C45B81;
  border: 0.5px solid #fff;
}

#for-tany .navs{
  width: 123px;
  height: 30px;
  position: absolute;
  top: 17px;
  right: 117px;
  background: transparent;
  border: 0.5px solid #E37191;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#for-tany .navs2{
  width: 123px;
  height: 30px;
  position: absolute;
  bottom: 18px;
  right: 114px;
  background: transparent;
  border: 0.5px solid #E37191;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

#for-tany .fa{
  font-size: 12px;
  margin-left: 4px;
  color: #C45B81;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  width: 25px;
  height: 18px;
  padding-top: 7px;
  margin-top: 2px;
}
#for-tany .fa:hover{
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  color: #fff;
  text-shadow: 1px 1px #C45B81;
}

#for-tany .textbox{
  width: 90px;
  height: 85px;
  position: absolute;
  top: 58px;
  left: 175px;
  overflow: auto;
  text-align: justify;
  font-family: 'Open Sans', sans-serif;
  font-size: 9px;
  padding-right: 9px;
  color: #555;
  line-height: 12px;
  letter-spacing: 0px;
  z-index: 2;
}

#for-tany .textbox b{
  color: #C45B81;
  padding: 8px;
  margin-right: 5px;
  float: left;
  font-family: 'Playfair Display', serif;
  font-weight: 200;
  font-size: 15px;
}

#for-tany .title{
  width: 90px;
  height: 70px;
  background: transparent;
  position: absolute;
  right: -10px;
  bottom: 65.5px;
  font-family: 'Playfair Display', serif;
  color: #C45B81;
  text-align: left;
  padding-right: 22px;
  padding-left: 20px;
  border-bottom: 0.5px solid #E37191;
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0px;
  line-height: 19px;
}


</style>

<center>
<div id='for-tany'>
  <div class='fade'></div>
  <div class='base'>

    <div class='left'>
        <div class='icon-base'></div>

        <div class='front'></div>
        <div class='textbox'>
          <b>12/3</b> 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='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='right'>
        <div class='navs'>
          <a href="#" title="coding"><i class="fa fa-codepen"></i></a>
            <a href="#" title="graphic"><i class="fa fa-paint-brush"></i></a>
            <a href="#" title="playground"><i class="fa fa-rocket"></i></a>
        </div>

        <div class='navs2'>
            <a href="#" title="hof"><i class="fa fa-trophy"></i></a>
            <a href="#" title="deviantart"><i class="fa fa-deviantart"></i></a>
            <a href="#" title="pokedex"><i class="fa fa-star"></i></a>
        </div>

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

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