for Mario

<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=Montserrat:700" rel="stylesheet">

<style>
#for-mario{
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  width: 500px;
  height: 200px;
  outline: 1px solid #D3BABA;
  outline-offset: 3px;
}

#for-mario a{
  text-decoration: none;
  color: #927373;
}

#for-mario .cred{
  font-family: Calibri;
  font-size: 7px;
  position: absolute;
  bottom: 4px;
  right: 10px;
  opacity: 0;
  transition-duration: 0.7s;
  transition-delay: 0.7s;
}
#for-mario:hover .cred{
  opacity: 1;
}
#for-mario:not(:hover) .cred{
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#for-mario .sig{
  width: 500px;
  height: 200px;
  background: url(https://i.imgur.com/fnQZz6u.png);
}

#for-mario .fade{
  position: absolute;
  top: 0px;
  width: 500px;
  height: 200px;
  background: #1b1b1b;
  opacity: 0;
  transition: 0.7s;
}
#for-mario:hover .fade{
  opacity: 0.9;
}
#for-mario:not(:hover) .fade{
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#for-mario .avatar{
  border-radius: 100px;
  position: absolute;
  left: -100px;
  top: 40px;
  width: 90px;
  height: 90px;
  border: 3px solid #bbb;
  background: url(https://78.media.tumblr.com/1d8c1a55bfe2c04e8c18604d6a35743b/tumblr_ou2pfxr9mT1qzz2dho3_400.gif);
  background-size: 165px;
  background-position: right;
  opacity: 0.85;
  transition-duration: 0.7s;
  transition-delay: 0.7s;
}
#for-mario:hover .avatar{
  left: 70px;
}
#for-mario:not(:hover) .avatar{
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#for-mario .container{
  position: absolute;
  top: 0px;
  right: -280px;
  width: 310px;
  height: 200px;
  background: #ddd;
  opacity: 0.8;
  transition-duration: 0.7s;
  transition-delay: 0.7s;

 -webkit-clip-path: polygon(25% 0%, 100% 0, 100% 100%, 25% 100%, 15% 51%);
clip-path: polygon(25% 0%, 100% 0, 100% 100%, 25% 100%, 15% 51%);
}
#for-mario:hover .container{
  right: 0px;
}
#for-mario:not(:hover) .container{
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#for-mario .textbox{
  position: absolute;
  top: 16px;
  left: 50px;
  width: 250px;
  height: 150px;
}

#for-mario .labels{
  line-height: 9px;
  border-top: 0px solid #aaa;
  font-family: verdana;
  font-size: 7px;
  padding: 4px 10px;
  color: #222;
  width: 100px;
  background: #fff;
  opacity: 0.9;
}

#for-mario .color{
  background: #927373;
  width: 15px;
}

#for-mario .blurb{
  line-height: 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 5px 5px;
  color: #333;
  text-transform: lowercase;
  border-bottom: 1px solid #eee;
}

#for-mario .request{
  line-height: 9px;
  position: absolute;
  bottom: 35px;
  left: -100px;
  background: #634d51;
  width: 100px;
  padding: 5px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 8px;
  padding: 5px 0px;
  color: #ccc;
  opacity: 0.9;
  transition-duration: 0.7s;
  transition-delay: 0.7s;
}
#for-mario:hover .request{
  left: 70px;
}
#for-mario:not(:hover) .request{
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#for-mario .navbar{
  position: absolute;
  top: 60px;
  left: 195px;
  width: 20px;
  height: 100px;
  background: transparent;
  transition-duration: 0.7s;
  transition-delay: 1s;
  opacity: 0;
}
#for-mario:hover .navbar{
  opacity: 0.9;
}
#for-mario:not(:hover) .navbar{
  transition-duration: 0.5s;
  transition-delay: 0s;
}

#for-mario .fa{
  color: #bbb;
  transition: 0.5s;
  font-size: 12px;
}
#for-mario .fa:hover{
  color: #816266;
}


</style>

<center>
<div id="for-mario">

    <div class="sig"></div>

    <div class="fade"></div>

    <div class="avatar"></div>

    <div class="container">
        <div class="textbox">
            <table>
              <tr>
                <td class="blurb">
                    <i class="fa fa-quote-left" style="padding-right:2px; font-size:10px; color:#685054;"></i>
                        Name's Mario and <br>I'm awesome!!!!
                    <i class="fa fa-quote-right" style="padding-left:2px; font-size:10px; color:#685054;"></i>
                </td>
              </tr>
            </table>
            <table style="margin-top:3px;">
              <tr>
                <td class="color"></td>
                <td class="labels">top notch procrastinator </td>
              </tr>
              <tr>
              <td class="color"></td>
                <td class="labels">ongoing pre-med student</td>
              </tr>
              <tr>
              <td class="color"></td>
                <td class="labels">18 and hating it</td>
              </tr>
              <tr>
              <td class="color"></td>
                <td class="labels">one direction and the vamps</td>
              </tr>
              <tr>
              <td class="color"></td>
                <td class="labels">the flash, supergirl and legends of tomorrow </td>
              </tr>
            </table>
        </div>
    </div>

    <div class="request">
        <i class="fa fa-check-square-o" style="padding-right:2px; font-size:8px; color:#bbb;"></i>
            open for request</div>

    <div class="navbar">
        <table>
          <tr>
            <td><a href="https://marioantonio23.deviantart.com"><i class="fa fa-deviantart" style="margin-bottom:18px;" title="deviantart"></i></a></td>
          </tr>
          <tr>
            <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=3067"><i class="fa fa-trophy" style="margin-bottom:18px;" title="hof"></i></td>
          </tr>
          <tr>
            <td><a href="https://shadowplayers.jcink.net/index.php?showtopic=2980"><i class="fa fa-file-image-o" title="gallery"></i></td>
          </tr>
        </table>
    </div>

    <div class='cred'><a href="https://shadowplayers.jcink.net/index.php?showuser=95" title='by hanie ©'>©</a></div>

</div>
</center>