<link href='https://fonts.googleapis.com/css?family=Montserrat:700,400|Roboto' rel='stylesheet' type='text/css'><style>.wrap-tracker {width: 500px;height: 220px;margin: auto;position: relative;}.wrap-tracker a {text-decoration: none!important;}.tracker-side {background-color: #f1f1f1;height: 200px;width: 180px;position: absolute;padding: 10px;}.tracker-img {height: 150px;width: 150px;margin: auto;border-radius: 100%;border: 5px solid #fff;background-color: #fff;z-index: 2;position: relative;}.tracker-img img {height: 150px;width: 150px;border-radius: 100%;opacity: 1;transform: rotate(0deg);transition: 0.3s all;}.tracker-img-links {width: 150px;text-align: center;margin-top: -85px;position: absolute;}.tracker-img-links a{display: inline-block;width: 50px;background-color: #fff;margin: 3px;text-align: center;font: 11px 'Montserrat', sans-serif;text-transform: uppercase;opacity: 0;transition: 0.3s all}.tracker-img-links a:hover{background-color: #007bff;color: #fff;}.tracker-img:hover img {transform: rotate(40deg);opacity: 0.5;}.tracker-img:hover .tracker-img-links a {opacity: 1;}.tracker-side h2 {font: 15px/100% 'Montserrat', sans-serif;letter-spacing: -1px;font-weight: 800;text-align: center;text-transform: uppercase;text-shadow: -1px 0 0 #000;color: #007bff;}.tracker-side:after {content: "";width: 0;height: 0;border-style: solid;border-width: 150px 200px 0 0;border-color: #007bff transparent transparent transparent;position: absolute;left: 0px;top: 0;z-index: 0;}.tracker-case {width: 295px;height: 108px;background-color: #f1f1f1;position: absolute;right: 0;overflow: hidden;}.bas {bottom: 0;}.tracker-case h3 {font: 20px 'Montserrat', sans-serif;letter-spacing: -1px;font-weight: 700;text-align: right;text-transform: lowercase;text-shadow: -1px 0 0 #000;color: #007bff;margin: 0;padding-right: 15px;}.tracker-content {width: 285px;height: 62px;padding: 10px 20px 10px 10px;overflow: auto;}.tracker-links {width: 270px;text-align: justify;font: 10px 'Roboto', sans-serif;}lien a {background-color: #007bff;color: #fff!important;padding: 0 3px;width: auto;text-transform: uppercase;font-family:'Montserrat', sans-serif;transition: 0.4s all ease-in-out;}lien a:hover {background-color: #fff;color: #007bff!important;}lien div {margin-bottom: 3px;}.tracker-credit a {position: absolute;bottom: -15px;left: 10px;color: #ccc;font: 8px 'Roboto', sans-serif; letter-spacing: 1.5px;}</style>
<div class="wrap-tracker"><div class="tracker-side"><div class="tracker-img"><img src="http://placehold.it/150x150" alt="" /><div class="tracker-img-links"><a href="#">Fiche</a><a href="#">Liens</a></div></div><h2>Prénom Nom</h2></div><!--

**** Les RPs en cours ****
--><div class="tracker-case"><h3>En cours</h3><div class="tracker-content"><div class="tracker-links"><!--
--><lien><a href="#">Titre du topic</a><div>Feat nom du personnage</div></lien>
<lien><a href="#">Titre du topic</a><div>Feat nom du personnage</div></lien>
<lien><a href="#">Titre du topic</a><div>Feat nom du personnage</div></lien>
<lien><a href="#">Titre du topic</a><div>Feat nom du personnage</div></lien></div></div></div><!--

**** Les RPs terminés / abandonnés ****
--><div class="tracker-case bas"><h3>Finis / Abandonnés</h3><div class="tracker-content"><div class="tracker-links"><!--
--><lien><a href="#">Titre du topic</a><div>Feat nom du personnage</div></lien>
<lien><a href="#">Titre du topic</a><div>Feat nom du personnage</div></lien>
<lien><a href="#">Titre du topic</a><div>Feat nom du personnage</div></lien>
<lien><a href="#">Titre du topic</a><div>Feat nom du personnage</div></lien></div></div></div><div class="tracker-credit"><a href="http://terrible.forumactif.org/" target="_blank">AWFUL</a></div></div>