Klaus (sig)

<link href="https://fonts.googleapis.com/css?family=Poppins|Montserrat:800" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<style>
#bianca-sigcode{
  width: 500px;
  height: 200px;
  background: url(https://i.imgur.com/gv2Kfuq.png);
  position: relative;
  overflow: hidden;
  margin: 0px auto;
  outline: 3px solid #ddd;
}

#bianca-sigcode ::-webkit-scrollbar {
  width: 4px;
  border-radius: 50px;
}

#bianca-sigcode ::-webkit-scrollbar-track {
  background: transparent;
  border: 1px solid #222;
}

#bianca-sigcode ::-webkit-scrollbar-thumb {
  background: #222;
  border: 0.5px solid #666;
}

#bianca-sigcode .base{
  width: 470px;
  height: 170px;
  background: #222;
  position: absolute;
  top: 15px;
  left: 15px;
  opacity: 0.9;
  border: 0.5px solid #555;
  outline: 7px solid #222;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: 0.3s ease-in 0.6s;
  transition: 0.3s ease-in 0.6s;
}
#bianca-sigcode:hover .base{
  left: 15px;
  opacity: 0.9;
  -webkit-transition: 0.3s ease-in 0s;
  transition: 0.3s ease-in 0s;
}

#bianca-sigcode .left{
  width: 240px;
  height: 170px;
  background: transparent;
  position: absolute;
  left: 0px;
  top: -200px;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}
#bianca-sigcode:hover .left{
  top: 0px;
  -webkit-transition: 0.5s ease-in 0.4s;
  transition: 0.5s ease-in 0.4s;
}

#bianca-sigcode .right{
  width: 240px;
  height: 170px;
  background: transparent;
  position: absolute;
  right: 0px;
  bottom: -200px;
 -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}
#bianca-sigcode:hover .right{
  bottom: 0px;
  -webkit-transition: 0.5s ease-in 0.4s;
  transition: 0.5s ease-in 0.4s;
}

#bianca-sigcode .topbox{
  width: 130px;
  height: 25px;
  background: #666;
  position: absolute;
  top: 20px;
  right: 74px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  color: #85B6E9;
  padding-top: 6px;
  padding-left: 15px;
  letter-spacing: 0px;
  text-align: justify;
  line-height: 17px;
  -webkit-clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
}
#bianca-sigcode .topbox .sf{
  color: #E17373;
  font-size: 11px;
  margin-right: 10px;
}

#bianca-sigcode .textbox{
  width: 140px;
  height: 42px;
  background: #222;
  position: absolute;
  right: 45px;
  top: 47px;
  overflow: auto;
  color: #999;
  text-align: justify;
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0px;
  line-height: 11px;
  padding-right: 8px;
  border: 12.5px solid #222;
  outline: 0.5px solid #666;
}

#bianca-sigcode .iconbox{
  width: 180px;
  height: 130px;
  background: transparent;
  position: absolute;
  top: 20px;
  left: 40px;
  opacity: 0.7;
  border-right: 3px solid #64AAF3;
}
#bianca-sigcode .iconbox img{
  width: 180px;
  height: 130px;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

#bianca-sigcode .title{
  width: 180px;
  height: 50px;
  opacity: 0.7;
  background: transparent;
  position: absolute;
  top: 104px;
  left: 38px;
  color: #E17373;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 33px;
  text-transform: uppercase;
  letter-spacing: -2px;
  text-align: justify;
  line-height: 23px;
}

#bianca-sigcode .navbar{
  width: 250px;
  height: 25px;
  background: transparent;
  position: absolute;
  bottom: 18.5px;
  right: 7px;
  opacity: 0.95;
}
#bianca-sigcode .navbar .sf{
  background: #666;
  color: #E17373;
  font-size: 11px;
  padding: 6.5px 11px 5.5px 11px;
  line-height: 25px;
}
#bianca-sigcode .navbar n{
  background: #222;
  border: 0.5px solid #666;
  padding: 7.5px 10px 5.5px 10px;
  color: #81A9D4;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0px;
  line-height: 11px;
}
#bianca-sigcode n:hover{
  background: #81A9D4;
  color: #333;
  border: 0.5px solid #81A9D4;
}

#bianca-sigcode a{
  text-decoration: none;
  color: #222;
}

#bianca-sigcode .triangle{
  width: 218px;
  height: 155px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  background: #444;
  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

#bianca-sigcode .triangle2{
  width: 95px;
  height: 60px;
  position: absolute;
  left: 40px;
  top: 19.5px;
  background: #666;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
  opacity: 0.4;
}

</style>

<center>
<div id="bianca-sigcode">

  <div class='base'>

      <div class='triangle'></div>

      <div class='left'>
          <div class='iconbox'>
            <a href="http://graphicsgames.jcink.net/index.php?showuser=378" title="hanie ©">
            <img src="https://i.imgur.com/4CgEyi9.gif"></a>
          </div>

          <div class='title'>
            Bianca<br> Denmark
          </div>

          <div class='triangle2'></div>
      </div>

      <div class='right'>
          <div class='topbox'><span class="sf sf-heart-o"></span>Loves </div>

          <div class='textbox'>
            The Vampire Diaries, Charmed, The Originals, Shadowhunters, Heroes, Smallville, Arrow, Lost, Nathaniel Buzolic, Joseph Morgan, Claire Holt, Zachary Quinto, Matthew Daddario, David Anders.
          </div>

           <div class='navbar'>
             <span class="sf sf-diamond-o"></span><a href="http://graphicsgames.jcink.net/index.php?showtopic=2174"><n>gallery</n></a>
             <span class="sf sf-trophy-o"></span><a href="http://graphicsgames.jcink.net/index.php?showtopic=2198"><n>hof</n></a>
           </div>
      </div>

</div>
</center>