Test Mäven
Message pop up connexion

Rejoignez le forum, c’est rapide et facile

Test Mäven
Message pop up connexion
Test Mäven
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Test Mäven

je suis la description du forum

-40%
Le deal à ne pas rater :
-40% sur le Pack Gaming Mario PDP Manette filaire + Casque filaire ...
29.99 € 49.99 €
Voir le deal

Fiche de personnage - Effet dossier médical

Test Mäven :: Catégorie #1 - La Tambouille :: Forum #1 - Rendus de LS
Aller en bas
Mäven
Mäven
Admin
Admin
Messages : 236
Points : 106113
Sexe : Masculin
Date d'inscription : 24/11/2009
Age Age : 30
Localisation : chez moi

Feuille de personnage
plouf mon champ RPG: plouf mon champ
https://maven.forumactif.org
+

OK Fiche de personnage - Effet dossier médical

Sam 20 Avr 2019 - 18:23

Fiche de personnage - Effet dossier médical


Hello !

Voilà une fiche personnage au style "dossier médical". Voilà l'aperçu :

Prénom I. Nom

IDENTITE
avatar
  • Nom : ..................
  • Prénom : ..................
  • Date de naissance : ...........
  • Race : ..................
  • Information : ..................
  • Information : ..................
  • Information : ..................
  • Information : ..................
  • Information : ..................
DOSSIER MEDICAL
Physique :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.

Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci.

Psychique :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.

Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci.

ANTECEDANTS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.

Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.

Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci.


Pour utiliser sur ton propre forum

Si tu souhaite utiliser ce code pour ton propre forum, tu peux mettre la CSS directement dans ta feuille de style CSS (PA > Affichage > Couleurs > Feuille de style CSS).
Exclamation La CSS n'est pas commentée. Si tu as la moindre question pour la compréhension ou la personnalisation je serai ravie de te répondre.
Code:
/******Fiche personnage*******/
                #Maven_fiche_perso{
        width:600px;
        min-height:300px;
        background:url('https://i.servimg.com/u/f18/19/07/02/66/fond10.png');
        font-family:'Courier New';
 text-align:justify;
        color: #fff;
        position:relative;
        margin:auto;
        padding:10px;
        border:#000 1px solid;
        }
        #onglet_nom{
        min-width:150px;
        width:auto;
        height:50px;
        background:url('https://i.servimg.com/u/f18/19/07/02/66/fond10.png');
        padding:0 10px;
        text-align:center;
        position:absolute;
        left:-112px;
        top:75px;
        border:#000 1px solid;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        transform:rotate(-90deg);
        }
 .d-flex{
 display:flex;
 align-items:center;
 }
 .b-radius{
 border-radius: 20px;
        border:#000 solid 1px;
 }
        #Maven_fiche_perso img{
        margin:5px;
        width:200px;
        height:300px;
        }
        #Maven_fiche_perso #identite, #Maven_fiche_perso #descriptions, #Maven_fiche_perso #histoire{
        background-color:#e0dbce;
        color:black;
        margin: 10px;
        padding: 5px;
        min-height: 225px;
        font-size:13px;
        }
        #Maven_fiche_perso .titre{
        padding:0 0 10px 0;
        text-align:center;
        font-size:20px;
        color:#664D08;
        }
        #Maven_fiche_perso #descriptions .titre{
        font-size:16px;
        text-decoration:underline;
        }
        #Maven_fiche_perso #identite ul li ,#Maven_fiche_perso #descriptions p, #Maven_fiche_perso #histoire p{
        padding:5px;
        margin:2px 0;
        }
         #Maven_fiche_perso p{
         text-indent:10px;
font-family:'Courier New';
         }
        #Maven_fiche_perso #copyright, #Maven_fiche_perso #copyright a{
        color:#fff;
        font-size:11px;
        text-decoration:none;
        }
 #Maven_fiche_perso p#copyright{
 text-align:center;
 }
/******Fin fiche personnage*******/

Et la partie HTML pour tes sujets :
Arrow Ne pas retirer les commentaires
Code:
<!-- -->
: ils permettent d'aérer le code sans créer d'espaces non voulus dans la fiche. Pour plus d'informations, [ rendez-vous ici]
Code:
<div id="Maven_fiche_perso" class="b-radius"><!--
        --><div id="onglet_nom"><!--
        --><p>Prénom I. Nom</p><!--
        --></div><!--
        --><div id="identite" class="b-radius"><!--
        --><div class="titre">IDENTITE</div><!--
        --><div class="d-flex"><!--
        --><img src="https://i.servimg.com/u/f68/19/36/67/70/vide10.png" alt="avatar" /><!--
        --><ul><!--
        --><li>Nom : .................. </li><!--
        --><li>Prénom : .................. </li><!--
        --><li>Date de naissance : ........... </li><!--
        --><li>Race : .................. </li><!--
        --><li>Information : .................. </li><!--
        --><li>Information : .................. </li><!--
        --><li>Information : .................. </li><!--
        --><li>Information : .................. </li><!--
        --><li>Information : .................. </li><!--
        --></ul><!--
        --></div><!--
        --></div><!--
        --><div id="descriptions" class="b-radius"><!--
        --><div class="titre">DOSSIER MEDICAL</div><!--
        --><div class="titre">Physique : </div><!--
        --><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.</p><p> Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci. </p><!--
        --><div class="titre">Psychique : </div><!--
        --><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.</p><p>Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci. </p><!--
        --></div><!--
        --><div id="histoire" class="b-radius"><!--
        --><div class="titre">ANTECEDANTS</div><!--
        --><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.</p><p>Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.</p><p>Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci.</p><!--
        --></div><!--
        --><p id="copyright"><!--
        --><a href="http://tambouille-raleuses.forumactif.com/">Codage réalisé par Mäven</a><!--
        --></p><!--
        --></div>

Pour utiliser sur un forum qui n'est pas le tien

Si tu veux créer ta propre fiche sur un forum qui n'est pas le tien tu n'as pas accès au PA. Tu peux tout de même utiliser cette fiche avec le code qui suit.
Arrow Ne pas retirer les commentaires
Code:
<!-- -->
ils permettent d'aérer le code sans créer d'espaces non voulus dans la fiche. Pour plus d'informations, [ rendez-vous ici]

Code:
<style>#Maven_fiche_perso{width:600px;min-height:300px;background:url(https://i.servimg.com/u/f18/19/07/02/66/fond10.png);font-family:'Courier New';text-align:justify;color:#fff;position:relative;margin:auto;padding:10px;border:#000 1px solid}#onglet_nom{min-width:150px;width:auto;height:50px;background:url(https://i.servimg.com/u/f18/19/07/02/66/fond10.png);padding:0 10px;text-align:center;position:absolute;left:-112px;top:90px;border:#000 1px solid;border-top-left-radius:20px;border-top-right-radius:20px;transform:rotate(-90deg)}.d-flex{display:flex;align-items:center}.b-radius{border-radius:20px;border:#000 solid 1px}#Maven_fiche_perso img{margin:5px;width:200px;height:300px}#Maven_fiche_perso #descriptions,#Maven_fiche_perso #histoire,#Maven_fiche_perso #identite{background-color:#e0dbce;color:#000;margin:10px;padding:5px;min-height:225px;font-size:13px}#Maven_fiche_perso .titre{padding:0 0 10px 0;text-align:center;font-size:20px;color:#664d08}#Maven_fiche_perso #descriptions .titre{font-size:16px;text-decoration:underline}#Maven_fiche_perso #descriptions p,#Maven_fiche_perso #histoire p,#Maven_fiche_perso #identite ul li{padding:5px;margin:2px 0;}#Maven_fiche_perso p{text-indent:10px;font-family:'Courier New';}#Maven_fiche_perso #copyright,#Maven_fiche_perso #copyright a{color:#fff;font-size:11px;text-decoration:none}#Maven_fiche_perso p#copyright{text-align:center;}</style>
<div id="Maven_fiche_perso" class="b-radius"><!--
        --><div id="onglet_nom"><!--
        --><p>Prénom I. Nom</p><!--
        --></div><!--
        --><div id="identite" class="b-radius"><!--
        --><div class="titre">IDENTITE</div><!--
        --><div class="d-flex"><!--
        --><img src="https://i.servimg.com/u/f68/19/36/67/70/vide10.png" alt="avatar" /><!--
        --><ul><!--
        --><li>Nom : .................. </li><!--
        --><li>Prénom : .................. </li><!--
        --><li>Date de naissance : ........... </li><!--
        --><li>Race : .................. </li><!--
        --><li>Information : .................. </li><!--
        --><li>Information : .................. </li><!--
        --><li>Information : .................. </li><!--
        --><li>Information : .................. </li><!--
        --><li>Information : .................. </li><!--
        --></ul><!--
        --></div><!--
        --></div><!--
        --><div id="descriptions" class="b-radius"><!--
        --><div class="titre">DOSSIER MEDICAL</div><!--
        --><div class="titre">Physique : </div><!--
        --><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.</p><p> Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci. </p><!--
        --><div class="titre">Psychique : </div><!--
        --><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.</p><p>Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci. </p><!--
        --></div><!--
        --><div id="histoire" class="b-radius"><!--
        --><div class="titre">ANTECEDANTS</div><!--
        --><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.</p><p>Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam odio sapien, consequat a est a, ornare molestie nunc. Integer cursus consectetur turpis egestas gravida. Curabitur porttitor risus eu ante auctor, non iaculis nulla vulputate. Pellentesque elementum maximus eros ac eleifend. Nullam et arcu lorem. Nunc lacinia et nulla eget imperdiet. Praesent nec commodo elit. Donec ullamcorper iaculis sem, vitae mollis ex laoreet et.</p><p>Donec gravida lacinia vestibulum. Donec pulvinar posuere ligula quis mattis. Nam ac pulvinar lectus. Vivamus tristique massa rutrum magna tempor, laoreet pellentesque mauris semper. Donec accumsan malesuada justo, et malesuada ante rhoncus sit amet. Fusce a nibh eget turpis mattis molestie. Cras et efficitur purus. Aenean ante ipsum, imperdiet ut tempor nec, vulputate ut orci.</p><!--
        --></div><!--
        --><p id="copyright"><!--
        --><a href="http://tambouille-raleuses.forumactif.com/">Codage réalisé par Mäven</a><!--
        --></p><!--
        --></div>


Si tu as la moindre question ou si tu n'arrives pas à personnaliser cette fiche, n'hésites pas à demander  




Dernière édition par Mäven le Mar 4 Juin 2019 - 21:54, édité 1 fois
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum