Cette fiche de présentation a été fait pour le concours de codage de Pub RPG Design en 2020. Bien sûr les couleurs y sont modifiables. Vous pouvez enlever des parties si ça ne vous va pas ou les renommer.

HTML

Code:

<link href="https://fonts.googleapis.com/css?family=Anton|Roboto+Mono&display=swap" rel="stylesheet"><div class="fichepres1"><div class="pres-0"><img class="ficheimg-0" src="http://media.tumblr.com/tumblr_lzaym7Q1ip1qanpzp.gif"><h1>Prénom Nom</h1></div>
<div class="pres-1"><img src="https://i.servimg.com/u/f30/19/45/51/53/evadon10.jpg"><div class="descri-pres"><!--AGE--><h3>Âge</h3><!--RACE--><h3>Race</h3><!--GROUPE--><h3>Groupe</h3><!--NATIONALITE--><h3>Nationalité</h3><!--METIER--><h3>Métier</h3><!--ETAT CIVIL--><h3>Etat civil</h3><!--ORIENTATION SEXUELLE--><h3>Orientation sexuelle</h3><!--AVATAR--><h3>Avatar</h3><!--SIGNE DISTINCTIF--><h3>Signe distinctif</h3>

<strong>Delicious personality</strong><span>Aliquam in enim dui. Suspendisse tincidunt sem volutpat fermentum pharetra. In ultrices felis a lacus eleifend, quis gravida nisl sagittis. Nullam non commodo arcu. Vestibulum non congue mi. Nullam finibus imperdiet leo, et accumsan felis consequat sit amet. Nunc id erat eget nulla interdum fermentum sit amet non justo. Vivamus auctor eros eu ex varius euismod. Aenean lectus ligula, vulputate eget ultricies id, varius eget purus.

Suspendisse eget augue pharetra, finibus odio id, hendrerit felis. Mauris ullamcorper tortor id leo viverra blandit eget et ipsum. Nam eu ligula eu nisi aliquam scelerisque sit amet quis metus. Donec justo est, euismod ut sapien id, ultrices tristique ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse pulvinar ipsum tellus, et facilisis ex volutpat at. Curabitur eget euismod lectus. Vestibulum pharetra varius neque, non dignissim ex condimentum et. Duis a ex at dolor dignissim sagittis nec ac enim.</span></div></div>
<div class="pres-2"><h3>You don't know everything about myself, me.</h3>
<div><span>(01) Anecdote 1 : Aliquam in enim dui. Suspendisse tincidunt sem volutpat fermentum pharetra. In ultrices felis a lacus eleifend, quis gravida nisl sagittis. Nullam non commodo arcu. Vestibulum non congue mi. Nullam finibus imperdiet leo, et accumsan felis consequat sit amet. Nunc id erat eget nulla interdum fermentum sit amet non justo. Vivamus auctor eros eu ex varius euismod. Aenean lectus ligula, vulputate eget ultricies id, varius eget purus.
(02) Anecdote 2 : Aliquam in enim dui. Suspendisse tincidunt sem volutpat fermentum pharetra. In ultrices felis a lacus eleifend, quis gravida nisl sagittis. Nullam non commodo arcu. Vestibulum non congue mi. Nullam finibus imperdiet leo, et accumsan felis consequat sit amet. Nunc id erat eget nulla interdum fermentum sit amet non justo. Vivamus auctor eros eu ex varius euismod. Aenean lectus ligula, vulputate eget ultricies id, varius eget purus.
(03) Anecdote 3 : Aliquam in enim dui. Suspendisse tincidunt sem volutpat fermentum pharetra. In ultrices felis a lacus eleifend, quis gravida nisl sagittis. Nullam non commodo arcu. Vestibulum non congue mi. Nullam finibus imperdiet leo, et accumsan felis consequat sit amet. Nunc id erat eget nulla interdum fermentum sit amet non justo. Vivamus auctor eros eu ex varius euismod. Aenean lectus ligula, vulputate eget ultricies id, varius eget purus.
(04) Anecdote 4 : Aliquam in enim dui. Suspendisse tincidunt sem volutpat fermentum pharetra. In ultrices felis a lacus eleifend, quis gravida nisl sagittis. Nullam non commodo arcu. Vestibulum non congue mi. Nullam finibus imperdiet leo, et accumsan felis consequat sit amet. Nunc id erat eget nulla interdum fermentum sit amet non justo. Vivamus auctor eros eu ex varius euismod. Aenean lectus ligula, vulputate eget ultricies id, varius eget purus.
</span><img src="http://www.serieslyawesome.tv/wp-content/uploads/2014/09/serieslyAWESOME_serienparade-014_12.gif"></div></div>
<div class="pres-3"><div class="pres3-spec1"><h3>Aime / Aime pas</h3>
<span><strong>Aime</strong>
Lalalala

<strong>Aime pas</strong>
Lalalala</span></div><div><h3>Pouvoirs</h3>
<span>Aliquam in enim dui. Suspendisse tincidunt sem volutpat fermentum pharetra. In ultrices felis a lacus eleifend, quis gravida nisl sagittis. Nullam non commodo arcu. Vestibulum non congue mi. Nullam finibus imperdiet leo, et accumsan felis consequat sit amet. Nunc id erat eget nulla interdum fermentum sit amet non justo. Vivamus auctor eros eu ex varius euismod. Aenean lectus ligula, vulputate eget ultricies id, varius eget purus.</span></div></div>
<div class="pres-4"><img src="https://media.giphy.com/media/6Lg2qFMjuV7ji/giphy.gif">
<div class="descri-pres4"><h3>The history is what we kept in memories</h3><strong><em>Citation</em> - Auteur.ice de la citation</strong></div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in porttitor nisl. Sed gravida pulvinar massa, vel egestas ante posuere a. Pellentesque iaculis leo in sem mattis posuere. Aliquam egestas id est vitae suscipit. In vulputate non felis ac luctus. Donec vel velit id quam mattis molestie. Duis commodo lobortis risus, eu sodales ipsum facilisis ut. Mauris a laoreet orci. Phasellus nisi sem, pharetra nec enim in, pretium feugiat purus. Sed eget ullamcorper urna, vel malesuada tortor. Maecenas sed felis nisi. Pellentesque eget faucibus erat. Suspendisse vestibulum elementum arcu vitae malesuada.

Aliquam in enim dui. Suspendisse tincidunt sem volutpat fermentum pharetra. In ultrices felis a lacus eleifend, quis gravida nisl sagittis. Nullam non commodo arcu. Vestibulum non congue mi. Nullam finibus imperdiet leo, et accumsan felis consequat sit amet. Nunc id erat eget nulla interdum fermentum sit amet non justo. Vivamus auctor eros eu ex varius euismod. Aenean lectus ligula, vulputate eget ultricies id, varius eget purus.

Suspendisse eget augue pharetra, finibus odio id, hendrerit felis. Mauris ullamcorper tortor id leo viverra blandit eget et ipsum. Nam eu ligula eu nisi aliquam scelerisque sit amet quis metus. Donec justo est, euismod ut sapien id, ultrices tristique ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse pulvinar ipsum tellus, et facilisis ex volutpat at. Curabitur eget euismod lectus. Vestibulum pharetra varius neque, non dignissim ex condimentum et. Duis a ex at dolor dignissim sagittis nec ac enim.

Donec rutrum est elementum dui tristique, vitae blandit ex luctus. Donec pellentesque eget mi a sodales. Etiam nec consequat nisl. Ut convallis sapien quis maximus efficitur. Fusce sit amet orci justo. Cras nisl felis, suscipit nec tincidunt non, gravida ac quam. Aliquam erat volutpat. Nunc ac erat lacinia, varius massa nec, consectetur mauris. Nulla eu mattis augue. Vestibulum tristique ultrices ex eu posuere. Phasellus quis nunc iaculis, malesuada ex et, congue elit.

Nunc et posuere odio. Maecenas faucibus dui scelerisque sapien dictum luctus. Nullam malesuada nibh urna, vel vestibulum tellus imperdiet eget. In ultrices erat quis condimentum imperdiet. Pellentesque enim elit, elementum sed porttitor et, malesuada ut elit. Phasellus interdum nisi sed sagittis lobortis. Quisque pretium lectus nisi, scelerisque tincidunt nulla malesuada sit amet. Nam maximus blandit nulla, ac rutrum metus interdum convallis. Phasellus hendrerit molestie nibh at aliquet. Suspendisse nulla dui, luctus id quam ut, ultricies accumsan risus. Fusce at nisl vel ante vehicula tincidunt. Donec in ipsum condimentum, tincidunt enim id, lacinia tortor.</span></div>
<div class="pres-5"><div class="credit"><img src="https://images2.imgbox.com/1a/dd/s1Gr96hw_o.png"><div>icon: VOCIVUS</div></div>
<span>[b]Pseudo :[/b] Lalala
[b]Âge :[/b] Lalala
[b]Pays :[/b] Lalala
[b]Comment as-tu connu le forum :[/b] Lalalala
[b]Comment trouves-tu le forum :[/b] Lalalala
[b]Fréquence de connexion :[/b] Lalalala
[b]Dernier petit mot :[/b] Lalalala</span></div>
</div>

CSS

A savoir que vous pourrez modifier les couleurs au début du code, pour plus de praticité.

Code:

/** FICHE DE PRESENTATION PAR KOALA VOLANT ***/

/***** COULEURS *****/

/* Couleur des titres */

.fichepres1 .pres-0 h1{ /* Prénom / Nom */
text-shadow:2px 2px 0 #A14501, 2px -2px 0 #A14501,-2px 2px 0 #A14501, -2px -2px 0 #A14501,2px 0px 0 #A14501, 0px 2px 0 #A14501,-2px 0px 0 #A14501, 0px -2px 0 #A14501, 2px 2px 2px rgba(142,32,95,0);
 color:#fff;
}

.fichepres1 .pres-1 strong, .fichepres1 .pres-3 strong, .fichepres1 .pres-4 strong, .fichepres1 .pres-5 strong{ /*Petit titre*/
 color:#9B1F00;
}

.fichepres1 .pres-4 span em, .fichepres1 .pres-5 .credit div{ color:#787424; }

/* Couleur des petits rectangles d'info */

.fichepres1 h3{ background: #444;
background: linear-gradient(90deg, #787424 0%, #9B1F00 100%);
 color:#fff; text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
}

.fichepres1 .pres-1 h3:hover{ background:#444; }

.fichepres1 .pres-1 div, .fichepres1 .pres-3 div, .fichepres1 .pres-2 span, .fichepres1 .pres-4 span, .fichepres1 .pres-5 span, .fichepres1 .pres-5 .credit div{ background:#fff; }

/* Couleur des bordures des gouts */

.fichepres1 .pres-3, .fichepres1 .pres3-spec1, .fichepres1 .pres-5 span{ border-color:#787424 !important; }
.fichepres1 .pres-3 .fichepres1 .pres3-spec2{ border-color:#9B1F00 !important; }

/* Couleur de la partie histoire */

.fichepres1 .pres-4 img{ border-color:#fff !important; }
.fichepres1 .pres-4 strong{ background-color:#dedede; }

/* Couleur de l'ascenseur */

.fichepres1::-webkit-scrollbar { width: 6px; height: 6px; }
.fichepres1::-webkit-scrollbar-button { width: 0px; height: 0px; }
.fichepres1::-webkit-scrollbar-thumb { background: #525252; border: 0px none #ffffff; border-radius: 50px;}
.fichepres1::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active{background: #525252;}
.fichepres1::-webkit-scrollbar-track { background: #c4c4c4; border: 0px none #ffffff; border-radius: 50px;}
.fichepres1::-webkit-scrollbar-track:hover { background: #d2d2d2;}
.fichepres1::-webkit-scrollbar-track:active { background: #e2e2e2;}
.fichepres1::-webkit-scrollbar-corner { background: transparent;}

/***** STRUCTURES *****/
.fichepres1{ width:450px; margin:0 auto; font-size:11px; line-height:1.6em; color#555; font-family:Verdana; }
.fichepres1 *{ box-sizing:border-box; }

/* PARTIE IDENTITE */


/* Avatar & Gif */

.fichepres1 .ficheimg-0{ width:100%; height:150px; object-fit:cover; }
.fichepres1 .pres-0{ position:relative; width:450px; height:150px; }
.fichepres1 .pres-0 h1{ font-family: 'Anton', sans-serif; color:#fff; font-weight:normal; text-transform:uppercase; font-size:30px; line-height:40px;
letter-spacing:2px; position:absolute; top:calc(100% / 4); left:calc(100% / 3);
}

.fichepres1 .pres-1{ display:flex; position:relative; }
.fichepres1 .pres-1 img{ position:relative; top:-35px; width:150px; height:240px; margin-left:10px; clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);}
.fichepres1 .pres-1 div{ width:275px; height:300px; overflow:auto; padding:15px; position:relative; top:-18px; }
.fichepres1 .pres-1 .descri-pres{ display:flex; flex-wrap:wrap; }

.fichepres1 .pres-1 strong{ margin:0; font-family: 'Roboto Mono', monospace; letter-spacing:3px; }

/* Rectangles d'informations */

.fichepres1 .pres-1 h3{ width:48%; margin: 2px 2px; padding:1px;
 font-size:9px; line-height:11px; font-family: 'Roboto Mono', monospace; text-transform:uppercase;
 display:flex; justify-content:center; align-items:center;
}

.fichepres1 .pres-1 h3:last-of-type{ width:98%; max-height: 24px; }

/* PARTIE ANECDOTES */

.fichepres1 .pres-2{ display:flex; position:relative; }
.fichepres1 .pres-2 span{ height:200px; width:395px; display:block; overflow:auto; padding:20px; text-align:justify; }
.fichepres1 .pres-2 h3{ position:absolute; top:-10px; left:-10px; margin: 2px 2px; padding:5px; font-size:11px; line-height:13px; font-family: 'Roboto Mono', monospace; text-transform:uppercase; }
.fichepres1 .pres-2 img{ display:block; clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); position:absolute; right:-37px; top:-61px; width:120px; height:120px; object-fit:cover; }

/* PARTIE GOUTS */

.fichepres1 .pres-3{ display:flex; flex-wrap:wrap; width:450px; z-index:13; position:relative; align-items:flex-start; }
.fichepres1 .pres-3 div{ width:47%; position:relative; margin:10px 5px; }
.fichepres1 .pres-3 span{ height:200px; overflow:auto; text-align:justify; display:block; padding:15px; }
.fichepres1 .pres-3 h3{ position:absolute; top:-10px; left:45%; width:120px; text-align:center; margin:2px 2px; padding:5px; font-size:11px; line-height:13px; font-family: 'Roboto Mono', monospace; text-transform:uppercase; }
.fichepres1 .pres-3 strong{ margin:0; font-family: 'Roboto Mono', monospace; letter-spacing:3px; }

.fichepres1 .pres-3 .pres3-spec1, .pres-3 .pres3-spec2 span{ -moz-transform: rotate(2deg);-webkit-transform: rotate(2deg);-o-transform: rotate(2deg);-ms-transform: rotate(2deg);transform: rotate(2deg);}
.fichepres1 .pres-3 .pres3-spec1 span, .pres-3 .pres3-spec2{ -moz-transform: rotate(-2deg);-webkit-transform: rotate(-2deg);-o-transform: rotate(-2deg);-ms-transform: rotate(-2deg); transform: rotate(-2deg); }
.fichepres1 .pres-3 .pres3-spec1{ border-right:3px solid; border-bottom:3px solid; }
.fichepres1 .pres-3 .pres3-spec2{ border-left:3px solid; border-top:3px solid; }

/* PARTIE HISTOIRE */

.fichepres1 .pres-4 img{ width:100%; height:200px; object-fit:cover; border-top:4px solid; }
.fichepres1 .pres-4 h3{ text-align:center; margin:2px 2px; padding:5px; font-size:11px; line-height:13px; font-family: 'Roboto Mono', monospace; text-transform:uppercase; position:relative; top:-10px; width:300px; left:-21px;}
.fichepres1 .pres-4 strong{ margin:0; font-family: 'Roboto Mono', monospace; letter-spacing:3px; width:420px; padding:5px; display:block; position:relative; top:-12px; right:-13px; }
.fichepres1 .descri-pres4 em:before{ content:'« '; }
.fichepres1 .descri-pres4 em:after{ content:'» '; }
.fichepres1 .pres-4 span{ display:block; padding:20px; height:450px; overflow:auto; position:relative; top:-30px; text-align:justify; }
.fichepres1 .pres-4 span em{ font-family: 'Roboto Mono', monospace; }

/* PARTIE HORS JEU */

.fichepres1 .pres-5{ display:flex; }
.fichepres1 .pres-5 img{ clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); -moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);-o-transform: rotate(-15deg);-ms-transform: rotate(-15deg);
transform: rotate(-15deg);}
.fichepres1 .pres-5 .credit{ position:relative; left:-20px; top:-52px; z-index:2;}
.fichepres1 .pres-5 .credit div{ font-family: 'Roboto Mono', monospace; letter-spacing:3px; position:absolute; top: 21px; left: 118%; font-size: 7px; padding: 2px; width:100%;}
.fichepres1 .pres-5 span { display:block; padding:20px; border-bottom:2px solid; position:relative; left:-30px; z-index:1;}
.fichepres1 .pres-5 strong{ font-family: 'Roboto Mono', monospace; letter-spacing:2px; }