Modèle de fiche de présentation et de liens

Nom

DOSSIER CIVIL

Nom complet : Celle sur votre carte d'identité.
Pseudonyme : Comment le peuple vous appelle-t-il ?
Âge :
Genre :
Métier / Etudes : Que faites-vous ? Êtes-vous étudiant ? De quelle classe et de quelle filière ?
Origines : D'où venez vous ?
Alignement : Héros / Vilain / Neutre / Autre
Statut marital & Orientation :  

Alter

Nom et petite description de l'alter. Vous pouvez également insérer une courte anecdote, par exemple de sa première utilisation !

Caractère

Décrivez nous votre personnalité, vous pouvez aussi y mettre des anecdotes

Particularités / Anecdotes

Décrivez nous ce qui vous démarque ou un fait saillant.

Histoire
Citation

Votre histoire, à votre manière !

Liens

Nom du lien - Blablabla

Nom du lien - Blablabla

Nom du lien - Blablabla

Votre âge :
Présentez vous un peu :
Un petit mot ?

Hors RP
Votre pseudo

Code:

<div class="fiche-pres"><div class="part1"><div class="gif1"><img src="https://www.icegif.com/wp-content/uploads/2022/09/icegif-777.gif"><span>Nom </span></div><div class="cont"><h2>DOSSIER CIVIL</h2><p>[b]Nom complet :[/b] Celle sur votre carte d'identité.
[b]Pseudonyme :[/b] Comment le peuple vous appelle-t-il ?
[b]Âge :[/b]
[b]Genre :[/b]
[b]Métier / Etudes :[/b] Que faites-vous ? Êtes-vous étudiant ? De quelle classe et de quelle filière ?
[b]Origines :[/b] D'où venez vous ?
[b]Alignement :[/b] Héros / Vilain / Neutre / Autre
[b]Statut marital & Orientation : [/b]  </p></div></div>
<!-- Partie Alter --><div class="part2"><div><h2>Alter</h2><p>Nom et petite description de l'alter. Vous pouvez également insérer une courte anecdote, par exemple de sa première utilisation !</p></div></div><!-- Fin de la partie questions / anecdotes -->
<div class="part3"><div><h2>Caractère</h2><p class="bloc">Décrivez nous votre personnalité, vous pouvez aussi y mettre des anecdotes</p></div><div class="entredeux1"></div><div><h2>Particularités / Anecdotes</h2><p class="bloc">Décrivez nous ce qui vous démarque ou un fait saillant. </p></div></div>
<div class="part4"><h2>Histoire
<em>Citation</em></h2><div class="img-story"><img src="https://media0.giphy.com/media/X2FDYSjwvJyWA/giphy.gif?cid=790b76116rw56bvvwzyylbyw137wm49s5t4z3zbyra10vyrc&ep=v1_gifs_search&rid=giphy.gif&ct=g"><div class="entredeux2"></div><img src="https://img.wattpad.com/c8a25f4f7fa9348674522cfadf3604a75e0a89ee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f596561507047316c3654315330413d3d2d3934343930393532392e313632666131623865373139333434363236353535313236333435392e676966"></div><div class="story">Votre histoire, à votre manière !</div></div>
<div class="partpv"><h2>Liens</h2>
<div><img src="https://gifdb.com/images/high/my-hero-academia-ochaco-and-deku-gdgghbcd5gs4jwva.gif"><span class="bloc lien"><strong>Nom du lien</strong> - Blablabla</span></div>
<div><img src="https://gifdb.com/images/high/my-hero-academia-ochaco-and-deku-gdgghbcd5gs4jwva.gif"><span class="bloc lien"><strong>Nom du lien</strong> - Blablabla</span></div>
<div><img src="https://gifdb.com/images/high/my-hero-academia-ochaco-and-deku-gdgghbcd5gs4jwva.gif"><span class="bloc lien"><strong>Nom du lien</strong> - Blablabla</span></div></div>
<div class="part5"><div class="bloc hrp">[b]Votre âge :[/b]
[b]Présentez vous un peu : [/b]
[b]Un petit mot ?[/b]</div><div class="hrp-2"><h2>Hors RP
<em>Votre pseudo</em></h2><img src="https://i.pinimg.com/originals/47/96/bd/4796bdf3dd72c63b5fb4edc738f3a703.gif"></div></div>
</div>

Code:

<div class="fiche-pres"><div class="part1"><div class="gif1"><img src="https://www.icegif.com/wp-content/uploads/2022/09/icegif-777.gif"><span>Nom </span></div><div class="cont"><h2>DOSSIER CIVIL</h2><p>[b]Nom complet :[/b] Celle sur votre carte d'identité.
[b]Pseudonyme :[/b] Comment le peuple vous appelle-t-il ?
[b]Âge :[/b]
[b]Genre :[/b]
[b]Métier / Etudes :[/b] Que faites-vous ? Êtes-vous étudiant ? De quelle classe et de quelle filière ?
[b]Origines :[/b] D'où venez vous ?
[b]Alignement :[/b] Héros / Vilain / Neutre / Autre
[b]Statut marital & Orientation : [/b]  </p></div></div>
<!-- Partie Alter --><div class="part2"><div><h2>Alter</h2><p>Nom et petite description de l'alter. Vous pouvez également insérer une courte anecdote, par exemple de sa première utilisation !</p></div></div><!-- Fin de la partie questions / anecdotes -->
<div class="part3"><div><h2>Caractère</h2><p class="bloc">Décrivez nous votre personnalité, vous pouvez aussi y mettre des anecdotes</p></div><div class="entredeux1"></div><div><h2>Particularités / Anecdotes</h2><p class="bloc">Décrivez nous ce qui vous démarque ou un fait saillant. </p></div></div>
<div class="part4"><h2>Histoire
<em>Citation</em></h2><div class="img-story"><img src="https://media0.giphy.com/media/X2FDYSjwvJyWA/giphy.gif?cid=790b76116rw56bvvwzyylbyw137wm49s5t4z3zbyra10vyrc&ep=v1_gifs_search&rid=giphy.gif&ct=g"><div class="entredeux2"></div><img src="https://img.wattpad.com/c8a25f4f7fa9348674522cfadf3604a75e0a89ee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f596561507047316c3654315330413d3d2d3934343930393532392e313632666131623865373139333434363236353535313236333435392e676966"></div><div class="story">Votre histoire, à votre manière !</div></div>
<div class="part5"><div class="bloc hrp">[b]Votre âge :[/b]
[b]Présentez vous un peu : [/b]
[b]Un petit mot ?[/b]</div><div class="hrp-2"><h2>Hors RP
<em>Votre pseudo</em></h2><img src="https://i.pinimg.com/originals/47/96/bd/4796bdf3dd72c63b5fb4edc738f3a703.gif"></div></div>
</div>

Code:

<div class="fiche-pres"><div class="partpv"><h2>Liens</h2>
<div><img src="https://gifdb.com/images/high/my-hero-academia-ochaco-and-deku-gdgghbcd5gs4jwva.gif"><span class="bloc lien"><strong>Nom du lien</strong> - Blablabla</span></div>
<div><img src="https://gifdb.com/images/high/my-hero-academia-ochaco-and-deku-gdgghbcd5gs4jwva.gif"><span class="bloc lien"><strong>Nom du lien</strong> - Blablabla</span></div>
<div><img src="https://gifdb.com/images/high/my-hero-academia-ochaco-and-deku-gdgghbcd5gs4jwva.gif"><span class="bloc lien"><strong>Nom du lien</strong> - Blablabla</span></div></div>

Veillez prendre note que le code peut mal s'intégrer aux codes de liens déjà existants. Un nouveau poste est suggéré. Pour remplir les barres chercher les value="X" . À noter que pour la barre d'amour, il est possible d'avoir un négatif donc les barres sont sur 50 au lieu 100. Pour avoir un amour négatif, chercher class="progressBar Neg" value="X" max="50" et remplacer X la valeur désiré. Un peu plus loin, vous trouverez class="progressBar Pos" value="X" max="50">. Vous devez mettre 0 à la place du X. Pour un amour positif. c'est l'inverse. class="progressBar Neg" value="X" max="50" doit être à 0 et  class="progressBar Pos" value="X" max="50"> doit avoir votre valeur. La première a le tag Neg pour négatif et la deuxième à Pos pour positif.

Les autres barres sont sur 100% et il n'y a qu'une valeur nécessaire.

Code:

<div class="fiche-pres"><h2>Barres d'affinité</h2><div class="OtomeGame">
[right]<img src="https://i.servimg.com/u/f47/11/04/94/76/fulllo10.png"/> = Amour <img src="https://i.servimg.com/u/f47/11/04/94/76/fullfa10.png"/> = Amitier  <img src="https://i.servimg.com/u/f47/11/04/94/76/fullen10.png"/> = Ennemis[/right]

<!--- Personne1 ---><div class="Otome"><strong>PRENOM1</strong><div class="iconLien"><img src="LIEN AVATAR1" /></div><div class="Affection_Score"><img src="https://i.servimg.com/u/f47/11/04/94/76/nolove10.png"/> <div class="container"><progress class="progressBar Neg" value="X" max="50"></progress><progress class="progressBar Pos" value="X" max="50"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fulllo10.png"/><br/><img src="https://i.servimg.com/u/f47/11/04/94/76/nofav10.png"/> <div class="container"><progress class="Fav" value="X" max="100"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fullfa10.png"/><br/><img src="https://i.servimg.com/u/f47/11/04/94/76/noenne10.png"/> <div class="container"><progress class="Die" value="X" max="100"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fullen10.png"/></div></div><!--- Personne2 ---><div class="Otome"><strong>PRENOM2</strong><div class="iconLien"><img src="LIEN AVATAR2" /></div><div class="Affection_Score"><img src="https://i.servimg.com/u/f47/11/04/94/76/nolove10.png"/> <div class="container"><progress class="progressBar Neg" value="X" max="50"></progress><progress class="progressBar Pos" value="X" max="50"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fulllo10.png"/><br/><img src="https://i.servimg.com/u/f47/11/04/94/76/nofav10.png"/> <div class="container"><progress class="Fav" value="X" max="100"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fullfa10.png"/></div></div><!--- Personne3 ---><div class="Otome"><strong>PRENOM3</strong><div class="iconLien"><img src="LIEN AVATAR3" /></div><div class="Affection_Score"><img src="https://i.servimg.com/u/f47/11/04/94/76/nolove10.png"/> <div class="container"><progress class="progressBar Neg" value="X" max="50"></progress><progress class="progressBar Pos" value="X" max="50"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fulllo10.png"/><br/><img src="https://i.servimg.com/u/f47/11/04/94/76/nofav10.png"/> <div class="container"><progress class="Fav" value="X" max="100"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fullfa10.png"/></div></div><!--- Personne4 ---><div class="Otome"><strong>PRENOM4</strong><div class="iconLien"><img src="LIEN AVATAR4" /></div><div class="Affection_Score"><img src="https://i.servimg.com/u/f47/11/04/94/76/nolove10.png"/> <div class="container"><progress class="progressBar Neg" value="X" max="50"></progress><progress class="progressBar Pos" value="X" max="50"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fulllo10.png"/><br/><img src="https://i.servimg.com/u/f47/11/04/94/76/nofav10.png"/> <div class="container"><progress class="Fav" value="X" max="100"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fullfa10.png"/></div></div>

</div></div>

<style>.Affection_Score img, .Affection_Score .container {display:inline-block;} .container {width:102px; height:10px; border-radius: 20px; overflow:hidden; border:1px solid darkgrey;} .Neg {transform:rotate(180deg);border-radius: 20px 0px 0px 20px;} progress {width: 50px; height : 10px;} progress::-webkit-progress-bar {background-color: #eeeeee;} .Neg::-webkit-progress-value {background-color: #F88E86;} .Pos { border-left: 2px solid black;} .Pos::-webkit-progress-value {background-color: #8BC9A1;} .iconLien img {border-radius: 5%;border: #d71826 3px solid;object-fit: cover;display: block;width: 150px;height: 150px;} .Otome {width:150px;margin:0px 25px;vertical-align:top;display:inline-block;} .OtomeGame {display:inline-block;} .Fav::-webkit-progress-value {background-color: #9fc5e8;} .Fav::-webkit-progress-bar, .Die::-webkit-progress-bar {width: 100px;} .Die::-webkit-progress-value {background-color: #351c75;}</style>

Ajouter directement à la suite du gros bloc des personnes sans espace. Il devrait y avoir ensuite un saut de ligne et deux < /div >.

Code:

<!--- PersonneX ---><div class="Otome"><strong>PRENOM</strong><div class="iconLien"><img src="LIEN AVATAR" /></div><div class="Affection_Score"><img src="https://i.servimg.com/u/f47/11/04/94/76/nolove10.png"/> <div class="container"><progress class="progressBar Neg" value="X" max="50"></progress><progress class="progressBar Pos" value="X" max="50"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fulllo10.png"/><br/><img src="https://i.servimg.com/u/f47/11/04/94/76/nofav10.png"/> <div class="container"><progress class="Fav" value="X" max="100"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fullfa10.png"/><br/><img src="https://i.servimg.com/u/f47/11/04/94/76/noenne10.png"/> <div class="container"><progress class="Die" value="X" max="100"></progress></div> <img src="https://i.servimg.com/u/f47/11/04/94/76/fullen10.png"/></div></div>