Maquette : KoalaVolant
Code : void_invaders
Dimensions : 600px de large, hauteur variable
Polices : Arial
Code(s) Lié(s) : Fiche RP

Merci de laisser les crédits et de ne pas toucher au code en dehors des couleurs, des polices et des images

Je vous propose ci-dessous deux versions du code :

- La première version se suffit à elle-même, mais le CSS n'est pas modifiable car la feuille de style est importé directement via la balise <link>, qui permet d'intégrer une feuille de style externe au forum. Cette version s'adresse aux moins expérimentés qui ne ressentent pas le besoin de personnaliser le code et/ou qui n'ont pas accès à la feuille de style CSS du forum.

Code:

<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/6t2ur15j6xbwbcl/commandes.css">

- La seconde version contient une balise <style> dans laquelle vous retrouvez tout le CSS utilisé. C'est dans cette balise que vous pourrez modifier les couleurs et les polices. Cette version s'adresse aux personnes comprenant un peu le fonctionnement du CSS et qui souhaitent pouvoir personnaliser le code.

CSS de la partie Informations :

Code:

<style>.KVlink1 { margin: auto; width: 600px; background-color: rgb(235, 235, 235); border-radius: 20px 20px 0 0; font-family: 'Arial', sans-serif;} .KVlink1_title {background: linear-gradient(to right, #49919D, #222E54); font-size: 18px; text-align: center; color: #fff; padding: 30px 0; border-radius: 20px 20px 0 0;} .KVlink1_content {display: flex;} .KVlink1_txt {padding: 20px 0 20px 20px; display: flex; flex-direction: column; align-items: center; flex: 1;} .KVlink1_txt div {border-radius: 0 8px 8px 8px; border: 1px solid #222E54; padding: 10px; font-size: 14px; text-align: justify;} .KVlink1_txt div:last-child {border-radius: 8px 0 8px 8px; height: 150px; overflow: auto; scrollbar-width: none;} .KVlink1_txt span {display: inline-block; width: auto; background: linear-gradient(#49919D, #222E54); padding: 10px 40px 7px; color: #fff; text-transform: uppercase; border-radius: 25px 25px 0 0;} .KVlink1_info {align-self: self-start;} .KVlink1_search {align-self: self-end;} .KVlink1_img {padding: 0 20px; display: flex; flex-direction: column; justify-content: space-evenly;} .KVlink1_img img {height: 100px; width: 100px; border-radius: 20px;} .KVlink1_cred {background: linear-gradient(to right, #49919D, #222E54); font-size: 10px; color: #fff; text-align: center; padding: 5px 0; text-transform: uppercase;} .KVlink1_cred a {text-decoration: none; font-weight: bolder; color: #49919D;}</style>

CSS des blocs de liens :

Code:

<style>.KVlinkbox1 {width: 600px; height: 125px; margin: auto; font-family: 'Arial', sans-serif; display: flex; flex-direction: column; align-items: center;} .KVlinkbox1_name {width: 100%; background: linear-gradient(to right, #49919D, #222E54); text-align: right; font-size: 18px; padding: 8px 50px 6px 0; color: #fff; border-radius: 20px;} .KVlinkbox1_desc {display: flex; width: 95%; height: 105px; background-color: rgb(235, 235, 235); border-radius: 0 0 0 20px; padding: 5px 0;} .KVlinkbox1_desc img {position: relative; top: -50px; width: 100px; height: 150px; border-radius: 20px; } .KVlinkbox1_desc div {padding: 0 5px; text-align: justify; font-size: 14px; overflow: auto; scrollbar-width: none;}</style>

Si vous postez tout sur un même message :
• Pour la première version, une seule balise <link> suffit au début de votre poste, avant tous les codes.
• Pour la deuxième version, les deux balises <style> doivent être placées, là aussi, au début de votre poste, avant tous les codes.

Si vous postez la fiche en plusieurs messages (par exemple, premier poste : partie infos, deuxième poste : amis, troisième poste : ennemis, etc) :
• Pour la première version, coller la balise <link> au début de chaque poste, avant tous les codes.
• Pour la deuxième version, coller la balise <style> correspondant à la partie infos au début du poste de la partie infos, puis la balise <style> des blocs de liens au début de chaque poste de blocs de liens.