Welcome

Halloween Présentation

Poufsouffle

Halloween, LS codage Forumactif Fiches & Messages Présentations & Prédéfinis Poufsouffle

Toutes versions

Optimisé Trois versions disponibles : html & CSS mêlés, CSS dans le panneau d'administration avec et sans possibilité de modifier les couleurs pour le membre. Pour définir la couleur de tous les éléments en jaune sur l'aperçu, compléter le "main-color" dans le "root" en début de fiche.
L'ensemble de la mise en forme du header (effet déchiré, emblême de Poufsouffle, cadre jaune) est une image dont le fichier PSD est disponible plus bas.
L'avatar à gauche du "Truefacts" est en 180*321px (redimensionnement automatique), l'image du putois avec le texte "justice" est en 113*114px, et finalement l'image précédant l'histoire est en 100*100 (redimensionnement automatique).

Crédit des avatars : one bad day

Télécharger le psd

Retour

Codage Poufsouffle présentation Halloween Forumactif

HTML & CSS

<link href="https://fonts.googleapis.com/css?family=Montserrat:300|Oswald:400,500&display=swap" rel="stylesheet"><script src="https://kit.fontawesome.com/395753f97a.js"></script><style>.caspianpres {font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 300; color: #262628; width: 500px; position: relative; margin: auto; text-align: justify; background: #fff; overflow: hidden;} .caspianpres p {margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; font-size: 10px;} .caspianpres h2 {color: #262628; font-family: Oswald, sans-serif; font-size: 24px; font-weight: 500; margin: 0 0 10%; position: relative; text-align: center; text-transform: uppercase; border: 0;} .caspianpres .c_caractere h2::before {top: 50%; left: 15%;} .c_histoire h2::before {left: 34%; top: 50%;} .caspianpres h2::before {position: absolute; width: 160px; height: 3px; background: var(--main-color); content: ""; z-index: 2;} .caspianpres header {height: 406px; font-family: 'Arial', sans-serif; color: #fff; text-transform: lowercase; letter-spacing: -2px; font-size: 24px; padding: 34.5% 0 0; text-align: center; box-sizing: border-box;} .caspianpres .c_name {font-family: 'Times new roman', sans-serif; font-size: 180px; color: #eeeeee; height: 200px; position: absolute; right: -75%; top: 450px; text-transform: uppercase; z-index: 2;} .c_infos {background: url(https://i.imgur.com/yp8tNGB.png); height: 468px; margin: 120px 0 0; z-index: 3; position: relative;} .c_tolerance {background: var(--main-color); color: #fff; width: 30%; position: absolute; top: -60px; left: 5%; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-size: 60px; box-sizing: border-box; line-height: 1; font-weight: 400; padding: 10% 6%;} .c_infos p {color: #fff; font-family: 'Oswald', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 20px; line-height: 1.1; padding: 55% 8% 0;} .c_caractere {position: relative; margin: 15% 0; display: flex;} .c_triangle {width: 0; height: 0; border: 0 solid transparent; border-bottom-width: 130px; border-top-width: 130px; border-left: 230px solid var(--main-color); position: absolute; z-index: 2; top: 10%;} .c_carac_txt {width: 46%; margin: 0 0 0 5%; height: 320px; overflow: hidden;} .c_carac_txt p {height: 280px; line-height: 1.8; overflow: auto; padding: 0 17px 0 0; width: 100%; box-sizing: initial;} .c_truefacts p span {font-weight: 400; font-family: 'Oswald', sans-serif; font-size: 15px; color: var(--main-color);} img.c_icon {width: 15px; float: left; margin: 0 2% 0 0;} .c_avatar {margin: 0 4%; position: relative; z-index: 3; width: 180px; height: 321px; object-fit: cover;} .c_details_txt {width: 276px; height: 275px; margin: 0 0 0 13%; padding: 5%; box-sizing: border-box; overflow: hidden; text-transform: uppercase;} .c_details {display: flex; align-items: center;} .c_details_txt p {font-family: 'Oswald', sans-serif; font-weight: 400; color: #fff; font-size: 14px;} .c_details_txt p span {color: var(--main-color);} .c_details_txt p {font-family: 'Oswald', sans-serif; font-weight: 400; color: #fff; font-size: 16px; width: 100%; height: 100%; overflow: auto; padding: 0 15% 0 0;} .c_adjfacts {margin: 10%; display: flex; position: relative;} .c_adjectifs {transform: rotate(-90deg); position: absolute; font-family: 'Oswald', sans-serif; text-transform: uppercase; top: 30%; line-height: 1.5; width: 288px; left: -25%;} .c_adjectifs h3 {font-size: 48px; font-weight: 400; margin: 0; padding: 0; text-align: right; font-family: 'Oswald', sans-serif; border: 0;} .c_adjectifs h4::before {background: var(--main-color); width: 60px; content: ""; height: 10px; display: inline-block; margin: 0 2% 0 0;} .c_adjectifs h4 {font-weight: 400; font-size: 18px;} .c_truefacts {width: 322px; background: url(https://i.imgur.com/TDrWGrt.png); height: 320px; margin: 0 0 0 20%; overflow: hidden;} .c_truefacts h5 {font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 20px; font-weight: 500; margin: 15% 0 3% 20%;} .c_truefacts h5 span {color: var(--main-color);} .c_truefacts p {height: 220px; line-height: 1.5; margin: 0 0 0 20%; overflow: auto; padding: 0 23px 0 0; width: 250px; box-sizing: initial;} .header_histoire_img  {width: 100px; height: 100px; object-fit: cover; border-radius: 100px; border: 4px solid #fff; position: relative;} .header_histoire_img::after {content: ""; display: block; width: 50px; height: 50px; position: absolute; background: var(--main-color); bottom: 0; left: 0;} .header_histoire {background: url(https://i.imgur.com/DUwflDF.png); height: 183px; text-align: center; box-sizing: border-box; padding: 9% 0 0; margin: 0 0 2%;} .c_histoire h2 {margin: 0 0 5%;} .c_histoire_txt p {height: 100%; overflow: auto; padding: 0 17px 0 0; width: 100%; box-sizing: initial;} .c_histoire_txt {width: 70%; margin: auto; height: 300px; overflow: hidden;} .c_histoire_txt p {width: 100%; height: 100%; overflow: auto; padding: 0 5% 0 0;} .lettre_histoire {color: var(--main-color); font-style: normal; font-weight: 400; font-family: 'Oswald', sans-serif; font-size: 14px;} .c_footer {background: url(https://i.imgur.com/DUwflDF.png); box-sizing: border-box; height: 183px; margin: 16px 0 4%; padding: 6.5% 0 0;} .c_footer p {background: var(--main-color); color: #fff; font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; padding: 4% 25%;} a#hallow_credits {font-family: Oswald, sans-serif; text-align: right; display: block; margin: 0 5% 2% 0; color: #e0e0e0; text-transform: lowercase; font-style: italic;}</style><!--

MODIFIER VOTRE COULEUR --><style>:root {--main-color : tomato;}</style><!--

FIN CSS

--><div class="caspianpres"><!--

HEADER --><header style="background: url(https://i.imgur.com/0QGynIO.png);">Prénom NOM</header><!--

CASPIAN --><div class="c_name">caspian</div><!--

INFORMATIONS --><div class="c_infos"><div class="c_tolerance">Adj
ect
if</div><p>Prénom Nom ⥋ Age ⥋ Sexualité ⥋ Race ou sang ⥋ Origine ⥋ Année ⥋ Etudes ⥋ Autre information ⥋ Autre information ⥋ Autre information ⥋ Autre information ⥋ Origine de l'avatar</p></div><!--

CARACTERE --><div class="c_caractere"><div class="c_triangle"></div><img src="https://imgur.com/nIWKrJM.png" class="c_avatar" alt="" /><div class="c_carac_txt"><h2>Truefacts</h2><p>Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬ Fact # ▬</p></div></div><!--

DETAILS --><div class="c_details"><div class="c_details_txt" style="background: url(https://i.imgur.com/wgUjxBx.png);"><p><span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse</p></div><img src="https://i.imgur.com/fWnpQMw.png" class="c_blaireau" alt="" /></div><!--

FUNFACTS --><div class="c_adjfacts"><div class="c_adjectifs"><h3>Gentillesse</h3><h4>Patience</h4></div><div class="c_truefacts"><h5>Carac<span>tère</span></h5><p><span>Trait ;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.

<span>Trait</span> ; Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis.

<img src="https://i.imgur.com/qqEuZIZ.png" alt="" class="c_icon" /> Ce qu'il aime

<img src="https://i.imgur.com/yZEdtGL.png" alt="" class="c_icon" /> Ce qu'il déteste

<img src="https://i.imgur.com/pIjjIkJ.png" alt="" class="c_icon" /> Ses craintes

<span class="c_adj_resume">Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé ▬ Résumé </span></p></div></div><!--

HISTOIRE --><div class="c_histoire"><div class="header_histoire"><img src="https://imgur.com/OcJbkeo.png" alt="" class="header_histoire_img" /></div><h2>Histoire</h2><div class="c_histoire_txt"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tellus id venenatis semper. Proin fermentum lorem sed justo vehicula, vitae luctus sapien congue. Praesent sed justo leo. Nam sagittis turpis massa, id sollicitudin magna euismod a. Curabitur nunc tortor, fermentum in nulla eu, elementum varius neque. Aenean efficitur sem non justo imperdiet vulputate. Ut ac ex metus. Nunc eu libero vitae tellus aliquam pellentesque et quis turpis. Mauris in tempor elit. Proin tristique bibendum elit, eget cursus lorem scelerisque id. Nulla fringilla condimentum erat. Pellentesque sed placerat ligula.

In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent fermentum iaculis nunc a tempus. Proin viverra sit amet lacus volutpat cursus. Duis congue convallis mauris vitae dictum. Aliquam eu augue sed leo accumsan porta vitae sed magna. Praesent faucibus elit at felis suscipit posuere. Nunc pretium est erat, a fringilla odio aliquet dignissim.

Integer tincidunt lacinia felis, ac facilisis augue porttitor commodo. Donec commodo ultrices ex viverra scelerisque. Morbi risus nibh, blandit et tempor id, vehicula vitae justo. Nullam quis fermentum dolor, in efficitur diam. Suspendisse bibendum posuere lobortis. Donec pulvinar vel lectus mollis eleifend. Fusce a pharetra ex, sit amet consequat lectus. Fusce eleifend libero id sem rutrum, et rhoncus nisi hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eu viverra nisl, suscipit viverra erat. Fusce in consequat purus. Aliquam ac eleifend purus, et rhoncus mi. Aenean nisl tellus, vestibulum ac fringilla vitae, porttitor non nulla.

Donec eget mi nec orci mattis ullamcorper. Mauris quis velit consequat augue hendrerit fringilla. Nam vitae justo eu metus condimentum varius. Integer sagittis tellus ut sollicitudin suscipit. Ut a quam consectetur, volutpat lacus quis, tincidunt ex. Suspendisse egestas urna sodales vulputate condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quisque aliquet lacinia erat in pharetra. Quisque ac nisl et est euismod iaculis. Donec nec nisi non massa semper tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis lobortis neque. Suspendisse potenti. Cras vehicula maximus tempor. In varius nisi eu lectus facilisis iaculis. Quisque quis mattis nunc, tempus tincidunt est. Donec facilisis bibendum ipsum et porta. Nam auctor ac metus ut ultrices. Praesent tincidunt neque vel mi luctus, at malesuada massa fringilla. Duis at luctus ex. Pellentesque dignissim posuere vestibulum.</p></div></div><!--

FOOTER --><div class="c_footer"><p>Ici les informations habituelles : pseudo, age, dispo, pourquoi un corbeau ressemble à un bureau etc..</p></div><!--

--><a href="http://ls-halloween.fr/" target="_blank" id="hallow_credits">Halloween</a></div>

CSS séparé, couleurs modifiables

HTML

MODIFIER VOTRE COULEUR -->
<style>:root {--main-color : #ffc51a;}</style><!--

FIN CSS

--><div class="caspianpres"><!--

HEADER --><header style="background: url(https://i.imgur.com/0QGynIO.png);">Prénom NOM</header><!--

CASPIAN --><div class="c_name">caspian</div><!--

DETAILS --><div class="c_details"><div class="c_details_txt"><p><span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse
<span>Détail</span> — Réponse</p></div><img src="https://i.imgur.com/fWnpQMw.png" class="c_blaireau" alt="" /></div><!--

<img src="https://i.imgur.com/qqEuZIZ.png" alt="" class="c_icon" /> Ce qu'il aime

<img src="https://i.imgur.com/yZEdtGL.png" alt="" class="c_icon" /> Ce qu'il déteste

<img src="https://i.imgur.com/pIjjIkJ.png" alt="" class="c_icon" /> Ses craintes

FOOTER --><div class="c_footer"><p>Ici les informations habituelles : pseudo, age, dispo, pourquoi un corbeau ressemble à un bureau etc..</p></div><!--

--><a href="http://ls-halloween.fr/" target="_blank" id="hallow_credits">Halloween</a></div>

CSS

.caspianpres {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 300;
    color: #262628;
    width: 500px;
    position: relative;
    margin: auto;
    text-align: justify;
    background: #fff;
    overflow: hidden;
}

.caspianpres p {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
}

.caspianpres h2 {
    color: #262628;
    font-family: Oswald, sans-serif;
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 10%;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    border: 0;
}

.caspianpres .c_caractere h2::before {
    top: 50%;    
    left: 15%;
}

.c_histoire h2::before {
    left: 34%;
    top: 50%;
}

.caspianpres h2::before {
    position: absolute;    
    width: 160px;
    height: 3px;
    background: var(--main-color);
    content: "";
    z-index: 2;
}

/* HEADER */
.caspianpres header {
    height: 406px;
    font-family: 'Arial', sans-serif;
    color: #fff;
    text-transform: lowercase;
    letter-spacing: -2px;
    font-size: 24px;
    padding: 34.5% 0 0;
    text-align: center;
    box-sizing: border-box;
}

/* CASPIAN */
.caspianpres .c_name {
    font-family: 'Times new roman', sans-serif;
    font-size: 180px;
    color: #eeeeee;
    height: 200px;
    position: absolute;
    right: -75%;
    top: 450px;
    text-transform: uppercase;
    z-index: 2;
}

/* INFORMATIONS */
.c_infos {
    background: url(https://i.imgur.com/yp8tNGB.png);
    height: 468px;
    margin: 120px 0 0;
    z-index: 3;
    position: relative;
}

.c_tolerance {
    background: var(--main-color);
    color: #fff;
    width: 30%;
    position: absolute;
    top: -60px;
    left: 5%;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 60px;
    box-sizing: border-box;
    line-height: 1;
    font-weight: 400;
    padding: 10% 6%;
}

.c_infos p {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.1;
    padding: 55% 8% 0;
}

/* CARACTERE */
.c_caractere {
    position: relative;
    margin: 15% 0;
    display: flex;
}

.c_triangle {
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 130px;
    border-top-width: 130px;
    border-left: 230px solid var(--main-color);
    position: absolute;
    z-index: 2;
    top: 10%;
}

.c_carac_txt {
    width: 46%;
    margin: 0 0 0 5%;
    height: 320px;
    overflow: hidden;
}

.c_carac_txt p {
    height: 280px;
    line-height: 1.8;
    overflow: auto;
    padding: 0 17px 0 0;
    width: 100%;
    box-sizing: initial;
}

.c_truefacts p span {
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    color: var(--main-color);
}

img.c_icon {
    width: 15px;
    float: left;
    margin: 0 2% 0 0;
}

.c_avatar {
    margin: 0 4%;
    position: relative;
    z-index: 3;
    width: 180px;
    height: 321px;
    object-fit: cover;
}

/* DETAILS */
.c_details_txt {
    width: 276px;
    height: 275px;
    margin: 0 0 0 13%;
    padding: 5%;
    box-sizing: border-box;
    overflow: hidden;
    text-transform: uppercase;
}

.c_details {
    display: flex;
    align-items: center;
}

.c_details_txt p {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 14px;
}

.c_details_txt p span {
    color: var(--main-color);
}

.c_details_txt p {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 15% 0 0;
}

/* TRUEFACTS */
.c_adjfacts {
    margin: 10%;
    display: flex;
    position: relative;
}

.c_adjectifs {
    transform: rotate(-90deg);
    position: absolute;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    top: 30%;
    line-height: 1.5;
    width: 288px;
    left: -25%;
}

.c_adjectifs h3 {
    font-size: 48px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: right;
    font-family: 'Oswald', sans-serif;
    border: 0;
}

.c_adjectifs h4::before {
    background: var(--main-color);
    width: 60px;
    content: "";
    height: 10px;
    display: inline-block;
    margin: 0 2% 0 0;
}

.c_adjectifs h4 {
    font-weight: 400;
    font-size: 18px;
}

.c_truefacts {
    width: 322px;
    background: url(https://i.imgur.com/TDrWGrt.png);
    height: 320px;
    margin: 0 0 0 20%;
    overflow: hidden;
}

.c_truefacts h5 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 500;
    margin: 15% 0 3% 20%;
}

.c_truefacts h5 span {
    color: var(--main-color);
}

.c_truefacts p {
    height: 220px;
    line-height: 1.5;
    margin: 0 0 0 20%;
    overflow: auto;
    padding: 0 23px 0 0;
    width: 250px;
    box-sizing: initial;
}

/* HISTOIRE */
.header_histoire_img  {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 100px;
    border: 4px solid #fff;
    position: relative;
}

.header_histoire_img::after {
  	content: "";
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    background: var(--main-color);
    bottom: 0;
    left: 0;
}

.header_histoire {
    background: url(https://i.imgur.com/DUwflDF.png);
    height: 183px;
    text-align: center;
    box-sizing: border-box;
    padding: 9% 0 0;
    margin: 0 0 2%;
}

.c_histoire h2 {
    margin: 0 0 5%;
}

.c_histoire_txt p {
    height: 100%;
    overflow: auto;
    padding: 0 17px 0 0;
    width: 100%;
    box-sizing: initial;
}

.c_histoire_txt {
    width: 70%;
    margin: auto;
    height: 300px;
    overflow: hidden;
}

.c_histoire_txt p {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 5% 0 0;
}

.lettre_histoire {    
    color: var(--main-color);
    font-style: normal;
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
}

/* FOOTER */
.c_footer {
    background: url(https://i.imgur.com/DUwflDF.png);
    box-sizing: border-box;
    height: 183px;
    margin: 16px 0 4%;
    padding: 6.5% 0 0;
}

.c_footer p {
    background: var(--main-color);
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    padding: 4% 25%;
}

a#hallow_credits {
    font-family: Oswald, sans-serif;
    text-align: right;
    display: block;
    margin: 0 5% 2% 0;
    color: #e0e0e0;
    text-transform: lowercase;
    font-style: italic;
}

CSS séparé, couleurs définies par l'admin

HTML

--><div class="caspianpres"><!--

HEADER --><header style="background: url(https://i.imgur.com/0QGynIO.png);">Prénom NOM</header><!--

CASPIAN --><div class="c_name">caspian</div><!--

<img src="https://i.imgur.com/qqEuZIZ.png" alt="" class="c_icon" /> Ce qu'il aime

<img src="https://i.imgur.com/yZEdtGL.png" alt="" class="c_icon" /> Ce qu'il déteste

<img src="https://i.imgur.com/pIjjIkJ.png" alt="" class="c_icon" /> Ses craintes

FOOTER --><div class="c_footer"><p>Ici les informations habituelles : pseudo, age, dispo, pourquoi un corbeau ressemble à un bureau etc..</p></div><!--

--><a href="http://ls-halloween.fr/" target="_blank" id="hallow_credits">Halloween</a></div>

CSS

.caspianpres p {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
}

.caspianpres .c_caractere h2::before {
    top: 50%;    
    left: 15%;
}

.c_histoire h2::before {
    left: 34%;
    top: 50%;
}

.caspianpres h2::before {
    position: absolute;    
    width: 160px;
    height: 3px;
    background: #e1b300;
    content: "";
    z-index: 2;
}

/* HEADER */
.caspianpres header {
    background: url(https://i.imgur.com/0QGynIO.png);
    height: 406px;
    font-family: 'Arial', sans-serif;
    color: #fff;
    text-transform: lowercase;
    letter-spacing: -2px;
    font-size: 24px;
    padding: 34.5% 0 0;
    text-align: center;
    box-sizing: border-box;
}

/* INFORMATIONS */
.c_infos {
    background: url(https://i.imgur.com/yp8tNGB.png);
    height: 468px;
    margin: 120px 0 0;
    z-index: 3;
    position: relative;
}

.c_tolerance {
    background: #e1b300;
    color: #fff;
    width: 30%;
    position: absolute;
    top: -60px;
    left: 5%;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 60px;
    box-sizing: border-box;
    line-height: 1;
    font-weight: 400;
    padding: 10% 6%;
}

.c_infos p {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.1;
    padding: 55% 8% 0;
}

/* CARACTERE */
.c_caractere {
    position: relative;
    margin: 15% 0;
    display: flex;
}

.c_triangle {
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 130px;
    border-top-width: 130px;
    border-left: 230px solid #e1b300;
    position: absolute;
    z-index: 2;
    top: 10%;
}

.c_carac_txt {
    width: 46%;
    margin: 0 0 0 5%;
    height: 320px;
    overflow: hidden;
}

.c_carac_txt p {
    height: 280px;
    line-height: 1.8;
    overflow: auto;
    padding: 0 17px 0 0;
    width: 100%;
    box-sizing: initial;
}

.c_truefacts p span {
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    color: #e1b300;
}

img.c_icon {
    width: 15px;
    float: left;
    margin: 0 2% 0 0;
}

.c_avatar {
    margin: 0 4%;
    position: relative;
    z-index: 3;
    width: 180px;
    height: 321px;
    object-fit: cover;
}

/* DETAILS */
.c_details_txt {
    background: url(https://i.imgur.com/wgUjxBx.png);
    width: 276px;
    height: 275px;
    margin: 0 0 0 13%;
    padding: 5%;
    box-sizing: border-box;
    overflow: hidden;
    text-transform: uppercase;
}

.c_details {
    display: flex;
    align-items: center;
}

.c_details_txt p {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 14px;
}

.c_details_txt p span {
    color: #e1b300;
}

.c_details_txt p {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #fff;
    font-size: 16px;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 15% 0 0;
}

/* TRUEFACTS */
.c_adjfacts {
    margin: 10%;
    display: flex;
    position: relative;
}

.c_adjectifs h3 {
    font-size: 48px;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: right;
    font-family: 'Oswald', sans-serif;
    border: 0;
}

.c_adjectifs h4::before {
    background: #e1b300;
    width: 60px;
    content: "";
    height: 10px;
    display: inline-block;
    margin: 0 2% 0 0;
}

.c_adjectifs h4 {
    font-weight: 400;
    font-size: 18px;
}

.c_truefacts {
    width: 322px;
    background: url(https://i.imgur.com/TDrWGrt.png);
    height: 320px;
    margin: 0 0 0 20%;
    overflow: hidden;
}

.c_truefacts h5 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 500;
    margin: 15% 0 3% 20%;
}

.c_truefacts h5 span {
    color: #e1b300;
}

.c_truefacts p {
    height: 220px;
    line-height: 1.5;
    margin: 0 0 0 20%;
    overflow: auto;
    padding: 0 23px 0 0;
    width: 250px;
    box-sizing: initial;
}

/* HISTOIRE */
.header_histoire_img  {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 100px;
    border: 4px solid #fff;
    position: relative;
}

.header_histoire_img::after {
  	content: "";
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    background: #e1b300;
    bottom: 0;
    left: 0;
}

.header_histoire {
    background: url(https://i.imgur.com/DUwflDF.png);
    height: 183px;
    text-align: center;
    box-sizing: border-box;
    padding: 9% 0 0;
    margin: 0 0 2%;
}

.c_histoire h2 {
    margin: 0 0 5%;
}

.c_histoire_txt p {
    height: 100%;
    overflow: auto;
    padding: 0 17px 0 0;
    width: 100%;
    box-sizing: initial;
}

.c_histoire_txt {
    width: 70%;
    margin: auto;
    height: 300px;
    overflow: hidden;
}

.c_histoire_txt p {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 5% 0 0;
}

.lettre_histoire {    
    color: #e1b300;
    font-style: normal;
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
}

/* FOOTER */
.c_footer {
    background: url(https://i.imgur.com/DUwflDF.png);
    box-sizing: border-box;
    height: 183px;
    margin: 16px 0 4%;
    padding: 6.5% 0 0;
}

.c_footer p {
    background: #e1b300;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    padding: 4% 25%;
}

a#hallow_credits {
    font-family: Oswald, sans-serif;
    text-align: right;
    display: block;
    margin: 0 5% 2% 0;
    color: #e0e0e0;
    text-transform: lowercase;
    font-style: italic;
}

#poufsouffle #Présentation #forumactif #codage #libreservice

Halloween