coder sur mes pleurs (libre service de robin)

SOLUT SOLUT

J'ai ouvert un petit libre service parce que des fois je codes, alors autant partager. J'essaye de vous mettre ceux qui sont propres et modifiables facilement pour s'adapter à vos images et couleurs, mais n'hésitez pas à m'envoyer un petit message sur discord si vous rencontrez un problème quelconque avec la customisation. Cela dit, la structure du code doit rester la même. Prenez pas juste dans le LS pour vous faire une base pour vos propres codes après quoi erm genre si tu veux faire ton propre truc fait le toi-même, vole pas le travail des autres duuh. Vous pouvez utiliser ces codes à votre guise sur Hellébore, mais pas ailleurs svp. C'est juste pour les keupins uwu.

Y a moyen que j'ai utilisé certains codes ailleurs, mais sachez que si vous les voyez autre part que sur : Circée (rip), the Awakening et ici, c'est qu'ils ont rien  à y faire. Messagez-moi si vous les croisez dans la nature svp  

J'espère que vous allez trouver votre bonheur là-desous du coup

This is love /

Taille de l'image : Qu'importe, mais préférez au moins du 500px de large pour la qualité, et 200px de hauteur.

Couleurs utilisées : Texte : #000000 (blanc) / Fond : #fffffff (noir) (attention au dégradé si vous changez la couleur de fond)

Couleur à ajouter : #CODECOULEUR : la couleur que vous utilisez pour vos dialogues / #CODECOULEUR2 la couleur qu'utilise éventuellement votre partenaire rp

preview:

Code:

<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lora&display=swap" rel="stylesheet"><div class="mth1"><div class="head"><div class="cnt"><div class="info"><h1>titre du rp</h1><span>ft. prénom p. nom</span></div><img src="https://i.pinimg.com/564x/ff/f6/50/fff65012a311938653844745b3ec5693.jpg"></div><div class="grad"></div></div><div class="txt">Ton RP va ici <b>Dialogue</b><b class="part">Dialogue du keupin</b></div><div class="foot">notes</div><br/></div><div style="display: block; width: 500px; margin: 0 auto; text-align: right;">merci meri</div><style>.mth1{display:block;width:500px;background-color:#000;color:#FFF;font-family:'Lora',sans serif;font-size:12px;text-align:justify;margin:0 auto}.mth1 .head{display:block;width:500px;overflow:hidden;position:relative}.mth1 .head .cnt{position:relative;width:500px;text-align:center}.mth1 .head .cnt .info{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:all 1s}.mth1 .head:hover .cnt .info{opacity:1;transition:all 1s}.mth1 .head .cnt .info h1{font-family:'Abril Fatface',serif;margin-bottom:0; color: white; font-size: 22px;}.mth1 .head .cnt .info span{font-size:14px;letter-spacing:1px}.mth1 .head .cnt img{width:500px}.mth1 .head .grad{display:block;width:500px;height:200px;position:absolute;bottom:0;left:0;background:rgb(0,0,0); background:linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%)}.mth1 .txt{display:block;width:500px;padding:40px 30px}.mth1 .txt b{display:block;margin-left:20px;padding:5px;font-weight:500;color:#CODECOULEUR;font-style:italic}.mth1 .foot{display:block;width:400px;padding:30px;background-color:rgba(255,255,255,.2);margin:0 auto}</style>

preview:

Code:

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@300&display=swap" rel="stylesheet"><div class="mth2"><div class="wrapper"><div class="header"><div class="icon"><img src="URLICON"/></div><div class="info"><h1>titre du rp</h1><div class="feat">ft.prénom p.nom</div></div></div><div class="text">ton rp va ici

<b>ton dialogue ici</b>

<b class="part">ce que dit ton parto</b>
</div>
<div class="footer"><b>notes</b> blablabla</div>
</div>
</div>
<style>.mth2{display: block; width: 450px; padding: 25px; background-color: #f8f4f2; border: 1px solid #e6d8d1; font-family: 'Open Sans', sans serif; text-align: justify; font-size: 12px; margin: 0 auto; color:#33231b;}.mth2 .wrapper{display: block; width: 400px; padding: 25px; background-color: white;}.mth2 .wrapper .header{display: block; width: 400px; height: 137px; margin-bottom: 20px;}.mth2 .wrapper .header .info{display: inline-block; vertical-align: top; height: 100px; margin-top: 10px; border-top: solid 12px #ffc500; width: 230px; float: right; margin-right: 40px; padding-top: 15px; text-align: right;}.mth2 .wrapper .header .info h1{display: block; font-family: 'Bebas Neue',display;font-size:22px;color:#ffc500;margin:0;letter-spacing:2px}.mth2 .wrapper .header .info .feat{display:block;font-size:10px;letter-spacing:1px}.mth2 .wrapper .header .icon{display:inline-block;vertical-align:top;margin-bottom:5px}.mth2 .wrapper .header .icon img{display:block;width:120px;height:120px;border-radius:100%;padding:5px;border:1px solid #ffc500;transition:all 0.5s}.mth2 .wrapper .header .icon:hover img{transform:rotate(5deg);transition:all 0.5s}.mth2 .wrapper .text{display:block;padding:15px;max-height:300px;overflow:auto;border:1px solid #f8f4f2}.mth2 .wrapper .footer{display:block;margin-top:15px;padding:20px}.mth2 .wrapper .footer b{color:#ffc500}.mth2 .wrapper .text::-webkit-scrollbar-track{background-color:white;padding-right:2px}.mth2 .wrapper .text::-webkit-scrollbar{width:3px;background-color:#F5F5F5}.mth2 .wrapper .text::-webkit-scrollbar-thumb{background-color:#ffc500;margin:2px}.mth2 .wrapper .text b{display:block;font-weight:300;font-style:italic;margin-left:10px;color:#CODECOULEUR}.mth2 .wrapper .text b.part{color:#CODECOULEUR2}</style>

preview:

Code:

<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Open+Sans:wght@300&display=swap" rel="stylesheet"><div class="mth3"><div class="head"><div class="img"><img src="URLICON"/></div><div class="info"><h1><span>titre du rp</span></h1><span class="feat">ft. prénom p. nom</span></div></div><div class="text">ton rp va ici
<b>ton dialogue là</b>
<b class="part">dialogue de ton parto ici</b><br/><br/></div><div class="foot"><b>notes ;</b> blabla </div></div><style>.mth3{display:block;width:440px;padding:30px;border:1px solid #ECB991;background-color:white;margin:0 auto;font-size:12px;text-align:justify;font-family:open sans,sans serif;color:#6C5B63}.mth3 .head{display:block;width:380px;position:relative}.mth3 .head .img img{display:block;width:170px;height:170px;border-radius:100%;margin:0 auto}.mth3 .head .info{display:block;width:380px;margin:0 auto;text-align:center;padding:20px 0}.mth3 .head .info h1{display:block;width:380px;font-family:Abril Fatface,serif;font-size:22px;color:#6C5B63;letter-spacing:1px;text-align:center;border-bottom:1px solid #ECB991;line-height:.1em;margin:10px 0 40px}.mth3 .head .info h1 span{background-color:white;padding:0 10px;margin-bottom:20px}.mth3 .head .info .feat{padding:5px;background-color:#ECB991;text-align:center;color:white}.mth3 .text{display:block;padding:20px 0;line-height:22px}.mth3 .text::first-letter{border:1px solid #ECB991;padding:5px;color:#ECB991;font-family:Abril Fatface,serif;font-size:22px;line-height:16px;font-weight:500}.mth3 .text b{background-color:#CODECOULEUR;color:white;font-weight:300;padding:3px;font-style:italic}.mth3 .text b.part{background-color:#968189}.mth3 .foot{border-top:1px solid #ECB991;padding-top:10px}.mth3 .foot b{color:#CODECOULEUR2}</style></style>