Mar 30 Mar - 0:45
BIEN LE BONSOIR / BONJOUR !
Aujourd'hui je vous propose quelques codes pour vos fiches rp ! Je vais en rajouter petit à petit. N'hésitez pas à poster à la suite de ce Libre Service si vous voulez utiliser le code
Aujourd'hui je vous propose quelques codes pour vos fiches rp ! Je vais en rajouter petit à petit. N'hésitez pas à poster à la suite de ce Libre Service si vous voulez utiliser le code
- Libre Service 1:
- Code:
<style>.toutRp{ background-color: #D1D1D1; height: 615px; width: 600px; } .hautficherp{ background-color: #1B1346; height:100px; color: white; display:flex; flex-direction: row; } .hautficherp img{ background-color: #ffffff; height:100px; width: 150px; } .titrerp{ font-family: poppins; font-size: 20px; } .titrerp1{ padding-top: 10px; padding-left: 20px; width: 450px; margin-top: 21px;} .corpsrp{ display: flex; flex-direction: row; } .contenurp{ background-color: white; padding: 20px; font-size: 10px; text-align: justify;overflow: auto; width: 440px; height: 505px; margin-left: 10px; } .bannerrp2{ background-color: #262466; height: 506px; width: 150px; display: flex; flex-direction: column; } .bannerrp2 img{ background-color: black; width: 100px; height: 100px; border-radius: 100px; margin-left: 28px; margin-top: 40px; }.bannerrp2 p{ color: white; font-size: 10px; margin-left: 24px; margin-top: 40px; }</style>
<div class="toutRp"><div class="hautficherp"><div class="titrerp"><p class="titrerp1">Titre du RP</p></div><div class="imagrp"><img src="https://zupimages.net/up/21/13/8uc3.png"/></div></div><div class="corpsrp"><div class="contenurp"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius aliquet volutpat. Curabitur condimentum orci id orci blandit, ac sagittis lorem efficitur. Donec at imperdiet sem. Sed purus nisi, porta eget turpis sit amet, posuere vestibulum nisi. Integer eget nibh et elit mollis lacinia. Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum.
Maecenas elementum mollis augue et laoreet. Donec suscipit tellus dolor, vel luctus lectus mollis eu. Suspendisse eu nibh eros. Fusce ultricies orci non ornare luctus. Sed bibendum sapien sit amet odio accumsan vehicula. Ut eu pulvinar neque. Nunc sagittis lorem eget augue pulvinar sodales. Nullam sollicitudin, purus non pretium rutrum, nisl nibh condimentum leo, vel semper dolor nunc et libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius aliquet volutpat. Curabitur condimentum orci id orci blandit, ac sagittis lorem efficitur. Donec at imperdiet sem. Sed purus nisi, porta eget turpis sit amet, posuere vestibulum nisi. Integer eget nibh et elit mollis lacinia. Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum.
Maecenas elementum mollis augue et laoreet. Donec suscipit tellus dolor, vel luctus lectus mollis eu. Suspendisse eu nibh eros. Fusce ultricies orci non ornare luctus. Sed bibendum sapien sit amet odio accumsan vehicula. Ut eu pulvinar neque. Nunc sagittis lorem eget augue pulvinar sodales. Nullam sollicitudin, purus non pretium rutrum, nisl nibh condimentum leo, vel semper dolor nunc et libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius aliquet volutpat. Curabitur condimentum orci id orci blandit, ac sagittis lorem efficitur. Donec at imperdiet sem. Sed purus nisi, porta eget turpis sit amet, posuere vestibulum nisi. Integer eget nibh et elit mollis lacinia. Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum.</p></div><div class="bannerrp2"><img src="https://64.media.tumblr.com/066dec43d88c7ea65e1218ccc9d6345f/tumblr_inline_pahx7g2ia91ra22gj_400.png"/><img src="https://64.media.tumblr.com/066dec43d88c7ea65e1218ccc9d6345f/tumblr_inline_pahx7g2ia91ra22gj_400.png"/><p>Feat - </p></div></div></div>
Pour ce code, voilà la taille des deux images !
icone personnage : 100 x 100
image en haut a droite : 150 x 100
icone personnage : 100 x 100
image en haut a droite : 150 x 100
- Libre Service 2:
- Code:
<style> .toutRp{background-color: #D1D1D1; height: auto; width: 552px; } .hautficherp{ color: white; display: flex; flex-direction: column; } .hautficherp imagrp{ width: 552px; height 162px; }.titrerp{ height: 51px; background-color: #193447; text-align: center; display: flex; flex-direction: column;} .titrerp .titre1{ padding-top: 5px; padding-left: 20px; font-size: 23px; font-family: poppins;} .titrerp .titre2{ padding-left:20px; font-size: 10px; font-family: poppins; } .corpsrp{ display: flex; flex-direction: row; } .contenurp{ background-color: white; border-left: 8px solid #177B5C; border-right: 8px solid #177B5C; padding: 20px; font-size: 10px; text-align: justify; width: 423px; height: auto; margin-left: 65px; } .parolerp{display:flex; flex-direction: row;} .imgpar img{ width: 55px; border-radius:100px; position: absolute; margin-left: -45px; margin-top: -7px; border: 4px solid #177B5C;} .contenurp span{font-size: 12px;} .parolerp span{margin-left: 20px; font-size: 12px;}.basrp{ background-color: #177B5C; height: 10px; }</style>
<div class="toutRp"><div class="hautficherp"><div class="imagrp"><img src="https://zupimages.net/up/21/13/3731.png"/></div><div class="titrerp"><span class="titre1">Titre du RP</span><span class="titre2">Feat - NOM PRENOM</span></div></div><div class="corpsrp"><div class="contenurp"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius aliquet volutpat. Curabitur condimentum orci id orci blandit, ac sagittis lorem efficitur. Donec at imperdiet sem. Sed purus nisi, porta eget turpis sit amet, posuere vestibulum nisi. Integer eget nibh et elit mollis lacinia. Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum.</span>
<div class="parolerp"><div class="imgpar"><img src="https://64.media.tumblr.com/066dec43d88c7ea65e1218ccc9d6345f/tumblr_inline_pahx7g2ia91ra22gj_400.png"/></div><span>Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum</span></div><div style="clear:both;"></div>
<span>Maecenas elementum mollis augue et laoreet. Donec suscipit tellus dolor, vel luctus lectus mollis eu. Suspendisse eu nibh eros. Fusce ultricies orci non ornare luctus. Sed bibendum sapien sit amet odio accumsan vehicula. Ut eu pulvinar neque. Nunc sagittis lorem eget augue pulvinar sodales. Nullam sollicitudin, purus non pretium rutrum, nisl nibh condimentum leo, vel semper dolor nunc et libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius aliquet volutpat. Curabitur condimentum orci id orci blandit, ac sagittis lorem efficitur. Donec at imperdiet sem. Sed purus nisi, porta eget turpis sit amet, posuere vestibulum nisi. Integer eget nibh et elit mollis lacinia. Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum.
Maecenas elementum mollis augue et laoreet. Donec suscipit tellus dolor, vel luctus lectus mollis eu. Suspendisse eu nibh eros. Fusce ultricies orci non ornare luctus. Sed bibendum sapien sit amet odio accumsan vehicula. Ut eu pulvinar neque. Nunc sagittis lorem eget augue pulvinar sodales. Nullam sollicitudin, purus non pretium rutrum, nisl nibh condimentum leo, vel semper dolor nunc et libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius aliquet volutpat. Curabitur condimentum orci id orci blandit, ac sagittis lorem efficitur. Donec at imperdiet sem. Sed purus nisi, porta eget turpis sit amet, posuere vestibulum nisi. Integer eget nibh et elit mollis lacinia. Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum.</span></div></div><div class="basrp"></div></div>
Pour ce code, voilà la taille des deux images !
icone personnage : 55 x 55
image en haut a droite : 552 x 172
icone personnage : 55 x 55
image en haut a droite : 552 x 172
- Libre Sevice 3:
- Code:
<style>.toutRp{ background-color: #D1D1D1; height: 615px; width: 552px; } .hautficherp{ display:flex; flex-direction: row; } .imagrp1 img{ width: 128px; height: 181px; } .image2{ display: flex; flex-direction: column; } .image2 .imagrp img{ width: 272px; height: 91px; } .titrerp{ display: flex; flex-direction: column; background-color: #193447; color: white; font-family: poppins; width: 151px; text-align: center; } .titre1{ margin-top: 50px; } .titre2{ font-size:10px; } .corpsrp{ display: flex; flex-direction: row; }.contenurp{background-color: white; border-left: 8px solid #177B5C; padding: 20px; font-size: 10px; text-align: justify; overflow: auto; width: 453px; height: 432px; margin-left: 98px; } .basrp{ background-color: #193447; height: 10px;}</style>
<div class="toutRp"><div class="hautficherp"><div class="imagrp1"><img src="https://zupimages.net/up/21/13/uwgy.png"/></div><div class="image2"><div class="imagrp"><img src="https://zupimages.net/up/21/13/0nfb.png"/></div><div class="imagrp"><img src="https://zupimages.net/up/21/13/dxvo.png"/></div></div> <div class="titrerp"><span class="titre1">Titre du RP</span><span class="titre2">Feat - NOM PRENOM</span></div></div><div class="corpsrp"><div class="contenurp"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius aliquet volutpat. Curabitur condimentum orci id orci blandit, ac sagittis lorem efficitur. Donec at imperdiet sem. Sed purus nisi, porta eget turpis sit amet, posuere vestibulum nisi. Integer eget nibh et elit mollis lacinia. Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum.
Maecenas elementum mollis augue et laoreet. Donec suscipit tellus dolor, vel luctus lectus mollis eu. Suspendisse eu nibh eros. Fusce ultricies orci non ornare luctus. Sed bibendum sapien sit amet odio accumsan vehicula. Ut eu pulvinar neque. Nunc sagittis lorem eget augue pulvinar sodales. Nullam sollicitudin, purus non pretium rutrum, nisl nibh condimentum leo, vel semper dolor nunc et libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius aliquet volutpat. Curabitur condimentum orci id orci blandit, ac sagittis lorem efficitur. Donec at imperdiet sem. Sed purus nisi, porta eget turpis sit amet, posuere vestibulum nisi. Integer eget nibh et elit mollis lacinia. Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum.
Maecenas elementum mollis augue et laoreet. Donec suscipit tellus dolor, vel luctus lectus mollis eu. Suspendisse eu nibh eros. Fusce ultricies orci non ornare luctus. Sed bibendum sapien sit amet odio accumsan vehicula. Ut eu pulvinar neque. Nunc sagittis lorem eget augue pulvinar sodales. Nullam sollicitudin, purus non pretium rutrum, nisl nibh condimentum leo, vel semper dolor nunc et libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam varius aliquet volutpat. Curabitur condimentum orci id orci blandit, ac sagittis lorem efficitur. Donec at imperdiet sem. Sed purus nisi, porta eget turpis sit amet, posuere vestibulum nisi. Integer eget nibh et elit mollis lacinia. Nunc ut luctus nisi. Nam at finibus ipsum. Vivamus euismod ut nisi sit amet fermentum. </p></div></div><div class="basrp"></div></div>
Pour ce code, voilà la taille des deux images !
première image : 128 x 181
Les deux images à coté : 272 x 91
première image : 128 x 181
Les deux images à coté : 272 x 91
|
|