Modèle de Présentation

<style>.astree-cadre{border: 2px solid #d3d3d3; background-color: #292929; max-width: 500px; margin: 20px auto; color: #ababab; font-family: 'Open Sans', sans-serif; font-size: 13px;}.astree-cadre a{color: #d3d3d3; text-decoration: none !important; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-cadre a:hover{color: #a51419; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-nom{display: block; text-align: center; margin: -15px auto 40px; color: #d3d3d3; font-family: 'Nosifer', cursive; font-size: 45px; line-height: 35px; text-shadow: 0 0 2px #000;}.astree-titre{border-bottom: 2px solid #d3d3d3; color: #d3d3d3; text-shadow: 0 0 2px #000; padding: 5px 20px; font-family: 'Nosifer', cursive; font-size: 30px; margin-top: 20px;}.astree-cadre ul{list-style: none; padding: 0 20px;}.astree-cadre li span{font-family: 'News Cycle', sans-serif, 700; color: #a51419; font-size: 16px; ;}.astree-chapitre{display: inline-block; font-family: 'News Cycle', sans-serif; font-size: 25px; color: #d3d3d3; margin: 25px; padding: 5px 15px; border-left: 5px solid #d3d3d3; text-shadow: 0 0 2px #000;}.astree-cadre p{margin: 10px 20px; text-align: justify;}.astree-cadre p > q{display: block; font-family: 'News Cycle', sans-serif; color: #d3d3d3; 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: 'News Cycle', sans-serif; color: #a51419; line-height: 40px;}</style>

<link href="https://fonts.googleapis.com/css?family=News+Cycle:400,700|Nosifer" rel="stylesheet">
<div class="astree-cadre"> <div style="background: url('http://zupimages.net/up/17/27/xpnj.jpg') 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>Peur(s):</span> XX ans</li><li><span>Célébrité utilisée :</span> Emma Stone</li></ul> <div class="astree-titre"> Mon Caractère</div><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, <q>Je suis un super texte mis en avant !</q> </p><div class="astree-titre">Mon Physique</div><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, <q>Je suis un super texte mis en avant !</q> </p>
<div class="astree-titre">Histoire</div><span class="astree-chapitre">Chapitre 1</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. <a href="#">Je suis un super lien !</a></p><span class="astree-chapitre">Chapitre 2</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-credits"><a href="http://www.never-utopia.com/" target="_blank">By Shaneliae | Edit by Tristan</a></div></div>

<style>.Gastre-cadre{border: 2px solid #ff00ce; background-color: #7c3363; max-width: 500px; margin: 20px auto; color: #ffffff; font-family: 'Kite One', sans-serif;
 font-size: 13px;}.Gastre-cadre a{color: #ff00ce; text-decoration: none !important; -webkit-transition: all 0.1s cubic-bezier(.53, .47, .39, .96); transition: all 0.1s ease;}.Gastre-cadre a:hover{color: #ff00ce; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.Gastre-nom{display: block; text-align: center; margin: -15px auto 40px; color: #ff00ce; font-family: 'Oregano', cursive; font-size: 45px; line-height: 35px; }.Gastre-titre{border-bottom: 2px solid #ff00ce; color: #ff00ce;  padding: 5px 20px; font-family: 'Oregano', cursive; font-size: 30px; margin-top: 20px;}.Gastre-cadre ul{list-style: none; padding: 0 20px;}.Gastre-cadre li span{font-family: 'Kite One', sans-serif;; color: #ff00ce; font-size: 16px; ;}.Gastre-chapitre{display: inline-block; font-family: 'Oregano', cursive;
 font-size: 25px; color: #ff00ce; margin: 25px; padding: 5px 15px; border-left: 5px solid #ff00ce; }.Gastre-cadre p{margin: 10px 20px; text-align: justify;}.Gastre-cadre p > q{display: block; font-family: 'News Cycle', sans-serif; color: #ff00ce; font-size: 16px; line-height: 28px;}.Gastre-cadre p > q:before, .Gastre-cadre p > q:after{content: '';}.Gastre-credits a{display: block; text-align: center; font-family: 'News Cycle', sans-serif; color: #ff00ce; line-height: 40px;}</style>

<link href="https://fonts.googleapis.com/css?family=Kite+One|Oregano" rel="stylesheet">
<div class="Gastre-cadre"> <div style="background: url('http://zupimages.net/up/17/27/cht7.jpg') no-repeat top center; width: 500px; height: 250px;"></div><span class="Gastre-nom">Prénom p²<br/>Nom</span> <div class="Gastre-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>Peur(s):</span> XX ans</li><li><span>Célébrité utilisée :</span> Emma Stone</li></ul> <div class="Gastre-titre"> Mon Caractère</div><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, <q>Je suis un super texte mis en avant !</q> </p><div class="Gastre-titre">Mon Physique</div><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, <q>Je suis un super texte mis en avant !</q> </p>
<div class="Gastre-titre">Histoire</div><span class="Gastre-chapitre">Chapitre 1</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. <a href="#">Je suis un super lien !</a></p><span class="Gastre-chapitre">Chapitre 2</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="Gastre-credits"><a href="http://www.never-utopia.com/" target="_blank">By Shaneliae | Edit by Tristan</a></div></div>

<style>.Bastre-cadre{border: 2px solid #00a7ff; background-color: #005784; max-width: 500px; margin: 20px auto; color: #ffffff; font-family: 'Marcellus', serif; font-size: 13px;}.Bastre-cadre a{color: #00a7ff; text-decoration: none !important; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.Bastre-cadre a:hover{color: #00a7ff; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.Bastre-nom{display: block; text-align: center; margin: -15px auto 40px; color: #00a7ff; font-family: 'Averia Serif Libre', cursive; font-size: 45px; line-height: 35px; }.Bastre-titre{border-bottom: 2px solid #00a7ff; color: #00a7ff;  padding: 5px 20px; font-family: 'Averia Serif Libre', cursive; font-size: 30px; margin-top: 20px;}.Bastre-cadre ul{list-style: none; padding: 0 20px;}.Bastre-cadre li span{font-family: 'News Cycle', sans-serif, 700; color: #00a7ff; font-size: 16px; ;}.Bastre-chapitre{display: inline-block; font-family: 'Marcellus', serif; font-size: 25px; color: #00a7ff; margin: 25px; padding: 5px 15px; border-left: 5px solid #00a7ff; }.Bastre-cadre p{margin: 10px 20px; text-align: justify;}.Bastre-cadre p > q{display: block; font-family: 'Marcellus', serif; color: #00a7ff; font-size: 16px; line-height: 28px;}.Bastre-cadre p > q:before, .Bastre-cadre p > q:after{content: '';}.Bastre-credits a{display: block; text-align: center; font-family: 'Marcellus', serif; color: #00a7ff; line-height: 40px;}</style>

<link href="https://fonts.googleapis.com/css?family=Averia+Serif+Libre|Marcellus" rel="stylesheet">
<div class="Bastre-cadre"> <div style="background: url('http://zupimages.net/up/17/27/o2uo.jpg') no-repeat top center; width: 500px; height: 250px;"></div><span class="Bastre-nom">Prénom p²<br/>Nom</span> <div class="Bastre-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>Peur(s):</span> XX ans</li><li><span>Célébrité utilisée :</span> Emma Stone</li></ul> <div class="Bastre-titre"> Mon Caractère</div><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, <q>Je suis un super texte mis en avant !</q> </p><div class="Bastre-titre">Mon Physique</div><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, <q>Je suis un super texte mis en avant !</q> </p>
<div class="Bastre-titre">Histoire</div><span class="Bastre-chapitre">Chapitre 1</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. <a href="#">Je suis un super lien !</a></p><span class="Bastre-chapitre">Chapitre 2</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="Bastre-credits"><a href="http://www.never-utopia.com/" target="_blank">By Shaneliae | Edit by Tristan</a></div></div>