modèle

02/01/2021

fiche de présentation

modèle

On vous propose un modèle de fiche que vous pouvez utiliser ! N'oubliez pas d'inscrire des tw (trigger warning) aux endroits de votre fiche où ceux-ci sont nécessaires pour ne pas heurter vos lecteurs !

Code:

[center]<ww>tw. écrire ici les tw / cw</ww>[/center] <link href="https://hanatsukisen.github.io/Busan-Vibe/uni_codage2.css" rel="stylesheet"><center><html><div class="overall_container"><div class="title_container"><ca>faceclaim</ca><r1>Nom Prénom</r1><ca>pseudo</ca></div></div><div class="content_container"><div class="colone1"><div class="img_wrapper"><img style="width: 100%;height: 300px;border: solid 1px black;object-fit: cover;object-position: center;display: block;" src="https://2img.net/u/4115/44/23/16/avatars/1-37.jpg" alt=""><div class="img_content"> COULEURS FETICHES : <div align="center"><div class="r1ei" style="display: inline-block;width: 20px;border-radius: 20px;height: 20px;background: #7e84a5; margin-top: 3;"></div> <div class="r1ei" style="display: inline-block;width: 20px;border-radius: 20px;height: 20px;background: #6286a1; margin-top: 3;"></div> <div class="r1ei" style="display: inline-block;width: 20px;border-radius: 20px;height: 20px;background: #4f6778;   margin-top: 3;"></div><br></div> <suna3>CARACTERE</suna3> : écrire ici </div></div><div class="quote"><i>pretty quote, paroles, and tout ce que vous voulez plus ou moins long.</i></div></div><div class="colone2"><div class="basics"> <suna3>NOM PRENOM</suna3> : écrire ici <div class="ligne"></div> <suna3>DATE DE NAISSANCE, LIEU</suna3> : écrire ici <div class="ligne"></div> <suna3>ÂGE</suna3> : écrire ici <div class="ligne"></div> <suna3>NATIONALITÉ, ORIGINES</suna3> : écrire ici <div class="ligne"></div> <suna3>OCCUPATIONS</suna3> : écrire ici <div class="ligne"></div> <suna3>STATUT CIVIL ET ORIENTATION</suna3> : écrire ici <div class="ligne"></div> <suna3>STATUT FINANCIER</suna3> : écrire ici </div><div class="tags"><bgtag1>GROUPE</bgtag1><bgtag1>TYPE (m/p/l)</bgtag1><bgtag1>ASTRO</bgtag1></div></div></div> <div class="anecdotes"> écrire ici les anecdotes, ou l'histoire de ton personnage suffisamment complet et détaillé ! </div><div class="profil"><ca>pronoms</ca><div class="img_border_prez"><img style="width: 40px;Height: 40px;border-radius: 40px; object-fit: cover; object-position: center;" src="https://images2.imgbox.com/a3/69/Cjeys0Tc_o.png" alt=""></img></div><ca>crédits</ca></div></html> <style>.overall_container {width: 450px;display: flex;height: fit-content;<br />}.title_container {display: flex;width: 450px;background: white;border: solid 1px black;align-items: center;justify-content: space-between;padding: 10px 20px;border-bottom: none;}.content_container {display: flex;width: 450px;height: fit-content;}.colone1 {display: flex;flex-direction: column;align-items: center;width: 40%;height: 614px;border-left: var(--border);border-top: solid 1px var(--neutralDark);border-bottom:solid 1px var(--neutralDark);padding: 20px;border-right: none;background-color: var(--neutral);}.colone2 {display: flex;flex-direction: column;align-items: center;width: 60%;height: 614px;border-right: var(--border);border-left:solid 1px var(--neutralDark);border-top:solid 1px var(--neutralDark);background-color: var(--neutral);border-bottom:solid 1px var(--neutralDark);padding: 20px;text-align: justify;}.colone3 {display: flex;flex-direction: column;align-items: center;width: 60%;height: 500px;border-right: var(--border);border-left:solid 1px var(--neutralDark);border-top:solid 1px var(--neutralDark);background-color: var(--neutral);border-bottom:solid 1px var(--neutralDark);padding: 20px;text-align: justify;}.colone4 {display: flex;flex-direction: column;align-items: center;width: 40%;height: 500px;border-left: var(--border);border-top: solid 1px var(--neutralDark);border-bottom:solid 1px var(--neutralDark);padding: 20px;border-right: none;background-color: var(--neutral);}.img_wrapper {position:relative;overflow: hidden;}.img_content {opacity:0;transition: .25s;position: absolute;inset: 0;border: solid 1px black;background: rgb(255, 255, 255);}.img_content:hover{opacity:1;text-align: justify;overflow: auto;}.quote {width: 100%;height: 44px; font-size: 12px;margin-top: 13px;color: var(--neutralDark);overflow: auto;text-align: justify;padding-right: 20px;}.basics {width: 100%;height: 300px;border: solid 1px black;background-color: var(--contrast);padding: 20px;overflow: auto;font-size: var(--little-size);}.anecdotes {width: 409px ;border: solid 1px black;background-color: var(--contrast);height: 200px;margin-top: -240px;position: relative;padding: 20px;overflow: auto;font-size: var(--little-size);text-align: justify;}.tags {display: flex;justify-content: space-between; align-items: center;width: 100% ;height: 40px;margin-top: 14px;}.profil {display: flex;align-items: center;justify-content: space-between;width: 450px;border: solid 1px black;background-color: white;height: 70px;margin-top: 23px;padding: 0 20px;}bgtag1 {height: 20px; color: #fff;font-family: arial;font-size: 8px;letter-spacing: 2px;border-bottom: 1px solid #fff;margin-right: 5px;background-image: var(--gradient1);padding: 4px;border: var(--border);text-transform: uppercase;}.img_border_prez {width: 50px;height: 50px;border-radius: 50px;align-content: center;padding: 5px;border: solid 1px var(--neutralDark);display: flex;justify-content: center;align-items: center;}.ligne {background: var(--gradient1); width: 100%;height: 1px;}.histoirefiche {width: 409px;border: solid 1px black;background-color: var(--contrast);height: 568px;margin-top: -590px;position: relative;padding: 20px;overflow: auto;font-size: var(--little-size);text-align: justify;}.histoire{width: 409px;border: solid 1px black;background-color: var(--contrast);height: 457px;margin-top: -479px;position: relative;padding: 20px;overflow: auto;font-size: var(--little-size);text-align: justify;}</style></center>

Code:

<link href="https://hanatsukisen.github.io/Busan-Vibe/uni_codage2.css" rel="stylesheet"><div class="content"><center><div class="overall_container"><div class="title_container"><ca>titre</ca></div></div><div class="content_container"><div class="colone4"></div><div class="colone3"></div></div><div class="histoire"><br><br>écrire une petit histoire, si souhaité<br><br></div><br> <style>.overall_container {width: 450px;display: flex;height: fit-content;<br />}.title_container {display: flex;width: 450px;background: white;border: solid 1px black;align-items: center;justify-content: space-between;padding: 10px 20px;border-bottom: none;}.content_container {display: flex;width: 450px;height: fit-content;}.colone1 {display: flex;flex-direction: column;align-items: center;width: 40%;height: 614px;border-left: var(--border);border-top: solid 1px var(--neutralDark);border-bottom:solid 1px var(--neutralDark);padding: 20px;border-right: none;background-color: var(--neutral);}.colone2 {display: flex;flex-direction: column;align-items: center;width: 60%;height: 614px;border-right: var(--border);border-left:solid 1px var(--neutralDark);border-top:solid 1px var(--neutralDark);background-color: var(--neutral);border-bottom:solid 1px var(--neutralDark);padding: 20px;text-align: justify;}.colone3 {display: flex;flex-direction: column;align-items: center;width: 60%;height: 500px;border-right: var(--border);border-left:solid 1px var(--neutralDark);border-top:solid 1px var(--neutralDark);background-color: var(--neutral);border-bottom:solid 1px var(--neutralDark);padding: 20px;text-align: justify;}.colone4 {display: flex;flex-direction: column;align-items: center;width: 40%;height: 500px;border-left: var(--border);border-top: solid 1px var(--neutralDark);border-bottom:solid 1px var(--neutralDark);padding: 20px;border-right: none;background-color: var(--neutral);}.img_wrapper {position:relative;overflow: hidden;}.img_content {opacity:0;transition: .25s;position: absolute;inset: 0;border: solid 1px black;background: rgb(255, 255, 255);}.img_content:hover{opacity:1;text-align: justify;overflow: auto;}.quote {width: 100%;height: 44px; font-size: 12px;margin-top: 13px;color: var(--neutralDark);overflow: auto;text-align: justify;padding-right: 20px;}.basics {width: 100%;height: 300px;border: solid 1px black;background-color: var(--contrast);padding: 20px;overflow: auto;font-size: var(--little-size);}.anecdotes {width: 409px ;border: solid 1px black;background-color: var(--contrast);height: 200px;margin-top: -240px;position: relative;padding: 20px;overflow: auto;font-size: var(--little-size);text-align: justify;}.tags {display: flex;justify-content: space-between; align-items: center;width: 100% ;height: 40px;margin-top: 14px;}.profil {display: flex;align-items: center;justify-content: space-between;width: 450px;border: solid 1px black;background-color: white;height: 70px;margin-top: 23px;padding: 0 20px;}bgtag1 {height: 20px; color: #fff;font-family: arial;font-size: 8px;letter-spacing: 2px;border-bottom: 1px solid #fff;margin-right: 5px;background-image: var(--gradient1);padding: 4px;border: var(--border);text-transform: uppercase;}.img_border_prez {width: 50px;height: 50px;border-radius: 50px;align-content: center;padding: 5px;border: solid 1px var(--neutralDark);display: flex;justify-content: center;align-items: center;}.ligne {background: var(--gradient1); width: 100%;height: 1px;}.histoirefiche {width: 409px;border: solid 1px black;background-color: var(--contrast);height: 568px;margin-top: -590px;position: relative;padding: 20px;overflow: auto;font-size: var(--little-size);text-align: justify;}.histoire{width: 409px;border: solid 1px black;background-color: var(--contrast);height: 457px;margin-top: -479px;position: relative;padding: 20px;overflow: auto;font-size: var(--little-size);text-align: justify;}</style></center></div>

02/01/2021

tw. écrire ici les tw / cw

faceclaimNom Prénompseudo

COULEURS FETICHES :

CARACTERE : écrire ici

pretty quote, paroles, and tout ce que vous voulez plus ou moins long.

NOM PRENOM : écrire ici

DATE DE NAISSANCE, LIEU : écrire ici

ÂGE : écrire ici

NATIONALITÉ, ORIGINES : écrire ici

OCCUPATIONS : écrire ici

STATUT CIVIL ET ORIENTATION : écrire ici

STATUT FINANCIER : écrire ici

GROUPETYPE (m/p/l)ASTRO

écrire ici les anecdotes, ou l'histoire de ton personnage suffisamment complet et détaillé !

pronoms

crédits

02/01/2021

titre

écrire une petit histoire, si souhaité

colorimétrie

newsletter