<div class="content_fichepresa"> <div class="entete_presa"><img src="https://zupimages.net/up/19/48/bs8z.jpg" alt="image_fiche"/><h1> <strong>Prénom</strong> Nom <span>citation trop dark</span></h1></div><div class="infos_perso">#âge #situation maritale #date de naissance #métier #orientation sexuelle #nationalité #groupe</div><div class="block_phy_ca"><h2>#Physique</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis congue sagittis. Mauris in metus suscipit, congue magna et, tristique turpis. In et ante lacus. Sed pellentesque, sem eleifend hendrerit eleifend, nibh ante faucibus sem, sit amet cursus nunc ante eu neque. Cras euismod, augue et varius imperdiet, nulla massa iaculis felis, nec congue neque nunc quis dolor. Sed auctor nunc tempus odio malesuada, eget egestas leo blandit. Aenean non lacus magna. Nulla ac dui est. Morbi ullamcorper feugiat enim vitae blandit. Duis a placerat est, vehicula tristique nibh. Nullam nec tincidunt felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla blandit commodo dapibus. Suspendisse potenti. Integer ornare neque quis nulla malesuada, ullamcorper pharetra odio tempor.Sed quis posuere ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae feugiat massa. Praesent consequat odio magna, quis consequat nisi vulputate a. Suspendisse potenti. Mauris et diam vehicula, hendrerit lectus vel, fermentum diam. Mauris ac risus eu lectus sagittis interdum. Quisque interdum nibh vitae tellus aliquam dignissim.</p></div><div class="block_phy_ca"><h2>#Caractère</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis congue sagittis. Mauris in metus suscipit, congue magna et, tristique turpis. In et ante lacus. Sed pellentesque, sem eleifend hendrerit eleifend, nibh ante faucibus sem, sit amet cursus nunc ante eu neque. Cras euismod, augue et varius imperdiet, nulla massa iaculis felis, nec congue neque nunc quis dolor. Sed auctor nunc tempus odio malesuada, eget egestas leo blandit. Aenean non lacus magna. Nulla ac dui est. Morbi ullamcorper feugiat enim vitae blandit. Duis a placerat est, vehicula tristique nibh. Nullam nec tincidunt felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla blandit commodo dapibus. Suspendisse potenti. Integer ornare neque quis nulla malesuada, ullamcorper pharetra odio tempor.Sed quis posuere ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae feugiat massa. Praesent consequat odio magna, quis consequat nisi vulputate a. Suspendisse potenti. Mauris et diam vehicula, hendrerit lectus vel, fermentum diam. Mauris ac risus eu lectus sagittis interdum. Quisque interdum nibh vitae tellus aliquam dignissim.</p></div><div class="block_history"><h2>#Histoire</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis congue sagittis. Mauris in metus suscipit, congue magna et, tristique turpis. In et ante lacus. Sed pellentesque, sem eleifend hendrerit eleifend, nibh ante faucibus sem, sit amet cursus nunc ante eu neque. Cras euismod, augue et varius imperdiet, nulla massa iaculis felis, nec congue neque nunc quis dolor. Sed auctor nunc tempus odio malesuada, eget egestas leo blandit. Aenean non lacus magna. Nulla ac dui est. Morbi ullamcorper feugiat enim vitae blandit. Duis a placerat est, vehicula tristique nibh. Nullam nec tincidunt felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla blandit commodo dapibus. Suspendisse potenti. Integer ornare neque quis nulla malesuada, ullamcorper pharetra odio tempor.Sed quis posuere ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae feugiat massa. Praesent consequat odio magna, quis consequat nisi vulputate a. Suspendisse potenti. Mauris et diam vehicula, hendrerit lectus vel, fermentum diam. Mauris ac risus eu lectus sagittis interdum. Quisque interdum nibh vitae tellus aliquam dignissim.Duis cursus, ipsum a tempus fringilla, metus magna pharetra purus, ac mollis sem ante ut dui. Nullam ac facilisis massa. Curabitur blandit purus nisi, ut tincidunt augue laoreet ut. Nullam pulvinar tincidunt sapien et mattis. Donec aliquam mi ac dignissim mattis. Fusce et bibendum sem. Etiam ut tortor orci. Maecenas fermentum rutrum ex, at semper velit egestas sit amet. Phasellus consectetur mauris ac metus tincidunt bibendum.</p></div><div class="infos_member"><img src="https://via.placeholder.com/75"/ alt="icone_membre"> <p>Pseudo : écrire ici
    Âge : écrire ici
    Comment as-tu connu le forum ? : écrire ici
    Fréquence de connexion : écrire ici
    Code du règlement: écrire ici
    Autres : écrire ici</p></div><div class="credits_arte">artemis | <a href="https://artifices.forumactif.com/">www</a></div></div>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400|Source+Sans+Pro&display=swap" rel="stylesheet"/>

    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto" rel="stylesheet"><style>:root {--couleur-fond: #424242;--couleur-fond: #353535;--bordure-int: #989898;--bordure-bloc: #111;}.app {width: 550px;font-family: 'Roboto', sans-serif;background-color: #282828;padding: 10px;box-sizing: border-box;border: 1px solid #2c2c2c;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: #f2f2f2;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: #aaa;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: #303030;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: #1d1d1d;display: inline-block;font-size: 8px;text-transform: uppercase;letter-spacing: 1px;color: #aaa;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: #f2f2f2;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: #f2f2f2;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: #f2f2f2;font-family: "roboto";letter-spacing: 0px;height: 40px;overflow: auto;border: 1px solid var(--bordure-bloc);border-top: 0;padding: 10px;font-size: 11px;box-sizing: content-box;}.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: #282828;}</style>

   <div class="app"><h2>Prénom Nom</h2><!--
   --><div class="app-basics"><div class="app-info"><ul><!--
   --><li><label>Surnom</label>écrire ici</li><!--
   --><li><label>Date de naissance</label> écrire ici</li><!--
   --><li><label>Âge</label> écrire ici</li><!--
   --><li><label>Genre</label> écrire ici</li><!--
   --><li><label>Groupe</label> écrire ici</li><!--
   --><li><label>Affiliation</label> écrire ici</li><!--
   --><li><label>Espèce</label> écrire ici</li><!--
   --><li><label>Classe</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="http://via.placeholder.com/200x320"  /></div></div><!--


   --><div class="app-story"><div><div><h3>Physique & Caractère</h3>Texte ici</div></div></div><!--


   --><div class="app-story"><div><div><h3>Histoire</h3>Texte ici</div></div></div><!--

   --><div class="joueur"><img src="http://via.placeholder.com/80x80" class="app-avatar" /><div class="app-joueur"><div class="app-joueur-head">Créé par <b>Nom du joueur</b></div><div class="infos">Infos supplémentaires</div></div></div><div class="app-credit"><a href="http://terrible.forumactif.org" target="_blank">Awful</a></div></div>