Validé par : Prisma
Testé sous : Chrome, Safari, Vivaldi et Mozilla
Version(s) du forum : [] PhpBB2 - [] PhpBB3 - [] Invision - [] ModernBB - [] AwesomeBB - [X] Toutes
Acceptez-vous que l'on modifie votre code pour corriger les erreurs ? [X] Oui - [] Non
Rendu :

Spoiler:

Préambule
Pour utiliser cette fiche, il n'y a aucun pré-requis. À noter que cette fiche a été commandée sur Discord en message privé. Veuillez laisser les crédits dans le bas de la fiche, je le saurai si ces derniers sont retirés, merci de respecter le travail qui a été fait.

S'il y a un souci avec ce code, merci d'en informer un membre de l'équipe !

Code & Explications

À mettre dans overall_header après la balise "head"

Code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&family=Qwitcher+Grypen&display=swap" rel="stylesheet">

Voici le CSS à insérer dans le panneau d'administration

Code:

/* ---------- Présentation #2 par Prisma ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&family=Qwitcher+Grypen&display=swap');

:root {
  --back1: #60747C;
  --back2: #B8B8AA;
  --titre1: #DD8E58;
  --titre2: #284854;
  --soust: #DD8E58;
  --texte: #232C27;
  --bord: 1px solid #D9A774;
  --deg: linear-gradient(-45deg,#D9A774,#284854)!important;
  --titrefont: Qwitcher Grypen;
  --textefont: Nunito Sans;
}
.img_prez2 {
  width: 650px;
  height: 200px;
  object-fit: cover;
  border-radius: 7px;
}
.fond1 {
  background: var(--back1);
  padding: 10px;
  border-radius: 7px;
  width: 650px;
}
.titre_cadre {
  background: var(--back2);
  padding: 7px 7px 3px;
  border-radius: 7px;
  width: 500px;
}
.grand_t {
  font: 48px var(--titrefont);
  color: var(--titre1);
}
.petit_t {
  font: 16px var(--textefont);
  color: var(--titre2);
  border-top: 1px solid var(--titre2);
}
.prez_cont {
  background: var(--back2);
  line-height: 23px;
  border-radius: 7px;
  margin-top: 7px;
  padding: 14px;
  color: var(--texte);
  font: 14px var(--textefont);
  text-align: justify;
}
.infos_prez {
  font:16px var(--textefont);
  color: var(--soust);
  font-weight: bold;
}
.section_titre {
  background-image: var(--deg);
  border-radius: 7px;
  font: 18px var(--textefont);
  color: #FFF;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0 7px;
  float: left;
}
.hist_prez {
  background: var(--back2);
  line-height: 23px;
  border-radius: 7px;
  margin-top: 7px;
  padding: 14px;
  color: var(--texte);
  height: 250px;
  overflow: auto;
  text-align: justify;
}
/* --- Les crédits NE PAS TOUCHER --- */
.credit-Prisma {
    background: var(--back2);
    border-radius: 5px;
    color: var(--titre2);
    font: 12px var(--textefont);
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 7px;
    padding: 2px 0;
}
/* ---------- FIN ---------- */

Voici le HTML à insérer dans un de vos messages

Code:

<center><div class="fond1"><img class="img_prez2" src="https://via.placeholder.com/650x200/284854/D9A774.png"><div class="titre_cadre"><span class="grand_t">Prénom & Nom</span>
<br><span class="petit_t">Petite phrase qui représente ton personage</span></div><div class="prez_cont"><span class="section_titre">••• Informations Générales</span>

<span class="infos_prez">Nom.s :</span> Écrire ici
<span class="infos_prez">Prénom.s :</span> Écrire ici
<span class="infos_prez">Sexe :</span> Écrire ici
<span class="infos_prez">Âge :</span> Écrire ici
<span class="infos_prez">Date de Naissance :</span> Écrire ici
<span class="infos_prez">Lieu de Naissance :</span> Écrire ici
<span class="infos_prez">Étude/Métier :</span> Écrire ici
<span class="infos_prez">Nationalité :</span> Écrire ici
<span class="infos_prez">Groupe :</span> Écrire ici</div><div class="prez_cont"><span class="section_titre">••• Caractère & Physique</span>

<span class="infos_prez">Caractère :</span> Mettre une description psychologique du personnage.

<span class="infos_prez">Physique :</span> Mettre une description physique du personnage.
</div><div class="hist_prez"><span class="section_titre">••• Il était une fois</span>

Mettre dans cette section l'histoire du personnage avec le plus de détails possible.</div><div class="prez_cont"><span class="section_titre">••• Hors Jeu</span>

<span class="infos_prez">Pseudo / Surnom :</span> Écrire ici
<span class="infos_prez">Âge :</span> Écrire ici
<span class="infos_prez">Pays :</span> Écrire ici
<span class="infos_prez">Comment es-tu arrivé ici ? :</span> Écrire ici
<span class="infos_prez">Autre chose à ajouté :</span> Écrire ici
</div><div class="credit-Prisma">Prisma World (2022)</div></div></center>