Fiche rp pour plus de beauté

<link href='https://fonts.googleapis.com/css?family=Qwigley' rel='stylesheet' type='text/css'><style type="text/css">.fond{background:#451B1B;width:440px;height:auto;padding:5px;padding-top:15px;padding-bottom:15px;box-shadow:0px 0px 1px #362240;border-radius:15px 100px/100px 15px;}.titre{position:relative;font-family:qwigley;font-size:45px;color:#362240;text-shadow:1px 1px 0px #dbdcd3;font-style:italic;}.icons{width:100px;box-shadow:0px 0px 1px #362240;margin-left:3px;margin-right:3px;}.texte{width:420px;font-family:arial;font-size:11px;color:#dbdcd3;text-align:justify;line-height:10px;}</style><center><img class="icons" src="https://i.imgur.com/YJ0GTsT.png" /><img class="icons" src="https://i.imgur.com/VT1SHg6.png" /><img class="icons" src="https://i.imgur.com/VjF9V9s.png" /><div class="titre">a prayer to my owl</div><div class="fond"><div class="texte">Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.<br /><br />Excogitatum est super his, ut homines quidam ignoti, vilitate ipsa parum cavendi ad colligendos rumores per Antiochiae latera cuncta destinarentur relaturi quae audirent. hi peragranter et dissimulanter honoratorum circulis adsistendo pervadendoque divites domus egentium habitu quicquid noscere poterant vel audire latenter intromissi per posticas in regiam nuntiabant, id observantes conspiratione concordi, ut fingerent quaedam et cognita duplicarent in peius, laudes vero supprimerent Caesaris, quas invitis conpluribus formido malorum inpendentium exprimebat.<br /><br />Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret.</div></div></center>

<link href='http://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'><center><div style="width: 500px; background-color: #451B1B; border-top: 1px COULEURDOMINANTE dotted; border-bottom: 1px COULEUR DOMINANTE dotted; border-left: 1px solid COULEUR DOMINANTE; border-right: 1px solid COULEUR DOMINANTE;"><img src="LIEN DE L'IMAGE" width=100 height=100 style="opacity: 0.6; background-color: transp;"><img src="LIEN DE L'IMAGE" width=100 height=100 style="opacity: 0.6; background-color: transp;"><img src="LIEN DE L'IMAGE" width=100 height=100 style="opacity: 0.6; background-color: transp;">
<div style="font-family: arial black; margin-top: -30px; color: white;">PV. NOM DU JOUEUR</div>
<div style="font-family: Patrick Hand SC; font-size: 32px; color: white; text-shadow: 0px 0px 2px COULEUR DOMINANTE; letter-spacing: 2px;">Titre du RP</div>
<div style="font-family: times new roman; color: white; opacity: 0.6; margin-top: -20px; letter-spacing: 5px;">UNE CITATION</div>

<div style="text-align: justify; font-family: trebuchet MS; color: white; width: 475px; font-size: 11px; opacity: 0.6;">Écris un truc bien, je te fais confiance !
</div>
<div style="color: black;"><i>© Yamashita sur <a target="_blank" href="http://epicode.bbactif.com">épicode</a></i></div>
</div></center>

<style>.fond_fiche {width: 530px; margin: auto; padding: 15px; background-color: #FFF; font-family: 'Trebuchet MS', 'Arial', sans-serif; line-height: 18px;} .titre_rp {display: block; text-align: center; font-size: 25pt; padding-bottom: 10px; border-bottom: 2px dotted grey; color: grey;} .ft_persos {display: block; text-align: right; font-style: italic; font-size: 10px; color: grey;} .cadres_persos_rp {display: inline-block; width: 100px; height: 100px; overflow: hidden; border-radius: 55px; background-color: #FFF; margin-left: 35px; margin-right: -15px; transition: all 500ms ease; -webkit-transition: all 1s ease;} .cadres_persos_rp:hover {transform: rotate(360deg);} .texte_rp {text-align: justify; font-size: 13px; color: grey;} .image_dialogue {width: 50px; height: 50px; border-radius: 50px; float: left; padding: 10px; overflow: hidden; opacity: 0.8; transition: all 600ms ease; -webkit-transition: all 1s ease;} .image_dialogue:hover {opacity: 1;} .fond_fiche a {color: #000 !important; text-decoration: none; transition: all 300ms ease; -webkit-transition: all 1s ease;} .fond_fiche a:hover {color: silver !important;}</style>

<div class="fond_fiche"><!--
--><span class="titre_rp">Un titre</span><!--
--><span class="ft_persos">FT Machin, Truc & Bidule</span>
<img src="http://zupimages.net/up/16/06/qdp3.png" class="cadres_persos_rp" alt="image perso avec qui tu rp" /><img src="http://zupimages.net/up/16/06/qdp3.png" class="cadres_persos_rp" alt="image perso avec qui tu rp" /><img src="http://zupimages.net/up/16/06/qdp3.png" class="cadres_persos_rp" alt="image perso avec qui tu rp" /><img src="http://zupimages.net/up/16/06/qdp3.png" class="cadres_persos_rp" alt="image perso avec qui tu rp" />
<div style="border-bottom: 2px dotted grey; padding-top: 10px; padding-bottom: 10px;"></div>
<div class="texte_rp" style="font-family: 'Arial', 'Trebuchet MS', sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus metus elit, lacinia pharetra odio venenatis eu. Nullam turpis erat, pulvinar eu egestas eget, hendrerit ut augue. Donec accumsan, lectus eget tempus consectetur, sem turpis efficitur lorem, a sollicitudin nunc mi id justo. Cras vulputate at turpis at congue. Donec consectetur, nibh tincidunt convallis hendrerit, elit enim egestas massa, id pretium dui lectus ac urna. Suspendisse ultricies leo luctus lectus ullamcorper ullamcorper. Mauris consequat lacinia ultrices. Sed quis aliquet elit, vel ornare ex.

Sed euismod orci eu enim ullamcorper congue. Sed vitae massa ac magna rhoncus posuere sit amet ac magna. Duis at varius turpis, sed feugiat orci. Aliquam eget ex dui. Ut vitae tortor aliquet, ornare turpis quis, ornare purus. Sed vitae tortor molestie, lobortis leo et, condimentum lorem. Nullam pellentesque lorem at massa semper posuere. Cras non consequat purus, quis pellentesque libero.

<img src="http://zupimages.net/up/16/06/qdp3.png" class="image_dialogue" alt="Image du perso qui parle" /><div style="margin-top: 10px; color: blue;">- Un magnifique dialogue de quelqu'un. Pense à mettre l'image de la personne qui cause. Attention, elle fait 50*50 pixels et elle est redimensionnée automatiquement grâce au CSS. Idem pour les images du feat plus haut, elles font 100*100px et son redimensionnée à coup de CSS. Donc pas de soucis si tu ne trouve pas d'images à bord arrondis, le CSS va se charger d'arrondir l'image :3 Risque de déformation d'image par contre. Si tu veux changer la couleur du dialogue, tu remplace la valeur "blue" par ta couleur dans la proriété "color", qui est au-dessus. Et voilà un <a href="#">pitit lien pour finir</a> ! ~</div>

Vivamus fermentum condimentum enim, nec vestibulum purus pulvinar venenatis. Etiam ut augue eu eros mollis dignissim. Nunc condimentum ac lectus id auctor. Nullam a leo id ante sagittis ultricies. Suspendisse fringilla venenatis ipsum et maximus. Aenean fringilla dolor lacus, eu tristique tortor bibendum a. Maecenas sit amet nulla a ipsum suscipit fringilla vel et velit. Ut aliquam, elit ut volutpat dictum, odio arcu malesuada lectus, ut pulvinar metus lacus id risus. Etiam suscipit, magna at hendrerit ornare, lectus dolor faucibus magna, ac lacinia lorem augue sed magna.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla aliquet tempor est ac lacinia. In quam eros, sodales sit amet finibus at, interdum vel lorem. Aliquam facilisis orci sit amet consequat gravida. <a href="#">Vivamus</a> non dolor eget lorem scelerisque lobortis eu vitae eros. Nam sit amet fermentum diam. Fusce nec erat vulputate, gravida mi sed, gravida dolor. Vestibulum ac felis vitae ipsum sodales consequat non in felis. Morbi tempus eros ut ullamcorper tempus. Proin ornare augue nec nisl posuere, nec rhoncus massa tincidunt. Donec nisi sem, pellentesque id purus ac, maximus feugiat lacus. Aenean tincidunt ipsum ornare neque ultrices, eget tincidunt enim tincidunt. Aliquam placerat rutrum dictum. Vestibulum ultrices erat at justo commodo, pellentesque mattis turpis tempor. Praesent gravida eros ut velit bibendum posuere. Nunc nec placerat elit.

Vestibulum auctor molestie rhoncus. Donec rhoncus nisi vitae tempor mollis. Sed eu mi libero. Proin dui leo, tincidunt ac mauris accumsan, sagittis lacinia eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas blandit, est ut commodo efficitur, risus mauris vehicula risus, sed malesuada est velit a nunc. In id nibh consectetur, molestie mauris sit amet, tristique odio. Aenean quis condimentum magna, quis malesuada metus. </div>
<span style="display: block; font-size: 10px; color: silver; text-align: center;">Code par MV/Chamikaze sur <a href="http://epicode.bbactif.com/">Epicode</a></span></div>