Le deal à ne pas rater :
Carte graphique MSI – AMD Radeon RX 6800XT GAMING Z TRIO 16G à ...
699 €
Voir le deal

KoalaVolant
KoalaVolant

Fiche de présentation #9 Empty Fiche de présentation #9

Ven 5 Aoû 2022 - 11:11



HTML



Code:
<div class="comboofiche combopresentation"><div class="combo-tf">Prénom Nom</div>
<div class="comboi1">
<div class="combocont1 avbr"><span><strong>Âge :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Métier :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Groupe :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Pouvoirs :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Genre :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Orientation sexuelle/romantique :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Origines :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut.
<strong>Surnom :</strong> Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut. </span></div>
<div class="comboimg1"><img src="https://i.imgur.com/D9WC5p7.jpg"/></div>
</div>
<div class="combotitre combot1">Caractère</div>
<div class="comboc1 avbr"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere lectus turpis, venenatis mattis metus vehicula eget. Etiam porttitor varius quam quis placerat. Sed eu dictum urna, ut tempor dolor. Pellentesque nec leo dictum, blandit dolor in, ultricies libero. Nulla suscipit libero egestas risus pellentesque porttitor. Vivamus pharetra, sem vitae sollicitudin varius, elit quam pharetra quam, et varius eros velit id nulla. Maecenas congue dignissim lacus sit amet eleifend. Fusce et fringilla metus. Quisque nec lacus dictum felis scelerisque aliquet nec in lorem. Nulla dictum pharetra consectetur. Nunc rutrum velit sed ultrices interdum.

Mauris semper mollis augue ut iaculis. Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut. Vivamus vel orci id erat gravida dignissim sed sed urna. Vivamus laoreet ipsum eros, scelerisque eleifend velit porttitor at. Praesent lacinia quam id lobortis ullamcorper. Fusce interdum tincidunt rhoncus. Ut lobortis turpis a posuere blandit. Proin ut gravida orci. In hendrerit cursus augue, sit amet dapibus velit iaculis at. Etiam eget laoreet diam. Cras aliquet ultrices mauris ac aliquam. Proin ut posuere nisl. Suspendisse consectetur bibendum egestas.</span></div>
<div class="combotitre combot2">Histoire</div>
<div class="comboc1 comboc2 avbr"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce posuere lectus turpis, venenatis mattis metus vehicula eget. Etiam porttitor varius quam quis placerat. Sed eu dictum urna, ut tempor dolor. Pellentesque nec leo dictum, blandit dolor in, ultricies libero. Nulla suscipit libero egestas risus pellentesque porttitor. Vivamus pharetra, sem vitae sollicitudin varius, elit quam pharetra quam, et varius eros velit id nulla. Maecenas congue dignissim lacus sit amet eleifend. Fusce et fringilla metus. Quisque nec lacus dictum felis scelerisque aliquet nec in lorem. Nulla dictum pharetra consectetur. Nunc rutrum velit sed ultrices interdum.

Mauris semper mollis augue ut iaculis. Duis dolor nibh, sagittis non magna vitae, suscipit iaculis eros. Morbi sagittis augue odio, a pulvinar felis interdum ut. Vivamus vel orci id erat gravida dignissim sed sed urna. Vivamus laoreet ipsum eros, scelerisque eleifend velit porttitor at. Praesent lacinia quam id lobortis ullamcorper. Fusce interdum tincidunt rhoncus. Ut lobortis turpis a posuere blandit. Proin ut gravida orci. In hendrerit cursus augue, sit amet dapibus velit iaculis at. Etiam eget laoreet diam. Cras aliquet ultrices mauris ac aliquam. Proin ut posuere nisl. Suspendisse consectetur bibendum egestas.</span></div>
<div class="combofin avbr"><div>Votre pseudo</div><img src="https://i.imgur.com/D9WC5p7.jpg"><span><strong>Pseudo :</strong> blablabla
<strong>D'où t'as connu le forum ?</strong> blablabla
<strong>Des suggestions ?</strong> blablabla</div>
</div><a href="https://pisrale.forumactif.com/" target="_blank" class="koala">KoalaVolant</a>

CSS



Si vous avez déjà la fiche de scénario, pas besoin de copier le code ci-dessous, sinon, faites le

Code:
.comboofiche {    width:90%; margin:0 auto; }
.comboofiche, .comboofiche *{ box-sizing:border-box; }
.comboofiche br{ display:none; }
.avbr br{ display:block; }

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700;900&display=swap');

/* Couleurs */

:root{
    --couleur-1:#59C9A5;
    --couleur-2:#23395B;
    --couleur-blanc:#fff;
    --couleur-gris:#dddada;
    
    --text1:'Rubik', sans-serif;
}
/* Titre Principal */

.combo-tf {
    background:var(--couleur-1);     color:var(--couleur-2);
    font-family:var(--text1);     text-transform:uppercase;
    font-weight:900; font-size:40px; line-height:40px;
    padding:20px; text-align:center; position:relative;
    z-index:3;
}

/* Les trois Ć:copyright:lĆ:copyright:ments */

.comboi1 { display:flex; justify-content:center;  }

.combocont1{ position:relative; z-index:4;  top:-10px; width:50%; background:var(--couleur-blanc);
    padding:20px 25px; transform:rotate(-4deg); height:300px; }
.combocont1 span{ padding:8px; height:260px; transform:rotate(4deg); overflow:auto; display:block; text-align:justify;}

.comboimg1 { width:120px; }
.comboimg1 img{ position:relative; z-index:2; top:0px;
    height:120px; object-fit:cover; width:100%; }
.comboimg1 img:first-child{ margin-bottom:10px; }

.comboinf1{ display:flex; flex-wrap:wrap; align-items:center; width:20%; background:var(--couleur-gris); padding:10px;
position:relative; top:0px; }
.comboinf1 a:after{ content:' '; bottom:-100px; left:0; position:absolute;
    z-index:-1; display:block; width:100%; background:var(--couleur-2);
    height:30px; transition:500ms; }
.comboinf1 a:hover:after{ bottom:0; transition:500ms;  }
.comboinf1 a{ overflow:hidden; background:var(--couleur-1); width:100%; display:block;
text-align:center; text-transform:uppercase; font-weight:900; font-family:var(--text1);
color:var(--couleur-blanc); position:relative; z-index:16; padding:5px; transform:rotate(2deg); }
.comboinf1 a:nth-child(2){ transform:rotate(-2deg); }
.comboinf1 .comboquote{ padding:5px; font-size:11px; line-height:14px;
    text-align:center; display:inline-block; color:var(--couleur-2);
font-style:oblique; }

.combotitre {
    background:var(--couleur-2);
    color:var(--couleur-blanc); font-family:var(--text1); text-transform:uppercase;
    font-size:45px; line-height:45px; font-weight:900;
    width:80%; margin:0 auto; position:relative; top:-20px;
    text-align:right;
}

.comboc1{    margin-bottom:-5px; clip-path: polygon(4% 4%, 100% 0%, 100% 98%, 0 94%);
    background:var(--couleur-blanc); padding:8px; position:relative; z-index:2; top:-25px; }
.comboc1 span{ display:block; padding:20px 0px; padding-right:10px; padding-left:30px;  }
.comboc1 span strong{ font-family:var(--text1); text-transform:uppercase; background-color:var(--couleur-1); color:var(--couleur-blanc); }
.comboc1 span strong:nth-child(odd){ background-color:var(--couleur-2); }

.comboc2{ clip-path: polygon(0 5%, 100% 1%, 100% 100%, 0 100%); top:-36px; }

Si vous avez déjà le CSS ou que vous voulez faire la fiche de présentation spécifiquement copier coller ça après le gros code :

Code:
/* Fiche de présentation */

.combopresentation .combocont1{ width:60%; }
.combopresentation .combocont1 strong{ font-family:var(--text1); text-transform:uppercase; background-color:var(--couleur-1); color:var(--couleur-blanc); }
.combopresentation .comboimg1 img{ width:150px; height:auto; top:40px;  }
.combopresentation .combot2{ text-align:left; background:var(--couleur-1); width:90%; left:0px; top:-25px; z-index:1; transform:rotate(-1deg); }

.combofin{ display:flex; right:-20px; top:-30px; padding:10px 20px;  position:relative; background:var(--couleur-gris); width:80%; margin:0 auto; }
.combofin img{ width:30%; height:100px; object-fit:cover; }
.combofin div{ background:var(--couleur-1); color:var(--couleur-blanc); font-family:var(--text1); text-transform:uppercase;
font-size:14px; padding:10px; position:absolute; font-weight:800; left:-20px;  bottom:-20px; transform:rotate(3deg); }
.combofin span{ display:block; width:70%; padding:10px; height:100px; overflow:auto; }
Revenir en haut

Partenaires footer

RPG-Chevalier Logo WyvArtem Image hébergée gratuitement chez Image hébergée gratuitement chez