Finnick Odair

[dohtml]
<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:500|Montserrat:800" rel="stylesheet">

<style>
#finnick-profile {
 width: 250px;
 height: 450px;
 position: relative;
 margin: 0 auto;
 overflow: hidden;
 background: #142367;
 outline: 0px solid #111;
}

#finnick-profile a{
 text-decoration: none;
 color: #fff;
}

#finnick-profile .foreground{
 border: 0px solid #111;
 outline: 1px solid #ccc;
 position: relative;
 margin: 0 auto;
 overflow: hidden;
 top: 15px;
 left: 0px;
 width: 217px;
 height: 347px;
 background: url(https://68.media.tumblr.com/9b520f1a81da6535a10383c0da20b398/tumblr_mwtxgmSYuD1rkqbo5o1_500.png);
 background-size: 285px;
 background-position: right;
}

#finnick-profile .triangle{
 position: absolute;
 top: 0px;
 left: 0px;
 width: 250px;
 height: 235px;
 background: #000;
 -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
 clip-path: polygon(0 0, 0 100%, 100% 0);
}

#finnick-profile .avatar-base{
 position: absolute;
 top: -110px;
 left: 0px;
 width: 220px;
 height: 90px;
 background: #142367;
 transition: 1s;
}
#finnick-profile:hover .avatar-base{
 top: 0px;
}

#finnick-profile .quote{
 font-family: 'Lato', sans-serif;
 font-size: 8.5px;
 font-weight: 500;
 color: #eee;
 position: absolute;
 text-align: left;
 line-height: 11px;
 top: 22px;
 left: 24px;
 width: 100px;
 height: 60px;
 background: transparent;
 letter-spacing: 0px;
 line-height: 11px;
}

#finnick-profile .arrow{
 position: absolute;
 top: 70px;
 right: 20px;
 width: 40px;
 height: 30px;
 background: #142367;
 -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

#finnick-profile .avatar{
 border-radius: 100px;
 position: absolute;
 top: 18px;
 right: 24px;
 width: 47px;
 height: 47px;
 background: url(https://78.media.tumblr.com/5d9bad8d61c51ebd2a77600e80bb945c/tumblr_mzvjl1jnDv1riimcbo2_250.gif);
 background-size: 85px;
 background-position: center;
 border: 4px solid #eee;
}

#finnick-profile .base{
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 220px;
 height: 265px;
 background: #000;
 opacity: 0;
 transition: 1s;
 line-height: 11px;
}
#finnick-profile:hover .base{
 opacity: 0.3;
}

#finnick-profile .container{
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 220px;
 height: 255px;
 opacity: 0;
 transition: 1s;
 line-height: 11px;
}
#finnick-profile:hover .container{
 opacity: 1;
}

#finnick-profile .title{
 overflow: hidden;
 padding: 15px;
 font-family: 'Montseratt', sans-serif;
 font-weight: 800;
 font-size: 21px;
 text-transform: uppercase;
 letter-spacing: 0px;
 color: #eee;
 position: absolute;
 bottom: 5px;
 left: 0px;
 width: 212px;
 background: #111;
 border: 1px solid #111;
 outline: 5px solid #111;
 text-align: right;
 line-height: 30px;
}

#finnick-profile f{
 color: #eee;
 background: #142367;
 padding: 1px 9px;
 margin-right: 2px;
}

#finnick-profile .left{
 font-family: 'Montserrat', sans-serif;
 font-size: 8px;
 font-weight: bold;
 color: #eee;
 text-align: center;
 text-transform: uppercase;
 background: #111;
 width: 50px;
 padding: 5px;
 letter-spacing: 0px;
 line-height: 11px;
}

#finnick-profile .right{
 font-family: 'Lato', sans-serif;
 font-size: 9px;
 font-weight: 500;
 color: #000;
 text-align: center;
 background: #fff;
 width: 100px;
 padding: 7px 5px;
 letter-spacing: 0px;
 line-height: 11px;
}

#finnick-profile .tab{
 position: relative;
 top: 35px;
}

#finnick-profile .tab2{
 position: relative;
 top: 48px;
}

#finnick-profile .nav{
 background: #142367;
 width: 39px;
 height: 39px;
 text-align: center;
 color: #eee;
 font-size: 12px;
 transition: 0.5s;
}
#finnick-profile .nav:hover{
 background: #111;
}

</style>

<center>
<div id='finnick-profile'>

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

  <div class='foreground'>

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

  <div class='container'>
      <table class='tab'>
        <tr>
          <td class='left'>status</td><td class='right'>Alive</td>
        </tr>
        <tr>
          <td class='left'>name</td><td class='right'>Finnick Odair</td>
        </tr>
        <tr>
          <td class='left'>age</td><td class='right'>24</td>
        </tr>
        <tr>
          <td class='left'>Home</td><td class='right'>District 13</td>
        </tr>
        <tr>
          <td class='left'>Job</td><td class='right'>Tribute</td>
        </tr>
      </table>

      <table class='tab2'>
        <tr>
          <td class='nav'><a href="/LINKHERE"><i class="fa fa-user" title='profile'></i></a></td>
          <td class='nav'><a href="/LINKHERE"><i class="fa fa-warning" title='wanted'></i></a></td>
          <td class='nav'><a href="/LINKHERE"><i class="fa fa-th-list" title='tracker'></i></a></td>
          <td class='nav'><a href="https://shine.jcink.net/index.php?showuser=29444"><i class="fa fa-star" title='hanie ©'></i></a></td>
        </tr>
      </table>
  </div>

  <div class='avatar-base'>
          <table>
            <tr>
              <td class='quote'>
                <i class="fa fa-quote-left" style="color:#ddd; margin-right:2px;"></i>
                It takes <i>ten times</i> longer to put yourself back together as it does to <i>fall apart</i>
                <i class="fa fa-quote-right" style="color:#ddd; margin-left:2px;"></i><br>
                </td>
            </tr>
          </table>
     <div class='arrow'></div>
     <div class='avatar'></div>
  </div>
  </div>

  <div class='title'><f>F</f>innick</div>

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