Cactus (signature)

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">

<style>
#cactus{
  background: url(https://i.imgur.com/6NZQ0kq.gif);
  background-size: 400px;
  width: 400px;
  height: 150px;
  position: relative;
  overflow: hidden;
  margin: 0px auto;
}

#cactus .base{
  background: #003d4a;
  width: 400px;
  height: 150px;
  position: absolute;
  overflow: hidden;
  margin: 0px auto;
  opacity: 0.85;
}

#cactus .icon{
  width: 120px;
  height: 120px;
  position: absolute;
  background: transparent;
  top: 27px;
  left: 15px;
}
#cactus .icon .sf{
  color: #fff;
  font-size: 90px;
  line-height: 90px;
}

#cactus .slash{
  width: 150px;
  height: 140px;
  position: absolute;
  background: #003d4a;
  top: 55px;
  left: 75px;
  border-left: 1px solid #ffcd04;
  transform: rotate(40deg);
}

#cactus .textbox{
  width: 120px;
  height: 46px;
  position: absolute;
  background: transparent;
  border: 0.5px solid #ffcd04;
  border-right: 18px solid #ffcd04;
  bottom: 25px;
  right: 25px;
  overflow: auto;
  text-align: justify;
  font-family: 'Courier New';
  font-size: 7.5px;
  line-height: 9px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 5px;
}
#cactus .textbox b{
  color: #ffcd04;
  letter-spacing: 3px;
  font-size: 8px;
  font-style: italic;
  line-height: 11px;
}

#cactus c{
  background: #ffcd04;
  padding: 3px;
  color: #00303a;
  font-weight: bold;
}

#cactus .link{
  position: absolute;
  top: 25px;
  left: 119px;
  width: 100px;
  height: 20px;
  background: transparent;
  border-bottom: 0.5px solid #ffcd04;
  text-align: right;
  font-family: 'Courier New';
  font-size: 8px;
  text-transform: uppercase;
  color: #fff;
  line-height: 26px;
  letter-spacing: 0.5px;
}

#cactus .link2{
  position: absolute;
  top: 50px;
  left: 98px;
  width: 100px;
  height: 20px;
  background: transparent;
  border-bottom: 0.5px solid #ffcd04;
  text-align: right;
  font-family: 'Courier New';
  font-size: 8px;
  text-transform: uppercase;
  color: #fff;
  line-height: 26px;
  letter-spacing: 0.5px;
}

#cactus .link3{
  position: absolute;
  top: 75px;
  left: 77px;
  width: 100px;
  height: 20px;
  background: transparent;
  border-bottom: 0.5px solid #ffcd04;
  text-align: right;
  font-family: 'Courier New';
  font-size: 8px;
  text-transform: uppercase;
  color: #fff;
  line-height: 26px;
  letter-spacing: 0.5px;
}

#cactus .link4{
  position: absolute;
  top: 100px;
  left: 57px;
  width: 100px;
  height: 20px;
  background: transparent;
  border-bottom: 0.5px solid #ffcd04;
  text-align: right;
  font-family: 'Courier New';
  font-size: 8px;
  text-transform: uppercase;
  color: #fff;
  line-height: 26px;
  letter-spacing: 0.5px;
}

#cactus a{
  text-decoration: none;
  color: #fff;
  -webkit-transition: 0.2s ease-in 0s;
  transition: 0.2s ease-in 0s;
}
#cactus a:hover{
  letter-spacing: 1px;
  color: #ffcd04;
}

#cactus .triangle{
  width: 120px;
  height: 50px;
  background: #ffcd04;
  position: absolute;
  top: 0px;
  right: -1px;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

</style>

<center>
<div id='cactus'>

  <div class='base'>
      <div class='icon'>
        <span class="sf sf-cactus-o"></span>
      </div>

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

      <div class='link'>
      <a href="https://orpheusz.deviantart.com/">playground</a> <c>01</c>
      </div>

      <div class='link2'>
      <a href="https://shadowplayers.jcink.net/index.php?showtopic=8958">tracker</a> <c>02</c>
      </div>

      <div class='link3'>
      <a href="https://shadowplayers.jcink.net/index.php?showtopic=2034">archive</a> <c>03</c>
      </div>

      <div class='link4'>
      <a href="https://shadowplayers.jcink.net/index.php?showtopic=11483">deviantart</a> <c>04</c>
      </div>

      <div class='textbox'>
        <b>// Hanie(21) </b> <br>
        a hobbyist designer and coder who have a thing for dark and peculiar stuff.
      </div>
  </div>

</div>
</center>