Modèle de présentation

<style>.astree-cadre{border: 2px solid #968070; background-color: #292929; max-width: 500px; margin: 20px auto; color: #ababab; font-family: 'Open Sans', sans-serif; font-size: 13px;}.astree-cadre a{color: #968070; text-decoration: none !important; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-cadre a:hover{color: #8b2f32; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-nom{display: block; text-align: center; margin: -15px auto 40px; color: #968070; font-family: 'Cinzel Decorative', serif; font-size: 45px; line-height: 25px; text-shadow: 0 0 2px #000;}.astree-titre{border-bottom: 2px solid #968070; color: #968070; text-shadow: 0 0 2px #000; padding: 5px 20px; font-family: 'Cinzel Decorative', serif; font-size: 30px; margin-top: 20px;}.astree-cadre ul{list-style: none; padding: 0 20px;}.astree-cadre li span{font-family: 'Cinzel', serif; color: #968070; font-size: 16px;}.astree-chapitre{display: inline-block; font-family: 'Cinzel', serif; font-size: 25px; color: #968070; margin: 25px; padding: 5px 15px; border-left: 5px solid #968070; text-shadow: 0 0 2px #000;}.astree-cadre p{margin: 10px 20px; text-align: justify;}.astree-cadre p > q{display: block; font-family: 'Cinzel', serif; color: #968070; font-size: 16px; line-height: 28px;}.astree-cadre p > q:before, .astree-cadre p > q:after{content: '';}.astree-credits a{display: block; text-align: center; font-family: 'Cinzel', serif; color: #968070; line-height: 40px;}</style>

<link href="https://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative|Open+Sans" rel="stylesheet" /><div class="astree-cadre"> <div style="background: url('http://s10.favim.com/orig/160807/dc-comics-enchantress-gif-harley-quinn-Favim.com-4609900.gif') no-repeat top center; width: 500px; height: 250px;"></div><span class="astree-nom">Prénom p²<br/>Nom</span> <div class="astree-titre">Identité</div><ul> <li><span>Âge :</span> XX ans</li><li><span>Sexe :</span> Truc</li><li><span>Race :</span> Machin</li><li><span>Métier :</span> Bidule de chez Machin Chose</li><li><span>Groupe ou Clan :</span> Bidule de chez Machin Chose</li><li><span>Célébrité utilisée :</span>Gens mystérieux</li></ul> <div class="astree-titre">Description</div><span class="astree-chapitre">... Physique</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi. </p><span class="astree-chapitre">... Morale</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><div class="astree-titre">Histoire</div><p><q>Je suis une super citation mise en avant !</q></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus </p><div class="astree-titre">Derrière l'écran</div><ul> <li><span>Présente-toi en quelques lignes :</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis iure minus necessitatibus saepe totam. </li><li><span>Comment as-tu connu le forum ?</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li><li><span>Code du règlement :</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li> </ul> <div class="astree-credits"><a href="http://www.never-utopia.com/" target="_blank">Never Utopia | Shaneliae</a></div></div>