HTML

Code:

<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700;900&display=swap" rel="stylesheet"><div class="comboofiche combopresentation combopredefini"><div class="combo-tf">Prénom Nom</div>
<div class="comboi1">
<div class="combocont1 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="comboimg1"><img src="https://i.imgur.com/D9WC5p7.jpg"/></div>
<div class="comboinf1 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>
<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="combofin avbr"><div>Note de l'auteur</div><span>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.</span></div>
<div class="combotitre combot3">Lien(s)</div>
<div class="combolinks"><img src="https://i.imgur.com/D9WC5p7.jpg"/><div><div class="combotitre">Luciano "Lucifer" Goodman</div><span>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. 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. </span></div></div>
<div class="combolinks"><img src="https://i.imgur.com/D9WC5p7.jpg"/><div><div class="combotitre">Luciano "Lucifer" Goodman</div><span>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. 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. </span></div></div>
<div class="combolinks"><img src="https://i.imgur.com/D9WC5p7.jpg"/><div><div class="combotitre">Luciano "Lucifer" Goodman</div><span>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. 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. </span></div></div>
</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édéfini */

.combopredefini .combocont1{ width:50%; }
.combopredefini .comboi1{ margin-bottom:20px; }
.combopredefini .comboinf1{ width:30%; height:330px; overflow:auto; padding:10px; }
.combopredefini .comboinf1 span{ display:block; padding:10px; }
.combopredefini .comboinf1 strong{ display:inline; }
.combopredefini .combofin span{ padding-top:30px; height:160px; width:100%; }
.combopredefini .combofin div{ z-index:9; left:initial; bottom:initial; top:0; right:0; }
.combopredefini .combot3{ width:40%; margin:0; transform:rotate(-3deg); position:relative;
top:-40px;}
.combopredefini .combolinks{ margin:5px auto; }
.combopredefini .combolinks .combotitre{ font-size:25px; }