Alyssa sig code

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

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

#alyssa-sig ::-webkit-scrollbar {
  width: 2px;
}

#alyssa-sig ::-webkit-scrollbar-track {
  background: #f2f2f2;
}

#alyssa-sig ::-webkit-scrollbar-thumb {
  background: #D6BDE1;
}

#alyssa-sig .base{
  background: #E89AAD;
  width: 500px;
  height: 200px;
  position: relative;
  top: 0px;
  left: 0px;
  opacity: 0;
  -webkit-transition: 0.5s ease-in 0.8s;
  transition: 0.5s ease-in 0.8s;
}
#alyssa-sig:hover .base{
  opacity: 0.93;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}

#alyssa-sig .box{
  background: #ddd;
  border: 1px solid #fff;
  width: 354px;
  height: 130px;
  position: absolute;
  top: 40px;
  left: 60px;
  opacity: 0.95;
  border-radius: 0px 63px 63px 0px;
}

#alyssa-sig .icon{
  width: 98px;
  height: 98px;
  position: absolute;
  top: 46px;
  right: 90px;
  z-index: 3;
  border-radius: 0px 58px 58px 0px;
  border: 11px solid #fff;
}
#alyssa-sig img{
  width: 81px;
  height: 81px;
  padding: 2px;
  background: #fff;
  border: 7px solid #4D5075;
  border-radius: 0px 50px 50px 0px;
}

#alyssa-sig .title{
  background: #4D5075;
  border: 0px solid #4D5075;
  width: 157px;
  height: 25px;
  position: absolute;
  top: 30px;
  left: 96px;
  border-radius: 50px;
  font-family: 'VT323', monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 26px;
  color: #fff;
  text-transform: uppercase;
  z-index: 3;
}

#alyssa-sig .textbox{
  background: #fff;
  width: 160px;
  height: 72px;
  position: absolute;
  top: 46px;
  left: 66px;
  outline: 0px solid #E89AAD;
  border-top: 28px solid #fff;
  border-left: 30px solid #fff;
  border-right: 25px solid #fff;
  border-bottom: 20px solid #fff;
  overflow: auto;
  padding-right: 7px;
  font-family: 'Open Sans', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0px;
  line-height: 11px;
  color: #4D5075;
  text-align: justify;
  z-index: 2;
}

#alyssa-sig .textbox a{
  color: #B896C8;
  text-decoration: none;
}

#alyssa-sig .textbox b{
  color: #B896C8;
}

#alyssa-sig .textbox i{
  color: #444;
}

#alyssa-sig .textbox u{
  text-decoration: none;
  border-bottom: 0.5px dashed #B896C8;
  color: #4D5075;
}

#alyssa-sig .nav{
  background: transparent;
  width: 130px;
  height: 150px;
  position: absolute;
  top: 32px;
  right: -5px;
  z-index: 4;
}
#alyssa-sig .nav .fa{
  color: #fff;
  width: 25px;
  font-size: 14px;
  text-shadow: 1px 1px #4D5075;
  -webkit-transition: 0.2s ease-in 0s;
  transition: 0.2s ease-in 0s;
}
#alyssa-sig .nav .fa:hover{
  color: #4D5075;
  text-shadow: 1px 1px #fff;
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

#alyssa-sig .left{
  width: 500px;
  height: 200px;
  position: absolute;
  left: -420px;
  top: 0px;
  -webkit-transition: 0.7s ease-in 0s;
  transition: 0.7s ease-in 0s;
}
#alyssa-sig:hover .left{
  left: 0px;
  -webkit-transition: 0.7s ease-in 0.8s;
  transition: 0.7s ease-in 0.8s;
}

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

</style>

<center>
<div id="alyssa-sig">

  <div class="base"></div>

  <div class="left">
    <div class="box"></div>

    <div class="title">short title here</div>

    <div class="textbox">
        <b>bold</b> <i>italic</i> <u>underlined</u> <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta dolor,leo quis, varius massa. Maecenas rutrum mi ac accumsan imperdiet.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta dolor,leo quis, varius massa. Maecenas rutrum mi ac accumsan imperdiet.
    </div>

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

  <div class="right">
    <div class="nav">
        <a href="#" title="graphic gallery"><i class="fa fa-star" style="margin-right:65px;padding:0px;"></i></a><br>
        <a href="#" title="coding gallery"><i class="fa fa-code" style="margin-right:27px;padding:5px;"></i></a><br>
        <a href="#" title="writing gallery"><i class="fa fa-pencil" style="margin-right:15px;padding:6px;"></i></a><br>
        <a href="#" title="tumblr"><i class="fa fa-tumblr" style="margin-right:13px;padding:11px;"></i></a><br>
        <a href="#" title="deviantart"><i class="fa fa-deviantart" style="margin-right:20px;padding:3px;"></i></a><br>
        <a href="#" title="tester"><i class="fa fa-rocket" style="margin-right:60px;padding:7px;"></i></a><br>
    </div>
  </div>

</div>
</center>