<style>.presentation{position:relative; margin:0 auto; width:600px; height:auto; background-color:#374357; background-image:url(https://www.transparenttextures.com/patterns/low-contrast-linen.png); overflow:hidden; font-family:calibri;}.presentation .banniere{border-bottom:1px solid #aecde3; box-shadow:0px 0px 1px #aecde3; margin-bottom:30px; height:310px; transition:all 600ms; filter: saturate(100%); -webkit-filter:saturate(100%); -moz-filter:saturate(100%); -o-filter:saturate(100%); -ms-filter:saturate(100%);}.presentation .banniere:hover{filter: saturate(150%); -webkit-filter:saturate(150%); -moz-filter:saturate(150%); -o-filter:saturate(150%); -ms-filter:saturate(150%);}.icone-perso{position:absolute; top:245px; left:40px; border:1px solid #aecde3; box-shadow:0px 0px 1px #aecde3; transition:all 600ms;}.presentation h1{position:absolute; top:250px; left:155px; margin:0; color:#aecde3; text-shadow:0px 0px 1px #aecde3; font-size:50px; font-weight:normal; font-family:Wire One; letter-spacing:5px;}.presentation h2{position:absolute; top:320px; left:155px; margin:0; text-shadow:0px 0px 1px #aecde3; font-size:20px; font-weight:normal; font-family:Wire One; letter-spacing:5px;}.presentation h2 > a{text-decoration:none; color:#aecde3; transition:all 300ms;}.presentation h2 > a:hover{color:#fff;}.pres-contenu{background-color:#4d5b71; background-image:url(https://www.transparenttextures.com/patterns/transparent-square-tiles.png); height:auto; margin:30px 40px; border:1px solid #aecde3; box-shadow:0px 0px 1px #aecde3; line-height:initial;}.presentation h3{margin:0; padding:5px 10px; background-color:#2b2837; color:#aecde3; font-size:15px; font-weight:normal; font-family:Economica; letter-spacing:10px;}.pres-text{height:auto; margin:20px; padding-right:5px; text-align:justify; font-size:13px; color:#d2d8e2; line-height:20px;}.pres-inline{display:inline-block; vertical-align:top; width:217px; margin:20px 20px;}.pres-inline .label{background:rgba(43, 40, 55, 0.4); margin-bottom:19.5px; padding:3px 5px; letter-spacing:1px; font-size:11px; color:#d2d8e2; border-left:5px solid #313444;}.presentation .credits{position:absolute; bottom:0; left:0; background:rgba(43, 40, 55, 0.7); color:#0e0d10; font-size:11px; text-transform:uppercase; letter-spacing:1px; padding:5px; text-align:right; width:100%; box-sizing:border-box;}.credits > a{text-decoration:none; color:#aecde3; text-shadow:0px 0px 1px #aecde3; transition:all 300ms;}.credits > a:hover{color:#0e0d10; text-shadow:none;}</style><link href="https://fonts.googleapis.com/css?family=Wire+One" rel="stylesheet"/><div class="presentation"><img src="https://i.imgur.com/5RJe667.png" alt="Bannière du personnage" class="banniere"/><img src="https://i.imgur.com/REpUB3s.png" alt="Icône du personnage" class="icone-perso"/><h1>Prénom(s) NOM</h1><h2><a href="...">Feat...</a></h2><div class="pres-contenu"><h3>Carte d'identité</h3><div class="pres-inline"><div class="label">SURNOM : RÉPONSE</div><div class="label">NÉ LE : RÉPONSE</div><div class="label">NÉ À : RÉPONSE</div><div class="label">ÂGE : RÉPONSE</div><div class="label">SEXUALITÉ : Hétéro, Bi, Gay,...</div></div><div class="pres-inline"><div class="label">STATUT SOCIAL : Célibataire, Veuf,...</div><div class="label">ESPÈCE : Humain, Lycaë, Transformé</div><div class="label">RANG : Alpha, Bêta, Lieutenant,...</div><div class="label">GROUPE : RÉPONSE</div><div class="label">RACE : RÉPONSE</div></div></div><div class="pres-contenu"><h3>Portrait Robot</h3><div class="pres-text">VOTRE DESCRIPTION DOIT FAIRE AU MOINS 15 LIGNES</div></div><div class="pres-contenu"><h3>Analyse Psychologique</h3><div class="pres-text">VOTRE DESCRIPTION DOIT FAIRE AU MOINS 15 LIGNES</div></div><div class="pres-contenu"><h3>Biographie</h3><div class="pres-text">VOTRE HISTOIRE DOIT FAIRE AU MINIMUM 30 LIGNES</div></div><br/><div class="credits">Par Baguetty sur <a href="http://epicode.variousforum.com/">Epicode</a>.</div></div>