<link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet" />
<style> .filiens_red_cont {margin: 0 auto; width: 450px; height: 100%; background-color: #e9e9e3; background-image: url("http://zupimages.net/up/16/35/vqad.png"); position: relative;} .filiens_red {margin: 0 auto; width: 450px; height: 250px; position: relative;} .liensred_icone {width: 100px; height: 100px; border: 3px solid #ca3a43; box-sizing: border-box; position: absolute; top: 30px; left: 10px; transition: all 1.5s;} .liensred_icone:hover {filter: grayscale(100%);} .filiens_red h1 {width: 320px; height: 15px; background: #5a4b61; font-size: 30px; color: #e9e9e3; font-family: 'Bubblegum Sans', cursive; text-shadow: 1px 1px 0px #d51b20; text-transform: uppercase; font-weight: normal; font-style: italic; line-height: 10px; text-align: right; position: absolute; top: -10px; right: 10px;} .liensred_rp {width: 320px; height: 100px; background: #e9e9e3; padding: 5px; border-bottom: 3px solid #ca3a43; box-sizing: border-box; font-size: 12px; color: #5a4b61; text-align: justify; overflow: auto; position: absolute; top: 35px; right: 10px;} .filiens_red h2 {display: inline; background: #5a4b61; padding: 3px; box-sizing: border-box; font-size: 10px; color: #e9e9e3; text-transform: uppercase;}.liens_red {width: 430px; height: 100px; background-color: #ca3a43; background-image: url("http://zupimages.net/up/16/35/vqad.png"); position: absolute; left: 10px; bottom: 10px;} .liensred_description {width: 410px; height: 80px; background: #e9e9e3; padding: 5px; box-sizing: border-box; font-size: 12px; color: #5a4b61; text-align: justify; overflow: auto; position: absolute; top: 10px; left: 10px;} .filiens_red_cont h3 {position: absolute; bottom: 0px; right: 170px; font-size: 14px; color: #5a4b61; font-weight: normal;} .filiens_red_cont a {color: #5a4b61; text-decoration: none;}
</style>

<div class="filiens_red_cont">
<div class="filiens_red">
<img src="http://zupimages.net/up/16/36/tp7s.png" class="liensred_icone" alt="icone" /><h1>Pseudo</h1>
<div class="liensred_rp"><h2>titre du rp</h2> description du rp en cours ou finit, date, lieu de rencontre, conclusion, et cetera..

<h2>titre du rp</h2> description du rp en cours ou finit, date, lieu de rencontre, conclusion, et cetera..
</div>
<div class="liens_red">
<div class="liensred_description"><h2>titre du lien</h2> Ici une description du lien entretenu avec le personnage en question. Huic Arabia est conserta, ex alio latere Nabataeis contigua; opima varietate conmerciorum castrisque oppleta validis et castellis, quae ad repellendos gentium vicinarum excursus sollicitudo pervigil veterum per oportunos saltus erexit et cautos. haec quoque civitates habet inter oppida quaedam ingentes Bostram et Gerasam atque Philadelphiam murorum firmitate cautissimas. hanc provinciae inposito nomine rectoreque adtributo obtemperare legibus nostris Traianus conpulit imperator incolarum tumore saepe contunso cum glorioso marte Mediam urgeret et Parthos.</div></div>
</div>

<div class="filiens_red">
<img src="http://zupimages.net/up/16/36/tp7s.png" class="liensred_icone" alt="icone" /><h1>Pseudo</h1>
<div class="liensred_rp"><h2>titre du rp</h2> description du rp en cours ou finit, date, lieu de rencontre, conclusion, et cetera..

<h2>titre du rp</h2> description du rp en cours ou finit, date, lieu de rencontre, conclusion, et cetera..
</div>
<div class="liens_red">
<div class="liensred_description"><h2>titre du lien</h2> Ici une description du lien entretenu avec le personnage en question</div></div>
</div>
<h3>️ <a href="http://epicode.bbactif.com/">Lazy sur Epicode</a></h3>
</div>

<div class="filiens_red">
<img src="http://zupimages.net/up/16/36/tp7s.png" class="liensred_icone" alt="icone" /><h1>Pseudo</h1>
<div class="liensred_rp"><h2>titre du rp</h2> description du rp en cours ou finit, date, lieu de rencontre, conclusion, et cetera..

<h2>titre du rp</h2> description du rp en cours ou finit, date, lieu de rencontre, conclusion, et cetera..
</div>
<div class="liens_red">
<div class="liensred_description"><h2>titre du lien</h2> Ici une description du lien entretenu avec le personnage en question. Huic Arabia est conserta, ex alio latere Nabataeis contigua; opima varietate conmerciorum castrisque oppleta validis et castellis, quae ad repellendos gentium vicinarum excursus sollicitudo pervigil veterum per oportunos saltus erexit et cautos. haec quoque civitates habet inter oppida quaedam ingentes Bostram et Gerasam atque Philadelphiam murorum firmitate cautissimas. hanc provinciae inposito nomine rectoreque adtributo obtemperare legibus nostris Traianus conpulit imperator incolarum tumore saepe contunso cum glorioso marte Mediam urgeret et Parthos.</div></div>
</div>