Dusk Till Dawn (Signature)

[dohtml]
<! A TEMPLATE BY HANIE(ORPHEUS) !>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link href="https://fonts.googleapis.com/css?family=Lato|Montserrat:400,800,900" rel="stylesheet">

<style>

#dusktilldawn-sig{
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 500px;
  height: 200px;
  border: 4px solid #fff;
  outline: 1px solid #dc5e98;
  background: url(https://i.imgur.com/y8bpvDB.png);
}

#dusktilldawn-sig ::-webkit-scrollbar {
    width: 3.5px;
}

#dusktilldawn-sig ::-webkit-scrollbar-track {
    background: #e746a1;
    border: 1px solid #000;
}

#dusktilldawn-sig ::-webkit-scrollbar-thumb {
    background: #fff;
}

#dusktilldawn-sig a{
  text-decoration: none;
  color: #e746a1;
  font-weight: bold;
}

#dusktilldawn-sig .base{
  width: 500px;
  height: 200px;
  background: #000;
  opacity: 0;
  transition: 0.7s;
}
#dusktilldawn-sig:hover .base{
  opacity: 0.9;
}
#dusktilldawn-sig:not(:hover) .base{
  opacity: 0;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#dusktilldawn-sig .triangle{
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 195px;
  height: 200px;
  background: #2cbfbe;
  -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  opacity: 0;
  transition-duration: 1s;
  transition-delay: 1s;
}
#dusktilldawn-sig:hover .triangle{
  opacity: 0.9;
}
#dusktilldawn-sig:not(:hover) .triangle{
  opacity: 0;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#dusktilldawn-sig .navbar{
  position: absolute;
  top: 98px;
  right: -28px;
  width: 200px;
  height: 40px;
  background: transparent;
  background-size: 30px;
  -webkit-transform: rotate(-49deg); /* Chrome, Safari, Opera */
  transform: rotate(-47deg);
}

#dusktilldawn-sig .fa{
  font-size: 10px;
  text-align: center;
  color: #000;
  background: transparent;
  width: 10px;
  padding: 6px;
  transition: 0.5s;
}
#dusktilldawn-sig .fa:hover{
  color: #e746a1;
}

#dusktilldawn-sig .container{
  position: absolute;
  top: 5px;
  left: -350px;
  width: 480px;
  height: 180px;
  opacity: 0.9;
  transition: 0.7s;
  transition-duration: 1s;
  transition-delay: 1s;
}
#dusktilldawn-sig:hover .container{
  left: 0px;
}
#dusktilldawn-sig:not(:hover) .container{
  opacity: 0;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#dusktilldawn-sig .textbox{
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  text-align: justify;
  padding-right: 7px;
  line-height: 11.5px;
  text-transform: lowercase;
  overflow: auto;
  position: absolute;
  top: 56px;
  left: 90px;
  width: 145px;
  height: 90px;
  opacity: 0.9;
  color: #fff;
}

#dusktilldawn-sig n{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 2px 3px;
  border-right: 2px solid #000;
  border-bottom: 0.5px solid #000;
  color: #fff;
  margin-right: 2px;
  text-transform: uppercase;
}

#dusktilldawn-sig .avatar{
  position: absolute;
  top: 65px;
  left: 275.5px;
  width: 55px;
  height: 55px;
  background: url(https://i.imgur.com/1K6ItfZ.gif);
  background-size: 56px;
  border: 3px solid #000;
  outline: 1px solid #e746a1;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#dusktilldawn-sig .text-border{
  position: absolute;
  top: 30px;
  left: 65px;
  width: 241px;
  height: 130px;
  border: 0.5px solid #2cbfbe;
}

#dusktilldawn-sig .title{
  position: absolute;
  top: 20px;
  left: 90px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11.5px;
  padding: 4px 15.5px;
  background: #000;
  color: #fff;
  border-right: 2px solid #e746a1;
  border-bottom: 2px solid #e746a1;
  border-left: 0.5px solid #e746a1;
  border-top: 0.5px solid #e746a1;
  opacity: 0.9;
}

#dusktilldawn-sig i{
  font-size: 11px;
  font-weight: 400;
}

</style>

<center>
<div id='dusktilldawn-sig'>

    <div class='base'></div>

    <div class='container'>
        <div class='text-border'></div>

        <div class='textbox'>
            Hello guys! the name's Hanie and i'm just a hobbyist graphic designer from Malaysia.
            A comp-sci major at uni ( and yes i do code A LOT! )
            I'm into <s>hot guys</s>, so many tv shows and movies also, dark and peculiar stuff,
            so that explains all my stuff around here. lol<br><br>

            A big thanks to the ever talented <a href="https://shadowplayers.jcink.net/index.php?showuser=38">Soph</a> for my gorgeous sig <3
      </div>



    <div class='avatar'></div>

    <div class='title'>dusk till <i>dawn</i></div>

    </div>

    <div class='triangle'>

         <div class='navbar'>
        <table>
          <tr>
            <td><n>navs</n></td>
            <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=2029"<i class="fa fa-paper-plane" title='playground'></i></a></td>
            <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=2034"<i class="fa fa-file-text" title='archive'></i></a><br></td>
            <td><a href="https://medievaal.deviantart.com/"<i class="fa fa-deviantart" title='deviantart'></i></a><br></td>
            <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=1969"<i class="fa fa-trophy" title='hof'></i></a><br></td>
            <td><a href="https://shadowplayers.jcink.net/index.php?act=Msg&CODE=04&MID=95"<i class="fa fa-envelope" title='message'></i></td>
          </tr>
        </table>
       </div>

    </div>
</div>
</center>
[/dohtml]