Le deal à ne pas rater :
PC Portable Gamer 15.6″ Asus A15 TUF566QM-HN039T – FHD IPS 144Hz, ...
1349 €
Voir le deal

Pretty Girl
Pretty Girl

Fiche de présentation n°7 Empty Fiche de présentation n°7

Mar 6 Avr 2021 - 12:52
Fiche scénario disponible : ICI
si vous utiliser la fiche de présentation ainsi que la fiche de scénario vous n'avez pas besoin de remettre le CSS ils sont identiques.

Fiche de présentation n°7 Unknown

HTML


Code:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">
<div class="contenu"><div class="prenom2">Prénom Nom feat Célébrité</div><div class="interieur"><div class="haut"><img src="https://images2.imgbox.com/f5/1b/ximQTeCr_o.png"class="img"> <div class="texte"><aa>PRÉNOM NOM❀</aa> écrire ici <aa>AGE ❀</aa> écrire ici <aa>GROUPE ❀</aa> écrire ici <aa>ORIENTATION ❀</aa> écrire ici <aa>RACE ❀</aa> écrire ici <aa>STATUT ❀</aa> écrire ici <aa>MÉTIER / RANG ❀</aa> écrire ici <aa>NATIONALITÉ ❀</aa> écrire ici  <aa>CREDIT ❀</aa> avatar et icons

<aa>CAPACITÉS ❀</aa> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt ipsum sit amet sapien pellentesque id porta magna ullamcorper. Praesent ultrices sapien ac ligula condimentum accumsan. Nulla vel neque in nisi cursus pretium non et mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lacinia dolor sed enim dignissim sed fermentum neque eleifend. Cras laoreet rhoncus eros at molestie. Fusce purus neque, dapibus id vehicula vel, aliquam ac massa. Nam venenatis eleifend magna mattis vestibulum. Ut suscipit dignissim tortor, in sodales est hendrerit quis. Vestibulum cursus quam eget justo tempus lacinia. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Pellentesque congue sollicitudin ante, sit amet convallis arcu commodo eget. Fusce hendrerit posuere varius. Suspendisse sit amet tristique est.</div> <img src="https://images2.imgbox.com/f5/1b/ximQTeCr_o.png"class="img">
</div><div class="titre">Caractère</div><div class="caractere"><img src="https://images2.imgbox.com/ca/ba/x04UtRry_o.png"class="icons2"> <img src="https://images2.imgbox.com/ca/ba/x04UtRry_o.png"class="icons2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt ipsum sit amet sapien pellentesque id porta magna ullamcorper. Praesent ultrices sapien ac ligula condimentum accumsan. Nulla vel neque in nisi cursus pretium non et mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lacinia dolor sed enim dignissim sed fermentum neque eleifend. Cras laoreet rhoncus eros at molestie. Fusce purus neque, dapibus id vehicula vel, aliquam ac massa. Nam venenatis eleifend magna mattis vestibulum. Ut suscipit dignissim tortor, in sodales est hendrerit quis. Vestibulum cursus quam eget justo tempus lacinia. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Pellentesque congue sollicitudin ante, sit amet convallis arcu commodo eget. Fusce hendrerit posuere varius. Suspendisse sit amet tristique est.
</div><div class="titre">Once upon a time</div><div class="histoire"><img src="https://images2.imgbox.com/ca/ba/x04UtRry_o.png"class="icons"> <img src="https://images2.imgbox.com/ca/ba/x04UtRry_o.png"class="icons">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt ipsum sit amet sapien pellentesque id porta magna ullamcorper. Praesent ultrices sapien ac ligula condimentum accumsan. Nulla vel neque in nisi cursus pretium non et mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam lacinia dolor sed enim dignissim sed fermentum neque eleifend. Cras laoreet rhoncus eros at molestie. Fusce purus neque, dapibus id vehicula vel, aliquam ac massa. Nam venenatis eleifend magna mattis vestibulum. Ut suscipit dignissim tortor, in sodales est hendrerit quis. Vestibulum cursus quam eget justo tempus lacinia. Donec nulla neque, sagittis eget dignissim sed, euismod et tortor. Pellentesque congue sollicitudin ante, sit amet convallis arcu commodo eget. Fusce hendrerit posuere varius. Suspendisse sit amet tristique est.
</div> <div class="ligne"></div> <img src="https://images2.imgbox.com/d6/96/vVUrNosD_o.png"style="height:100px;float:left;padding-top:5px;"><div class="pseudo"><center><aa> Le vrai visage</aa> </center>
<aa>+ Surnom/pseudo :</aa> écrire ici <aa>+ Prénom :</aa>  écrire ici
<aa>+ Âge :</aa>  écrire ici  <aa>+ Pays/région :</aa>  écrire ici  <aa>+ Comment as-tu connu le forum ? :</aa>  écrire ici  <aa>+ Scénario ? Inventé ? Pré-lien ? :</aa>  écrire ici  <aa>+ DC ? :</aa>  écrire ici  <aa>+ Commentaire ? :</aa>  écrire ici  <aa>+ Besoin de parrainage :</aa>  écrire ici

[code]<st><pris>avatar célébrité</pris></st> + [url=URL du profil]Personnage[/url][/code]
 </div>
</div><div class="credit">@PrettyGirl</div></div>

CSS


Code:
/**------------------------Fiche de présentation Pretty Girl--------------------------------**/

.contenu {width: 475px; margin: auto; border: 1px solid #eee; padding: 10px;
overflow: auto;background-color:#BDBDBD;} /*attention aux informations inutiles qui polue le code il faut enlever 3 erreurs en tout*/
 
.prenom{font-size:25px;font-family: 'Open Sans Condensed', sans-serif;padding:10px;margin:1px;writing-mode:vertical-lr;float:right;height:525px;width:20px;}/*a quoi sert ce code ?*/

.prenom2{font-size:25px;font-family:'Open Sans Condensed',sans-serif;padding:10px;margin:1px;writing-mode:vertical-lr;float:right;height:680px;width:20px;background:linear-gradient(45deg, #DEDEDE, #ab2e37);text-align:justify;}

.interieur{width:430px;}

.haut{height:180px;display:flex;}

.img{float:left; height:160px; width:100px; border-radius: 20px 3px 3px 3px;object-fit:cover;} /*object-fit:cover permet de faire en sorte que l'image ne soit pas déformé et respecte la taille donnée, tu aurais pu faire autrement que faire une classe image ça prend de la place inutilement*/

.texte{color:black;width:21Opx;height:150px;overflow:auto; margin: 5px;padding: 1px; font-size:12px;float:left;text-align:justify;}/*attention aux informations inutiles qui polue le code il faut enlever 1 erreur en tout*/


.titre{font-size:15px;height:25px;font-family: 'Open Sans Condensed', sans-serif;text-align:center;background:linear-gradient(45deg, #DEDEDE, #ab2e37);height: auto;padding:2px;text-transform:uppercase;
}
 
.icons{width: 60px;height:60px;float:right;padding: 5px;border-radius:60px;}

.icons2{width:50px;height:50px;float:left;padding:5px;border-radius:50px;}

.histoire{max-height: 200px; text-align: justify;overflow:auto;padding:5px;margin-top:10px;}

.caractere{max-height:120px; text-align:justify;overflow:auto;padding:5px;margin-top:10px;}

.ligne {text-align:center;background:#ab2e37;height: 0.5px;margin-top: 10px;padding:2px;}

.pseudo {max-height:80px;padding:10px;text-align: justify;overflow:auto;margin-top:5px;}

.credit {text-align:center;font-size:8px;}

  .attentes{text-align: justify;padding:5px;margin-top:10px;}
Revenir en haut

Partenaires footer

Masqué RPG-Chevalier Altered Tokyo Les mythes d'YsarillRealm EnchantedAbstract Logo WyvArtem