<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto" rel="stylesheet"><style>:root {--couleur-fond: #424242;--couleur-fond: #BFD5F5;--bordure-int: #8ca9b8;--bordure-bloc: #111;}.app {width: 550px;font-family: 'Roboto', sans-serif;background-color: #BFD5F5;padding: 10px;box-sizing: border-box;border: 1px solid #8ca9b8;margin: auto;position: relative;}.app h2,.app h3 {font-family: 'Montserrat', sans-serif;margin:0;text-transform: uppercase;letter-spacing: 2px;font-size: 12px;font-weight: bold;}.app h2 {background-color: var(--couleur-fond);text-align: center;color: #EDF8FA;padding: 30px 0;border: 1px solid var(--bordure-bloc);}.app h3 {color: var(--couleur-fond2);margin-bottom: 10px;}.app-basics, .joueur {display: -webkit-box;display: -ms-flexbox;display: flex;}.app-info {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 360px;}.app ul {border: 1px solid var(--bordure-bloc);border-top: 0;border-bottom: 0;padding:10px 15px;margin: 0;list-style-type: none;font-size: 10px;background: var(--couleur-fond2);color: #7D6262;height: 260px;overflow: auto;}.app ul li {border-bottom: 1px solid #2c2c2c;padding: 7px 0 7px;display: block;}.app ul li:last-child {border-bottom: 0;}.app ul li label {color: inherit;width: 30%;display: inline-block;font-weight: bold;text-transform: uppercase;font-family: 'Montserrat', sans-serif;}.app .app-avatar {padding: 20px;background: #BFD5F5;box-sizing: border-box;}.app .app-avatar img {vertical-align: middle;height: 320px;width: 200px;}.app-quote {line-height: 11px;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;background: #8ca9b8;display: inline-block;font-size: 8px;text-transform: uppercase;letter-spacing: 1px;color: #7D6262;vertical-align: top;padding: 20px;box-sizing: border-box;text-align: justify;}.app-story {background-color: var(--couleur-fond);border: 1px solid var(--bordure-bloc);padding: 10px;box-sizing: border-box;height: 300px;}.app-story + .app-story {border-top: 0;height: auto;}.app-story > div {background-color: #EDF8FA;border: 1px solid #393939;padding: 30px 50px;box-sizing: border-box;box-shadow: inset 6px 0 var(--bordure-int), inset 0 6px var(--bordure-int),inset -6px 0 var(--bordure-int), inset 0 -6px var(--bordure-int);height: 100%;}.app-story > div > div {font-size: 11px;text-align: justify;height: 100%;overflow: auto;padding-right: 10px;line-height: 14px;}.joueur .app-avatar {height: 100px;width: 100px;}.app-joueur {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}.app-joueur-head {font-family: 'Montserrat', sans-serif;background-color: var(--couleur-fond2);text-transform: uppercase;color: #EDF8FA;font-size: 10px;letter-spacing: 1px;padding: 10px;border: 1px solid var(--bordure-bloc);border-top: 0;}.app-joueur .infos {background-color: var(--couleur-fond);text-transform: none;color: #7D6262;font-family: "roboto";letter-spacing: 0px;height: 46px;overflow: auto;border: 1px solid var(--bordure-bloc);border-top: 0;padding: 10px;font-size: 11px;}.app-credit {position: absolute;bottom: -15px;left: 0;}.app-credit a {font-family: 'Montserrat', sans-serif;text-transform: uppercase;letter-spacing: 1px;font-size: 7px;font-weight: bold;text-decoration: none!important;color: #aaa;}</style>
<div class="app"><h2>Prénom P. Nom</h2><!--
--><div class="app-basics"><div class="app-info"><ul><!--
--><li><label>Nom</label>écrire ici</li><!--
--><li><label>Date de naissance</label> écrire ici</li><!--
--><li><label>Âge</label> écrire ici</li><!--
--><li><label>Métier</label> écrire ici</li><!--
--><li><label>Orientation Sexuelle</label> écrire ici</li><!--
--><li><label>Groupe</label> écrire ici</li><!--
--><li><label>Avatar</label> écrire ici</li></ul><!--
--><div class="app-quote">Citation ici</div><!--
--></div><div class="app-avatar"><img src="https://2img.net/u/4013/57/05/69/avatars/gallery/invite10.jpg" /></div></div><!--
--><div class="app-story"><div><div><h3>Caractère</h3>Donner quelques points sur le caractère du personnage </div></div></div><!--
--><div class="app-story"><div><div><h3>Histoire</h3>Donner quelques points essentiels sur la vie du personnage pour guider les personnes intéressées.</div></div></div><!--
--><div class="joueur"><img src="https://i69.servimg.com/u/f69/19/60/40/89/invite10.jpg" class="app-avatar" /><div class="app-joueur"><div class="app-joueur-head">Des infos sur <b>LE PERSO</b></div><div class="infos">Ici vous pourrez mettre un petit sur votre scénario pour expliquer certains choix dans la création du personnage.</div></div></div><div class="app-credit"><a href="http://terrible.forumactif.org" target="_blank">Awful</a></div></div>
Accueil 
