Je viens de finir ma maquette de JDB, je souhaite donc qu'on me la code s'il vous plaît.
Je cherche un code facile à utiliser sans avoir douze mille lignes de code ! c:
[ x] livre de bord - [ ] message RP - [ ] autre, précisez :
Maquette :
- Spoiler:
Images à mettre : Je les donnerai en mp ! c:
Précisions : J'ai les documents en PSD où toutes les informations y sont !
Merci beaucoup !
Voici le code brut de décoffrage si tu as le courage de le bidouiller aujourd'hui. Sinon, je te donne la version plus claire et facile à utiliser ce soir \o/
Calcilia Dilys
- Calci
- 27 ans
- Barde
- 1m65
- 50 kg
Buveuse invétérée qui aime dépouiller ses victimes de leurs cristaux lorsqu’ils ne sont plus aptes à faire deux pas sans tomber.
Elle manie la langue avec grâce durant ses chants, mais elle se montre grossière et agaçante lors de conversations.
C’est une grande voyageuse depuis qu’elle est enfant, elle souhaite maintenant aller au-delà des frontières ou parcourir l’océan à la recherche d’autres continents malgré ses phobies.
Sa passion est de suivre les aventuriers dans leurs périples afin de chanter leurs aventures lorsqu’elle retourne à la capitale. Elle ne fait que des spectacles de rue à son propre compte. Elle est tenace malgré les refus et son pouvoir offre un réel avantage sur le terrain, mais elle devient également un fardeau.
Elle est également un bon guide pour tout voyageur trop téméraires, après avoir passé la plupart de sa vie à vagabonder sur l'île.
Particularités notables : C’est une bonne combattante mais elle préfère fuir que se confronter au danger. Elle déteste ne pas voir le fond des eaux, et les algues. Elle suivra rarement une expédition qui se déroule dans un lieu aquatique. Son passe-temps est de faire des mauvaises blagues aux membres de la garde.
Counter song
Les doigts font résonner les cordes de la lyre. La voix s'élève peu à peu dans les airs, tandis qu'une lueur aux rayons bleutés s'animent autour de la jeune femme, dansant langoureusement autour d'elle. Soudain, ils se figent dans les airs puis serpentent entre les hommes qui entourent son partenaire, longeant le champ de bataille, les cadavres qui jonchent le sol.Enfin, la lueur atteint sa cible, l'entourant d'un voile bleu avant de donner l'impression qu'il pénètre le corps, puis de s'évaporer. La barde rouvre son grand regard violine, le chant s'intensifiant. Tout ne faisait que commencer.
Calcilia chantera pour protéger ses partenaires. Le pouvoir résonnera et protègera quiconque sera sous son effet. Il aura pour but de renvoyer tout dégât physique qui lui seront porté. Mais ce n'est pas sans conséquences, Calcilia subira une partie des coups, et se retrouvera sans défense, incapable de bouger. Tant qu'elle chantera, la personne n'aura rien à craindre.
Améliorations
Objets de pouvoir
Objets uniques
Inventaire
Autres
- Objet 1 (0/1)
- Objet 2 (1/2)
- Objet 3 (2/2)
- Objet 1 (0/1)
- Objet 2 (1/2)
- Objet 3 (2/2)
- Portail de téléportation
- Accès aux enchères
Quota
Inventaire
- Objets :
- Armure :
- Magie :
Inventaire
- Objets : Talisman glacial
- Armure :
- Magie : Déplacement
Hors quota
Inventaire
- Objets : Talisman glacial
- Armure :
- Magie : Déplacement
RPs en cours
RPs terminés
RPs abandonnés
PNJs
- Amy • 30 ans
- Amy est une aventurière qui a souvent voyagé avec Calcilia, elles se sont rencontrées dans une taverne, où la barde avait encore fait s'écrouler des hommes trop sûrs d'eux. Il leur arrive encore de se voir régulièrement de se voir. Elles ont fini par devenir amies même si chacun ne cherche pas à s'attacher davantage. Leur affection réciproque s'arrête à passer de bons moments ensemble car elles savent que les vies qu'elles mènent pourront les pousser à ne jamais se revoir si un jour. Amy est aussi du genre insouciante.
Relations
- nom • âge
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quos, labore quibusdam in distinctio sit. Ipsa provident sapiente, aspernatur est fugit obcaecati hic aperiam perspiciatis praesentium minus a voluptates adipisci!
- nom • âge
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quos, labore quibusdam in distinctio sit. Ipsa provident sapiente, aspernatur est fugit obcaecati hic aperiam perspiciatis praesentium minus a voluptates adipisci!
- nom • âge
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quos, labore quibusdam in distinctio sit. Ipsa provident sapiente, aspernatur est fugit obcaecati hic aperiam perspiciatis praesentium minus a voluptates adipisci!
- Code:
<style>@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Dosis:wght@200;400;600&display=swap"); body { background-color: darkgrey; } :root { --police: "Dosis", sans-serif; --couleur-fond: #ffffff; /** Blanc **/ --couleur-cadres: #f9f0ff; /** Rose **/ --couleur-texte: #9065a7; /** Violet foncé **/ --couleur-survol: #8637af; /** L'autre violet **/ } .ldb-calci { position: relative; width: 100%; max-width: 650px; box-sizing: border-box; display: flex; flex-direction: row-reverse; align-items: stretch; align-content: stretch; margin: 0 auto; background: var(--couleur-fond); padding: 15px; font: 16px/1.5 var(--police); color: var(--couleur-texte); } .ldb-calci * { box-sizing: border-box; } .ldb-calci ul { list-style: none; padding: 0; margin: 0; } .ldb-calci ul li { padding: 0; margin: 0; } .ldb-calci a { color: var(--couleur-texte); } .ldb-calci a:hover { color: var(--couleur-survol); } .ldb-calci nav { width: 30%; min-width: 150px; background: var(--couleur-cadres); text-align: center; position: relative; } .ldb-calci nav ul { position: sticky; top: 0; right: 0; padding: 16px; } .ldb-calci nav ul li { margin: 16px auto; } .ldb-calci nav a { font: 1.4em/1.4 var(--police); color: var(--couleur-texte); text-decoration: none; font-weight: 200; text-transform: uppercase; } .ldb-calci nav a.actif { color: var(--couleur-survol); font-weight: 600; } .ldb-calci nav:after { content: "Code : Shaneliae"; font: 0.75em/1 var(--police); position: absolute; width: 100%; left: 0; bottom: 0; } .ldb-calci section { position: relative; width: 70%; padding-right: 16px; padding-bottom: 16px; } .ldb-calci section > header img { width: 100%; height: 200px; object-fit: cover; object-position: center top; opacity: 40%; margin: 0; padding: 0; } .ldb-calci section > header ul { position: relative; display: flex; justify-content: center; margin: 10px 0 16px; background-color: var(--couleur-cadres); } .ldb-calci section > header ul li { padding: 8px 12px; font: 200 1.4em/1 var(--police); } .ldb-calci section h1 { position: absolute; top: calc(100px - 1.5rem); z-index: 1; display: inherit; width: 100%; margin: 0; background: none; padding: 0; text-align: center; text-shadow: none; font: 400 3em/1 var(--police) !important; color: var(--couleur-texte); text-transform: uppercase; letter-spacing: 2px; } .ldb-calci section h2 { position: relative; display: inherit; margin: 32px auto 16px; background-color: var(--couleur-cadres); padding: 8px; text-align: center; font: 400 1.24em/1.4 var(--police); color: var(--couleur-texte); text-transform: uppercase; letter-spacing: inherit; } .ldb-calci section h2:first-of-type { margin: 0 auto 16px; } .ldb-calci section h2:after, .ldb-calci section header > ul:after { content: ""; display: block; position: absolute; top: 0; right: -16px; width: 16px; height: 100%; background-color: var(--couleur-cadres); } .ldb-calci section details { margin: 8px 0 16px; } .ldb-calci section details summary { font: 400 1.2em/1.2 var(--police); text-transform: uppercase; cursor: pointer; } .ldb-calci section details ul { margin-top: 8px; background-color: var(--couleur-cadres); padding: 8px; font: 1em/1.4 var(--police); } .ldb-calci:not(#familiers, #rps) section article header { position: relative; z-index: 0; margin: 16px 0 8px 32px; font: 400 1.2em/1.8 var(--police); } .ldb-calci:not(#familiers, #rps) section article header:before { content: ""; display: block; position: absolute; z-index: -1; left: -32px; width: 2.5em; height: 100%; background-color: var(--couleur-cadres); } .ldb-calci#familiers section article header figure { margin: 0; padding: 0; position: relative; margin: 16px auto 8px; } .ldb-calci#familiers section article header figure img { width: 100%; height: 150px; object-fit: cover; object-position: top center; } .ldb-calci#familiers section article header figure figcaption { position: absolute; top: 0; width: 100%; background-color: rgba(255, 255, 255, 0.6); padding: calc(75px - 0.5em) 0; text-align: center; font: 600 2em/1 var(--police); text-transform: uppercase; letter-spacing: 2px; opacity: 0; } .ldb-calci#familiers section article:hover figcaption { opacity: 1; } .ldb-calci#rps section article { margin-top: 8px; } .ldb-calci#rps section article header { font: 400 1.2em/1.8 var(--police); } .ldb-calci#relations section { padding-bottom: 0; } .ldb-calci#relations dl { display: grid; column-gap: 16px; row-gap: 0; grid-template-columns: 150px auto; grid-template-rows: auto 200px; margin: 0; } .ldb-calci#relations dl:not(:last-of-type) { margin-bottom: 16px; } .ldb-calci#relations dl img { max-width: 150px; height: 250px; object-fit: cover; object-position: center center; grid-row-start: 1; grid-row-end: 3; } .ldb-calci#relations dl dt, .ldb-calci#relations dl dd { margin: 0; } .ldb-calci#relations dl dt { place-self: center; font: 400 1.2em/1.4 var(--police); text-transform: uppercase; } .ldb-calci#relations dl dd { background-color: var(--couleur-cadres); padding: 8px; overflow-y: auto; scrollbar-color: var(--couleur-texte) var(--couleur-cadres); scrollbar-width: thin; } .ldb-calci#relations dl dd::-webkit-scrollbar { width: 8px; height: 10px; background-color: var(--couleur-cadres); /* or add it to the track */ } .ldb-calci#relations dl dd::-webkit-scrollbar-thumb { background: var(--couleur-texte); }</style><!-- Général --><main class="ldb-calci" id="general"><nav><ul><li><a href="#general" class="actif">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><header><h1>Calcilia Dilys</h1><img src="https://c.wallhere.com/photos/5c/f1/Genshin_Impact_Eula_Genshin_impact_anime_girls-2008235.jpg!d" alt="Calcilia"><ul><li>Calci</li><li>27 ans</li><li>Barde</li><li>1m65</li><li>50 kg</li></ul></header>Calcilia est un être libre comme l'air qui pense et fait ce qui lui chante. Elle a sa propre morale et se fiche bien d'effectuer des infractions. Elle apprécie tout particulièrement se moquer de la garde lorsqu'ils sont à ses trousses.<br><br>Buveuse invétérée qui aime dépouiller ses victimes de leurs cristaux lorsqu’ils ne sont plus aptes à faire deux pas sans tomber.<br>Elle manie la langue avec grâce durant ses chants, mais elle se montre grossière et agaçante lors de conversations.<br>C’est une grande voyageuse depuis qu’elle est enfant, elle souhaite maintenant aller au-delà des frontières ou parcourir l’océan à la recherche d’autres continents malgré ses phobies.<br>Sa passion est de suivre les aventuriers dans leurs périples afin de chanter leurs aventures lorsqu’elle retourne à la capitale. Elle ne fait que des spectacles de rue à son propre compte. Elle est tenace malgré les refus et son pouvoir offre un réel avantage sur le terrain, mais elle devient également un fardeau.<br><br>Elle est également un bon guide pour tout voyageur trop téméraires, après avoir passé la plupart de sa vie à vagabonder sur l'île.<br><br>Particularités notables : C’est une bonne combattante mais elle préfère fuir que se confronter au danger. Elle déteste ne pas voir le fond des eaux, et les algues. Elle suivra rarement une expédition qui se déroule dans un lieu aquatique. Son passe-temps est de faire des mauvaises blagues aux membres de la garde.</section></main>
<!-- Pouvoir --><main class="ldb-calci" id="pouvoir"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir" class="actif">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><h2>Counter song</h2>Les doigts font résonner les cordes de la lyre. La voix s'élève peu à peu dans les airs, tandis qu'une lueur aux rayons bleutés s'animent autour de la jeune femme, dansant langoureusement autour d'elle. Soudain, ils se figent dans les airs puis serpentent entre les hommes qui entourent son partenaire, longeant le champ de bataille, les cadavres qui jonchent le sol.<br><br>Enfin, la lueur atteint sa cible, l'entourant d'un voile bleu avant de donner l'impression qu'il pénètre le corps, puis de s'évaporer. La barde rouvre son grand regard violine, le chant s'intensifiant. Tout ne faisait que commencer.<br><br>Calcilia chantera pour protéger ses partenaires. Le pouvoir résonnera et protègera quiconque sera sous son effet. Il aura pour but de renvoyer tout dégât physique qui lui seront porté. Mais ce n'est pas sans conséquences, Calcilia subira une partie des coups, et se retrouvera sans défense, incapable de bouger. Tant qu'elle chantera, la personne n'aura rien à craindre.<h2>Améliorations</h2><article><header>Amélioration 1</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article><article><header>Amélioration 1</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article><h2>Objets de pouvoir</h2><article><header>Shiva</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article></section></main>
<!-- Inventaire --><main class="ldb-calci" id="inventaire"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire" class="actif">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><h2>Objets uniques</h2><article><header>Lyra Orchestra • Devis</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article><article><header>Objet 2 • Animation</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article><article><header>Objet 3 • Tirage</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article><h2>Inventaire</h2><article><header>Objet</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article><article><header>Objet</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article><article><header>Objet</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article><article><header>Objet</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.</article><h2>Autres</h2><article><header>Consommables inRP</header><ul><li>Objet 1 (0/1)</li><li>Objet 2 (1/2)</li><li>Objet 3 (2/2)</li></ul></article><article><header>Consommables HRP</header><ul><li>Objet 1 (0/1)</li><li>Objet 2 (1/2)</li><li>Objet 3 (2/2)</li></ul></article><article><header>Avantages inRP</header><ul><li>Portail de téléportation</li><li>Accès aux enchères</li></ul></article></section></main>
<!-- Familiers --><main class="ldb-calci" id="familiers"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers" class="actif">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><h2>Quota</h2><article><header><figure><img src="https://i.pinimg.com/564x/bc/41/04/bc4104f313aa237b9527f6ab724f874b.jpg" alt="Renards de saison"><figcaption>Illwy</figcaption></figure></header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero.<details><summary>Inventaire</summary><ul><li>Objets :</li><li>Armure :</li><li>Magie :</li></ul></details></article><article><header><figure><img src="https://i.servimg.com/u/f53/20/36/37/77/amy-el10.jpg" alt="Goupil de glace"><figcaption>Eira</figcaption></figure></header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero.<details><summary>Inventaire</summary><ul><li>Objets : Talisman glacial</li><li>Armure :</li><li>Magie : Déplacement</li></ul></details></article><h2>Hors quota</h2><article><header><figure><img src="https://i.servimg.com/u/f53/20/36/37/77/amy-el10.jpg" alt="Goupil de glace"><figcaption>Eira</figcaption></figure></header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero.<details><summary>Inventaire</summary><ul><li>Objets : Talisman glacial</li><li>Armure :</li><li>Magie : Déplacement</li></ul></details></article></section></main>
<!-- RPs --><main class="ldb-calci" id="rps"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps" class="actif">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><h2>RPs en cours</h2><article><header><a href="#">Titre</a> ft @"Sia Zmeï"</header></article><article><header><a href="#">Titre</a> ft @Nom</header></article><article><header><a href="#">Titre</a> ft @Nom</header></article><article><header><a href="#">Titre</a> ft @Nom</header></article><article><header><a href="#">Titre</a> ft @Nom</header></article><h2>RPs terminés</h2><article><header><a href="#">Titre</a> ft @Nom</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vitae iure amet corporis totam molestias illo repellendus debitis delectus eaque beatae sunt sit aliquid mollitia et id iusto, distinctio facere.</article><article><header><a href="#">Titre</a> ft @Nom</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore placeat explicabo repellendus, aliquid tempora, velit id doloribus aut vitae quis quae molestias rem architecto iure voluptas at cum! Corrupti, minus?</article><article><header><a href="#">Titre</a> ft @Nom</header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur dolor rem iste neque, ad corrupti aut eaque voluptatum saepe pariatur enim debitis nostrum nihil quam cum quidem nobis vitae ea!</article><h2>RPs abandonnés</h2><article><header><a href="#">Titre</a> ft @Nom</header></article><article><header><a href="#">Titre</a> ft @Nom</header></article><article><header><a href="#">Titre</a> ft @Nom</header></article><article><header><a href="#">Titre</a> ft @Nom</header></article><article><header><a href="#">Titre</a> ft @Nom</header></article></section></main>
<!-- Relations --><main class="ldb-calci" id="relations"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations" class="actif">Relations</a></li></ul></nav><section><h2>PNJs</h2><dl><img src="https://64.media.tumblr.com/e431be6870794aaaccdfe0950bb8e459/8fa67e9c62d15afe-8c/s540x810/dcf921e2f95a42d5da1522a6fcb98e6d243155b5.jpg" alt=""><dt>Amy • 30 ans</dt><dd>Amy est une aventurière qui a souvent voyagé avec Calcilia, elles se sont rencontrées dans une taverne, où la barde avait encore fait s'écrouler des hommes trop sûrs d'eux. Il leur arrive encore de se voir régulièrement de se voir. Elles ont fini par devenir amies même si chacun ne cherche pas à s'attacher davantage. Leur affection réciproque s'arrête à passer de bons moments ensemble car elles savent que les vies qu'elles mènent pourront les pousser à ne jamais se revoir si un jour. Amy est aussi du genre insouciante.</dd></dl><h2>Relations</h2><dl><img src="https://64.media.tumblr.com/e431be6870794aaaccdfe0950bb8e459/8fa67e9c62d15afe-8c/s540x810/dcf921e2f95a42d5da1522a6fcb98e6d243155b5.jpg" alt=""><dt>nom • âge</dt><dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quos, labore quibusdam in distinctio sit. Ipsa provident sapiente, aspernatur est fugit obcaecati hic aperiam perspiciatis praesentium minus a voluptates adipisci!</dd></dl><dl><img src="https://64.media.tumblr.com/e431be6870794aaaccdfe0950bb8e459/8fa67e9c62d15afe-8c/s540x810/dcf921e2f95a42d5da1522a6fcb98e6d243155b5.jpg" alt=""><dt>nom • âge</dt><dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quos, labore quibusdam in distinctio sit. Ipsa provident sapiente, aspernatur est fugit obcaecati hic aperiam perspiciatis praesentium minus a voluptates adipisci!</dd></dl><dl><img src="https://64.media.tumblr.com/e431be6870794aaaccdfe0950bb8e459/8fa67e9c62d15afe-8c/s540x810/dcf921e2f95a42d5da1522a6fcb98e6d243155b5.jpg" alt=""><dt>nom • âge</dt><dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quos, labore quibusdam in distinctio sit. Ipsa provident sapiente, aspernatur est fugit obcaecati hic aperiam perspiciatis praesentium minus a voluptates adipisci!</dd></dl></section></main>
Alors pour t'aider, tu n'as qu'à chercher les petits • dans le code pour trouver les commentaires qui t'indiquent à quoi correspond le code.
Pour la petite navigation sur le côté, pas besoin de modifier les liens, normalement elle devrait fonctionner direct.
CSS
À ne mettre qu'une seule fois, idéalement dans le premier post.- Code:
<style>/***
• Lien Google Font
*/@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@200;400;600&display=swap");/*
• Liste des variables
*/:root {/*
• Police
*/--police: "Dosis", sans-serif;/*
• Couleur de fond - blanc
*/--couleur-fond: #ffffff;/*
• Couleur des blocs - rose
*/--couleur-cadres: #f9f0ff;/*
• Couleur du texte - Violet pâle
*/--couleur-texte: #9065a7;/*
• Couleur des liens au survol - Violet foncé
*/--couleur-survol: #8637af;/*
• Le reste du CSS - A ne pas toucher.
*/} .ldb-calci { position: relative; width: 100%; max-width: 650px; box-sizing: border-box; display: flex; flex-direction: row-reverse; align-items: stretch; align-content: stretch; margin: 0 auto; background: var(--couleur-fond); padding: 15px; font: 16px/1.5 var(--police); color: var(--couleur-texte); } .ldb-calci * { box-sizing: border-box; } .ldb-calci ul { list-style: none; padding: 0; margin: 0; } .ldb-calci ul li { padding: 0; margin: 0; } .ldb-calci a { color: var(--couleur-texte); } .ldb-calci a:hover { color: var(--couleur-survol); } .ldb-calci nav { width: 30%; min-width: 150px; background: var(--couleur-cadres); text-align: center; position: relative; } .ldb-calci nav ul { position: sticky; position: -webkit-sticky; top: 40px; right: 0; padding: 16px; } .ldb-calci nav ul li { margin: 16px auto; } .ldb-calci nav a { font: 1.4em/1.4 var(--police); color: var(--couleur-texte); text-decoration: none; font-weight: 200; text-transform: uppercase; } .ldb-calci nav a.actif { color: var(--couleur-survol); font-weight: 600; } .ldb-calci nav:after { content: "Code : Shaneliae"; font: 0.75em/1 var(--police); position: absolute; width: 100%; left: 0; bottom: 0; } .ldb-calci section { position: relative; width: 70%; padding-right: 16px; padding-bottom: 16px; } .ldb-calci section > header img { width: 100%; height: 200px; object-fit: cover; object-position: center top; opacity: 40%; margin: 0; padding: 0; } .ldb-calci section > header ul { position: relative; display: flex; justify-content: center; margin: 10px 0 16px; background-color: var(--couleur-cadres); } .ldb-calci section > header ul li { padding: 8px 12px; font: 200 1.4em/1 var(--police); } .ldb-calci section h1 { position: absolute; top: calc(100px - 1.5rem); z-index: 1; display: inherit; width: 100%; margin: 0; background: none; padding: 0; text-align: center; text-shadow: none; font: 400 3em/1 var(--police) !important; color: var(--couleur-texte); text-transform: uppercase; letter-spacing: 2px; } .ldb-calci section h2 { position: relative; display: inherit; margin: 32px auto 16px; background-color: var(--couleur-cadres); padding: 8px; text-align: center; font: 400 1.24em/1.4 var(--police); color: var(--couleur-texte); text-transform: uppercase; letter-spacing: inherit; } .ldb-calci section h2:first-of-type { margin: 0 auto 16px; } .ldb-calci section h2:after, .ldb-calci section header > ul:after { content: ""; display: block; position: absolute; top: 0; right: -16px; width: 16px; height: 100%; background-color: var(--couleur-cadres); } .ldb-calci section details { margin: 8px 0 16px; } .ldb-calci section details summary { font: 400 1.2em/1.2 var(--police); text-transform: uppercase; cursor: pointer; } .ldb-calci section details ul { margin-top: 8px; background-color: var(--couleur-cadres); padding: 8px; font: 1em/1.4 var(--police); } .ldb-calci:not(#familiers, #rps) section article header { position: relative; z-index: 0; margin: 16px 0 8px 32px; font: 400 1.2em/1.8 var(--police); } .ldb-calci:not(#familiers, #rps) section article header:before { content: ""; display: block; position: absolute; z-index: -1; left: -32px; width: 2.5em; height: 100%; background-color: var(--couleur-cadres); } .ldb-calci#familiers section article header figure { margin: 0; padding: 0; position: relative; margin: 16px auto 8px; } .ldb-calci#familiers section article header figure img { width: 100%; height: 150px; object-fit: cover; object-position: top center; } .ldb-calci#familiers section article header figure figcaption { position: absolute; top: 0; width: 100%; background-color: rgba(255, 255, 255, 0.6); padding: calc(75px - 0.5em) 0; text-align: center; font: 600 2em/1 var(--police); text-transform: uppercase; letter-spacing: 2px; opacity: 0; } .ldb-calci#familiers section article:hover figcaption { opacity: 1; } .ldb-calci#rps section article { margin-top: 8px; } .ldb-calci#rps section article header { font: 400 1.2em/1.8 var(--police); } .ldb-calci#relations section { padding-bottom: 0; } .ldb-calci#relations dl { display: grid; column-gap: 16px; row-gap: 0; grid-template-columns: 150px auto; grid-template-rows: auto 200px; margin: 0; } .ldb-calci#relations dl:not(:last-of-type) { margin-bottom: 16px; } .ldb-calci#relations dl img { max-width: 150px; height: 250px; object-fit: cover; object-position: center center; grid-row-start: 1; grid-row-end: 3; } .ldb-calci#relations dl dt, .ldb-calci#relations dl dd { margin: 0; } .ldb-calci#relations dl dt { place-self: center; font: 400 1.2em/1.4 var(--police); text-transform: uppercase; } .ldb-calci#relations dl dd { background-color: var(--couleur-cadres); padding: 8px; overflow-y: auto; scrollbar-color: var(--couleur-texte) var(--couleur-cadres); scrollbar-width: thin; } .ldb-calci#relations dl dd::-webkit-scrollbar { width: 8px; height: 10px; background-color: var(--couleur-cadres); /* or add it to the track */ } .ldb-calci#relations dl dd::-webkit-scrollbar-thumb { background: var(--couleur-texte); }</style>
HTML - Partie générale
J'ai repris le texte de la maquette.Calcilia Dilys
- Calci
- 27 ans
- Barde
- 1m65
- 50 kg
Buveuse invétérée qui aime dépouiller ses victimes de leurs cristaux lorsqu’ils ne sont plus aptes à faire deux pas sans tomber.
Elle manie la langue avec grâce durant ses chants, mais elle se montre grossière et agaçante lors de conversations.
C’est une grande voyageuse depuis qu’elle est enfant, elle souhaite maintenant aller au-delà des frontières ou parcourir l’océan à la recherche d’autres continents malgré ses phobies.
Sa passion est de suivre les aventuriers dans leurs périples afin de chanter leurs aventures lorsqu’elle retourne à la capitale. Elle ne fait que des spectacles de rue à son propre compte. Elle est tenace malgré les refus et son pouvoir offre un réel avantage sur le terrain, mais elle devient également un fardeau.
Elle est également un bon guide pour tout voyageur trop téméraires, après avoir passé la plupart de sa vie à vagabonder sur l'île.
Particularités notables : C’est une bonne combattante mais elle préfère fuir que se confronter au danger. Elle déteste ne pas voir le fond des eaux, et les algues. Elle suivra rarement une expédition qui se déroule dans un lieu aquatique. Son passe-temps est de faire des mauvaises blagues aux membres de la garde.
- Code:
<main class="ldb-calci" id="general"><nav><ul><li><a href="#general" class="actif">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><header><!--
• Prénom & nom
--><h1>Calcilia Dilys</h1><!--
• Image de fond
--><img src="https://c.wallhere.com/photos/5c/f1/Genshin_Impact_Eula_Genshin_impact_anime_girls-2008235.jpg!d" alt="Calcilia"><!--
• Les points importants
--><ul><!--
• Surnom --><li>Calci</li><!--
• Âge --><li>27 ans</li><!--
• Métier --><li>Barde</li><!--
• Taille --><li>1m65</li><!--
• Poids --><li>50 kg</li></ul></header><!--
-->Calcilia est un être libre comme l'air qui pense et fait ce qui lui chante. Elle a sa propre morale et se fiche bien d'effectuer des infractions. Elle apprécie tout particulièrement se moquer de la garde lorsqu'ils sont à ses trousses.
Buveuse invétérée qui aime dépouiller ses victimes de leurs cristaux lorsqu’ils ne sont plus aptes à faire deux pas sans tomber.
Elle manie la langue avec grâce durant ses chants, mais elle se montre grossière et agaçante lors de conversations.
C’est une grande voyageuse depuis qu’elle est enfant, elle souhaite maintenant aller au-delà des frontières ou parcourir l’océan à la recherche d’autres continents malgré ses phobies.
Sa passion est de suivre les aventuriers dans leurs périples afin de chanter leurs aventures lorsqu’elle retourne à la capitale. Elle ne fait que des spectacles de rue à son propre compte. Elle est tenace malgré les refus et son pouvoir offre un réel avantage sur le terrain, mais elle devient également un fardeau.
Elle est également un bon guide pour tout voyageur trop téméraires, après avoir passé la plupart de sa vie à vagabonder sur l'île.
Particularités notables : C’est une bonne combattante mais elle préfère fuir que se confronter au danger. Elle déteste ne pas voir le fond des eaux, et les algues. Elle suivra rarement une expédition qui se déroule dans un lieu aquatique. Son passe-temps est de faire des mauvaises blagues aux membres de la garde.<!--
-- Fin de la section --></section></main>
HTML - Partie pouvoir
Counter song
Les doigts font résonner les cordes de la lyre. La voix s'élève peu à peu dans les airs, tandis qu'une lueur aux rayons bleutés s'animent autour de la jeune femme, dansant langoureusement autour d'elle. Soudain, ils se figent dans les airs puis serpentent entre les hommes qui entourent son partenaire, longeant le champ de bataille, les cadavres qui jonchent le sol.Enfin, la lueur atteint sa cible, l'entourant d'un voile bleu avant de donner l'impression qu'il pénètre le corps, puis de s'évaporer. La barde rouvre son grand regard violine, le chant s'intensifiant. Tout ne faisait que commencer.
Calcilia chantera pour protéger ses partenaires. Le pouvoir résonnera et protègera quiconque sera sous son effet. Il aura pour but de renvoyer tout dégât physique qui lui seront porté. Mais ce n'est pas sans conséquences, Calcilia subira une partie des coups, et se retrouvera sans défense, incapable de bouger. Tant qu'elle chantera, la personne n'aura rien à craindre.
Améliorations
Objets de pouvoir
- Code:
<main class="ldb-calci" id="pouvoir"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir" class="actif">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><!--
• Nom du pouvoir
--><h2>Counter song</h2><!--
• Description du pouvoir
-->Les doigts font résonner les cordes de la lyre. La voix s'élève peu à peu dans les airs, tandis qu'une lueur aux rayons bleutés s'animent autour de la jeune femme, dansant langoureusement autour d'elle. Soudain, ils se figent dans les airs puis serpentent entre les hommes qui entourent son partenaire, longeant le champ de bataille, les cadavres qui jonchent le sol.
Enfin, la lueur atteint sa cible, l'entourant d'un voile bleu avant de donner l'impression qu'il pénètre le corps, puis de s'évaporer. La barde rouvre son grand regard violine, le chant s'intensifiant. Tout ne faisait que commencer.
Calcilia chantera pour protéger ses partenaires. Le pouvoir résonnera et protègera quiconque sera sous son effet. Il aura pour but de renvoyer tout dégât physique qui lui seront porté. Mais ce n'est pas sans conséquences, Calcilia subira une partie des coups, et se retrouvera sans défense, incapable de bouger. Tant qu'elle chantera, la personne n'aura rien à craindre.<!--
--><h2>Améliorations</h2><!--
-- Début du bloc
--><article><!--
• Nom de l'amélio
--><header>Amélioration 1</header><!--
• Description de l'amélio
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.<!--
-- Fin du bloc --></article><!--
--><h2>Objets de pouvoir</h2><!--
-- Début du bloc --><article><!--
• Nom de l'ODP<header>Shiva</header><!--
• Description de l'ODP
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.<!--
-- Fin du bloc --></article><!--
-- Fin de la section --></section></main>
HTML - Partie inventaire
Objets uniques
Inventaire
Autres
- Objet 1 (0/1)
- Objet 2 (1/2)
- Objet 3 (2/2)
- Objet 1 (0/1)
- Objet 2 (1/2)
- Objet 3 (2/2)
- Portail de téléportation
- Accès aux enchères
- Code:
<main class="ldb-calci" id="inventaire"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire" class="actif">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><!--
--><h2>Objets uniques</h2><!--
-- Début de bloc --><article><!--
• Nom de l'objet
--><header>Lyra Orchestra • Devis</header><!--
• Description de l'objet
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.<!--
-- Fin du bloc --></article><!--
--><h2>Inventaire</h2><!--
-- Début de bloc --><article><!--
• Nom de l'objet
--><header>Objet</header><!--
• Description de l'objet
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero. Amet, illum facilis. Nemo dicta tenetur voluptatibus, necessitatibus nisi rem mollitia modi ipsa voluptatum consequatur ab in, tempora nulla accusantium labore ea natus fugiat quia delectus, ipsam magni voluptas vitae.<!--
-- Fin du bloc --></article><!--
--><h2>Autres</h2><!--
-- Début de bloc --><article><!--
• Nom de la sous-catégorie
--><header>Consommables inRP</header><ul><!--
--><li>Objet 1 (0/1)</li><!--
--><li>Objet 2 (1/2)</li><!--
--><li>Objet 3 (2/2)</li><!--
-- Fin de la liste --></ul><!--
-- Fin du bloc --></article><!--
-- Début de bloc --><article><!--
• Nom de la sous-catégorie
--><header>Consommables HRP</header><ul><!--
--><li>Objet 1 (0/1)</li><!--
--><li>Objet 2 (1/2)</li><!--
--><li>Objet 3 (2/2)</li><!--
-- Fin de la liste --></ul><!--
-- Fin du bloc --></article><!--
-- Début de bloc --><article><!--
• Nom de la sous-catégorie
--><header>Avantages inRP</header><ul><!--
--><li>Portail de téléportation</li><!--
--><li>Accès aux enchères</li><!--
-- Fin de la liste --></ul><!--
-- Fin du bloc --></article><!--
-- Fin de la section --></section></main>
HTML - Partie familiers
- Code:
<main class="ldb-calci" id="familiers"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers" class="actif">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><!--
--><h2>Quota</h2><!--
-- Début du bloc --><article><header><figure><!--
• Image
--><img src="https://i.pinimg.com/564x/bc/41/04/bc4104f313aa237b9527f6ab724f874b.jpg" alt="Renards de saison"><!--
• Nom
--><figcaption>Illwy</figcaption><!--
--></figure></header><!--
• Description
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero.<!--
--><details><summary>Inventaire</summary><ul><!--
• Inventaire du familier
--><li>Objets :</li><!--
--><li>Armure :</li><!--
--><li>Magie :</li><!--
-- Fin du bloc --></ul></details></article><!--
-- Début du bloc --><article><header><figure><!--
• Image
--><img src="https://i.servimg.com/u/f53/20/36/37/77/amy-el10.jpg" alt="Goupil de glace"><!--
• Nom
--><figcaption>Eira</figcaption><!--
--></figure></header><!--
• Description
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero.<!--
--><details><summary>Inventaire</summary><ul><!--
• Inventaire du familier
--><li>Objets : Talisman glacial</li><!--
--><li>Armure :</li><!--
--><li>Magie : Déplacement</li><!--
-- Fin du bloc --></ul></details></article><!--
--><h2>Hors quota</h2><!--
-- Début du bloc --><article><header><figure><!--
• Image
--><img src="https://i.pinimg.com/564x/bc/41/04/bc4104f313aa237b9527f6ab724f874b.jpg" alt="Renards de saison"><!--
• Nom
--><figcaption>Nom</figcaption><!--
--></figure></header><!--
• Description
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione iusto natus cum vero tempora, expedita placeat ipsum laudantium temporibus blanditiis magnam quisquam eveniet sapiente corrupti consequatur fuga mollitia dolorem libero.<!--
--><details><summary>Inventaire</summary><ul><!--
• Inventaire du familier
--><li>Objets :</li><!--
--><li>Armure :</li><!--
--><li>Magie :</li><!--
-- Fin du bloc --></ul></details></article><!--
-- Fin de la section --></section></main>
Quota
Inventaire
- Objets :
- Armure :
- Magie :
Inventaire
- Objets : Talisman glacial
- Armure :
- Magie : Déplacement
Hors quota
Inventaire
- Objets :
- Armure :
- Magie :
HTML - Partie RPs
RPs en cours
RPs terminés
RPs abandonnés
- Code:
<main class="ldb-calci" id="rps"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps" class="actif">RPs</a></li><li><a href="#relations">Relations</a></li></ul></nav><section><!--
--><h2>RPs en cours</h2><!--
-- Début du bloc de RP --><article><header><!--
• Lien, titre et feat
--><a href="#">Titre</a> ft @Nom</header><!--
-- Fin du bloc de RP --></article><!--
--><h2>RPs terminés</h2><!--
-- Début du bloc de RP --><article><header><!--
• Lien, titre et feat
--><a href="#">Titre</a> ft @Nom</header><!--
• Résumé du RP
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vitae iure amet corporis totam molestias illo repellendus debitis delectus eaque beatae sunt sit aliquid mollitia et id iusto, distinctio facere.<!--
-- Fin du bloc de RP --></article><!--
--><h2>RPs abandonnés</h2><!--
-- Début du bloc de RP --><article><header><!--
• Lien, titre et feat
--><a href="#">Titre</a> ft @Nom</header><!--
-- Fin du bloc de RP --></article><!--
-- Fin de la section --></section></main>
HTML - Partie relations
PNJs
- Amy • 30 ans
- Amy est une aventurière qui a souvent voyagé avec Calcilia, elles se sont rencontrées dans une taverne, où la barde avait encore fait s'écrouler des hommes trop sûrs d'eux. Il leur arrive encore de se voir régulièrement de se voir. Elles ont fini par devenir amies même si chacun ne cherche pas à s'attacher davantage. Leur affection réciproque s'arrête à passer de bons moments ensemble car elles savent que les vies qu'elles mènent pourront les pousser à ne jamais se revoir si un jour. Amy est aussi du genre insouciante.
Relations
- Amy • 30 ans
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quos, labore quibusdam in distinctio sit. Ipsa provident sapiente, aspernatur est fugit obcaecati hic aperiam perspiciatis praesentium minus a voluptates adipisci!
- Code:
<main class="ldb-calci" id="relations"><nav><ul><li><a href="#general">Général</a></li><li><a href="#pouvoir">Pouvoir</a></li><li><a href="#inventaire">Inventaire</a></li><li><a href="#familiers">Familiers</a></li><li><a href="#rps">RPs</a></li><li><a href="#relations" class="actif">Relations</a></li></ul></nav><section><!--
--><h2>PNJs</h2><!--
--><dl><!--
• Image
--><img src="https://64.media.tumblr.com/e431be6870794aaaccdfe0950bb8e459/8fa67e9c62d15afe-8c/s540x810/dcf921e2f95a42d5da1522a6fcb98e6d243155b5.jpg" alt=""><!--
• Nom & âge
--><dt>Amy • 30 ans</dt><!--
• Résumé
--><dd>Amy est une aventurière qui a souvent voyagé avec Calcilia, elles se sont rencontrées dans une taverne, où la barde avait encore fait s'écrouler des hommes trop sûrs d'eux. Il leur arrive encore de se voir régulièrement de se voir. Elles ont fini par devenir amies même si chacun ne cherche pas à s'attacher davantage. Leur affection réciproque s'arrête à passer de bons moments ensemble car elles savent que les vies qu'elles mènent pourront les pousser à ne jamais se revoir si un jour. Amy est aussi du genre insouciante.<!--
-- Fin du bloc --></dd></dl><!--
--><h2>Relations</h2><!--
--><dl><!--
• Image
--><img src="https://64.media.tumblr.com/e431be6870794aaaccdfe0950bb8e459/8fa67e9c62d15afe-8c/s540x810/dcf921e2f95a42d5da1522a6fcb98e6d243155b5.jpg" alt=""><!--
• Nom & âge
--><dt>Amy • 30 ans</dt><!--
• Résumé
--><dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus quos, labore quibusdam in distinctio sit. Ipsa provident sapiente, aspernatur est fugit obcaecati hic aperiam perspiciatis praesentium minus a voluptates adipisci!<!--
-- Fin du bloc --></dd></dl><!--
-- Fin de la section --></section></main>
Et voilà, c'est tout bon \o/
Comme toujours, si tu as la moindre question, n'hésites pas à me MP.
La demande peut être clôturée.
+10 pour Sia ! (j'ai cru que c'était Sofia, ton avatar est perturbant )
La demande est clôturée ! o/
|
|