Vermilion (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>

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

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

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

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

#vermilion-sig a{
  text-decoration: none;
}

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

#vermilion-sig .triangle{
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 195px;
  height: 200px;
  background: #e03b28;
  -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;
}
#vermilion-sig:hover .triangle{
  opacity: 0.9;
}
#vermilion-sig:not(:hover) .triangle{
  opacity: 0;
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#vermilion-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);
}

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

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

#vermilion-sig .textbox{
  font-family: 'Lato';
  font-size: 8px;
  text-align: justify;
  padding-right: 7px;
  line-height: 10px;
  overflow: auto;
  position: absolute;
  top: 56px;
  left: 90px;
  width: 145px;
  height: 90px;
  opacity: 0.9;
  color: #fff;
}

#vermilion-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;
}

#vermilion-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 #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

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

#vermilion-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 #e03b28;
  border-bottom: 2px solid #e03b28;
  border-left: 0.5px solid #e03b28;
  border-top: 0.5px solid #e03b28;
  opacity: 0.9;
}

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

</style>

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

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

    <div class='container'>
        <div class='textbox'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique lorem ut molestie sagittis. Sed ut est risus. Morbi commodo finibus accumsan. Duis non nulla vehicula velit lobortis fermentum. Donec fringilla, massa eu eleifend eleifend, elit est ornare quam, vitae auctor quam mauris ac enim. Fusce placerat odio at enim maximus condimentum. Fusce condimentum, est in venenatis volutpat, lacus orci ultricies mi, elementum egestas lorem est volutpat justo. Suspendisse eleifend quam nec interdum aliquam. Aenean non quam eget quam accumsan mattis. Nulla hendrerit a risus sed dapibus. Nam vel vehicula nisl, nec bibendum tortor. Etiam et nisl eu eros volutpat elementum. Nam bibendum, felis quis porttitor volutpat, felis libero facilisis orci, vel suscipit nisi est sit amet purus. Integer facilisis mauris cursus diam elementum, ut iaculis metus suscipit. Duis rhoncus faucibus urna. Fusce a arcu dui.
        </div>

        <div class='text-border'></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="/LINKHERE"<i class="fa fa-paper-plane" title='playground'></a></td>
            <td><a href="/LINKHERE"<i class="fa fa-file-text" title='archive'></a><br></td>
            <td><a href="/LINKHERE"<i class="fa fa-deviantart" title='deviantart'></a><br></td>
            <td><a href="/LINKHERE"<i class="fa fa-trophy" title='hof'></a><br></td>
            <td><a href="/LINKHERE"<i class="fa fa-envelope" title='message'></td>
          </tr>
        </table>
       </div>

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