Validé par : Prisma
Testé sous : Vivaldi, Safari, Mozilla, Chrome
Version(s) du forum : [] PhpBB2 - [] PhpBB3 - [] Invision - [] ModernBB - [] AwesomeBB - [X] Tous
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=Poiret+One&display=swap" rel="stylesheet">

Voici le HTML (à insérer dans un message)

Code:

<center><div class="fiche-cadre1"><div class="fiche-cadre2"><div class="titre-cadre"><span class="grand-titre">Titre Principal</span>
<span class="slog">Slogan ou petite phrase</span></div>
<center><img class="img-fiche" src="https://via.placeholder.com/460x120/D7E7E6/f8f8f8.png"></center>
<span class="titre-second">Titre Section</span>
<div class="cont-section">texte à insérer ici</div>
<center><img class="img-fiche" src="https://via.placeholder.com/460x120/D7E7E6/f8f8f8.png"></center>
<span class="titre-second">Titre Section</span>
<div class="cont-section">texte à insérer ici</div></div><div class="credit-Prisma">Maquette par Ylenna21 & Code par Prisma World (2022)</div></div></center>

Voici le CSS (à insérer dans la feuille css du panneau d'admin)

Code:

/* ---------- Fiche Général par Prisma World ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&family=Poiret+One&display=swap');
:root {
   --background11: #F8F8F8;
   --background22: #D7E7E6;
   --border2: 2px solid #F8F8F8;
   --acc11: #fff;
   --acc22: #545454;
   --acc33: #D7E7E6;
   --degrade1: linear-gradient(-45deg,#545454,#D7E7E6)!important;
   --titre1: poiret one;
   --texte1: nunito sans;
}

.fiche-cadre1 {
   background: var(--background11);
   width: 500px;
   padding: 10px;
   border-radius: 7px;
}

.fiche-cadre2 {
  background: var(--background22);
  padding: 10px;
  border-radius: 7px;
}

.titre-cadre {
  background: var(--background11);
  padding: 7px 7px 3px;
  border-radius: 7px;
}

.grand-titre {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-image: var(--degrade1);
   font: 28px var(--titre1);
}

.slog {
  font: 14px var(--texte1);
  text-transform: lowercase;
  color: var(--acc22);
}

.img-fiche {
  border: var(--border2);
  border-radius: 7px;
  width: 460px;
  height: 120px;
  object-fit: cover;
}

.titre-second {
  background: var(--background11);
  border-radius: 7px;
  font: 18px var(--titre1);
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0 6px;
  text-transform: uppercase;
  float:left;
  color: #545454;
}

.cont-section {
    background: var(--background22);
    line-height: 23px;
    border: var(--border2);
    border-radius: 7px;
    font: 14px var(--texte1);
    margin-top: 7px;
    padding: 14px;
    text-align: justify;
    color: var(--acc22);
}
/* --- Les crédits NE PAS TOUCHER --- */
.credit-Prisma {
    background: var(--background22);
    border-radius: 5px;
    color: var(--acc11);
    font: 12px var(--texte1);
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 7px;
    padding: 2px 0;
}
/* ---------- FIN ---------- */