Qui dit malle, dit choses à y ranger. Une liste de modèles de codes en libre-service a été créé rien que pour vous. Vous trouverez ci-dessous un modèle pour les relations, un tracker de rp, un répertoire pour les sms.

Vous pourrez modifier les couleurs en fonction des groupes si vous le souhaitez. Tout est expliqué par la suite.

— Modèle pour les relations
— Modèle tracker rp
— Modèle répertoire de sms
— Modèle boîte mails
— Modèle Instagrum

Pour un peu plus de personnalisation vous souhaitez changer la couleur du modèle pour qu'il corresponde au groupe souhaité. Pour ce faire vous n'avez qu'à remplacer l'id="gold" de la première div par le nom de groupe désiré.

Pour les humains mettez "human"
Pour les lycans mettez "lycan"
Pour les sorcières mettez "witch"
Pour les vampires mettez "vampire"

Code:

<div id="gold" class="rela-container"><div class="rela-colo"><div class="rela-colo-icon">

Code:

<div id="gold" class="rela-container"><div class="rela-colo"><div class="rela-colo-icon"><!--
-->
<!-- ICON 125x125
--><!--
--><img src="http://via.placeholder.com/125"class="rela-colo-icon"/></div><!--
--><!-- PRENOM & NOM DU PERSONNAGE
--><!--
--><div class="about-name">Firstname Lastname</div><!--
--><!-- PARTIE INFORMATIONS
--><!--
--><div class="rela-inf"><i class="th th-acorn"></i> Surnom</div><!--
--><div class="rela-inf"><i class="fa-solid fa-cake-candles"></i> Âge</div><!--
--><div class="rela-inf"><i class="fa-solid fa-address-card"></i> Nationalité</div><!--
--><div class="rela-inf"><i class="ra ra-book"></i> Groupe</div><!--
--><div class="rela-inf"><i class="fa-solid fa-pepper-hot"></i> Sexualité</div><!--
--><div class="rela-inf"><i class="fa-solid fa-graduation-cap"></i> Job</div><!--
--><div class="rela-inf"><i class="fa-solid fa-mountain"></i> Info</div><!--
--><div class="rela-inf"><i class="ra ra-bleeding-eye"></i> Info</div><!--
--><div class="rela-inf"><i class="fa-solid fa-ice-cream"></i> Info</div><!--
--><div class="rela-inf2"><!-- LIEN TELEPHONE
--><a href="" class="rel-ico" title="Téléphone"><i class="fa-solid fa-mobile-screen-button"></i></a> <!-- LIEN MALLE
--><a href="" class="rel-ico" title="Malle"><i class="fa-solid fa-suitcase"></i></a> <!-- LIEN SPOTIFY
--><a href="" class="rel-ico" title="Spotify"><i class="fa-brands fa-spotify"></i></a></div></div>
<div class="about-container"><!--
--><!-- PARTIE PERSONNAGE
-->
<span class="about-title">About me</span>

<div class="about-resum">Froth, fair trade dark, froth white cream strong, spoon whipped, mug siphon foam viennese turkish, ristretto, cappuccino single shot, dripper body barista arabica iced brewed steamed. Filter, grinder, filter mocha sit breve french press dripper spoon saucer at breve steamed strong. Caffeine cup kopi-luwak milk cultivar aroma aromatic crema lungo froth, con panna robust siphon cappuccino trifecta est robust. Instant macchiato coffee, cup, chicory, grinder body, crema, robusta foam, id americano bar  ristretto robust instant ristretto acerbic, that brewed espresso sugar macchiato crema. Affogato, whipped extraction, to go, extraction cream cup brewed chicory, coffee sit, seasonal skinny white trifecta, espresso, extraction whipped seasonal arabica percolator. Single origin so, ristretto cup turkish latte froth and, caffeine eu cream, sit, galão sweet, that est iced, filter, white, aged beans grinder skinny americano.
<span class="hash">#détail</span> <span class="hash">#défaut</span> <span class="hash">#qualité</span> <span class="hash">#traitdecaractère</span> <span class="hash">#infoenvrac</span> <span class="hash">#vieperso</span> <span class="hash">#vdm</span>
</div>
<!--
--><!-- FIN PARTIE PERSONNAGE
-->
<!--
--><!-- PARTIE RECHERCHE
--><span class="about-title">Wanted</span>

<div class="about-resum">Froth, fair trade dark, froth white cream strong, spoon whipped, mug siphon foam viennese turkish, ristretto, cappuccino single shot, dripper body barista arabica iced brewed steamed. Filter, grinder, filter mocha sit breve french press dripper spoon saucer at breve steamed strong. Caffeine cup kopi-luwak milk cultivar aroma aromatic crema lungo froth, con panna robust siphon cappuccino trifecta est robust. Instant macchiato coffee, cup, chicory, grinder body, crema, robusta foam, id americano bar  ristretto robust instant ristretto acerbic, that brewed espresso sugar macchiato crema. Affogato, whipped extraction, to go, extraction cream cup brewed chicory, coffee sit, seasonal skinny white trifecta, espresso, extraction whipped seasonal arabica percolator. Single origin so, ristretto cup turkish latte froth and, caffeine eu cream, sit, galão sweet, that est iced, filter, white, aged beans grinder skinny americano.
</div><!--
--><!-- FIN PARTIE RECHERCHE
-->
<!--
--></div></div>

Pour modifier les relations en fonction du groupe du personnage, c'est la même chose. Vous n'avez qu'à modifier l'id.

Code:

<div id="witch" class="ship-full">

Vous pouvez aussi le faire pour la nature du lien. Trois couleurs sont disponibles.

En vert c'est "positif"
En bleu c'est "neutre"
En rouge c'est "negatif"

Code:

<span id="positif">Nature du lien - positif</span>

Code:

<div id="gold" class="ship-container"><div class="ship-bann"><div class="ship-title">Relationship</div><!--
--><!-- IMAGE BANNIERE 600x150 --><!--
--><img src="https://i.imgur.com/a8v2lwL.jpg"/></div><!--
--><!-- DEBUT DU LIEN --><!--
--><div id="witch" class="ship-full"><div class="ship-full-inf"><!--
--><!-- IMAGE FOND 600x200 --><!--
--><img src="https://i.imgur.com/FcipgbB.jpg"/><!--
--><!-- PRENOM & NOM --><!--
--><div class="ship-full-title">Firstname Lastname</div><!--
--><!-- DESCRIPTION DU LIEN --><!--
--><div class="ship-full-lien">Filter beans a, body froth barista redeye ristretto. Affogato filter, grinder plunger pot, filter robusta americano dripper aroma macchiato cultivar. Decaffeinated ut lungo sweet steamed, single shot, eu spoon foam body breve. Sit est, affogato iced a sweet doppio. Ut aromatic, shop espresso aroma siphon latte sugar single shot steamed.  Robusta, id, caffeine, seasonal, cortado kopi-luwak et breve qui mazagran. Mocha pumpkin spice, and frappuccino aromatic robusta crema a wings. Body mug barista variety crema aroma aromatic robust acerbic filter. Caramelization café au lait chicory. Robusta, id, caffeine, seasonal, cortado kopi-luwak et breve qui mazagran. </div><!--
--><div class="ship-full-nat"><!--
--><!-- MODIFIER L'ID POUR CHOISIR LA NATURE DU LIEN --><!--
--><span id="positif">Nature du lien - positif</span></div></div><!--
--><!-- PARTIE AVATAR
--><!--
--><div class="ship-full-ava"><!--
--><!-- AVATAR 200x200 MINIMUM --><!--
--><img src="https://i.imgur.com/tsEblOM.jpg"/><!--
--><!-- PARTIE INFO EN VRAC --><!--
--><div class="ship-full-hash"><span><i class="fa-solid fa-wand-magic-sparkles"></i> Type de sorcier</span>
<span><i class="fa-solid fa-mug-saucer"></i> Profession</span>
<span><i class="fa-solid fa-globe"></i> Rencontrer "<a href="">ici</a>"</span>
<span><i class="fa-solid fa-comment"></i> Période de la rencontre</span>
<span><i class="fa-solid fa-pizza-slice"></i> Autre détail</span>
</div></div></div><!--
--><!-- FIN DU LIEN --><!--
--><!--
--><!--
--><!--
--><!-- DEBUT DU LIEN --><!--
--><div id="vampire" class="ship-full"><div class="ship-full-inf"><!--
--><!-- IMAGE FOND 600x200 --><!--
--><img src="https://i.imgur.com/5A7uOdr.png"/><!--
--><!-- PRENOM & NOM --><!--
--><div class="ship-full-title">Firstname Lastname</div><!--
--><!-- DESCRIPTION DU LIEN --><!--
--><div class="ship-full-lien">Filter beans a, body froth barista redeye ristretto. Affogato filter, grinder plunger pot, filter robusta americano dripper aroma macchiato cultivar. Decaffeinated ut lungo sweet steamed, single shot, eu spoon foam body breve. Sit est, affogato iced a sweet doppio. Ut aromatic, shop espresso aroma siphon latte sugar single shot steamed.  Robusta, id, caffeine, seasonal, cortado kopi-luwak et breve qui mazagran. Mocha pumpkin spice, and frappuccino aromatic robusta crema a wings. Body mug barista variety crema aroma aromatic robust acerbic filter. Caramelization café au lait chicory. Robusta, id, caffeine, seasonal, cortado kopi-luwak et breve qui mazagran. </div><!--
--><div class="ship-full-nat"><!--
--><!-- MODIFIER L'ID POUR CHOISIR LA NATURE DU LIEN --><!--
--><span id="neutre">Nature du lien - neutre</span></div></div><!--
--><!-- PARTIE AVATAR
--><!--
--><div class="ship-full-ava"><!--
--><!-- AVATAR 200x200 MINIMUM --><!--
--><img src="https://i.imgur.com/T5YwY1E.jpg"/><!--
--><!-- PARTIE INFO EN VRAC --><!--
--><div class="ship-full-hash"><span><i class="th-bat"></i> Type de vampire </span>
<span><i class="fa-solid fa-mug-saucer"></i> Profession</span>
<span><i class="fa-solid fa-globe"></i> Rencontrer "<a href="">ici</a>"</span>
<span><i class="fa-solid fa-comment"></i> Période de la rencontre</span>
<span><i class="fa-solid fa-pizza-slice"></i> Autre détail</span>
</div></div></div><!--
--><!-- FIN DU LIEN --><!--
--><!--
--><!--
--><!--
--><!--
--><!-- DEBUT DU LIEN --><!--
--><div id="lycan" class="ship-full"><div class="ship-full-inf"><!--
--><!-- IMAGE FOND 600x200 --><!--
--><img src="https://i.imgur.com/d3msczt.jpg"/><!--
--><!-- PRENOM & NOM --><!--
--><div class="ship-full-title">Firstname Lastname</div><!--
--><!-- DESCRIPTION DU LIEN --><!--
--><div class="ship-full-lien">Filter beans a, body froth barista redeye ristretto. Affogato filter, grinder plunger pot, filter robusta americano dripper aroma macchiato cultivar. Decaffeinated ut lungo sweet steamed, single shot, eu spoon foam body breve. Sit est, affogato iced a sweet doppio. Ut aromatic, shop espresso aroma siphon latte sugar single shot steamed.  Robusta, id, caffeine, seasonal, cortado kopi-luwak et breve qui mazagran. Mocha pumpkin spice, and frappuccino aromatic robusta crema a wings. Body mug barista variety crema aroma aromatic robust acerbic filter. Caramelization café au lait chicory. Robusta, id, caffeine, seasonal, cortado kopi-luwak et breve qui mazagran. </div><!--
--><div class="ship-full-nat"><!--
--><!-- MODIFIER L'ID POUR CHOISIR LA NATURE DU LIEN --><!--
--><span id="negatif">Nature du lien - négatif</span></div></div><!--
--><!-- PARTIE AVATAR
--><!--
--><div class="ship-full-ava"><!--
--><!-- AVATAR 200x200 MINIMUM --><!--
--><img src="https://i.imgur.com/3W44NcA.jpg"/><!--
--><!-- PARTIE INFO EN VRAC --><!--
--><div class="ship-full-hash"><span><i class="fa-solid fa-moon"></i> Type de lycan</span>
<span><i class="fa-solid fa-mug-saucer"></i> Profession</span>
<span><i class="fa-solid fa-globe"></i> Rencontrer "<a href="">ici</a>"</span>
<span><i class="fa-solid fa-comment"></i> Période de la rencontre</span>
<span><i class="fa-solid fa-pizza-slice"></i> Autre détail</span>
</div></div></div><!--
--><!-- FIN DU LIEN --><!--
--><!--
--><!--
--><!--
--><!--
--><!-- DEBUT DU LIEN --><!--
--><div id="human" class="ship-full"><div class="ship-full-inf"><!--
--><!-- IMAGE FOND 600x200 --><!--
--><img src="https://i.imgur.com/1GDvS1S.jpg"/><!--
--><!-- PRENOM & NOM --><!--
--><div class="ship-full-title">Firstname Lastname</div><!--
--><!-- DESCRIPTION DU LIEN --><!--
--><div class="ship-full-lien">Filter beans a, body froth barista redeye ristretto. Affogato filter, grinder plunger pot, filter robusta americano dripper aroma macchiato cultivar. Decaffeinated ut lungo sweet steamed, single shot, eu spoon foam body breve. Sit est, affogato iced a sweet doppio. Ut aromatic, shop espresso aroma siphon latte sugar single shot steamed.  Robusta, id, caffeine, seasonal, cortado kopi-luwak et breve qui mazagran. Mocha pumpkin spice, and frappuccino aromatic robusta crema a wings. Body mug barista variety crema aroma aromatic robust acerbic filter. Caramelization café au lait chicory. Robusta, id, caffeine, seasonal, cortado kopi-luwak et breve qui mazagran. </div><!--
--><div class="ship-full-nat"><!--
--><!-- MODIFIER L'ID POUR CHOISIR LA NATURE DU LIEN --><!--
--><span id="positif">Nature du lien - positif</span></div></div><!--
--><!-- PARTIE AVATAR
--><!--
--><div class="ship-full-ava"><!--
--><!-- AVATAR 200x200 MINIMUM --><!--
--><img src="https://i.imgur.com/Dvz8tGc.jpg"/><!--
--><!-- PARTIE INFO EN VRAC --><!--
--><div class="ship-full-hash"><span><i class="fa-solid fa-masks-theater"></i> Type d'humain</span>
<span><i class="fa-solid fa-mug-saucer"></i> Profession</span>
<span><i class="fa-solid fa-globe"></i> Rencontrer "<a href="">ici</a>"</span>
<span><i class="fa-solid fa-comment"></i> Période de la rencontre</span>
<span><i class="fa-solid fa-pizza-slice"></i> Autre détail</span>
</div></div></div><!--
--><!-- FIN DU LIEN --><!--
--></div>

Pour modifier l'état du rp vous n'avez qu'à modifier l'id qui se trouve avant le lien.
Rp actif mettez "actif"
Rp terminé mettez "fini"
Rp abandonné metez "abandon"

Code:

<div id="actif" class="RP"><a href="">Titre du rp un peu, beaucoup, mega, giga long</a>

Pour changer la couleur des pseudos des personnages avec lesquels vous avez rp vous n'aurez qu'à modifier l'id du span qui entoure le pseudo.

Code:

<span id="witch">@Pseudodupartenaire</span>

Code:

<div id="gold" class="track-container"><div class="track-colo"><div class="title-track">Tracker</div><!--
--><!--
--><div class="track-text">Mocha arabica java milk cup, whipped body cream mazagran grinder cup spoon white americano cup, black qui a extraction espresso seasonal sweet extra. Caramelization rich, milk coffee aftertaste, rich java cup con panna latte beans carajillo decaffeinated seasonal.</div></div><!--
--><!--
--><div class="track-cont">
<div class="track-title">En cours</div><br>

<div id="actif" class="RP"><a href="">Titre du rp un peu, beaucoup, mega, giga long</a><!--
--><!--
--><div class="RP-time">Période du RP</div><!--
--><!--
--><div class="RP-feat">feat. <span id="witch">@Pseudodupartenaire</span> <span id="lycan">@Pseudodupartenaire</span></div></div>

<div class="track-title">Terminés</div><br>

<div id="fini" class="RP"><a href="">Titre du rp</a><!--
--><!--
--><div class="RP-time">Période du RP</div><!--
--><!--
--><div class="RP-feat">feat. <span id="human">@Pseudodupartenaire</span></div></div>

<div class="track-title">Abandonnés</div><br>

<div id="abandon" class="RP"><a href="">Titre du rp</a><!--
--><!--
--><div class="RP-time">Période du RP</div><!--
--><!--
--><div class="RP-feat">feat. <span id="vampire">@Pseudodupartenaire</span></div>
</div></div></div>

Pour modifier la couleur du modèle il suffit d'effectuer la modification que les modèles précédents. Changer l'id.

Code:

<div id="gold" class="port-modele">

Code:

<div id="gold" class="port-modele"><div class="port-head"><div><i class="fas fa-bell"></i></div> <div><i class="fas fa-signal"></i> <i class="fas fa-wifi"></i> <span class="th th-battery-1"></span></div></div><div class="port-bann">
<!-- ICON DU PERSONAGE
--><img src="http://via.placeholder.com/85"><!-- PRENOM NOM DU PERSONNAGE
--><span>Last name First name</span>
 </div><!--
--><!--
--><div class="port-conv"><!--PARTIE SMS
--><!--
--><div class="port-sms" id="human"><!-- ICON DU CONTACT
--><img src="http://via.placeholder.com/55"><div class="sms-pseudo"><!-- PSEUDO DU CONTACT
--><a href="">First name or pseudo</a><!-- TITRE DU TEXTO
--><span>Quelques mots du dernier texto par trop long</span></div><div class="sms-time">04:35</div></div><!--
--><!--
--><div class="port-sms" id="lycan"><!-- ICON DU CONTACT
--><img src="http://via.placeholder.com/55"><div class="sms-pseudo"><!-- PSEUDO DU CONTACT
--><a href="">First name or pseudo</a><!-- TITRE DU TEXTO
--><span>Quelques mots du dernier texto par trop long</span></div><div class="sms-time">04:35</div></div><!--
--><!--
--><div class="port-sms" id="vampire"><!-- ICON DU CONTACT
--><img src="http://via.placeholder.com/55"><div class="sms-pseudo"><!-- PSEUDO DU CONTACT
--><a href="">First name or pseudo</a><!-- TITRE DU TEXTO
--><span>Quelques mots du dernier texto par trop long</span></div><div class="sms-time">04:35</div></div><!--
--><!--
--><div class="port-sms" id="witch"><!-- ICON DU CONTACT
--><img src="http://via.placeholder.com/55"><div class="sms-pseudo"><!-- PSEUDO DU CONTACT
--><a href="">First name or pseudo</a><!-- TITRE DU TEXTO
--><span>Quelques mots du dernier texto par trop long</span></div><div class="sms-time">04:35</div></div><!--
--><!--
--><div class="port-sms" id="dark"><!-- ICON DU CONTACT
--><img src="http://via.placeholder.com/55"><div class="sms-pseudo"><!-- PSEUDO DU CONTACT
--><a href="">First name or pseudo</a><!-- TITRE DU TEXTO
--><span>Quelques mots du dernier texto par trop long</span></div><div class="sms-time">04:35</div></div><!--
--></div><div class="port-footer"><i class="fas fa-square"></i><i class="fas fa-circle"></i><i class="fas fa-play"></i></div></div>

Pour modifier la couleur du modèle il suffit d'effectuer la modification que les modèles précédents. Changer l'id.

Code:

<div id="gold" class="port-modele">
<a href="" id="gold" class="expedition-link">

Code:

<div id="gold" class="mail-body"><div class="header-mail"><i class="fa-solid fa-minus"></i> <i class="fa-regular fa-window-restore"></i> <i class="fa-solid fa-xmark"></i></div><!--
--><a href="" id="human" class="expedition-link"><!--
--><div class="mail-expedit"><!--
--><img src="https://i.imgur.com/VCjZVSv.jpg?1" alt="" class="mail-img"><!--
--><div class="mail-author"><!--
--><div class="mail-pseudo">Pseudonyme</div><!--
--><div class="mail-objet">Objet de la discussion</div><!--
--><span>00h00 - 00/00</span><!--
--></div></div></a><!--
--><!--
--><a href="" id="lycan" class="expedition-link"><!--
--><div class="mail-expedit"><!--
--><img src="https://i.imgur.com/VCjZVSv.jpg?1" alt="" class="mail-img"><!--
--><div class="mail-author"><!--
--><div class="mail-pseudo">Pseudonyme</div><!--
--><div class="mail-objet">Objet de la discussion</div><!--
--><span>00h00 - 00/00</span><!--
--></div></div></a><!--
--><!--
--><a href="" id="vampire" class="expedition-link"><!--
--><div class="mail-expedit"><!--
--><img src="https://i.imgur.com/VCjZVSv.jpg?1" alt="" class="mail-img"><!--
--><div class="mail-author"><!--
--><div class="mail-pseudo">Pseudonyme</div><!--
--><div class="mail-objet">Objet de la discussion</div><!--
--><span>00h00 - 00/00</span><!--
--></div></div></a><!--
--><!--
--><a href="" id="witch" class="expedition-link"><!--
--><div class="mail-expedit"><!--
--><img src="https://i.imgur.com/VCjZVSv.jpg?1" alt="" class="mail-img"><!--
--><div class="mail-author"><!--
--><div class="mail-pseudo">Pseudonyme</div><!--
--><div class="mail-objet">Objet de la discussion</div><!--
--><span>00h00 - 00/00</span><!--
--></div></div></a><!--
--><!--
--></div>

Pour un peu plus de personnalisation, vous pouvez changer la couleur du modèle pour qu'il corresponde au groupe souhaité. Un modèle clair et un modèle sombre sont également disponible. Pour ce faire vous n'avez qu'à remplacer l'id="white" de la première div par le nom de groupe désiré.

Pour les humains mettez "human"
Pour les lycans mettez "lycan"
Pour les sorcières mettez "witch"
Pour les vampires mettez "vampire"
Pour le modèle clair mettez "white"
Pour le modèle sombre mettez "dark"

Code:

<div id="white" class="container-insta">

Code:

<div id="white" class="container-insta"><div class="insta-btn flexD"><div class="btn-instagrum"><i class="fa-solid fa-lemon fa-lg"></i> Instagrum</div><div class="flexD btns"><div class="btn-follow">follow</div><div class="btn-follow">contact</div><i class="fa-solid fa-ellipsis fa-2xl"></i></div></div><div class="container-insta-header flexD"><div class="avatar-insta flexD"><!-- PARTIE AVATAR 150*150 --><!--
--><img src="https://via.placeholder.com/150x150/545454/ffffff"><!--
--></div><div class="bloc-insta-info flexD"><!-- PARTIE PSEUDONYME --><!--
--><div class="pseudo-insta">pseudonyme</div><div class="insta-stat flexD"><!--
--><span><b>00</b>posts</span> <span><b>00</b>followers</span> <span><b>00</b>following</span></div><!--
--><!-- PARTIE NOM PRENOM & DESCRIPTION --><!--
--><div class="pseudo-name">First name last name</div><!--
--><div class="pseudo-desc">Affogato, and sweet aroma cortado brewed medium. Grinder french press, and, instant decaffeinated dark con panna instant so robust. Galão, mug id macchiato wings grounds froth. </div><div class="insta-link flexD"><!--
--><div><i class="fa-solid fa-link"></i> <a href="">link</a></div></div><!--
--><div class="insta-followed">followed by <a href="#">username1</a>, <a href="#">username2</a>, <a href="#">username3</a></div></div></div><!--
--><!-- PARTIE IMAGES
--><!--
--><div class="flexD insta-image-container"><div class="insta-image-bloc"><!--
--><!-- IMAGE 175*175 --><!--
--><img src="https://via.placeholder.com/175x175/545454/ffffff"><!--
--><div class="insta-bloc-hover flexD"><span>50  <i class="fas fa-heart"></i></span> <span>15  <i class="fas fa-comment"></i></span></div></div><!--
--><div class="insta-image-bloc"><!--
--><!-- IMAGE 175*175 --><!--
--><img src="https://via.placeholder.com/175x175/545454/ffffff"><!--
--><div class="insta-bloc-hover flexD"><span>50  <i class="fas fa-heart"></i></span> <span>15  <i class="fas fa-comment"></i></span></div></div><!--
--><div class="insta-image-bloc"><!--
--><!-- IMAGE 175*175 --><!--
--><img src="https://via.placeholder.com/175x175/545454/ffffff"><!--
--><div class="insta-bloc-hover flexD"><span>50  <i class="fas fa-heart"></i></span> <span>15  <i class="fas fa-comment"></i></span></div></div><!--
--><div class="insta-image-bloc"><!--
--><!-- IMAGE 175*175 --><!--
--><img src="https://via.placeholder.com/175x175/545454/ffffff"><!--
--><div class="insta-bloc-hover flexD"><span>50  <i class="fas fa-heart"></i></span> <span>15  <i class="fas fa-comment"></i></span></div></div><!--
--><div class="insta-image-bloc"><!--
--><!-- IMAGE 175*175 --><!--
--><img src="https://via.placeholder.com/175x175/545454/ffffff"><!--
--><div class="insta-bloc-hover flexD"><span>50  <i class="fas fa-heart"></i></span> <span>15  <i class="fas fa-comment"></i></span></div></div><!--
--><div class="insta-image-bloc"><!--
--><!-- IMAGE 175*175 --><!--
--><img src="https://via.placeholder.com/175x175/545454/ffffff"><!--
--><div class="insta-bloc-hover flexD"><span>50  <i class="fas fa-heart"></i></span> <span>15  <i class="fas fa-comment"></i></span></div></div><!--
--><div class="insta-image-bloc"><!--
--><!-- IMAGE 175*175 --><!--
--><img src="https://via.placeholder.com/175x175/545454/ffffff"><!--
--><div class="insta-bloc-hover flexD"><span>50  <i class="fas fa-heart"></i></span> <span>15  <i class="fas fa-comment"></i></span></div></div><!--
--><div class="insta-image-bloc"><!--
--><!-- IMAGE 175*175 --><!--
--><img src="https://via.placeholder.com/175x175/545454/ffffff"><!--
--><div class="insta-bloc-hover flexD"><span>50  <i class="fas fa-heart"></i></span> <span>15  <i class="fas fa-comment"></i></span></div></div><!--
--><div class="insta-image-bloc"><!--
--><!-- IMAGE 175*175 --><!--
--><img src="https://via.placeholder.com/175x175/545454/ffffff"><!--
--><div class="insta-bloc-hover flexD"><span>50  <i class="fas fa-heart"></i></span> <span>15  <i class="fas fa-comment"></i></span></div></div><!--
--><!--
--></div></div>

Pour modifier les posts en fonction du groupe du personnage ou du thème souhaité, c'est la même chose. Vous n'avez qu'à modifier l'id.

Code:

<div id="white" class="post-insta">

Code:

<div id="white" class="post-insta"><div class="post-insta-header flexD"><!--
--><!-- AVATAR 65*65
--><img src="https://via.placeholder.com/65x65/545454/ffffff"><div class="bloc-insta-info flexD"><!--
--><!-- PARTIE PSEUDO ET VILLE
--><div class="pseudo-insta">pseudonyme</div><!--
--><div class="pseudo-desc">City, Country</div></div><div class="flexD btns2"><i class="fa-solid fa-ellipsis fa-2xl"></i></div></div><!--
--><!-- PARTIE IMAGE
--><!--
--><div class="post-insta-img"><!--
--><img src="https://via.placeholder.com/450x450/545454/ffffff"><!--
--></div><div class="post-insta-icon flexD"><div><i class="fa-regular fa-heart fa-2xl"></i> <i class="fa-regular fa-comment fa-2xl"></i> <i class="fa-regular fa-paper-plane fa-2xl"></i></div><div><i class="fa-regular fa-bookmark fa-2xl"></i></div></div><div class="post-insta-title flexD"><!--
--><div class="post-insta-like"><b>00</b> Likes</div><!--
--><!-- PARTIE DESCRIPTION POST
--><!--
--><div class="post-insta-pseudo"><span><b>pseudonyme</b></span> Blue mountain, half and half wings macchiato grounds beans cup so spoon espresso single origin single shot. Body, skinny, id, wings, frappuccino sweet cup so black iced. <span>#item</span></div><div class="post-insta-date">date publication</div></div><div class="post-insta-comment flexD"><i class="fa-regular fa-face-grin-hearts fa-2xl"></i><div class="add-comment">Ajouter un commentaire...</div><b>Publier</b></div></div>

Pour modifier les posts en fonction du groupe du personnage ou du thème souhaité, c'est la même chose. Vous n'avez qu'à modifier l'id.

Code:

<div id="white" class="post-insta">

Code:

<div id="white" class="post-insta"><div class="post-insta-header flexD"><!--
--><!-- AVATAR 65*65
--><img src="https://via.placeholder.com/65x65/545454/ffffff"><div class="bloc-insta-post flexD"><!--
--><!-- PSEUDO, DATE & COMMENTAIRE
--><div class="pseudo-insta">pseudonyme</div><!--
--><div class="date-publi">date publication</div><!--
--><div class="post-comment">Robust doppio, grounds aged et, foam, grounds grinder qui steamed café au lait. Crema steamed, in, java that eu single origin macchiato dripper french press. That, roast body, eu sweet foam aromatic rich latte affogato. Percolator, black spoon, grinder blue mountain frappuccino eu et coffee.<span>#blabla</span></div></div></div></div>