Annabeth Chase (mini profile)

<link href="https://fonts.googleapis.com/css?family=Muli|Abril+Fatface:400" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
#annabeth-mp{
  width: 250px;
  height: 450px;
  position: relative;
  background: #eee;
  border: 4px solid #fff;
  outline: 1px solid #FCB7DC;
  overflow: hidden;
}

#annabeth-mp .title-bg{
  width: 250px;
  height: 100px;
  position: absolute;
  background: #DD7CA7;
  bottom: 0px;
  left: 0px;
}

#annabeth-mp .title{
  width: 205px;
  position: absolute;
  color: #fff;
  font-family: 'Abril Fatface', cursive;
  font-weight: 400;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 24px;
  text-align: center;
  border: 24px solid #DD7CA7;
  margin-top: 1px;
}
#annabeth-mp .title a{
  color: #fff;
  text-decoration: none;
}

#annabeth-mp .avatar{
  width: 250px;
  height: 350px;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

#annabeth-mp .base{
  width: 250px;
  height: 350px;
  position: absolute;
  background: #EDD8DE;
  top: 0px;
  left: 0px;
  opacity: 0;
  -webkit-transition: 0.3s ease-in 0.5s;
  transition: 0.3s ease-in 0.5s;
}
#annabeth-mp:hover .base{
  opacity: 0.85;
  -webkit-transition: 0.3s ease-in 0s;
  transition: 0.3s ease-in 0s;
}

#annabeth-mp .container{
  width: 180px;
  height: 250px;
  position: absolute;
  background: #fff;
  bottom: -155px;
  left: 36px;
  border: 0.5px solid #FCB7DC;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}
#annabeth-mp:hover .container{
  bottom: 130px;
  -webkit-transition: 0.5s ease-in 0.5s;
  transition: 0.5s ease-in 0.5s;
}

#annabeth-mp .icon{
  width: 70px;
  height: 70px;
  position: absolute;
  background: #fff;
  top: -90px;
  right: 81px;
  border: 7px solid #DD7CA7;
  border-radius:100px;
  padding: 1.5px;
  z-index: 2;
  -webkit-transition: 0.5s ease-in 0s;
  transition: 0.5s ease-in 0s;
}
#annabeth-mp:hover .icon{
  top: 29px;
  -webkit-transition: 0.5s ease-in 0.5s;
  transition: 0.5s ease-in 0.5s;
}

#annabeth-mp .account{
  width: 180px;
  height: 22px;
  position: absolute;
  background: #DD7CA7;
  top: 55px;
  left: 0px;
  border-top: 0.5px solid #FCB7DC;
  border-bottom: 0.5px solid #FCB7DC;
  line-height: 22px;
  text-transform: uppercase;
  font-family: 'Muli', sans-serif;
  font-size: 9px;
  letter-spacing: 0px;
  color: #fff;
  font-weight: bold;
}
#annabeth-mp .account b{
  border-right: 0.5px solid #fff;
  padding: 6px 10px;
  margin-right: 8px;
  letter-spacing: 0.5px;
}

#annabeth-mp .links{
  width: 179.5px;
  height: 40px;
  position: absolute;
  background: #fff;
  bottom:0px;
  left: 0.5px;
  border-top: 0.5px solid #FCB7DC;
}
#annabeth-mp .links .fa{
  color: #DD7CA7;
  padding: 12px 8px;
  font-size: 17px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  line-height: 17px;
}
#annabeth-mp .links .fa:hover{
  color: #FCB7DC;
  transform: scale(1.4);
}

#annabeth-mp d{
  background: #fff;
  color: #DD7CA7;
  font-size: 7px;
  padding-left: 5px;
  line-height: 16px;
  font-weight: bold;
}
#annabeth-mp e{
  background: #fff;
  border-top: 0.5px solid #FCB7DC;
  color: #000;
  padding: 3px 7px;
  font-size: 8px;
  font-weight: bold;
  line-height: 17px;
}

#annabeth-mp .field1{
  width: 180px;
  height: 43px;
  background: transparent;
  position: relative;
  top: 77px;
  left: 0.5px;
  margin-top: 7px;
  text-transform: uppercase;
  font-family: 'Muli', sans-serif;
  letter-spacing: 0.5px;
  line-height: 15px;
  border-bottom: 0.5px solid #FCB7DC;
}

#annabeth-mp .field2{
  width: 90px;
  height: 45px;
  background: transparent;
  position: relative;
  top: 76.5px;
  left: -44px;
  text-transform: uppercase;
  font-family: 'Muli', sans-serif;
  letter-spacing: 0.5px;
  border-bottom: 0.5px solid #FCB7DC;
  border-right: 0.5px solid #FCB7DC;
  padding-top: 7px;
}

#annabeth-mp .field3{
  width: 90px;
  height: 45px;
  background: transparent;
  position: relative;
  top: 24px;
  left: 45px;
  text-transform: uppercase;
  font-family: 'Muli', sans-serif;
  letter-spacing: 0.5px;
  border-bottom: 0.5px solid #FCB7DC;
  padding-top: 7px;
}

#annabeth-mp .field4{
  width: 180px;
  height: 45px;
  background: transparent;
  position: relative;
  top: 18px;
  left: 0.5px;
  margin-top: 8px;
  text-transform: uppercase;
  font-family: 'Muli', sans-serif;
  letter-spacing: 0.5px;
}

#annabeth-mp .field4 e{
  background: #fff;
  border: 0px solid #FCB7DC;
  color: #000;
  padding: 3px 7px;
  font-size: 8px;
  font-weight: bold;
}
#annabeth-mp .field4 .fa{
  background: #fff;
  border: 0px solid #FCB7DC;
  color: #aaa;
  font-size: 9px;
}

</style>
<center>
<div id="annabeth-mp">

  <div class="avatar">

    <img src="https://i.imgur.com/y7Ojnby.png" style="width:250px;">
  </div>

  <div class="base"></div>

  <div class="icon">
      <a href="http://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
      <img src="https://i.imgur.com/rJcLEZz.gif" style="width:70px;height:70px;border-radius:100px;"></a>
  </div>

  <div class="container">
     <div class="account"><b>She/her</b> 1234 posts </div>

     <div class="field1">
        <d>face claim</d> <br> <e>alexandra daddario</e><br>
     </div>

      <div class="field2">
        <d>sexuality</d> <br> <e>straight</e><br>
      </div>

      <div class="field3">
        <d>affiliation</d> <br> <e>olympian</e><br>
      </div>

      <div class="field4">
        <d>membergroup</d> <i class="fa fa-bolt"></i><e>demigoddess</e><br>
      </div>

     <div class="links">
        <a href="#" title="wanted"><i class="fa fa-puzzle-piece"></i></a>
        <a href="#" title="application"><i class="fa fa-magic"></i></a>
        <a href="#" title="shipper"><i class="fa fa-heartbeat"></i></a>
        <a href="#" title="tracker"><i class="fa fa-plug"></i></a>
     </div>
  </div>

  <div class="title-bg">
    <div class="title"><a href="#">annabeth chase</a></div>
  </div>

</div>
</center>