HTML

Code:

<link href="https://fonts.googleapis.com/css2?family=Anton&family=Kaushan+Script&family=Lato:wght@400;700;900&display=swap" rel="stylesheet"><div class="redpres redscenario"><div class="redflex1"><div class="rediden"><span>[b]Nom complet :[/b] Si votre nom dépasse les limites de celui qu'on peux donner sur un forum
[b]Surnom :[/b] C'est quoi le petit nom qu'on vous donne ?
[b]Âge :[/b]
[b]Métier / Etudes :[/b] Facultatif mais bien pour gagner quelque chose
[b]Origines :[/b] D'où venez vous ?
[b]Groupe :[/b] Mais du coup c'est quoi votre groupe ?
[b]Orientation sexuelle / Genre :[/b] Hétéro ? Asexuel ? Xénogenre ?
[b]Avatar[/b] S'il est précis merci de le préciser</span></div><div class="redireste"><img src="https://64.media.tumblr.com/9bedf23ba877b079d09dab0f723324a3/tumblr_oh40ohQvZO1vyuo1po2_250.gifv"><h1>Prénom Prénom Nom</h1><div class="redcara redbloc"><h2>Caractère & Histoire</h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget malesuada quam, eget convallis dui. Pellentesque a risus eu magna auctor congue id sed neque. Quisque varius, est non semper malesuada, quam nibh posuere leo, non luctus diam odio quis nunc. Proin sed condimentum massa, a bibendum leo. Vestibulum tristique, dui vel iaculis eleifend, urna ipsum malesuada lectus, in scelerisque ipsum nisl vel ipsum. Quisque nulla ipsum, sollicitudin at ultricies id, aliquet quis sem. Mauris placerat, lectus sed imperdiet porta, augue augue gravida diam, in bibendum enim elit id libero. Donec egestas tempus dui. Fusce aliquet convallis pharetra.

Duis pulvinar mattis orci, viverra hendrerit leo maximus non. Duis imperdiet, est in semper maximus, tellus felis tincidunt purus, eget rhoncus nunc lectus vitae est. Proin interdum mi nec augue fermentum rutrum. Duis eu maximus elit. Etiam commodo egestas turpis ut tristique. Maecenas pulvinar odio ac odio suscipit, at consequat leo auctor. Donec volutpat, turpis efficitur lacinia mollis, nisl elit hendrerit orci, sit amet euismod ante velit eget augue. Sed eget lobortis turpis, non sollicitudin arcu. Nam egestas justo id nunc egestas lobortis. Mauris viverra nisi pharetra massa consectetur, feugiat vulputate sapien ultricies. Sed sed lectus sit amet nisi pellentesque elementum id sit amet tortor. Duis vestibulum venenatis risus, et sagittis diam eleifend vitae. Nulla scelerisque magna et libero bibendum fringilla.</span></div></div></div>
<div class="redflex2"><div class="redhis redbloc"><h2>Prénom Nom - <strong>Nom du lien</strong></h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget malesuada quam, eget convallis dui. Pellentesque a risus eu magna auctor congue id sed neque. Quisque varius, est non semper malesuada, quam nibh posuere leo, non luctus diam odio quis nunc. Proin sed condimentum massa, a bibendum leo. Vestibulum tristique, dui vel iaculis eleifend, urna ipsum malesuada lectus, in scelerisque ipsum nisl vel ipsum. Quisque nulla ipsum, sollicitudin at ultricies id, aliquet quis sem. Mauris placerat, lectus sed imperdiet porta, augue augue gravida diam, in bibendum enim elit id libero. Donec egestas tempus dui. Fusce aliquet convallis pharetra.

Duis pulvinar mattis orci, viverra hendrerit leo maximus non. Duis imperdiet, est in semper maximus, tellus felis tincidunt purus, eget rhoncus nunc lectus vitae est. Proin interdum mi nec augue fermentum rutrum. Duis eu maximus elit. Etiam commodo egestas turpis ut tristique. Maecenas pulvinar odio ac odio suscipit, at consequat leo auctor. Donec volutpat, turpis efficitur lacinia mollis, nisl elit hendrerit orci, sit amet euismod ante velit eget augue. Sed eget lobortis turpis, non sollicitudin arcu. Nam egestas justo id nunc egestas lobortis. Mauris viverra nisi pharetra massa consectetur, feugiat vulputate sapien ultricies. Sed sed lectus sit amet nisi pellentesque elementum id sit amet tortor. Duis vestibulum venenatis risus, et sagittis diam eleifend vitae. Nulla scelerisque magna et libero bibendum fringilla.</span></div><div class="redhimg"><img src="https://images2.imgbox.com/04/ec/nfWn2CqB_o.png"></div></div>
<div class="redflex2 redverse"><div class="redhis redbloc"><h2>Prénom Nom - <strong>Nom du lien</strong></h2><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget malesuada quam, eget convallis dui. Pellentesque a risus eu magna auctor congue id sed neque. Quisque varius, est non semper malesuada, quam nibh posuere leo, non luctus diam odio quis nunc. Proin sed condimentum massa, a bibendum leo. Vestibulum tristique, dui vel iaculis eleifend, urna ipsum malesuada lectus, in scelerisque ipsum nisl vel ipsum. Quisque nulla ipsum, sollicitudin at ultricies id, aliquet quis sem. Mauris placerat, lectus sed imperdiet porta, augue augue gravida diam, in bibendum enim elit id libero. Donec egestas tempus dui. Fusce aliquet convallis pharetra.

Duis pulvinar mattis orci, viverra hendrerit leo maximus non. Duis imperdiet, est in semper maximus, tellus felis tincidunt purus, eget rhoncus nunc lectus vitae est. Proin interdum mi nec augue fermentum rutrum. Duis eu maximus elit. Etiam commodo egestas turpis ut tristique. Maecenas pulvinar odio ac odio suscipit, at consequat leo auctor. Donec volutpat, turpis efficitur lacinia mollis, nisl elit hendrerit orci, sit amet euismod ante velit eget augue. Sed eget lobortis turpis, non sollicitudin arcu. Nam egestas justo id nunc egestas lobortis. Mauris viverra nisi pharetra massa consectetur, feugiat vulputate sapien ultricies. Sed sed lectus sit amet nisi pellentesque elementum id sit amet tortor. Duis vestibulum venenatis risus, et sagittis diam eleifend vitae. Nulla scelerisque magna et libero bibendum fringilla.</span></div><div class="redhimg"><img src="https://images2.imgbox.com/04/ec/nfWn2CqB_o.png"></div></div>
<div class="redjoueur"><h1>Mot de l'auteur</h1><div class="redhj redbloc">Duis pulvinar mattis orci, viverra hendrerit leo maximus non. Duis imperdiet, est in semper maximus, tellus felis tincidunt purus, eget rhoncus nunc lectus vitae est. Proin interdum mi nec augue fermentum rutrum. Duis eu maximus elit. Etiam commodo egestas turpis ut tristique. Maecenas pulvinar odio ac odio suscipit, at consequat leo auctor. Donec volutpat, turpis efficitur lacinia mollis, nisl elit hendrerit orci, sit amet euismod ante velit eget augue. Sed eget lobortis turpis, non sollicitudin arcu. Nam egestas justo id nunc egestas lobortis. Mauris viverra nisi pharetra massa consectetur, feugiat vulputate sapien ultricies. Sed sed lectus sit amet nisi pellentesque elementum id sit amet tortor. Duis vestibulum venenatis risus, et sagittis diam eleifend vitae. Nulla scelerisque magna et libero bibendum fringilla.</div></div></div>

CSS

Les couleurs marchent par les root. Voici donc le code à mettre avant, si vous n'avez pris aucun des codes déjà présents sur ce thème :

Code:

:root{ --main-color:#A3171A;
  --snd-color:#970000;
  --main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
  --white:#fff;
  --black:#444;
  --grisc:#dedede;
  --griscc:#f0f0f0;
  
  --font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}

  /* Ascenseur */
  
  ::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.cate-descr span, .redpres *{     scrollbar-color: var(--main-color) var(--white);
  scrollbar-width: thin; }

Et le reste :

Code:

/***** FICHE DE PRESENTATION ET DE SCENARIOS PAR KOALAVOLANT *************/

.redpres{ width:100%; margin:0 auto; }
.redpres *{ box-sizing:border-box; }

/* Identité avec Caractère et Informations */

.redflex1{ display:flex; justify-content:space-between;  }
.rediden{ background:var(--main-color-v); background-position:center; background-size:cover;clip-path: polygon(0 0, 100% 0%, 100% 86%, 50% 100%, 0 86%);
  display:flex; flex-wrap:wrap; position:relative; width:40%; height:378px; }
.rediden:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%;  background: var(--grisc);  
  mix-blend-mode: hard-light;}
.rediden span{ display:block; height:305px; overflow:auto; position:relative; z-index:99; color:var(--black;); padding:10px; }
.rediden span strong{ color:var(--main-color); font-family:var(--font1); font-weight:normal; letter-spacing:1px; }

.redireste{ width:60%; }
.redireste > img{ width:100%; height:150px; object-fit:cover; }
.redireste h1, .redjoueur h1{ background-color:var(--main-color); font-family:var(--font2); font-size:20px; color:var(--white);
  text-align:center; padding:14px; margin:0px;}

.redbloc{     width: 100%;    padding: 10px;    background-color: var(--griscc); color:var(--black); }
.redbloc span{ overflow:auto; display:block; padding:6px; }
.redbloc h2{ margin: 5px auto;    width: 90%;    background-color: var(--grisc);    padding: 5px;    font-family: var(--font1);
  font-weight: normal;    letter-spacing: 1px;    font-size: 15px;    text-transform: uppercase;    color: var(--black); }

.redcara span, .redinfo span{ height: 180px; }

.redinfo{ background-color:var(--grisc); }
.redinfo h2{ background-color:var(--griscc); }

.redflex2{ display:flex; justify-content:space-between; }
.redhis{ width:70%; }
.redhis span{ height:380px; }
.redhimg{ width:30%; }
.redhimg img{ width:100%; height:320px; object-fit:cover; clip-path: polygon(0 0, 100% 0%, 100% 86%, 50% 100%, 0 86%);}

/* Scénarios */

.redscenario .redhis{ background-color:var(--grisc); }
.redscenario .redhis span{ height:114px; }
.redscenario .redhis h2{ background-color:var(--griscc); }
.redscenario .redhis h2 strong{ font-weight:normal; color:var(--main-color); }

.redscenario .redhimg img{ height:170px; }
.redscenario .redflex2.redverse{ flex-direction:row-reverse; }