Code rp presonalise

[center]<style type="text/css">.rpiii4 { background: #ffffff; background: linear-gradient(to top, #001253, #5F8D4E, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff); width: 500px; border-radius:5px; position: relative; overflow: hidden; box-shadow: 0 0 5px #001253; font-family: 'Open Sans',Arial,Helvetica,sans-serif; font-size: 12px; color: #000; } .rpiii4  b, .rpiii4 i { color: #001253; } .wave4 { background: #001253 ; opacity: 0.4; width: 1000px; height: 1000px; position: absolute; bottom: 20px; left: -250px; border-radius: 45%; transform-origin: 50% 48%; animation: drift 3000ms infinite linear; } .wave.top4 { top: -800px; background: #000000; background: radial-gradient(#001253 40%, #5F8D4E, #001253); animation: drift 4000ms infinite linear; } .wave.-two4 { animation: drift 5000ms infinite linear; opacity: 1; } .wave.-two.top4 { animation: drift 6000ms infinite linear; } .wave.-three4 { animation: drift 7000ms infinite linear; opacity: 0.2; } .rpiii4::before { content:" "; width: 100%; height: 120px; display: block; background: linear-gradient(#001253 , transparent); position: absolute; z-index: 2; } @keyframes drift { from { transform: rotate(0deg); } from { transform: rotate(360deg); }} .headiii { width: 100%; height: 150px; position: absolute; z-index: 10; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .headiii img { width: 70px; height: 70px; border: 6px solid #fff; border-radius: 100%; background: #fff; } .headiii span { display: block; width: 350px; padding: 0 40px; text-align: center; color: #fff; margin-top: -35px; } .texteiii { position: relative; z-index: 3; margin: 220px 20px 120px 20px; text-align: justify; } .creditiii { position: absolute; left: 245px;bottom: 70px; padding-top: 5px;} .creditiii .material-icons { font-size: 11px; } .creditiii a { color: inherit; text-decoration: none; position: relative;} .creditiii a span { display: none; background: #fff; border: 1px solid #eee; padding: 1px 5px; text-align: center; position: absolute; width: 110px; bottom: -25px; left: -55px; } .creditiii a:hover span {display: block;}</style>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"><div class="rpiii4"><div class="headiii"><img src="https://i.servimg.com/u/f84/20/41/02/66/coderp10.png" /><span>Titre du rpg ici. Essayez de ne pas le faire trop long, ce ne sera pas beau sinon.</span></div><div class="wave -one4"></div><div class="wave -two4"></div><div class="wave -three4"></div><div class="wave -one top4"></div><div class="wave -two top4"></div><div class="wave -three top4"></div><div class="texteiii"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem. Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis. Ille enim occurrentia nescio quae comminiscebatur; Haec bene dicuntur, nec ego repugno, sed inter sese ipsa pugnant. Fortitudinis quaedam praecepta sunt ac paene leges, quae effeminari virum vetant in dolore. </p><p>Quid enim <b>necesse</b> est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Duo Reges: constructio interrete. Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis. <i>Estne, quaeso, inquam, sitienti in bibendo voluptas?</i> </p><p>Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Itaque mihi non satis videmini considerare quod iter sit naturae quaeque progressio. Verba tu fingas et ea dicas, quae non sentias? Suam denique cuique naturam esse ad vivendum ducem. Ac tamen, ne cui loco non videatur esse responsum, pauca etiam nunc dicam ad reliquam orationem tuam. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Que Manilium, ab iisque M. </p></div><div class="creditiii"><a target="_blank" href="https://gotheim-work.tumblr.com/"><i class="material-icons">filter_vintage</i><span>antre de gotheim</span></a></div></div>[/center]