<style>@font-face {font-family: 'Pathway Gothic One';font-style: normal;
font-weight:400;src:url(https://themes.googleusercontent.com/static/fonts/pathwaygothicone/v2/Lqv9ztoTUV8Q0FmQZzPqaBfSZ9PF2sGs8WIylam6T2Y.woff) format('woff');
}.perso{width: 500px;margin:auto;background-color: #ffe5a3; color:#863901;} .perso h1{font-family:'Pathway Gothic One';text-align:center;font-size:48px;text-transform:uppercase;background-color:#863901;line-height:100px;color:white;margin-bottom:-30px;} .perso h2{font-family:'Pathway Gothic One';text-align:center;font-size:30px;text-transform:uppercase;background-color:#863901;line-height:50px;color:white;font-weight: normal;margin-top: 0px;margin-bottom:-15px;} .perso p{padding-left: 10px;padding-right: 10px;} .rps td{width: 160px;border-right: 3px solid #482502;margin-bottom: 0px;} .rps{margin: auto;} .rps h3{font-family:'Pathway Gothic One';text-align:center;font-size:24px;text-transform:uppercase;background-color:#863901;line-height: 40px;color: white;margin-right:0px;margin-top:0px;margin-left: -2px;margin-right: -1px;margin-bottom: -2px; font-weight: normal;} .rps a{color:#c3c3c3;}</style>

<div class="perso"><h1>Prénom Nom</h1>
<img src="http://placehold.it/500x100"/>
<h2>Qui est-il ?</h2><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed fringilla leo, nec fringilla metus. Fusce suscipit lorem vel erat aliquet mollis. Sed vitae odio erat. Vestibulum fringilla, ligula id porttitor molestie, est ante sodales enim, quis gravida metus nulla ac mi. Fusce pretium laoreet tellus at vestibulum. Fusce mauris mi, porta ut tincidunt ut, interdum vestibulum nulla. Vestibulum eu volutpat libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras in felis non nisi varius consequat. Aenean volutpat lobortis dui, sed semper libero lobortis at. Ut eget ipsum vitae massa molestie suscipit et at tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada diam tristique dictum egestas. Integer faucibus ipsum vel aliquam faucibus. Fusce quis justo id sapien semper dictum.

Nam sollicitudin sagittis semper. Pellentesque mattis venenatis tellus, ac adipiscing elit lacinia et. Ut ut suscipit urna. Etiam interdum sollicitudin turpis, sed sodales urna ultrices id. Phasellus scelerisque pharetra nisi, sit amet commodo nulla blandit in. Donec orci augue, consequat ac pulvinar non, egestas in tortor. Etiam mattis nibh in mollis pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce consectetur dapibus fermentum. Ut porttitor nec tellus ac eleifend.</p>
<h2>Sa tête en mosaïque</h2>

<center><img src="http://placehold.it/100x100"/> <img src="http://placehold.it/100x100"/> <img src="http://placehold.it/100x100"/> <img src="http://placehold.it/100x100"/></center>
<h2>Ses aventures</h2>

<table class="rps"><tr><td><h3>Passées</h3></td><td><h3>En cours</h3></td><td><h3>Futures</h3></td></tr><tr><td valign="top"><a href="#">Rp terminé</a> ▬ decription
<a href="#">Rp terminé</a> ▬ decription
<a href="#">Rp terminé</a> ▬ decription
<a href="#">Rp terminé</a> ▬ decription
<a href="#">Rp terminé</a> ▬ decription</td><td valign="top"><a href="#">Rp en cours</a> ▬ decription
<a href="#">Rp en cours</a> ▬ decription
<a href="#">Rp en cours</a> ▬ decription
<a href="#">Rp en cours</a> ▬ decription
<a href="#">Rp en cours</a> ▬ decription</td><td valign="top">• Avec machin
• Avec truc
• Avec bidule</td></tr></table>

<center>Code par <a href="http://www.never-utopia.com/u17236">Dehvi</a> sur <a href="http://www.never-utopia.com">Never-Utopia</a></center>
</div>

<style>.perso{width: 500px;margin:auto;background-color: #ffe5a3; color:#863901;} .perso h1{font-family:'Pathway Gothic One';text-align:center;font-size:48px;text-transform:uppercase;background-color:#863901;line-height:100px;color:white;margin-bottom:-30px;}  .relations{margin: auto;} .relations h3{font-family:'Pathway Gothic One';text-align:center;font-size:24px;text-transform:uppercase;background-color:#863901;line-height: 40px;color: white;margin-right:0px;margin-top:0px;margin-bottom: -20px; font-weight: normal;} .relations td{width:150px;border-bottom: 4px solid #482502;background-color: #863901;} .relations td p{height: 200px;max-height: 200px;overflow-y:auto;overflow-x:hidden;padding: 5px;text-align: left;margin-top: -5px;margin-bottom: -15px;} .relations img{border-bottom: 4px solid #482502;} .relations strong{font-family: 'Pathway Gothic One';font-size: 16px;text-transform: uppercase;color: white;font-weight: normal;margin-bottom: -30px;display: block;}</style>

<div class="perso"><h1>Ses relations</h1>

<table class="relations"><tr><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100"/>
<p><strong>Type de relation</strong>

Description de la relation</p>
</td><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100"/>
<p><strong>Type de relation</strong>

Description de la relation</p>
</td></tr><tr><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100"/>
<p><strong>Type de relation</strong>

Description de la relation</p>
</td><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100"/>
<p><strong>Type de relation</strong>

Description de la relation</p>
</td></tr></table>

<table class="relations"><tr><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100"/>
<p><strong>Type de relation</strong>

Description de la relation</p>
</td><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100"/>
<p><strong>Type de relation</strong>

Description de la relation</p>
</td></tr><tr><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100"/>
<p><strong>Type de relation</strong>

Description de la relation</p>
</td><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100"/>
<p><strong>Type de relation</strong>

Description de la relation</p>
</td></tr></table>

<center>Code par <a href="http://www.never-utopia.com/u17236">Dehvi</a> sur <a href="http://www.never-utopia.com">Never-Utopia</a></center>
</div>