Prototype (sig)

<link href="https://fonts.googleapis.com/css?family=Montserrat:800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
#mini-riot{
  width: 350px;
  height: 150px;
  outline: 1px solid #ccc;
  border: 5px solid #fff;
  outline-offset: 1px;
  background: #ccc;
  position: relative;
  margin: 0px auto;
  overflow: hidden;
}

#mini-riot .polygon{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 350px;
  height: 70px;
  background: #A93226;
}

#mini-riot .avatar{
  position: relative;
  top: -23px;
  left: -4px;
  width: 70px;
  height: 70px;
}

#mini-riot img{
  width: 70px;
  height: 70px;
  border: 8px solid #A93226;
  border-radius: 100px;
}

#mini-riot .navbar{
  position: relative;
  top: -45px;
  left: 5px;
  width: 250px;
  height: 35px;
  background: transparent;
  transition-duration: 0.8s;
}
#mini-riot:hover .navbar{
  top: 6px;
}

#mini-riot .fa{
  width: 12px;
  padding: 11px 10px;
  font-size: 10px;
  background: #fff;
  border: 0.5px solid #aaa;
  border-radius: 100px;
  margin: 10px;
  color: #A93226;
  transition-duration: 1s;
}
#mini-riot .fa:hover{
  transform: rotate(270deg);
}

#mini-riot .text{
  font-family: 'Montseratt', sans-serif;
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  position: relative;
  top: -15px;
  left: 5px;
  width: 250px;
  height: 35px;
  background: transparent;
  transition: 0.8s;
  color: #fff;
  text-shadow: 1px 1px #777;
  transition: 0.8s;
  line-height: 23px;
}
#mini-riot:hover .text{
  top: -55px;
}

</style>

<center>
<div id="mini-riot">

    <div class="navbar">
        <a href="http://cttw.b1.jcink.com/index.php?showtopic=19003"><i class="fa fa-paint-brush" title='graphics'></i></a>
        <a href="http://cttw.b1.jcink.com/index.php?showtopic=19178"><i class="fa fa-cube" title='coding'></i></a>
        <a href="http://cttw.b1.jcink.com/index.php?showtopic=18993"><i class="fa fa-rocket" title='tester'></i></a>
        <a href="https://medievaal.deviantart.com/"><i class="fa fa-deviantart" title='deviantart'></i></a>
    </div>

    <div class="polygon">
        <div class="avatar"><img src="https://i.imgur.com/dFnGHRJ.gif"></div>
    </div>

    <div class='text'>— run on gasoline —</div>
</div>
</center>