CSS à placer dans la feuille CSS ou le Template (overall_header)

Code:

:root {
  --font1: 'Advent Pro', sans-serif;
  --font2: 'Nunito', sans-serif;
  
  --gris: #ebebeb;
  --blanc: #fafafa;
  --couleur1: #f4eeed;
  --couleur2: #c5d4c3;
  --textColor: #333333;
  --degrad1: linear-gradient(45deg, rgba(244,212,195,1) 0%, rgba(197,212,195,1) 100%);
}

.cont_prem { background: var(--gris); margin: 0 auto; padding: 10px; border-radius: 10px; outline: 1px solid var(--blanc); outline-offset: -4px; width: 600px;}
.cont_sec { background: var(--blanc); padding: 5px; text-align: center; border-radius: 5px;}
.titre_prem { font-family: var(--font1); font-size: 32px; margin: 15 0; display: block; background: var(--degrad1); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.titre_sec { font-family: var(--font2); font-size: 12px; display: block; background: var(--gris); border-radius: 3px; margin-top: 5px; padding: 3px;}
.cont_fm { display: flex; align-items: center; margin-top: 4px; margin-bottom: 4px;}
.middle_img { height: 325px; width: 205px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 5px 0 0 5px;}
.middle_img img { outline: 2px solid var(--blanc); height: 320px; width: 200px; object-fit: cover; object-position: center; border-radius: 5px 0 0 5px;}
.middle_infos { background: var(--blanc); border-left: none; height: 325px; width: 100%; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 0 5px 5px 0;}
.middle_infosp { display:flex; justify-content:center; align-items: center; flex-wrap:wrap; margin: 5px;}
.infosp { font-family: var(--font2); background: var(--couleur2); color: var(--textColor); border-radius: 15px; padding: 5px 0px; text-align: center; text-transform: uppercase; width: 140px; margin: 10px auto; margin-left: 30px; font-weight: 700; font-size: 11px;}
.cont_texth { margin-top: 20px; font-family: var(--font2); font-size: 13px; line-height: 1.2em; text-align: justify; padding: 20px; border: 2px solid var(--couleur1); outline: 2px solid var(--blanc); background: var(--blanc); border-radius: 5px;}
loop { background: transparent!important; font-family: var(--font1); text-transform: lowercase; font-size: 15px; color: var(--textColor); border-bottom: 1px dashed var(--couleur2); letter-spacing: 0.3px;}
.cont_liensp { display:flex; align-items:center; margin-bottom: 25px;}
.cont_liensp:last-of-type { margin-bottom: 0;}
.cont_liensp img { height: 100px; width: 100px; border: 3px solid var(--couleur2); margin-right: 15px; object-fit: cover; object-position: center; border-radius: 10px;}
.cont_liensp figcaption { height: 100px; width: 400px; overflow:auto;}
loop2 { font-weight: 700; color: var(--couleur2); font-family: var(--font1); font-size: 16px;}
.credits_lila { background: var(--blanc); padding: 5px; text-align: center; outline: 2px solid var(--blanc); border: 2px solid var(--couleur1); margin: auto; margin-top: 3px; margin-bottom: 3px; border-radius: 5px;}
.credits_lila span { font-family: var(--font1); font-size: 11px; color: var(--couleur2);}

HTML à placer dans votre sujet

Code:

<link href="https://fonts.googleapis.com/css2?family=Advent+Pro&family=Nunito&display=swap" rel="stylesheet">

<div class="cont_prem"><div class="cont_sec">
  <span class="titre_prem">Prénom P. Nom</span>
  <span class="titre_sec">Citation grande ou petite</span>
  </div>
  
<div class="cont_fm">
  <div class="middle_img"><img src="https://i.imgur.com/ZhXP3HU.png"></div>
  
  <div class="middle_infos">
    <div class="middle_infosp">
      <span class="infosp">Prénom</span>
      <span class="infosp">Nom</span>
      <span class="infosp">Âge</span>
      <span class="infosp">Date de naissance</span>
      <span class="infosp">Lieu de naissance</span>
      <span class="infosp">Statut civil</span>
      <span class="infosp">Orientation Sexuel</span>
      <span class="infosp">info</span>
      <span class="infosp">info</span>
      <span class="infosp">info</span>
      <span class="infosp">info</span>
      <span class="infosp">info</span>
    </div>
  </div>
  
</div><div class="cont_texth"><loop>— résumé du personnage</loop> <br><br>Écrire le résumé ici</div>
<div class="cont_texth">
  <!-- DÉBUT LIEN -->
  <figure class="cont_liensp"><img src="https://i.imgur.com/JKkBwzh.png"/>
    <figcaption><loop2>@Pseudo —</loop2> <loop>type de lien.</loop> <br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</figcaption>
</figure>
  <!-- FIN LIEN-->
  <!-- DÉBUT LIEN -->
  <figure class="cont_liensp"><img src="https://i.imgur.com/JKkBwzh.png"/>
    <figcaption><loop2>@Pseudo —</loop2> <loop>type de lien.</loop> <br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</figcaption>
</figure>
  <!-- FIN LIEN-->
  </div>

<div class="credits_lila"><span>Crédits (2023)</span></div>
</div>

PETIT PLUS : Si vous désirer ajouté ou retiré un lien, vous devrez repérer ce bout de code ci-dessous.

Code:

<!-- DÉBUT LIEN -->
  <figure class="cont_liensp"><img src="https://i.imgur.com/JKkBwzh.png"/>
    <figcaption><loop2>@Pseudo —</loop2> <loop>type de lien.</loop> <br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</figcaption>
</figure>
  <!-- FIN LIEN-->