Libre Service Codage

<style type="text/css">.fondficheRP2{ width: 540px;height: 800px; background-image: url("https://i.ibb.co/2kq3X3z/fond-rp.png");text-align: left}.enteteRP2{height: 133px; font-family: 'Merriweather Sans', sans-serif; position: relative;}.titreRP2{display: flex; text-align: center; align-items: center; width: 250px; height: 130px; margin: auto; text-shadow: 2px 2px 1px #ff4413; font-size: 25px;}.Joueur1RP2{ font-size: 14px; position: absolute; top: 60px; left:0; width: 140px; text-align: center;}.Joueur2RP2{ font-size: 14px; position: absolute; top: 60px; right: 0; width: 140px; text-align: center;}.fondparaRP2{ height: 600px; padding: 10px; width: 350px; position: relative; margin: 10px auto auto;}.fondparaRP2 p{ height: 600px; overflow: auto; text-align: justify; position: relative; z-index: 2; width: 350px; font-family: 'Merriweather', serif; font-size: 12px; margin: auto;}.fondparaRP2 div{top: 0; left: 0; height: 630px; width: 370px; position: absolute; background-color: #d27318; opacity: 0.5;}</style>
   <link href="https://fonts.googleapis.com/css?family=Merriweather|Merriweather+Sans&display=swap" rel="stylesheet"></head>

[center]<div class="fondficheRP2"><div class="enteteRP2"><div class="Joueur1RP2">Bay</div><div class="titreRP2">I will shining, I swear it ♪</div><div class="Joueur2RP2">Nemeroff</div></div><div class="fondparaRP2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nisi a massa accumsan accumsan. Aliquam ac erat quis dolor luctus gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat tempor ultrices. Aenean quis felis vitae lacus suscipit commodo. Phasellus fringilla augue suscipit bibendum mollis. Sed auctor velit porta pretium efficitur. Sed arcu ex, ultricies porttitor massa id, sagittis dapibus ante. Maecenas imperdiet et ipsum quis scelerisque.

Nullam vitae urna eget tortor mattis lobortis vitae consectetur lacus. Vivamus sed nibh at lorem faucibus pellentesque cursus eget sem. Phasellus lorem nunc, tincidunt ultrices nisl vel, blandit rutrum justo. Pellentesque sed faucibus turpis. Suspendisse non sapien metus. Etiam varius nulla in ligula ultrices finibus. Sed justo elit, ultricies id leo vel, porttitor dapibus libero. Fusce fermentum sollicitudin ex vel egestas. Duis rutrum vulputate odio. Aenean a libero sed nunc finibus tincidunt.

Ut nec lacus nisl. Donec at laoreet orci. Cras a arcu non neque ornare dapibus non volutpat enim. Vivamus pharetra eu nisl vitae egestas. Donec mollis justo tortor, at hendrerit felis varius eget. Quisque augue felis, tristique et leo sit amet, mollis finibus nulla. Donec lobortis mollis arcu, id egestas ante sodales nec. Integer in justo urna. Proin sit amet lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi quis neque quis arcu consequat pellentesque. In et erat iaculis, fermentum nisi quis, gravida nulla. Suspendisse consequat massa risus, porta ornare ex aliquam eu. Etiam interdum fringilla pulvinar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nisi a massa accumsan accumsan. Aliquam ac erat quis dolor luctus gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat tempor ultrices. Aenean quis felis vitae lacus suscipit commodo. Phasellus fringilla augue suscipit bibendum mollis. Sed auctor velit porta pretium efficitur. Sed arcu ex, ultricies porttitor massa id, sagittis dapibus ante. Maecenas imperdiet et ipsum quis scelerisque.

Nullam vitae urna eget tortor mattis lobortis vitae consectetur lacus. Vivamus sed nibh at lorem faucibus pellentesque cursus eget sem. Phasellus lorem nunc, tincidunt ultrices nisl vel, blandit rutrum justo. Pellentesque sed faucibus turpis. Suspendisse non sapien metus. Etiam varius nulla in ligula ultrices finibus. Sed justo elit, ultricies id leo vel, porttitor dapibus libero. Fusce fermentum sollicitudin ex vel egestas. Duis rutrum vulputate odio. Aenean a libero sed nunc finibus tincidunt.

Ut nec lacus nisl. Donec at laoreet orci. Cras a arcu non neque ornare dapibus non volutpat enim. Vivamus pharetra eu nisl vitae egestas. Donec mollis justo tortor, at hendrerit felis varius eget. Quisque augue felis, tristique et leo sit amet, mollis finibus nulla. Donec lobortis mollis arcu, id egestas ante sodales nec. Integer in justo urna. Proin sit amet lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi quis neque quis arcu consequat pellentesque. In et erat iaculis, fermentum nisi quis, gravida nulla. Suspendisse consequat massa risus, porta ornare ex aliquam eu. Etiam interdum fringilla pulvinar.</p><div></div>
</div>
<span style="display: flex;justify-content: center; ">:copyright: by AngelsMari</span>
</div>[/center]

[center]<link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet">
<style type="text/css">.fondFicheRel{height: auto;width: 550px; background-color: #E0CAB1; display: flex; flex-wrap: wrap;align-items: center;font-family: 'Cookie', cursive; font-size: 20px;}.title {background-color: #B67272; display: inline-block; margin-bottom: 10px;font-family: Merienda; padding: 5%; color: #b3e2d4; font-size: 22px;}.rechercheLien {width: 340px; height:300px;text-align:center;}.textrecherche { overflow: auto;padding: 5%; margin: auto;text-align: left; width: 80%; height: 200px; background-color: #fffefb;}.cadreinfo { overflow: auto; padding: 5%; margin: auto; text-align: left; width: 80%; height: 140px; background-color: #fffefb;}.infoGen {text-align: center; margin-top: 10px; width: 200px; height: 400px; position: relative;}.infoGen img { position: relative;z-index: 2;}.textInfo { position: absolute; top: 0; width: 100%;  height: 100%;}.infoGen img:hover {opacity: 0; transition: 0.5s ease;}.caract{ display: flex; flex-wrap: wrap; justify-content: space-evenly;}.caract div{ display: inline-block; margin-top: 10px; background-color: #674e8a; padding: 5px; color: white;}.listeRP { overflow: auto; width: 100%; height: auto; text-align: center; display: flex;justify-content: space-evenly;}.listerp{ background-color: #fffefb; overflow: auto; padding: 5%; text-align: left; width: 145px; height: 200px; margin: auto auto 10px;}.imgPola { width: 100%; display: flex; justify-content: space-evenly; align-items: center; height: 150px;}.imgPola img{ width: 100px; height: 100px;} .imgPola div > img{max-width: 100%; height: auto;} .imgPola div{height: 120px; background: #fff; padding: 10px;filter: grayscale(100%); box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2);} .imgPola div:nth-of-type(4n+1){transform: scale( 0.8, 0.8 ) rotate(5deg); transition: all 0.35s;}.imgPola div:nth-of-type(4n+2) { transform: scale( 0.8, 0.8 ) rotate(-5deg);  transition: all 0.35s;}.imgPola div:nth-of-type(4n+4) { transform: scale( 0.8, 0.8 ) rotate(3deg);  transition: all 0.35s;}.imgPola div:nth-of-type(4n+3) { transform: scale( 0.8, 0.8 ) rotate(-3deg); transition: all 0.35s;}.imgPola div:hover {filter: none; transform: scale(1, 1) rotate(0deg) !important; transition: all 0.35s;}</style>
<div class="fondFicheRel"><div class="rechercheLien">  <div class="title">Lien recherché</div> <div class="textrecherche">Je recherche :
- Bidule
- Truc
- Truc
- Truc
- Bidule
- Truc
 - Bidule</div></div>
<div class="infoGen"><img src="http://signavatar.com/48712_v.gif" alt=""/><div class="textInfo"><div class="title">Information</div> <div class="cadreinfo">Nom : xxxx
Prénom :
Âge :
Camp :
Element :
Situation :</div><div class="caract"><div>Qualité</div><div>Défaut</div><div>Qualité</div><div>Défaut</div><div>Qualité</div><div>Défaut</div><div>Qualité</div><div>Défaut</div><div>Qualité</div></div></div></div>
<div class="imgPola"><div><img src="https://www.zupimages.net/up/18/30/um9u.jpg" alt=""/></div><div><img src="https://www.zupimages.net/up/18/30/um9u.jpg" alt=""/></div><div><img src="https://www.zupimages.net/up/18/30/um9u.jpg" alt=""/></div><div><img src="https://www.zupimages.net/up/18/30/um9u.jpg" alt=""/></div></div>
<div class="listeRP"><div><div class="title">RP <br>en cours</div><div class="listerp">- Titre de RP qui est long -- ft xxxx
- Titre de RP qui est long -- ft xxx
- Titre de RP qui est long -- ft xxxx
 - Titre de RP qui est long -- ft xxxx</div></div>
<div> <div class="title">RP  <br>terminé</div>
<div class="listerp">- Titre de RP qui est long -- ft xxxx
- Titre de RP qui est long -- ft xxx
- Titre de RP qui est long -- ft xxxx
 - Titre de RP qui est long -- ft xxxx</div></div>
<div><div class="title">RP Abandonné</div>
<div class="listerp">- Titre de RP qui est long -- ft xxxx
- Titre de RP qui est long -- ft xxx
- Titre de RP qui est long -- ft xxxx
 - Titre de RP qui est long -- ft xxxx</div></div></div> <div style="display: flex; color: black; justify-content: center; width: 100%">:copyright: by AngelsMari</div>
</div>[/center]