Fiche de présentation || Modèle

<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans|Volkhov" rel="stylesheet"><style>.fond_pres {background: url() no-repeat bottom right, url(https://i.imgur.com/wgsEfXd.png); width: 550px; margin: auto; box-sizing: border-box; border-left: 5px solid #E4A78F; position: relative; font-family: 'Volkhov', serif; color: #fff;} .fond_pres ::-webkit-scrollbar {background: #fff; height: 7px; width: 7px;} .fond_pres ::-webkit-scrollbar-thumb {background: #E4A78F; border-radius: 27px;} img.header_pres {display: block; margin: auto; padding: 5% 0 0; width: 500px; height: 277px; object-fit: cover;} .fond_pres h2 {background: url(https://i.imgur.com/sBrRFRv.png) center no-repeat; display: block; font-family: times new roman; font-size: 35px; font-style: italic; letter-spacing: -2px; margin: -12% 0 0 0; padding: 9% 0; text-align: center; text-transform: lowercase; position: relative; color: #fff; font-weight: normal;} .fond_pres h3 {font-family: 'Alegreya Sans SC', sans-serif; letter-spacing: 2px; text-align: center; position: relative; font-weight: normal; margin: -11% 0 0 0;} .fond_pres h3::before {background: url(); content: ""; width: 10px; height: 10px; display: inline-block; margin: 0 2% 0 0;} .pres_interne {padding: 2% 4%;} img.image_footer, img.minipres {border: 1px solid #AD7C6B; float: left; margin: 0 3%; padding: 1%; width: 100px; height: 100px; object-fit: cover;} .pres_b1 {background: rgba(0,0,0,.2); float: left; width: 31%; padding: 2%; height: 95px; overflow: auto;} .pres_b1 span {text-transform: uppercase; font-family: 'Alegreya Sans SC', sans-serif; font-weight: bold;} .pres_interne h4 {font-size: 20px; font-family: Vollkorn, serif; margin: 0; padding: 0; text-align: center; text-transform: uppercase; font-weight: normal;} .pres_interne h4::before {background: url(); content: ""; width: 10px; height: 15px; display: inline-block; margin: 0 2% 0 0;} .contenu_pres {background: rgba(0,0,0,.2); border-left: 2px solid #E4A78F; padding: 2% 5%;} .contenu_pres span {text-transform: uppercase; font-family: 'Alegreya Sans SC', sans-serif; font-weight: bold; color: #E4A78F;} .contenu_pres.histoire {height: 200px; overflow: auto;} .fond_pres h2.footer {margin: 0;} .informations_footer {background: rgba(0,0,0,.2); border-left: 2px solid #E4A78F; padding: 2% 5%; float: left; width: 60%; height: 90px; overflow: auto;} .informations_footer span {font-family: 'Alegreya Sans SC', sans-serif; font-weight: 700; text-transform: uppercase;} a.morsmordre_credits {color: #fff; display: block; font-family: Helvetica; font-size: 10px; font-style: italic; letter-spacing: -1px; margin: 4% 0 0; text-align: center; text-decoration: none; text-transform: lowercase; padding: 0 0 1%;}</style><div class="fond_pres"><img src="https://via.placeholder.com/500x250" class="header_pres" alt="" /><h2>Nom Prénom</h2>
<h3>Une citation !</h3>

<div class="pres_interne"><div class="pres_b1"><span>Genre :</span> Masculin ou féminin.
<span>Âge & date de naissance :</span> écrire ici. (N'oubliez pas que nous sommes au début de l'année 1524 présentement)
<span>Orientation :</span> écrire ici.
<span>Espèce :</span> écrire ici.
<span>Statut :</span> Marié.e, fiancé.e, célibataire, c'est compliqué etc.</div><img src="https://via.placeholder.com/100" class="minipres" alt="" /><div class="pres_b1"><span>Statut social :</span> Haut-Noble, Bas-Noble, Plèbien.ne, etc.
<span>Titre :</span> Si possédé (Duc, Marquis, Chevalier, etc.)
<span>Occupation :</span> Un métier? Une occupation récurrente?
<span>Pays :</span> Un épouvantard est une créature qui peut changer d'aspect à volonté et qui prend la forme la plus terrifiante possible. Il suffit de mettre ce qui effraye le plus le personnage.
<span>Lieu de résidence principal/actuel :</span> L'odeur qui attire le plus le personnage.
<span>Territoire :</span> (si vous en avez un ou sous quelle juridiction vous trouvez-vous)</div>
<div class="clear"></div>

<h4>♜ Galbe extérieur ♜</h4>
<div class="contenu_pres"><span>Taille :</span> écrire ici
<span>Corpulence :</span> écrire ici
<span>Cheveux :</span> La couleur.
<span>Yeux :</span> La couleur.
<span>Signes distinctifs :</span> écrire ici.
<span>Style vestimentaire :</span> écrire ici.
<span>A savoir en plus :</span> Ce qu vous estimez comme étant important à savoir sur votre personnage.</div>

<h4>♜ Echos intérieurs ♜</h4>
<div class="contenu_pres"><span>Qualités :</span> énoncez rapidement. (au moins trois qualités)
<span>Défauts :</span> énoncez rapidement. (au moins 3 défauts)
<span>Préférences :</span> Ce qu'il aime.
<span>Antipathies :</span> Ce qu'il n'aime pas.
<span>A savoir en plus :</span> Ce qu vous estimez comme étant important à savoir sur votre personnage.</div>

<h4>♜ Questionnaire ♜</h4>
<div class="contenu_pres"><span>Êtes-vous au courant de l'existence des Vampires et des Lycanthropes ? :</span> Comment est-il perçu en général.
<span>Que pensez-vous des Vampires et des Lycanthropes ? :</span> (Rayez la mentions inutile si besoin en fonction de votre espèce.)
<span>Votre point de vue sur les hybrides (infants & sang-mêlés) ?  :</span>(seulement pour les non-humains)
<span>Votre vie vous satisfait-elle ?  :</span> écrire ici.
<span>Si non, que voudriez-vous changer ?  :</span> écrire ici.
<span>Votre point de vue sur le monde connu ?  :</span> écrire ici. </div>

<h4>♜ Vos pages rédigées ♜</h4>
<div class="contenu_pres histoire">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec urna placerat, ullamcorper augue ac, placerat ligula. Curabitur sit amet ligula felis. Nullam at lacinia turpis. Nam sit amet nisl quis dui interdum tincidunt. Fusce non enim sem. Vivamus ultrices risus id blandit dapibus. Vivamus id tortor in ex ullamcorper tincidunt. Duis consectetur tellus purus, a lacinia sapien volutpat at. Praesent sed ex tempus, pharetra velit nec, porta magna. Pellentesque tincidunt eu tortor a ultrices. Morbi elementum sapien urna, vitae elementum metus aliquet eget. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse condimentum eros nunc, tempor interdum ex porttitor vel. Nunc sagittis eros at lacus posuere facilisis. Sed vitae faucibus felis, ultrices ultrices libero. Morbi non ante eu nunc lacinia rutrum id vitae ante.

Mauris fermentum eleifend ornare. Sed feugiat et urna vestibulum sodales. Vivamus vitae turpis sollicitudin ligula congue consectetur sed nec erat. Vivamus convallis condimentum sodales. Fusce efficitur dignissim lectus, pellentesque consequat eros mattis non. Donec blandit, ante id pellentesque ultricies, leo justo mollis ipsum, et finibus metus lorem ac lectus. Morbi lectus tellus, porta id vehicula nec, tempor a mauris. Proin sollicitudin dui sit amet elit volutpat tincidunt. Praesent id semper sem. Suspendisse maximus tempor massa, eu aliquet quam tempor ut. Donec tincidunt elit ac varius egestas. Suspendisse potenti.

Integer elementum consequat urna nec cursus. Donec pretium pulvinar sapien eget volutpat. Aliquam interdum eu ipsum in aliquet. Proin in justo mi. Suspendisse viverra, lorem at elementum imperdiet, massa massa laoreet mauris, id consequat urna diam a tellus. Sed lacinia et arcu ac vestibulum. Etiam a rutrum libero, in lacinia odio. Proin lorem lacus, sodales quis tellus et, fermentum efficitur augue.</div>

<h2 class="footer">♜ Pseudo ♜</h2>
<h3 class="footer">Parce que je suis un être vivant aussi</h3>

<img src="https://via.placeholder.com/100" alt="" class="image_footer" /><div class="informations_footer"><span>Comment tu nous as trouvés :</span> écrire ici.
<span>Couleur de ton pyjama?  :</span> écrire ici.
<span>Un petit mot :</span> écrire ici.</div>
<div class="clear"></div>
</div><a href="http://ls-halloween.fr/" class="morsmordre_credits">Halloween</a>
</div>