La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
La tambouille des râleuses

Tutoriels, libre-service, entraide et partage en gestion de forums, animation et codage (HTML, CSS, Javascript, Template) pour forum sous ForumActif.

Le deal à ne pas rater :
Funko POP! Jumbo One Piece Kaido Dragon Form : où l’acheter ?
Voir le deal

Fiche de personnage - Effet dossier médical

La tambouille des râleuses :: Coup de pouce :: Codes en libre-service
Répondre au sujet
Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Très peu présente en ce moment Sad
----
Idea Viens papoter avec nous sur le discord
Messages : 4055
https://tambouille-raleuses.forumactif.com/
+

Fiche de personnage - Effet dossier médical Empty 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  


Revenir en haut
La tambouille des râleuses :: Coup de pouce :: Codes en libre-service
Répondre au sujet
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses

•