HTML

Code:

<div class="comboofiche combopresentation"><div class="combo-tf">Prénom Nom</div>
<div class="comboi1">
<div class="combocont1 avbr"><span><strong>Âge :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Métier :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Groupe :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Pouvoirs :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Genre :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Orientation sexuelle/romantique :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Origines :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Surnom :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut. </span></div>
<div class="comboimg1"><img src="https://i.imgur.com/D9WC5p7.jpg"/></div>
</div>
<div class="combotitre combot1">Caractère</div>
<div class="comboc1 avbr"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere lectus turpis, venenatis mattis metus vehicula eget. Etiam porttitor varius quam quis placerat. Sed eu dictum urna, ut tempor dolor. Pellentesque nec leo dictum, blandit dolor in, ultricies libero. Nulla suscipit libero egestas risus pellentesque porttitor. Vivamus pharetra, sem vitae sollicitudin varius, elit quam pharetra quam, et varius eros velit id nulla. Maecenas congue dignissim lacus sit amet eleifend. Fusce et fringilla metus. Quisque nec lacus dictum felis scelerisque aliquet nec in lorem. Nulla dictum pharetra consectetur. Nunc rutrum velit sed ultrices interdum.

Mauris semper mollis augue ut iaculis. Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut. Vivamus vel orci id erat gravida dignissim sed sed urna. Vivamus laoreet ipsum eros, scelerisque eleifend velit porttitor at. Praesent lacinia quam id lobortis ullamcorper. Fusce interdum tincidunt rhoncus. Ut lobortis turpis a posuere blandit. Proin ut gravida orci. In hendrerit cursus augue, sit amet dapibus velit iaculis at. Etiam eget laoreet diam. Cras aliquet ultrices mauris ac aliquam. Proin ut posuere nisl. Suspendisse consectetur bibendum egestas.</span></div>
<div class="combotitre combot2">Histoire</div>
<div class="comboc1 comboc2 avbr"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere lectus turpis, venenatis mattis metus vehicula eget. Etiam porttitor varius quam quis placerat. Sed eu dictum urna, ut tempor dolor. Pellentesque nec leo dictum, blandit dolor in, ultricies libero. Nulla suscipit libero egestas risus pellentesque porttitor. Vivamus pharetra, sem vitae sollicitudin varius, elit quam pharetra quam, et varius eros velit id nulla. Maecenas congue dignissim lacus sit amet eleifend. Fusce et fringilla metus. Quisque nec lacus dictum felis scelerisque aliquet nec in lorem. Nulla dictum pharetra consectetur. Nunc rutrum velit sed ultrices interdum.

Mauris semper mollis augue ut iaculis. Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut. Vivamus vel orci id erat gravida dignissim sed sed urna. Vivamus laoreet ipsum eros, scelerisque eleifend velit porttitor at. Praesent lacinia quam id lobortis ullamcorper. Fusce interdum tincidunt rhoncus. Ut lobortis turpis a posuere blandit. Proin ut gravida orci. In hendrerit cursus augue, sit amet dapibus velit iaculis at. Etiam eget laoreet diam. Cras aliquet ultrices mauris ac aliquam. Proin ut posuere nisl. Suspendisse consectetur bibendum egestas.</span></div>
<div class="combofin avbr"><div>Votre pseudo</div><img src="https://i.imgur.com/D9WC5p7.jpg"><span><strong>Pseudo :</strong> blablabla
<strong>D'où t'as connu le forum ?</strong> blablabla
<strong>Des suggestions ?</strong> blablabla</div>
</div><a href="https://pisrale.forumactif.com/" target="_blank" class="koala">KoalaVolant</a>

CSS

Code:

.comboofiche {    width:90%; margin:0 auto; }
.comboofiche, .comboofiche *{ box-sizing:border-box; }
.comboofiche br{ display:none; }
.avbr br{ display:block; }

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700;900&display=swap');

/* Couleurs */

:root{
    --couleur-1:#59C9A5;
    --couleur-2:#23395B;
    --couleur-blanc:#fff;
    --couleur-gris:#dddada;
    
    --text1:'Rubik', sans-serif;
}
/* Titre Principal */

.combo-tf {
    background:var(--couleur-1);     color:var(--couleur-2);
    font-family:var(--text1);     text-transform:uppercase;
    font-weight:900; font-size:40px; line-height:40px;
    padding:20px; text-align:center; position:relative;
    z-index:3;
}

/* Les trois Ć:copyright:lĆ:copyright:ments */

.comboi1 { display:flex; justify-content:center;  }

.combocont1{ position:relative; z-index:4;  top:-10px; width:50%; background:var(--couleur-blanc);
    padding:20px 25px; transform:rotate(-4deg); height:300px; }
.combocont1 span{ padding:8px; height:260px; transform:rotate(4deg); overflow:auto; display:block; text-align:justify;}

.comboimg1 { width:120px; }
.comboimg1 img{ position:relative; z-index:2; top:0px;
    height:120px; object-fit:cover; width:100%; }
.comboimg1 img:first-child{ margin-bottom:10px; }

.comboinf1{ display:flex; flex-wrap:wrap; align-items:center; width:20%; background:var(--couleur-gris); padding:10px;
position:relative; top:0px; }
.comboinf1 a:after{ content:' '; bottom:-100px; left:0; position:absolute;
    z-index:-1; display:block; width:100%; background:var(--couleur-2);
    height:30px; transition:500ms; }
.comboinf1 a:hover:after{ bottom:0; transition:500ms;  }
.comboinf1 a{ overflow:hidden; background:var(--couleur-1); width:100%; display:block;
text-align:center; text-transform:uppercase; font-weight:900; font-family:var(--text1);
color:var(--couleur-blanc); position:relative; z-index:16; padding:5px; transform:rotate(2deg); }
.comboinf1 a:nth-child(2){ transform:rotate(-2deg); }
.comboinf1 .comboquote{ padding:5px; font-size:11px; line-height:14px;
    text-align:center; display:inline-block; color:var(--couleur-2);
font-style:oblique; }

.combotitre {
    background:var(--couleur-2);
    color:var(--couleur-blanc); font-family:var(--text1); text-transform:uppercase;
    font-size:45px; line-height:45px; font-weight:900;
    width:80%; margin:0 auto; position:relative; top:-20px;
    text-align:right;
}

.comboc1{    margin-bottom:-5px; clip-path: polygon(4% 4%, 100% 0%, 100% 98%, 0 94%);
    background:var(--couleur-blanc); padding:8px; position:relative; z-index:2; top:-25px; }
.comboc1 span{ display:block; padding:20px 0px; padding-right:10px; padding-left:30px;  }
.comboc1 span strong{ font-family:var(--text1); text-transform:uppercase; background-color:var(--couleur-1); color:var(--couleur-blanc); }
.comboc1 span strong:nth-child(odd){ background-color:var(--couleur-2); }

.comboc2{ clip-path: polygon(0 5%, 100% 1%, 100% 100%, 0 100%); top:-36px; }

Code:

/* Fiche de présentation */

.combopresentation .combocont1{ width:60%; }
.combopresentation .combocont1 strong{ font-family:var(--text1); text-transform:uppercase; background-color:var(--couleur-1); color:var(--couleur-blanc); }
.combopresentation .comboimg1 img{ width:150px; height:auto; top:40px;  }
.combopresentation .combot2{ text-align:left; background:var(--couleur-1); width:90%; left:0px; top:-25px; z-index:1; transform:rotate(-1deg); }

.combofin{ display:flex; right:-20px; top:-30px; padding:10px 20px;  position:relative; background:var(--couleur-gris); width:80%; margin:0 auto; }
.combofin img{ width:30%; height:100px; object-fit:cover; }
.combofin div{ background:var(--couleur-1); color:var(--couleur-blanc); font-family:var(--text1); text-transform:uppercase;
font-size:14px; padding:10px; position:absolute; font-weight:800; left:-20px;  bottom:-20px; transform:rotate(3deg); }
.combofin span{ display:block; width:70%; padding:10px; height:100px; overflow:auto; }