Afin de nous faciliter la tâche et d'homogénéiser la section, vous trouverez une fiche pour vos liens ci dessous.
Vous n'êtes pas obligé.e.s de l'utiliser, sachez juste qu'elle sera harmonisée avec les versions du forum, à la différence de toute autre fiche utilisée.

Code:

<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Roboto&display=swap" rel="stylesheet"><div class="content_relation_arte"><h1>Prénom<span>Surnom(s)</span></h1> <div class="icons_personnage"><img src="http://via.placeholder.com/90" alt="icon"/><img src="http://via.placeholder.com/90" alt="icon"/><img src="http://via.placeholder.com/90" alt="icon"/><img src="http://via.placeholder.com/90" alt="icon"/></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis id turpis volutpat blandit. Maecenas ultrices porttitor quam, et ornare lorem feugiat vitae. Vivamus porta, lectus eget ornare ultricies, nulla ex pretium dolor, a pulvinar lectus odio aliquam ligula. Pellentesque porttitor vehicula tincidunt. Suspendisse sit amet velit dui. Vivamus venenatis ut diam eget rhoncus. Praesent aliquet lectus at velit tempus elementum. In imperdiet porttitor justo, bibendum lobortis libero facilisis aliquet. </p><div class="infos_generales">âge - genre - orientation romanticosexuelles - métier/activité</div><ul><li>qualité</li><li>qualité</li><li>qualité</li><li>qualité</li><li>défaut</li><li>défaut</li><li>défaut</li><li>défaut</li></ul> <h2>Je cherche</h2> <div class="liens_recherches"><p><span>Ami</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis id turpis volutpat blandit. Maecenas ultrices porttitor quam, et ornare lorem feugiat vitae. Vivamus porta, lectus eget ornare ultricies, nulla ex pretium dolor, a pulvinar lectus odio aliquam ligula. Pellentesque porttitor vehicula tincidunt. Suspendisse sit amet velit dui. Vivamus venenatis ut diam eget rhoncus. Praesent aliquet lectus at velit tempus elementum. In imperdiet porttitor justo, bibendum lobortis libero facilisis aliquet. Donec venenatis, mi in semper ornare, felis ligula scelerisque augue, id sollicitudin enim sapien eu purus.</p><p><span>Ami</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis id turpis volutpat blandit. Maecenas ultrices porttitor quam, et ornare lorem feugiat vitae. Vivamus porta, lectus eget ornare ultricies, nulla ex pretium dolor, a pulvinar lectus odio aliquam ligula. Pellentesque porttitor vehicula tincidunt. Suspendisse sit amet velit dui. Vivamus venenatis ut diam eget rhoncus. Praesent aliquet lectus at velit tempus elementum. In imperdiet porttitor justo, bibendum lobortis libero facilisis aliquet. Donec venenatis, mi in semper ornare, felis ligula scelerisque augue, id sollicitudin enim sapien eu purus.</p></div><div class="credit_epicode">artemis | <a href="http://www.epicode-entraide.com">www</a></div></div>

<style>:root{--color-background-blue: #8F5D2E;}.content_relation_arte{width: 470px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 15px; background: #efefef; margin: auto; overflow: hidden;}.content_relation_arte > h1{margin: 0; color: white; font: 40px fjalla one; position: relative; z-index: 2; text-transform: uppercase; -webkit-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg); width: 460px; line-height: 65px; margin-bottom: 30px;}.content_relation_arte > h1 > span{color: var(--color-background-blue); display: block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); margin-top: -30px;}.content_relation_arte > h1:after{content: " "; width: 600px; height: 550px; background: var(--color-background-blue); position: absolute; top: -500px; left: -80px; z-index: -1;}.icons_personnage{width: 210px; height: 210px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around;}.icons_personnage > img{width: 90px; height: 90px; -o-object-fit: cover; object-fit: cover; border-top: 5px solid white; border-right: 5px solid var(--color-background-blue); border-bottom: 5px solid var(--color-background-blue); border-left: 5px solid white;}.content_relation_arte > p{width: 220px; height: 205px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid var(--color-background-blue); margin: 0; font: 11px roboto; text-align: justify; padding: 10px; overflow: auto; color: #969696; line-height: 11px;}.infos_generales{width: 100%; height: 30px; background: var(--color-background-blue); text-align: center; font: 11px roboto; text-transform: uppercase; color: white; padding: 5px; line-height: 30px; margin: 0;}.content_relation_arte > ul{width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 65px; list-style-type: none; padding: 0; margin: 5px 0;}.content_relation_arte > ul > li{display: block; width: 100px; height: 25px; border: 1px solid var(--color-background-blue); text-align: center; font: 10px roboto; text-transform: uppercase; color: var(--color-background-blue); line-height: 25px;}.content_relation_arte > h2{font: 30px fjalla one; color: var(--color-background-blue); width: 100%; text-align: right; -webkit-box-sizing: border-box; box-sizing: border-box; padding-right: 20px; text-transform: uppercase; margin: 0;}.liens_recherches{display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}.liens_recherches > p{width: 215px; height: 100px; margin: 0 0 10px 0; overflow: auto; text-align: justify; font: 11px roboto; color: #787878;}.liens_recherches > p > span{display: block; float: left; padding: 5px 10px ; background: var(--color-background-blue); font: 12px roboto; text-transform: uppercase; color: white; margin: 0 5px 0 0;} .credit_epicode {width: 100%; text-align: center; font: 10px calibri; text-transform: uppercase; opacity: 0.6;}</style>