01 - Modèle(s) de fiche de présentation

<div class="contenuprezH"><div class="contenant">
<img src="https://via.placeholder.com/500x200" alt="image"><div class="mereprez"> <div class="nomduperso">Nom Prénom</div><div class="citationquidechire">une citation plus ou moins longue</div></div></div>

<div class="contenudelaprezH"><div class="contenuinfoH"><img src="https://via.placeholder.com/150x102"><div class="descriptioninfoH"><span class="list">Nom</span><span class="list"> Prénom</span><span class="list">age</span><span class="list">race</span><span class="list">sexe</span><span class="list">lieu de naissance</span><span class="list">orientation sexuelle</span>
<span class="list">groupe</span><span class="list">métier</span><span class="list">avatar</span></div></div>

<div class="titrecodeH"><hr/><p>Bénédiction</p></div></><div class="descriptioncodeH">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects,</div>

<div class="titreficheH"><hr/><p>Caractère</p></div><div class="descriptionficheH">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects,</div>

<div class="titreficheH"><hr/><p>Physique</p></div><div class="descriptionficheH">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects,
</div>

<div class="titreficheH"><hr/><p>Histoire</p></div><div class="descriptionficheH">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects,</div>

<div class="titreficheH"><hr/><p>Dans la vraie vie</p></div><div class="contenuIRL"><img src="https://via.placeholder.com/100x100"><div class="descriptionIRL">Pseudo :: réponse ici
Âge :: réponse ici
Comment as-tu découvert le forum ::  réponse ici
Un commentaire ? :: réponse ici
Et le règlement ? :: réponse ici</div></div></div></div><div class="copyright">:maple_leaf:Kaedehara</div><style type="text/css">.contenuprezH{ margin: auto; width: 500px; padding-bottom: 10px; background: #3E3E3E; }.contenuprezH br{ display: none;}.contenant { position: relative;}.contenant img { min-width: 500px; max-height: 200px;}.mereprez{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font: 30px Oswald; font-weight: bold; color: white; text-align: center;} .citationquidechire { font: 10px Calibri; font-weight: bold;}.contenudelaprezH{ background: #3E3E3E; padding: 9px;}.contenuinfoH{ display:flex;}.descriptioninfoH { margin-left: 10px; padding: 10px; background: #282828; font: 13px Calibri; color: #F5F5F5; border: 1px solid #1E1E1E; height: 80px; max-height: 200px; overflow: scroll left; overflow-x: hidden; text-align: justify; padding-right: 5px;}.list{ display: inline-block; padding: 1px 10px 1px 10px; border: 1px solid white; margin: 2px; font: 12px Calibri; color: white; margin-bottom: 5px;}.descriptioninfoH img{ padding: 7px; margin-right: 10px; margin-left: 10px; margin-top: 9px; }.titrecodeH { display: flex; justify-content: right; margin: 5px 10px; color: white; font: 20px Oswald; font-weight: bold;}.titrecodeH hr{ width: 160px; height: 0.1px; margin-top: 33px;}.descriptioncodeH br{display:block;}.descriptioncodeH { margin-top: 13px; padding: 10px; width: 460px; background: #282828; font: 13px Calibri; color: #F5F5F5; border: 1px solid #1E1E1E; height: 80px; max-height: 200px; overflow: scroll left; overflow-x: hidden; text-align: justify; }.titreficheH { display: flex; justify-content: right; margin: 5px 10px; color: white; font: 20px Oswald; font-weight: bold;}.titreficheH hr{ width: 160px; height: 0.1px; margin-top: 33px;}.descriptionficheH br{display:block;}.descriptionficheH { margin-top: 10px; padding: 10px; width: 460px; background: #282828; font: 13px Calibri; color: #F5F5F5; border: 1px solid #1E1E1E; height: 200px; max-height: 300px; overflow: scroll left; overflow-x: hidden; text-align: justify; }.contenuIRL br{display:block;}.contenuIRL{ margin-top: 10px; padding: 10px; width: 460px; background: #282828; font: 13px Calibri; color: #F5F5F5; border: 1px solid #1E1E1E; display : flex; height: 100px; }.descriptionIRL{ height: 100px; max-height: 200px; overflow: scroll left; overflow-x: hidden; text-align: justify; padding-right: 5px;}.contenuIRL img{ border: 1px solid #1E1E1E; border-radius: 50%; padding: 2px; margin-right: 10px;}.copyright{ font: 10px Calibri; color: black; font-weight: bold; margin-top: 4px; text-align: center;}</style></style>