Aurora sig

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,900" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<style>
#aurora-sig{
  position: relative;
  margin: 10px auto;
  background: url(https://i.imgur.com/U2Of7xD.png);
  background-size: 400px;
  background-position: center;
  width: 400px;
  height: 200px;
  overflow: hidden;
  border-radius: 12px;
}

#aurora-sig ::-webkit-scrollbar {
  background: transparent;
  width: 5px;
}

#aurora-sig ::-webkit-scrollbar-track {
  background: transparent;
  border: 0px solid #fff;
}

#aurora-sig ::-webkit-scrollbar-thumb {
  background: transparent;
  border: 1px solid #7078BD;
}

#aurora-sig .border{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 380px;
  height: 200px;
  border: 1px solid #ffffff;
  border-radius: 12px;
}

#aurora-sig .foreground{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 200px;
  background: url(https://i.imgur.com/C0dCBIu.png);
  background-size: 400px;
  background-position: center;
}

#aurora-sig .title{
  position: absolute;
  top: 43px;
  left: 0px;
  width: 400px;
  height: 180px;
  transform: rotate(-4deg);
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 65px;
  text-transform: uppercase;
  line-height: 80px;
  transition: 0.5s ease-in 0.8s;
  letter-spacing: 0px;
}

#aurora-sig:hover .title{
  transform: rotate(0deg);
  top: 120px;
  transition: 0.5s ease-in 0s;
}

#aurora-sig .t1{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 200px;
  color: transparent;;
  text-stroke: 1px #ffffff;
  -webkit-text-stroke: 1px #ffffff;
}

#aurora-sig .t2{
  position: absolute;
  top: 4px;
  left: 3px;
  width: 400px;
  height: 200px;
  color: #ffffff;
}

#aurora-sig .footer{
  position: absolute;
  bottom: -1px;
  right: -1px;
  padding: 10px 0px;;
  width: 200px;
  background: rgba(255,255,255,0.3);
  border-top: 1px solid rgba(255,255,255,1);
  border-left: 1px solid rgba(255,255,255,1);
  color: #ffffff;
  font-weight: bold;
  letter-spacing: 0px;
}

#aurora-sig .footer b{
  font-family: 'Montserratt', sans-serif;
  font-weight: 800;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 0px 10px;
  line-height: 10px;
}

#aurora-sig .text-bg{
  position: absolute;
  bottom: 37.5px;
  left: 58px;
  width: 140px;
  height: 101px;
  background: rgba(255,255,255,0.3);
  border: 1px solid #ffffff;
  border-radius: 10px 0px 0px 0px;
  opacity: 0;
  transition: 0.3s ease-in 0.6s;
}

#aurora-sig:hover .text-bg{
  opacity: 1;
  transition: 0.3s ease-in 0.7s;
}

#aurora-sig .textbox{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  height: 50px;
  background: #ffffff;
  color: #000000;
  overflow: auto;
  text-align: justify;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 0px;
  line-height: 12px;
  padding-right: 10px;
  border: 15px solid #ffffff;
  border-radius: 10px 0px 0px 0px;
}

#aurora-sig .icon{
  position: absolute;
  top: 60px;
  right: 99px;
  width: 67px;
  height: 67px;
  background: rgba(255,255,255,0);
  border: 10px solid rgba(255,255,255,0.3);
  outline: 1.5px solid #ffffff;
  opacity: 0;
  transition: 0.3s ease-in 0.3s;
}

#aurora-sig:hover .icon{
  opacity: 1;
  transition: 0.3s ease-in 1s;
}

#aurora-sig .icon img{
  width: 67px;
  height: 67px;
  opacity: 0.8;
}

#aurora-sig .links{
  position: absolute;
  top: 58.5px;
  right: 58px;
  width: 28px;
  height: 88px;
  background: transparent;
  text-decoration: none;
  opacity: 0;
  transition: 0.3s ease-in 0s;
}

#aurora-sig:hover .links{
  opacity: 1;
  transition: 0.3s ease-in 1.3s;
}

#aurora-sig .links a{
  text-decoration: none;
}

#aurora-sig .th {
  color: #ffffff;
  font-size: 20px;
  margin-bottom: 15px;
  transform: rotate(0deg);
  transition: 0.5s;
}

#aurora-sig .th:hover {
  transform: rotate(360deg);
  transition: 0.5s;
}

</style>

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

  <div class="border"></div>

  <div class="title">
      <div class="t1">Aurora</div>
      <div class="t2">Aurora</div>
  </div>

  <div class="foreground"></div>

  <div class="footer">
    <b>Hanie</b>——— <b>GMT+8</b>
  </div>

  <div class="content">
      <div class="icon">
          <a href="http://atfjcink.jcink.net/index.php?showuser=2302" title="hanie ©">
          <img src="https://i.imgur.com/z1tnfho.gif"></a>
      </div>

      <div class="text-bg">
         <div class="textbox">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
      </div>

      <div class="links">
        <a href="#"><span class="th th-planet-1-o" title="Link 1"></span></a>
        <br>
        <a href="#"><span class="th th-moon-o" title="Link 2"></span></a>
        <br>
        <a href="#"><span class="th th-solar-system-o" title="Link 3"></span></a>
    </div>
  </div>
</div>
</center>