Modele de fiche

<link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet"><style>.colbylake {background: url(https://i.servimg.com/u/f38/19/69/79/53/sujet_11.png) no-repeat top, url(https://i.servimg.com/u/f38/19/69/79/53/sujet_10.png) no-repeat bottom #eee; box-sizing: border-box; color: #1a1919; font-family: 'Share Tech Mono', monospace; margin: auto; padding: 15% 4.5% 5%; width: 500px;} .colbylake h2 {background: #323334; border: 1px solid rgba(26,25,25,.9); text-align: center; font-size: 18px; letter-spacing: 5px; color: #eee; font-weight: normal; text-transform: uppercase; padding: 4%; margin: 8% 0 3%;} .colbylake h2 span {display: block; font-size: 10px; text-transform: lowercase;} .colbylake .content {background: #fbfbfb; box-sizing: border-box; padding: 5% 4%; text-align: justify; letter-spacing: 1px; border: 1px solid rgba(26,25,25,.2);} .header_presentation #img_pres {width: 100px; height: 150px; object-fit: cover; border: 1px solid rgba(26,25,25,.6); float: left;} .informations_pres {float: left; width: 71.7%; background: #fbfbfb; border: 1px solid rgba(26,25,25,.2); margin: 0 0 0 2%; padding: 2%; box-sizing: border-box;height: 152px;} .header_presentation::after {clear: both; display: block; content: "";} .pres_mots_cles {float: left; width: 38%; margin: 0 5% 0 0;} .pres_mots_cles span {display: block; text-align: right; background: #3f514d; color: #eee; letter-spacing: 1px; border: 1px solid rgba(26,25,25,.2); margin: 0 0 10% 0; padding: 0 10% 0 0;} .pres_physique {background: #eee; padding: 2%; box-sizing: border-box; float: left; width: 57%; height: 134px; overflow: auto; text-align: justify; border: 1px solid rgba(26,25,25,.2); line-height: 1;} .colbylake.presentation .content {min-height: 300px;} a.credits_fiche {display: block; text-align: center; text-decoration: none; font-size: 10px; margin: 2% 0 0; color: rgba(26,25,25,.2);}</style><div class="colbylake presentation"><h2>Prénom Nom<span>Une petite citation</span></h2><div class="header_presentation"><img id="img_pres" src="https://media.melty.fr/article-3638054-raw/ivar-0.gif" alt="" /><div class="informations_pres"><div class="pres_mots_cles"><span>Prénom</span><span>Nom</span><span>Age</span><span>Groupe</span></div><div class="pres_physique">Physique et caractère en quelques lignes.</div></div></div>
<div class="content">Histoire du personnage.

Le bloc s'allonge vers le bas en fonction de la longueur du texte écrit.</div><a href="http://ls-halloween.fr" target="_blank" class="credits_fiche">Halloween</a></div>