HTML

Pour la fiche générale

Code:

<div class="genred"><h1><b>Il me fallait un tittr donc voici</b></h1>
<img src="https://i.pinimg.com/originals/72/75/84/72758486f756dd4ab440719dc3279c9d.gif" class="genimg"><span><h2>Il me faut un sous titre</h2>
Forcément qu'au début elle comprenait pas. Je pense que quelqu'un aurait débarqué dans une boutique que je tiendrais et m'aurait dit "aha c'était un test", je lui aurais répondu "noon, et je l'ai passé ?" avant de paraître mécontent qu'on ait pu vouloir me tester.
Seulement, alors que je parlais de notre mère commune, elle ne paru pas surprise. Bon. Ok. Donc notre mère était comme ça. A faire des enfants et à leur laisser des lettres ? Génial. Je me demandais chez qui Ivy avait pu apprendre sa nature alors.
Et je n'étais pas sûr de vouloir totalement son aide. Question de principe, de fierté, de tout ça. Je crois que je cherchais surtout d'elle....Son affection.
Avouons le.... Avoir une famille... Je voulais une famille. Clairement.

<img src="https://i.pinimg.com/564x/f4/01/1b/f4011b78d58cae882ec5ece254d3d845.jpg" class="genimg2">

Enfin, petit frère de peu. Ca voulait dire que notre mère faisait des enfants avec peu de distance...
Je la suivais en me sentant déjà rassuré. Elle m'avait pas jeté dehors en hurlant qu'elle voulait pas d'un frère, donc j'imaginais que c'était déjà un grand pas pour moi.

Cool.</span><div class="basred"></div></div>

Pour avoir la même fiche mais en bottin

Code:

<div class="genred bottinred"><h1><b>Il me fallait un tittr donc voici</b></h1>
<span><h2>A - C</h2>
<em>Prénom Nom</em> - Prénom Nom
<em>Prénom Nom</em> - Prénom Nom
<em>Prénom Nom</em> - Prénom Nom
<em>Prénom Nom</em> - Prénom Nom
<em>Prénom Nom</em> - Prénom Nom

<h2>D - F</h2>
<em>Prénom Nom</em> - Prénom Nom
<em>Prénom Nom</em> - Prénom Nom
<em>Prénom Nom</em> - Prénom Nom
<em>Prénom Nom</em> - Prénom Nom
<em>Prénom Nom</em> - Prénom Nom</span><div class="basred"></div></div>

Pour avoir toujours la même fiche mais en présentation staff

Code:

<div class="genred staffred"><h1><b>Il me fallait un tittr donc voici</b></h1>
<span>
<div class="staffcont"><div class="staffimg"><img src="https://i.servimg.com/u/f30/19/45/51/53/viiiio10.jpg"></div><div class="staffcont2"><div class="stafftitle"><h3>@"Prénom Nom"</h3><h4>Pseudo : Bleh
DCs : Lui, Elle, Truc</h4></div><div class="stafftxt">Traverser les miroirs n’avaient jamais, jamais, jamais, jamais, jamais (je vous laisse ici imaginer, qu’à la façon de Lemony Snicket, je remplis une page de jamais), été une bonne idée.
Et bon sang, j’aurais dû y fait plus attention !
Mais trop tard. Je me retrouvais devant deux personnes. Aucune idée de qui elles étaient, et je m’en fichais bien, mais leur décor était tout moche. La baraque avait été délaissé depuis des plombes et tout ! Et en plus leur tenue… Genre, c’était fête costumée ou bien ?
On aurait dit mes parents à une époque.</div></div></div>

<div class="staffcont"><div class="staffimg"><img src="https://i.servimg.com/u/f30/19/45/51/53/viiiio10.jpg"></div><div class="staffcont2"><div class="stafftitle"><h3>@"Prénom Nom"</h3><h4>Pseudo : Bleh
DCs : Lui, Elle, Truc</h4></div><div class="stafftxt">Traverser les miroirs n’avaient jamais, jamais, jamais, jamais, jamais (je vous laisse ici imaginer, qu’à la façon de Lemony Snicket, je remplis une page de jamais), été une bonne idée.
Et bon sang, j’aurais dû y fait plus attention !
Mais trop tard. Je me retrouvais devant deux personnes. Aucune idée de qui elles étaient, et je m’en fichais bien, mais leur décor était tout moche. La baraque avait été délaissé depuis des plombes et tout ! Et en plus leur tenue… Genre, c’était fête costumée ou bien ?
On aurait dit mes parents à une époque.</div></div></div>

<div class="staffcont"><div class="staffimg"><img src="https://i.servimg.com/u/f30/19/45/51/53/viiiio10.jpg"></div><div class="staffcont2"><div class="stafftitle"><h3>@"Prénom Nom"</h3><h4>Pseudo : Bleh
DCs : Lui, Elle, Truc</h4></div><div class="stafftxt">Traverser les miroirs n’avaient jamais, jamais, jamais, jamais, jamais (je vous laisse ici imaginer, qu’à la façon de Lemony Snicket, je remplis une page de jamais), été une bonne idée.
Et bon sang, j’aurais dû y fait plus attention !
Mais trop tard. Je me retrouvais devant deux personnes. Aucune idée de qui elles étaient, et je m’en fichais bien, mais leur décor était tout moche. La baraque avait été délaissé depuis des plombes et tout ! Et en plus leur tenue… Genre, c’était fête costumée ou bien ?
On aurait dit mes parents à une époque.</div></div></div>
</span><div class="basred"></div></div>

CSS

Le CSS contient tous les codes pour la fiche générale.

Code:

/****** FICHE GENERALE PAR KOALAVOLANT *****/

.genred{ width:100%; }
.genred *{ box-sizing:border-box; }

  /* Pour le fond en image */
  
  .genred h1, .staffimg{ background:var(--main-color-v); background-position:center; background-size:cover; clip-path: polygon(0% 0%, 96% 0, 100% 50%, 96% 100%, 0% 100%);
  display:flex; flex-wrap:wrap; position:relative; z-index:99; font-family:var(--font2); font-size:22px; line-height:24px; padding:10px; margin:5px 0px; }
.genred h1 b{ font-weight:normal; z-index:99; position:relative; display:inline-block; color:var(--white);  }
  .genred h1:after, .staffimg:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%;  background: var(--main-color);  
    mix-blend-mode: hard-light; }

.genred .genimg{     width: 180px;    height: 122px;    object-fit: cover;    float: left;    position: relative;    left: -10px;
 border: 3px solid var(--black); }
.genred .genimg2{ width:64%; height:150px; object-fit:cover; margin:0 auto; padding:3px; border:2px solid var(--snd-color); display:block; }
.genred span{ text-align:justify; }
.genred h2{     font-family: var(--font1);    letter-spacing: 2px;    font-size: 16px;    line-height: 18px;    border-bottom: 1px solid var(--black);
    color: var(--black); margin:0px; }
.genred .basred{ width:100%; height:20px; background-color:var(--grisc); clip-path: polygon(4% 0, 100% 0%, 100% 100%, 4% 100%, 0% 50%); margin-top:10px; }

/* Staff */

.staffcont{ display:flex; justify-content:space-between; }
.staffimg{ padding:5px; clip-path: polygon(0 0, 100% 0%, 100% 86%, 50% 100%, 0 86%); }
.staffimg img{ width:100px; height:160px; object-fit:cover; position:relative; z-index:99; }
.stafftxt{ padding:10px; background-color:var(--griscc); font-family:var(--font3); font-size:13px; line-height:17px; height:98px; overflow:auto; margin-top:5px;}
.stafftitle{ text-align:right; font-family:var(--font2); color:var(--main-color);}
.stafftitle h3{ margin:5px 0px 0px 0px; font-size:19px;}
.stafftitle h4{ color:var(--black); letter-spacing:2px; font-style:italic; font-size:10px; line-height:13px; margin:0; font-family:var(--font1); font-weight:normal; }

/* Bottin */

.bottinred em{ color:var(--main-color); }