Krista 2019 (sig)

<link href="https://fonts.googleapis.com/css?family=Poppins|Abril+Fatface" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<style>
#kristasigcode{
  position: relative;
  width: 500px;
  height: 200px;
  margin: 0px auto;
  overflow: hidden;
  border: 2px solid #fff;
  outline: 1.5px solid #ddd;
}

#kristasigcode .sig{
  position: relative;
  width: 500px;
  height: 200px;
  background: url(https://via.placeholder.com/500x200);
  transition: 0.5s ease-in 0s;
}
#kristasigcode:hover .sig{
  -webkit-filter: blur(4px);
  filter: blur(4px);
  transform: scale(1.1);
  transition: 0.5s ease-in 0s;
}

#kristasigcode .dark{
  position: absolute;
  width: 500px;
  height: 200px;
  top: 0px;
  left: 0px;
  background: #000;
  opacity: 0;
  transition: 0.5s ease-in 0s;
}
#kristasigcode:hover .dark{
  opacity: 0.1;
  transition: 0.5s ease-in 0s;
}

#kristasigcode ::-webkit-scrollbar {
  width: 9px;
}

#kristasigcode ::-webkit-scrollbar-track {
  border: 2px solid #dedede;
  background: #dedede;
  border-radius: 100px;
}

#kristasigcode ::-webkit-scrollbar-thumb {
  border: 2px solid #dedede;
  background: #fff;
  border-radius: 100px;
}

#kristasigcode .base{
  position: absolute;
  width: 500px;
  height: 200px;
  bottom: -200px;
  left: 0px;
  opacity: 0.9;
  transition: 0.5s ease-in 0s;
}
#kristasigcode:hover .base{
  bottom: 0px;
  transition: 0.5s ease-in 0.5s;
}

#kristasigcode .bg{
  position: absolute;
  width: 420px;
  height: 163px;
  top: 15px;
  left: 15px;
  background: #dedede;
  border: 3px solid #fff;
}

#kristasigcode .initial{
  position: absolute;
  width: 90px;
  height: 90px;
  bottom: 0px;
  left: 0px;
  background: #65BBF4;
  border-top: 2px solid #fff;
  font-family: 'Abril Fatface', serif;
  font-size: 60px;
  font-weight: bold;
  color: #fff;
  overflow: auto;
  text-align: center;
  line-height: 88px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#kristasigcode .textbase{
  position: absolute;
  width: 240px;
  height: 90px;
  bottom: 0px;
  left: 92px;
  background: #dedede;
  outline: 2px solid #fff;
}

#kristasigcode .textbox{
  position: absolute;
  width: 194px;
  height: 40px;
  bottom: 10px;
  left: 102px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 9px;
  color: #000;
  overflow: auto;
  text-align: justify;
  line-height: 13px;
  padding-right: 8px;
  border: 15px solid #fff;
}

#kristasigcode .textbox b{
  font-family: 'Abril Fatface', cursive;
  font-size: 12px;
  color: #65BBF4;
  overflow: auto;
  text-align: justify;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#kristasigcode .sidebar{
  position: absolute;
  width: 130px;
  height: 163px;
  top: 15px;
  right: 15px;
  background: #F95A80;
  border: 3px solid #fff;
  border-left: 2px solid #fff;
  overflow: hidden;
}

#kristasigcode .navbar{
  position: absolute;
  background: transparent;
  left: 0px;
  top: 12px;
  height: 50px;
  width: 323px;
}

#kristasigcode .link .fas{
  color: #F95A80;
  background: #fff;
  font-size: 13px;
  margin-top: 7px;
  margin-left: 11px;
  width: 30px;
  height: 20px;
  padding-top: 8px;
  border: 3px solid #E5E5E5;
  outline: 2px solid #fff;
}
#kristasigcode .link .fas:hover{
  color: #fff;
  background: #65BBF4;
}

#kristasigcode a{
  text-decoration: none;
}

#kristasigcode .icon{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 10px;
  right: 10px;
  background: #fff;
  border: 5px solid #dedede;
  outline: 2px solid #fff;
}

#kristasigcode .icon img{
  width: 100px;
  height: 100px;
}

#kristasigcode .status{
  position: relative;
  width: 120px;
  top: 105px;
  left: -5px;
  background: #fff;
  border: 2px solid #dedede;
  outline: 2px solid #fff;
  padding: 4px 7px;
  font-family: 'Abril Fatface', serif;
  font-size: 12px;
  font-weight: bold;
  color: #54596B;
  overflow: auto;
  text-align: center;
  line-height: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#kristasigcode .req{
  position: relative;
  width: 120px;
  top: 111.5px;
  left: 0px;
  background: transparent;
  padding: 4px 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 8.5px;
  font-weight: bold;
  color: #fff;
  overflow: auto;
  text-align: center;
  line-height: 13px;
  text-transform: uppercase;
  letter-spacing: 3px;
}


</style>

<center>
<div id="kristasigcode">

  <div class="sig"></div>
  <div class="dark"></div>

  <div class="base">

      <div class="bg">
          <div class="navbar">
            <a class="link" href="LINKHERE" title="TITLE HERE"><i class="fas fa-crown"></i></a>
            <a class="link" href="LINKHERE" title="TITLE HERE"><i class="fas fa-code"></i></a>
            <a class="link" href="LINKHERE" title="TITLE HERE"><i class="fas fa-pen-nib"></i></a>
            <a class="link" href="LINKHERE" title="TITLE HERE"><i class="fas fa-trophy"></i></a>
            <a class="link" href="LINKHERE" title="TITLE HERE"><i class="fas fa-magic"></i></a>
            <a class="link" href="LINKHERE" title="TITLE HERE"><i class="fas fa-plug"></i></a>
          </div>

          <div class="initial">K</div>

          <div class="textbase"></div>
          <div class="textbox">
            <b>jan 9</b>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Pellentesque finibus dapibus mi, ac aliquam mi maximus ac.
            Aliquam erat volutpat. Phasellus id enim sed ex malesuada semper.
          </div>
      </div>

      <div class="sidebar">
          <div class="icon">
            <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
            <img src="https://via.placeholder.com/150x150/ffffff"></a>
          </div>

          <div class="status">available</div>
          <div class="req">for request</div>
      </div>

  </div>

</div>
</center>