Maquette : (ou schéma au minimum que l'on puisse visualiser ce que vous souhaitez)
Images à mettre :
Précisions : La demande a déjà été faite sur discord, je poste juste pour que Sia puisse me donner le code et qu'elle soit payée pour son dur labeur !
Ashley O’Callaigh
Vendeur d'art
Général
- Nom : O’Callaigh
- Prénom : Ashley
- Âge : 25 ans
- Groupe : Noble
- Métier : Marchand
Résumé
Ashley a vécu une enfance difficile avec un père strict mais une mère aimante. Il a souvent été humilié de ne pas être à la hauteur de la réputation des O’Callaigh, malgré le fait qu’il soit définitivement très intelligent et cultivé. Il maîtrise l’art du combat à l’épée, régulièrement il s’entraîne avec un chevalier. Il n’a en revanche que peu de connaissances militaires.Ashley est devenu l’héritier de la famille O’Callaigh suite à
C’est homme encore jeune, mais charismatique, il aura tendance à écraser les autres au lieu de se faire marcher dessus. Il manipule correctement son image afin de se faire apprécier de ses pairs, mais n’accorde sa confiance à personne.
Si Ashley est un homme fier, c’est notamment car il est [information actuellement confidentielle], mais personne n’est encore au courant. Lorsqu’il l’a appris, Ashley s’est juré de se créer un empire commercial puissant afin de surpasser son père.
Il quitte rarement son bureau, il passe la plupart de son temps à travailler. Si au départ, il n’y portait que peu d’intérêts, à présent Ashley est un fervent amateur d’art et maîtrise ce domaine comme personne.
Visual Dolorem
Ne croise pas son regard.Tu le regrettes maintenant que sa pupille envoûtante s’est incrustée jusque dans ton âme.
Parfois tu as cette sensation d’euphorie, parfois tu hurles une douleur inexistante. Surtout, ne te laisse jamais avoir par ces doux rêves qu’il t’offre. Tout n’est qu’un tissu de mensonges bien ficelé. Profite du moindre clignement de paupières pour t’enfuir. L’extase d’un rêve ne vaudra jamais celle d’une vie bien menée.
Le pouvoir d’Ashley est de plonger une personne dans une illusion. Tant qu’on ne croise pas son regard, il n’est pas capable de l’activer. En revanche, une fois qu’il a harponné sa victime, durant quelques secondes, il est en mesure de faire voir n’importe qu’elle illusion. Lorsque le contact se rompt, l’illusion cesse mais pas la sensation que celle-ci procure. Il ne reste aucun souvenir de l’illusion comme un rêve qui a été oublié le matin même. Seule une sensation reste, peut-être un sentiment d’angoisse, ou bien un d’euphorie. Cependant, être plongé régulièrement dans une illusion d’Ashley, a de forts impacts psychologiques sur la victime.
Il souffrira de t’emmener dans ces illusions, mais tu souffriras de t’en échapper. Alors surtout, ne croise pas ce regard attirant. Ou tout ne sera que malheur.
Améliorations
À savoir
PNJ importants
Mielle est la fille adoptive d'Ashley. Il l'a rencontrée à l'orphelinat en s'en servant pour un défi contre Oswald. Au début, il ne la voyait comme un enfant utile pour ses projets. Les circonstances ont fait qu'il a dû garder l'enfant afin de ne pas faire échouer ses plans. Avec le temps, il s'y est attaché et l'a adoptée officiellement. C'est une enfant discrète et timide, mais qui porte en elle encore les préceptes de ses parents décédés. Elle aussi s'est rapidement prise d'affection pour Ashley. Mielle est sa seule héritière.Son pouvoir lui permet de faire se déplacer son reflet dans n'importe quelle surface qui réfléchit son image.
Oscar est le majordome personnel d'Ashley, et travaille pour la famille O'Callaigh depuis 40 ans. C'est un homme fidèle et incorruptible. Il a juré son allégeance à cette famille. Il conseillait Ashley dans ses décisions lorsqu'il a pris la tête des affaires, il ne remet jamais en question les décisions de son maître. Ashley lui voue une confiance absolue et le respecte grandement. Son pouvoir lui permet simplement de sentir les personnes qui se trouvent dans son périmètre. Il n'est pas étonnant qu'il soit déjà présent derrière la porte avant que vous ne puissiez vous annoncer.
Inventaire
Familiers
Magies : magie 1 • magie 2
Equipements : Armure 1 • Armure 2
Magies : magie 1 • magie 2
Equipements : Armure 1 • Armure 2
Section RP
RPs en cours
Feat Pseudo, Pseudo et Pseudo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.
Feat Pseudo, Pseudo et PseudoLorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.
RPs terminés
Feat Pseudo, Pseudo et Pseudo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.
Feat Pseudo, Pseudo et Pseudo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.
RPs abandonnés
Feat Pseudo, Pseudo et Pseudo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.
Feat Pseudo, Pseudo et Pseudo
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.
Relations
Ashley a engagé Obsidian à plusieurs reprises pour toute sorte de missions. Il n’est jamais déçu de son travail, en revanche, ce mercenaire a tendance à l’agacer au plus haut point. Il n’est jamais à l’abri de surprises avec lui. Il est prudent en présence de cet homme et garde une relation purement professionnelle pour se protéger de toute mauvaise surprise.
Oswald et Ashley se sont rencontrés à plusieurs reprises lors de rencontres entre nobles. Une sorte de rivalité s’est créée entre les deux nobles suite à leurs différents échanges. Ils ont déterminé leur suprématie suite à une ultime bataille. Qui sait qui finira le grand gagnant.Malgré les plusieurs coups bas qu’a subi Ashley, il ne lui en tient pas rigueur car cela faisait partie du jeu. À la place, il ressent à son égard une sorte d’admiration sans pour autant en être expressif. Il ne lui ferait pas confiance, mais il reste à ses yeux un très bon adversaire.
Ashley le voit comme un beau jeune homme dans la vingtaine. Une chevelure de jais et un regard bleu profond.
Erland est un homme droit et bien trop honnête, ce qui a une bonne influence sur la fille d’Ashley. Au début, il n’était intéressé que par ses talents et ce qu’il aurait pu apporter à son marché. Au final, il apprécie la compagnie de l’ancien noble. Les sujets étant souvent bien plus diversifiés qu’au sein de la noblesse.
Le code complet
Je te donne quand même une version à copier/coller direct avec les espacements corrects pour que tu vois comment j'ai fait. Pour que ça soit plus simple, je te donne une version détaillée en dessous.
- Code:
<!-- BLOC CSS - Ne pas toucher --><style>@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap");:root{--fond: #ffffff; --fond-rgb: 255, 255, 255; --texte: #86545b; --titre: #f2e4e4; --accentuation: #cfb9b5; --titre-typo: "Anton", sans-serif; --texte-typo: "IBM Plex Sans Condensed", sans-serif;}.ldb-ashley{width: 100%; max-width: 700px; box-sizing: border-box; margin: 10px auto; padding: 20px 20px 30px; background-color: var(--fond); color: var(--texte); font: 400 16px/1.4 var(--texte-typo);}.ldb-ashley:after{content: "Crédits : Shaneliae"; width: 100%; display: block; position: relative; bottom: -24px; text-align: right; font: italic 10px/1 var(--texte-typo); color: var(--accentuation);}.ldb-ashley h1{display: inherit; position: inherit; top: inherit; width: inherit; left: inherit; min-height: inherit; margin: 0; background: none; padding: 100px 20px 0; text-align: inherit; font: 400 48px/1.2 var(--titre-typo); color: var(--fond); letter-spacing: inherit; text-transform: uppercase; text-shadow: none;}.ldb-ashley h2{display: inherit; position: inherit; margin: 30px 0 15px; padding: 0; text-align: inherit; font: 400 48px/1.2 var(--titre-typo); color: var(--titre); text-shadow: inherit; text-transform: uppercase; letter-spacing: inherit;}.ldb-ashley h2::after{content: ""; display: block; width: 70%; height: 8px; background: var(--titre);}.ldb-ashley h3{display: inherit; margin: 30px 0 15px; background: none; padding: 0; text-align: inherit; font: 400 24px/1.2 var(--titre-typo); text-transform: uppercase; color: inherit; letter-spacing: 2px;}.ldb-ashley q{quotes: "\275D\00A0" "\00A0\275E"; margin: 0 20px; font: 20px/1.2 var(--texte-typo); letter-spacing: 2px;}.ldb-ashley s{text-decoration-thickness: 8px; text-decoration-color: var(--titre);}.ldb-ashley ul{list-style: none; padding: 0;}.ldb-ashley ul li{font: 18px/1.8 var(--texte-typo);}.ldb-ashley ul li span{color: var(--accentuation); text-transform: uppercase; letter-spacing: 2px;}.ldb-ashley > header{background: url("/*** ICI LA BANNIERE ***/ https://cdn.discordapp.com/attachments/849349925573492769/857228165818613760/d429ea972eec7678e65af98f928d8fcf.jpg") top 20% center no-repeat; background-size: cover; height: 350px; position: relative; z-index: 1; margin: -20px -20px 0;}.ldb-ashley > header:after{content: ""; position: absolute; display: block; z-index: -1; top: 0; left: 0; height: 100%; width: 100%; background: rgba(var(--fond-rgb), 0.8); background: linear-gradient(0deg, var(--fond) 2%, rgba(var(--fond-rgb), 0) 100%);}.ldb-ashley .icone{height: 100px; width: auto; float: right;}.ldb-ashley .icone::after{clear: both;}.ldb-ashley article:not(.pnj, .familier, .rp, .relation){min-height: 70px; padding: 15px; background-color: var(--titre); position: relative; z-index: 1;}.ldb-ashley article:not(.pnj, .familier, .rp, .relation)::before{content: ""; display: block; position: absolute; z-index: -1; width: 160px; height: 80px; margin: -5px 0 0 -5px; background-color: var(--accentuation);}.ldb-ashley article:not(.pnj, .familier, .rp, .relation) header{text-transform: uppercase; font: 600 18px/1.2 var(--texte-typo);}.ldb-ashley .pnj{display: flex; align-content: flex-start; margin-bottom: 15px;}.ldb-ashley .pnj figure{width: 150px; max-height: 230px; position: relative; margin: 0; overflow: hidden;}.ldb-ashley .pnj figure img{width: 150px; height: 230px; object-fit: cover;}.ldb-ashley .pnj figure figcaption{position: absolute; display: block; width: 150px; bottom: 0; left: 0; padding: 4px 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0) 100%); text-align: center; font: 500 28px/1 var(--texte-typo); color: var(--fond); text-transform: uppercase; letter-spacing: 4px;}.ldb-ashley .pnj section{width: calc(100% - 170px); margin-left: 20px;}.ldb-ashley .familier{display: flex; align-content: flex-start; margin-bottom: 15px;}.ldb-ashley .familier figure{position: relative; margin: 0; overflow: hidden;}.ldb-ashley .familier figure img{width: 150px; height: 100px; object-fit: cover;}.ldb-ashley .familier figure figcaption{position: absolute; display: block; width: 150px; height: 100px; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); text-align: center; font: 500 18px/100px var(--texte-typo); color: var(--fond); text-transform: uppercase; letter-spacing: 4px; opacity: 0; transition: ease 0.45s;}.ldb-ashley .familier:hover figcaption{opacity: 1; transition: ease 0.45s;}.ldb-ashley .familier section{width: calc(100% - 170px); margin-left: 20px;}.ldb-ashley .rp{background-color: var(--titre); padding: 15px;}.ldb-ashley .rp a{font: 500 24px/1.2 var(--texte-typo); text-decoration: none; color: var(--texte); transition: ease 0.45s;}.ldb-ashley .rp a:hover{color: var(--accentuation); transition: ease 0.45s;}.ldb-ashley .rp span{color: var(--accentuation); font: italic 18px/1.4 var(--texte-typo);}.ldb-ashley .relation{display: flex; align-content: flex-start; margin-bottom: 15px; background-color: var(--titre);}.ldb-ashley .relation img{width: 150px; height: auto; object-fit: cover;}.ldb-ashley .relation section{width: calc(100% - 150px); padding: 20px; height: 200px; overflow-y: auto; scrollbar-color: var(--accentuation) var(--titre); scrollbar-width: thin;}.ldb-ashley .relation section::-webkit-scrollbar{width: 8px; height: 10px; background-color: var(--titre); /* or add it to the track */}.ldb-ashley .relation section::-webkit-scrollbar-thumb{background: var(--accentuation);}.ldb-ashley .relation section span{margin-bottom: 10px; font: 600 18px/1.4 var(--texte-typo); letter-spacing: 1px;}.ldb-ashley .relation section span.aventurier{color: #73c4b4;}.ldb-ashley .relation section span.citoyen{color: #e1a176;}.ldb-ashley .relation section span.garde{color: #aadb55;}.ldb-ashley .relation section span.noble{color: #b38ecd;}</style> <!-- FIN DU BLOC CSS --><!--
--><!--
----- PARTIE Identité & résumé
--><main class="ldb-ashley"><header><h1>Ashley O’Callaigh</h1><!--
--><q>Vendeur d'art</q></header><!--
ICONE
--><img src="https://cdn.discordapp.com/attachments/849349925573492769/857228324723228702/99206be63316fec492929fb96d6c7cbe.jpg" alt="Icône de Ashley" class="icone"><!--
--><h2>Général</h2><!--
--><ul><!--
--><li><span>Nom :</span> O’Callaigh</li><!--
--><li><span>Prénom :</span> Ashley</li><!--
--><li><span>Âge :</span> 25 ans</li><!--
--><li><span>Groupe :</span> Noble</li><!--
--><li><span>Métier :</span> Marchand</li><!--
--></ul><!--
--><h2>Résumé</h2><!--
-->Ashley a vécu une enfance difficile avec un père strict mais une mère aimante. Il a souvent été humilié de ne pas être à la hauteur de la réputation des O’Callaigh, malgré le fait qu’il soit définitivement très intelligent et cultivé. Il maîtrise l’art du combat à l’épée, régulièrement il s’entraîne avec un chevalier. Il n’a en revanche que peu de connaissances militaires.
Ashley est devenu l’héritier de la famille O’Callaigh suite à <s>[information actuellement confidentielle]</s> de son père. Il est un homme puissant qui profite pleinement de son don pour accroître le nom de sa famille au sein du royaume. Généralement, il fait appel à des méthodes qui sont à la limite du légal.
C’est homme encore jeune, mais charismatique, il aura tendance à écraser les autres au lieu de se faire marcher dessus. Il manipule correctement son image afin de se faire apprécier de ses pairs, mais n’accorde sa confiance à personne.
Si Ashley est un homme fier, c’est notamment car il est [information actuellement confidentielle], mais personne n’est encore au courant. Lorsqu’il l’a appris, Ashley s’est juré de se créer un empire commercial puissant afin de surpasser son père.
Il quitte rarement son bureau, il passe la plupart de son temps à travailler. Si au départ, il n’y portait que peu d’intérêts, à présent Ashley est un fervent amateur d’art et maîtrise ce domaine comme personne.</main>
<!--
----- PARTIE POUVOIR
--><main class="ldb-ashley"><!--
--><h2>Visual Dolorem</h2><!--
--><i>Ne croise pas son regard.
Tu le regrettes maintenant que sa pupille envoûtante s’est incrustée jusque dans ton âme.<br>Parfois tu as cette sensation d’euphorie, parfois tu hurles une douleur inexistante. Surtout, ne te laisse jamais avoir par ces doux rêves qu’il t’offre. Tout n’est qu’un tissu de mensonges bien ficelé. Profite du moindre clignement de paupières pour t’enfuir. L’extase d’un rêve ne vaudra jamais celle d’une vie bien menée.</i>
Le pouvoir d’Ashley est de plonger une personne dans une illusion. Tant qu’on ne croise pas son regard, il n’est pas capable de l’activer. En revanche, une fois qu’il a harponné sa victime, durant quelques secondes, il est en mesure de faire voir n’importe qu’elle illusion. Lorsque le contact se rompt, l’illusion cesse mais pas la sensation que celle-ci procure. Il ne reste aucun souvenir de l’illusion comme un rêve qui a été oublié le matin même. Seule une sensation reste, peut-être un sentiment d’angoisse, ou bien un d’euphorie. Cependant, être plongé régulièrement dans une illusion d’Ashley, a de forts impacts psychologiques sur la victime.
Il souffrira de t’emmener dans ces illusions, mais tu souffriras de t’en échapper. Alors surtout, ne croise pas ce regard attirant. Ou tout ne sera que malheur.<!--
--><h3>Améliorations</h3><!--
--><article><!--
--><header>Amélioration 1 • Tatouage</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 2 • 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><!--
--></main>
<!--
----- PARTIE A savoir
--><main class="ldb-ashley"><!--
--><h2>À savoir</h2><!--
--><h3>PNJ importants</h3><!--
--><article class="pnj"><figure><!--
--><img src="https://static.wikia.nocookie.net/who-made-me-princess/images/7/75/Athanasia_11.jpg" alt=""><!--
--><figcaption><!--
-->Mielle<!--
--></figcaption></figure><section><!--
--><b>8 ans - Reflect Clone</b>
Mielle est la fille adoptive d'Ashley. Il l'a rencontrée à l'orphelinat en s'en servant pour un défi contre Oswald. Au début, il ne la voyait comme un enfant utile pour ses projets. Les circonstances ont fait qu'il a dû garder l'enfant afin de ne pas faire échouer ses plans. Avec le temps, il s'y est attaché et l'a adoptée officiellement. C'est une enfant discrète et timide, mais qui porte en elle encore les préceptes de ses parents décédés. Elle aussi s'est rapidement prise d'affection pour Ashley. Mielle est sa seule héritière.Son pouvoir lui permet de faire se déplacer son reflet dans n'importe quelle surface qui réfléchit son image.<!--
--></section></article><!--
--><article class="pnj"><figure><!--
--><img src="https://i.pinimg.com/originals/e1/9e/5c/e19e5c96a49e5fdd263218a1ace4f555.jpg" alt=""><!--
--><figcaption><!--
-->Oscar<!--
--></figcaption></figure><section><!--
--><b>65 ans - Sixième Sens</b>
Oscar est le majordome personnel d'Ashley, et travaille pour la famille O'Callaigh depuis 40 ans. C'est un homme fidèle et incorruptible. Il a juré son allégeance à cette famille. Il conseillait Ashley dans ses décisions lorsqu'il a pris la tête des affaires, il ne remet jamais en question les décisions de son maître. Ashley lui voue une confiance absolue et le respecte grandement. Son pouvoir lui permet simplement de sentir les personnes qui se trouvent dans son périmètre. Il n'est pas étonnant qu'il soit déjà présent derrière la porte avant que vous ne puissiez vous annoncer.<!--
--></section></article><!--
--><h3>Inventaire</h3><!--
--><article><!--
--><header>truc bidule</header><!--
-->Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores sint alias voluptatum suscipit fuga accusantium eum nam cum consectetur repudiandae! Nemo est nobis voluptate nesciunt qui ipsum libero, animi consectetur.<!--
--></article><!--
--><article><!--
--><header>truc bidule</header><!--
-->Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores sint alias voluptatum suscipit fuga accusantium eum nam cum consectetur repudiandae! Nemo est nobis voluptate nesciunt qui ipsum libero, animi consectetur.<!--
--></article><!--
--><h3>Familiers</h3><!--
--><article class="familier"><figure><!--
--><img src="https://i.pinimg.com/originals/98/4a/a5/984aa5e5c0a92d7c013f2189d7cdb636.jpg" alt="Nom du familier"><!--
--><figcaption>Nom</figcaption><!--
--></figure><section><!--
--><b>Loup d'ombre • Oeuf</b>
Magies : magie 1 • magie 2
Equipements : Armure 1 • Armure 2<!--
--></section></article><!--
--><article class="familier"><figure><!--
--><img src="https://i.pinimg.com/originals/98/4a/a5/984aa5e5c0a92d7c013f2189d7cdb636.jpg" alt=""><!--
--><figcaption>Nom</figcaption><!--
--></figure><section><!--
--><b>Loup d'ombre • Oeuf</b>
Magies : magie 1 • magie 2
Equipements : Armure 1 • Armure 2<!--
--></section></article><!--
--></main>
<!--
----- PARTIE RP
--><main class="ldb-ashley"><!--
--><h2>Section RP</h2><!--
--><h3>RPs en cours</h3><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span><!--
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><h3>RPs terminés</h3><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><h3>RPs abandonnés</h3><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--></main>
<!--
----- PARTIE Relations
--><main class="ldb-ashley"><!--
--><h2>Relations</h2><!--
--><article class="relation"><!--
--><img src="https://static.zerochan.net/Zhongli.600.3157652.jpg" alt="" style="object-position: 15%;"><!--
--><section><!--
--><span class="citoyen">Obsidian De Yllor</span>
Ashley a engagé Obsidian à plusieurs reprises pour toute sorte de missions. Il n’est jamais déçu de son travail, en revanche, ce mercenaire a tendance à l’agacer au plus haut point. Il n’est jamais à l’abri de surprises avec lui. Il est prudent en présence de cet homme et garde une relation purement professionnelle pour se protéger de toute mauvaise surprise.<!--
--></section></article><!--
--><article class="relation"><!--
--><img src="https://i.pinimg.com/originals/2f/09/a5/2f09a552717b19913d687d5d2ebf5515.png" alt="" style="object-position: 70%;"><!--
--><section><!--
--><span class="noble">Oswald J. Cloverfield</span>
Oswald et Ashley se sont rencontrés à plusieurs reprises lors de rencontres entre nobles. Une sorte de rivalité s’est créée entre les deux nobles suite à leurs différents échanges. Ils ont déterminé leur suprématie suite à une ultime bataille. Qui sait qui finira le grand gagnant.Malgré les plusieurs coups bas qu’a subi Ashley, il ne lui en tient pas rigueur car cela faisait partie du jeu. À la place, il ressent à son égard une sorte d’admiration sans pour autant en être expressif. Il ne lui ferait pas confiance, mais il reste à ses yeux un très bon adversaire.
Ashley le voit comme un beau jeune homme dans la vingtaine. Une chevelure de jais et un regard bleu profond.<!--
--></section></article><!--
--><article class="relation"><!--
--><img src="https://s1.zerochan.net/Avenger.%28Edmond.Dant%C3%A8s%29.600.2318082.jpg" alt="" style="object-position: 10%;"><!--
--><section><!--
--><span class="citoyen">Erland Mago</span>
Erland est un homme droit et bien trop honnête, ce qui a une bonne influence sur la fille d’Ashley. Au début, il n’était intéressé que par ses talents et ce qu’il aurait pu apporter à son marché. Au final, il apprécie la compagnie de l’ancien noble. Les sujets étant souvent bien plus diversifiés qu’au sein de la noblesse.<!--
--></section></article><!--
--></main>
Le CSS
C'est un bon gros pavé à mettre au début de ton sujet. Je te conseille de ne le mettre que dans le premier post et au début du post idéalement (à la fin du post ça fonctionne aussi, mais peut y avoir un décalage au chargement). Tu peux le remettre dans chaque post pour que le code fonctionne à la prévisualisation, mais ça va l'alourdir et à la moindre modif, faut corriger dans chaque post.
- Code:
<!-- BLOC CSS - Ne pas toucher --><style>@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap");:root{--fond: #ffffff; --fond-rgb: 255, 255, 255; --texte: #86545b; --titre: #f2e4e4; --accentuation: #cfb9b5; --titre-typo: "Anton", sans-serif; --texte-typo: "IBM Plex Sans Condensed", sans-serif;}.ldb-ashley{width: 100%; max-width: 700px; box-sizing: border-box; margin: 10px auto; padding: 20px 20px 30px; background-color: var(--fond); color: var(--texte); font: 400 16px/1.4 var(--texte-typo);}.ldb-ashley:after{content: "Crédits : Shaneliae"; width: 100%; display: block; position: relative; bottom: -24px; text-align: right; font: italic 10px/1 var(--texte-typo); color: var(--accentuation);}.ldb-ashley h1{display: inherit; position: inherit; top: inherit; width: inherit; left: inherit; min-height: inherit; margin: 0; background: none; padding: 100px 20px 0; text-align: inherit; font: 400 48px/1.2 var(--titre-typo); color: var(--fond); letter-spacing: inherit; text-transform: uppercase; text-shadow: none;}.ldb-ashley h2{display: inherit; position: inherit; margin: 30px 0 15px; padding: 0; text-align: inherit; font: 400 48px/1.2 var(--titre-typo); color: var(--titre); text-shadow: inherit; text-transform: uppercase; letter-spacing: inherit;}.ldb-ashley h2::after{content: ""; display: block; width: 70%; height: 8px; background: var(--titre);}.ldb-ashley h3{display: inherit; margin: 30px 0 15px; background: none; padding: 0; text-align: inherit; font: 400 24px/1.2 var(--titre-typo); text-transform: uppercase; color: inherit; letter-spacing: 2px;}.ldb-ashley q{quotes: "\275D\00A0" "\00A0\275E"; margin: 0 20px; font: 20px/1.2 var(--texte-typo); letter-spacing: 2px;}.ldb-ashley s{text-decoration-thickness: 8px; text-decoration-color: var(--titre);}.ldb-ashley ul{list-style: none; padding: 0;}.ldb-ashley ul li{font: 18px/1.8 var(--texte-typo);}.ldb-ashley ul li span{color: var(--accentuation); text-transform: uppercase; letter-spacing: 2px;}.ldb-ashley > header{background: /*** ICI LA BANNIERE ***/ url("https://cdn.discordapp.com/attachments/849349925573492769/857228165818613760/d429ea972eec7678e65af98f928d8fcf.jpg") top 20% center no-repeat; background-size: cover; height: 350px; position: relative; z-index: 1; margin: -20px -20px 0;}.ldb-ashley > header:after{content: ""; position: absolute; display: block; z-index: -1; top: 0; left: 0; height: 100%; width: 100%; background: rgba(var(--fond-rgb), 0.8); background: linear-gradient(0deg, var(--fond) 2%, rgba(var(--fond-rgb), 0) 100%);}.ldb-ashley .icone{height: 100px; width: auto; float: right;}.ldb-ashley .icone::after{clear: both;}.ldb-ashley article:not(.pnj, .familier, .rp, .relation){min-height: 70px; padding: 15px; background-color: var(--titre); position: relative; z-index: 1;}.ldb-ashley article:not(.pnj, .familier, .rp, .relation)::before{content: ""; display: block; position: absolute; z-index: -1; width: 160px; height: 80px; margin: -5px 0 0 -5px; background-color: var(--accentuation);}.ldb-ashley article:not(.pnj, .familier, .rp, .relation) header{text-transform: uppercase; font: 600 18px/1.2 var(--texte-typo);}.ldb-ashley .pnj{display: flex; align-content: flex-start; margin-bottom: 15px;}.ldb-ashley .pnj figure{width: 150px; max-height: 230px; position: relative; margin: 0; overflow: hidden;}.ldb-ashley .pnj figure img{width: 150px; height: 230px; object-fit: cover;}.ldb-ashley .pnj figure figcaption{position: absolute; display: block; width: 150px; bottom: 0; left: 0; padding: 4px 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0) 100%); text-align: center; font: 500 28px/1 var(--texte-typo); color: var(--fond); text-transform: uppercase; letter-spacing: 4px;}.ldb-ashley .pnj section{width: calc(100% - 170px); margin-left: 20px;}.ldb-ashley .familier{display: flex; align-content: flex-start; margin-bottom: 15px;}.ldb-ashley .familier figure{position: relative; margin: 0; overflow: hidden;}.ldb-ashley .familier figure img{width: 150px; height: 100px; object-fit: cover;}.ldb-ashley .familier figure figcaption{position: absolute; display: block; width: 150px; height: 100px; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); text-align: center; font: 500 18px/100px var(--texte-typo); color: var(--fond); text-transform: uppercase; letter-spacing: 4px; opacity: 0; transition: ease 0.45s;}.ldb-ashley .familier:hover figcaption{opacity: 1; transition: ease 0.45s;}.ldb-ashley .familier section{width: calc(100% - 170px); margin-left: 20px;}.ldb-ashley .rp{background-color: var(--titre); padding: 15px;}.ldb-ashley .rp a{font: 500 24px/1.2 var(--texte-typo); text-decoration: none; color: var(--texte); transition: ease 0.45s;}.ldb-ashley .rp a:hover{color: var(--accentuation); transition: ease 0.45s;}.ldb-ashley .rp span{color: var(--accentuation); font: italic 18px/1.4 var(--texte-typo);}.ldb-ashley .relation{display: flex; align-content: flex-start; margin-bottom: 15px; background-color: var(--titre);}.ldb-ashley .relation img{width: 150px; height: auto; object-fit: cover;}.ldb-ashley .relation section{width: calc(100% - 150px); padding: 20px; height: 200px; overflow-y: auto; scrollbar-color: var(--accentuation) var(--titre); scrollbar-width: thin;}.ldb-ashley .relation section::-webkit-scrollbar{width: 8px; height: 10px; background-color: var(--titre); /* or add it to the track */}.ldb-ashley .relation section::-webkit-scrollbar-thumb{background: var(--accentuation);}.ldb-ashley .relation section span{margin-bottom: 10px; font: 600 18px/1.4 var(--texte-typo); letter-spacing: 1px;}.ldb-ashley .relation section span.aventurier{color: #73c4b4;}.ldb-ashley .relation section span.citoyen{color: #e1a176;}.ldb-ashley .relation section span.garde{color: #aadb55;}.ldb-ashley .relation section span.noble{color: #b38ecd;}</style> <!-- FIN DU BLOC CSS -->
Puisque tu m'as dit que tu veux réutiliser ce code pour Calci, je t'ai commenté les parties modifiables. Elles sont au tout début du CSS avec des commentaires. Il te suffit de modifier les valeurs après les varaibles qui sont marquées de "--" au début du CSS (dans la balise qui se nomme "root"). Si tu veux échanger des variable dans le CSS, elles sont repérables facilement puisqu'elles sont toutes écrites de la même façon : var(--variable).
Pour la bannière, je t'ai mit un gros "ICI LA BANNIERE" dans le CSS juste avant le lien.
Partie identité et résumé
- Code:
<main class="ldb-ashley"><header><h1>Ashley O’Callaigh</h1><!--
--><q>Vendeur d'art</q></header><!--
ICONE
--><img src="https://cdn.discordapp.com/attachments/849349925573492769/857228324723228702/99206be63316fec492929fb96d6c7cbe.jpg" alt="Icône de Ashley" class="icone"><!--
--><h2>Général</h2><!--
--><ul><!--
--><li><span>Nom :</span> O’Callaigh</li><!--
--><li><span>Prénom :</span> Ashley</li><!--
--><li><span>Âge :</span> 25 ans</li><!--
--><li><span>Groupe :</span> Noble</li><!--
--><li><span>Métier :</span> Marchand</li><!--
--></ul><!--
--><h2>Résumé</h2><!--
-->Ashley a vécu une enfance difficile avec un père strict mais une mère aimante. Il a souvent été humilié de ne pas être à la hauteur de la réputation des O’Callaigh, malgré le fait qu’il soit définitivement très intelligent et cultivé. Il maîtrise l’art du combat à l’épée, régulièrement il s’entraîne avec un chevalier. Il n’a en revanche que peu de connaissances militaires.
Ashley est devenu l’héritier de la famille O’Callaigh suite à <s>[information actuellement confidentielle]</s> de son père. Il est un homme puissant qui profite pleinement de son don pour accroître le nom de sa famille au sein du royaume. Généralement, il fait appel à des méthodes qui sont à la limite du légal.
C’est homme encore jeune, mais charismatique, il aura tendance à écraser les autres au lieu de se faire marcher dessus. Il manipule correctement son image afin de se faire apprécier de ses pairs, mais n’accorde sa confiance à personne.
Si Ashley est un homme fier, c’est notamment car il est [information actuellement confidentielle], mais personne n’est encore au courant. Lorsqu’il l’a appris, Ashley s’est juré de se créer un empire commercial puissant afin de surpasser son père.
Il quitte rarement son bureau, il passe la plupart de son temps à travailler. Si au départ, il n’y portait que peu d’intérêts, à présent Ashley est un fervent amateur d’art et maîtrise ce domaine comme personne.<!--
--></main>
Je pense que cette partie est simple, pas besoin de plus d'explications, mais n'hésites pas si tu as quand même des questions.
Partie pouvoir
- Code:
<main class="ldb-ashley"><!--
--><h2>Visual Dolorem</h2><!--
--><i>Ne croise pas son regard.
Tu le regrettes maintenant que sa pupille envoûtante s’est incrustée jusque dans ton âme.<br>Parfois tu as cette sensation d’euphorie, parfois tu hurles une douleur inexistante. Surtout, ne te laisse jamais avoir par ces doux rêves qu’il t’offre. Tout n’est qu’un tissu de mensonges bien ficelé. Profite du moindre clignement de paupières pour t’enfuir. L’extase d’un rêve ne vaudra jamais celle d’une vie bien menée.</i>
Le pouvoir d’Ashley est de plonger une personne dans une illusion. Tant qu’on ne croise pas son regard, il n’est pas capable de l’activer. En revanche, une fois qu’il a harponné sa victime, durant quelques secondes, il est en mesure de faire voir n’importe qu’elle illusion. Lorsque le contact se rompt, l’illusion cesse mais pas la sensation que celle-ci procure. Il ne reste aucun souvenir de l’illusion comme un rêve qui a été oublié le matin même. Seule une sensation reste, peut-être un sentiment d’angoisse, ou bien un d’euphorie. Cependant, être plongé régulièrement dans une illusion d’Ashley, a de forts impacts psychologiques sur la victime.
Il souffrira de t’emmener dans ces illusions, mais tu souffriras de t’en échapper. Alors surtout, ne croise pas ce regard attirant. Ou tout ne sera que malheur.<!--
--><h3>Améliorations</h3><!--
--><article><!--
--><header>Amélioration 1 • Tatouage</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 2 • 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><!--
--></main>
Chaque amélio est à mettre dans une balise "article". D'ailleurs, tu peux réutiliser cette balise pour tout et n'importe quoi. C'est celle là qui est aussi utilisée pour ton inventaire. Sa hauteur s'adapte au contenu et le rectangle coloré se trouve toujours au niveau du titre (header).
PNJ, Inventaire et Familiers
- Code:
<main class="ldb-ashley"><!--
--><h2>À savoir</h2><!--
--><h3>PNJ importants</h3><!--
--><article class="pnj"><figure><!--
--><img src="https://static.wikia.nocookie.net/who-made-me-princess/images/7/75/Athanasia_11.jpg" alt=""><!--
--><figcaption><!--
-->Mielle<!--
--></figcaption></figure><section><!--
--><b>8 ans - Reflect Clone</b>
Mielle est la fille adoptive d'Ashley. Il l'a rencontrée à l'orphelinat en s'en servant pour un défi contre Oswald. Au début, il ne la voyait comme un enfant utile pour ses projets. Les circonstances ont fait qu'il a dû garder l'enfant afin de ne pas faire échouer ses plans. Avec le temps, il s'y est attaché et l'a adoptée officiellement. C'est une enfant discrète et timide, mais qui porte en elle encore les préceptes de ses parents décédés. Elle aussi s'est rapidement prise d'affection pour Ashley. Mielle est sa seule héritière.Son pouvoir lui permet de faire se déplacer son reflet dans n'importe quelle surface qui réfléchit son image.<!--
--></section></article><!--
--><article class="pnj"><figure><!--
--><img src="https://i.pinimg.com/originals/e1/9e/5c/e19e5c96a49e5fdd263218a1ace4f555.jpg" alt=""><!--
--><figcaption><!--
-->Oscar<!--
--></figcaption></figure><section><!--
--><b>65 ans - Sixième Sens</b>
Oscar est le majordome personnel d'Ashley, et travaille pour la famille O'Callaigh depuis 40 ans. C'est un homme fidèle et incorruptible. Il a juré son allégeance à cette famille. Il conseillait Ashley dans ses décisions lorsqu'il a pris la tête des affaires, il ne remet jamais en question les décisions de son maître. Ashley lui voue une confiance absolue et le respecte grandement. Son pouvoir lui permet simplement de sentir les personnes qui se trouvent dans son périmètre. Il n'est pas étonnant qu'il soit déjà présent derrière la porte avant que vous ne puissiez vous annoncer.<!--
--></section></article><!--
--><h3>Inventaire</h3><!--
--><article><!--
--><header>truc bidule</header><!--
-->Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores sint alias voluptatum suscipit fuga accusantium eum nam cum consectetur repudiandae! Nemo est nobis voluptate nesciunt qui ipsum libero, animi consectetur.<!--
--></article><!--
--><article><!--
--><header>truc bidule</header><!--
-->Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores sint alias voluptatum suscipit fuga accusantium eum nam cum consectetur repudiandae! Nemo est nobis voluptate nesciunt qui ipsum libero, animi consectetur.<!--
--></article><!--
--><h3>Familiers</h3><!--
--><article class="familier"><figure><!--
--><img src="https://i.pinimg.com/originals/98/4a/a5/984aa5e5c0a92d7c013f2189d7cdb636.jpg" alt="Nom du familier"><!--
--><figcaption>Nom</figcaption><!--
--></figure><section><!--
--><b>Loup d'ombre • Oeuf</b>
Magies : magie 1 • magie 2
Equipements : Armure 1 • Armure 2<!--
--></section></article><!--
--><article class="familier"><figure><!--
--><img src="https://i.pinimg.com/originals/98/4a/a5/984aa5e5c0a92d7c013f2189d7cdb636.jpg" alt=""><!--
--><figcaption>Nom</figcaption><!--
--></figure><section><!--
--><b>Loup d'ombre • Oeuf</b>
Magies : magie 1 • magie 2
Equipements : Armure 1 • Armure 2<!--
--></section></article><!--
--></main>
Comme expliqué, tu peux utiliser la balise "article" pour plein de choses, dont ton inventaire. A toi de voir ce que tu veux en faire !
Pour les PNJ, c'est aussi des balises "article" mais avec une class "PNJ", ça donne le bon style. Je t'ai séparé l'image qui se redimensionne toute seule, le nom, la petite ligne en gras (entre balise "b", le BBCode fonctionne aussi, si jamais) et le texte.
Taille de l'image : 150*230 px
Pour les familiers, c'est presque comme les PNJ, mais cette fois la balise "article" a une class "familier".
Taille de l'image : 150*100 px
Partie RP
- Code:
<main class="ldb-ashley"><!--
--><h2>Section RP</h2><!--
--><h3>RPs en cours</h3><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span><!--
-->Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><h3>RPs terminés</h3><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><h3>RPs abandonnés</h3><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--><article class="rp"><!--
--><a href="#">Titre du RP</a>
<span>Feat Pseudo, Pseudo et Pseudo</span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora totam odio, voluptate ex alias sequi dicta ducimus quia voluptatem maiores adipisci! Officia id quas vitae itaque ducimus velit mollitia ab.<!--
--></article><!--
--></main>
Encore des balises "article" mais avec une class "rp" cette fois. Le reste me parait simple, mais n'hésites pas à poser des questions !
Partie relations
- Code:
<main class="ldb-ashley"><!--
--><h2>Relations</h2><!--
--><article class="relation"><!--
--><img src="https://static.zerochan.net/Zhongli.600.3157652.jpg" alt="" style="object-position: 15%;"><!--
--><section><!--
--><span class="citoyen">Obsidian De Yllor</span>
Ashley a engagé Obsidian à plusieurs reprises pour toute sorte de missions. Il n’est jamais déçu de son travail, en revanche, ce mercenaire a tendance à l’agacer au plus haut point. Il n’est jamais à l’abri de surprises avec lui. Il est prudent en présence de cet homme et garde une relation purement professionnelle pour se protéger de toute mauvaise surprise.<!--
--></section></article><!--
--><article class="relation"><!--
--><img src="https://i.pinimg.com/originals/2f/09/a5/2f09a552717b19913d687d5d2ebf5515.png" alt="" style="object-position: 70%;"><!--
--><section><!--
--><span class="noble">Oswald J. Cloverfield</span>
Oswald et Ashley se sont rencontrés à plusieurs reprises lors de rencontres entre nobles. Une sorte de rivalité s’est créée entre les deux nobles suite à leurs différents échanges. Ils ont déterminé leur suprématie suite à une ultime bataille. Qui sait qui finira le grand gagnant.Malgré les plusieurs coups bas qu’a subi Ashley, il ne lui en tient pas rigueur car cela faisait partie du jeu. À la place, il ressent à son égard une sorte d’admiration sans pour autant en être expressif. Il ne lui ferait pas confiance, mais il reste à ses yeux un très bon adversaire.
Ashley le voit comme un beau jeune homme dans la vingtaine. Une chevelure de jais et un regard bleu profond.<!--
--></section></article><!--
--><article class="relation"><!--
--><img src="https://s1.zerochan.net/Avenger.%28Edmond.Dant%C3%A8s%29.600.2318082.jpg" alt="" style="object-position: 10%;"><!--
--><section><!--
--><span class="citoyen">Erland Mago</span>
Erland est un homme droit et bien trop honnête, ce qui a une bonne influence sur la fille d’Ashley. Au début, il n’était intéressé que par ses talents et ce qu’il aurait pu apporter à son marché. Au final, il apprécie la compagnie de l’ancien noble. Les sujets étant souvent bien plus diversifiés qu’au sein de la noblesse.<!--
--></section></article><!--
--></main>
Enfin la dernière partie ! La même chose donc, mais avec une class "relation" cette fois. Comme demandé, il y a une scrollbar quand le texte est trop long. Pour les couleurs de groupe, il y a une balise "span" qui entour le nom du personnage et il suffit de mettre la bonne class : "aventurier", "garde", "noble" ou "citoyen". Je n'ai pas fait les sous-groupes (criminels, gouvernement, etc) mais ils sont ajoutables !
Petite explication pour les images : tu peux mettre ce que tu veux, elles vont s'ajuster en hauteur. Par contre, si tu utilises des images en format paysage comme ici, tu peux ajuster la position pour centrer sur le visage du personnage. Pour cela, dans la balise "img" j'ai ajouté une petite ligne de "style" :
- Code:
style="object-position: 10%;"
Taille des images : 150*200 px
Explications bonus
Tu as donc 2 niveaux d'intertitres : h2 et h3. On peut en ajouter d'autres, mais par défaut ils auront le style du thème du forum.
Je t'ai aussi mit la petite balise pour cacher les informations confidentielles : la balise "s". Il suffit d'entourer le texte voulu de cette balise et ça le barre. On ne peut voir ce qui est écrit que en faisant un clic droit > inspecter.
J'ai essayé de t'aérer le code au maximum pour qu'il soit lisible, mais vu que FA interpètre le moindre saut de ligne, pour pas que ça casse tout, tu verras ces deux balises de commentaires pour éviter que les sauts de lignes soient interprêtés :
- Code:
<!--
-->
<!--
Ici tu peux mettre autant de sauts de lignes que tu veux, et autant de texte que tu veux, ça ne s'affichera pas.
-->
C'est à peu près tout ! Comme tu m'y as autorisé, j'ai mit mon crédit avec mon pseudo sur les forums de LS.
Un grand merci pour cette commande
Je l'ajoute dès que je passe sur pc !
Et la demande peut être clôturée !
|
|