Fiche RP simple avec image de fond

rendu:

Code:

<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap" rel="stylesheet"><div style="background-image: url('https://i.servimg.com/u/f94/19/77/99/78/8x6s9j11.jpg'); width: 550px; background-size: cover; border: solid 2px #e5e5e5; box-shadow: 2px 2px 10px #a0a0a0; border-top-left-radius: 10px; border-bottom-right-radius: 20px; margin: auto;">

<div style="width: 400px; text-align: center; font-family: 'Cinzel Decorative',cursive; font-size: 30px; font-weight: bold; letter-spacing: -1px; color: #55551F; padding: 15px 0px 3px 0px; text-shadow: 3px 3px 2px #57525F; margin: auto;">Titre de votre Rp</div><div style="width: 350px; color: white; font-size: 9px; text-transform: uppercase; text-align: center; font-family: helvetica, sans serif; margin: auto;">Petit mot doux qui est dit à l'oreille, de peu de chose fait merveille !</div><div style="padding: 0px; width: 450px; height: 200px; border: solid 3px #e5e5e5; box-shadow: 2px 2px 10px #a0a0a0; border-radius: 0px ; background-image: url('https://i.pinimg.com/originals/00/0b/68/000b68a9cf1c3616b3ba1648767ebd2b.gif'); -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg); transform: rotate(2deg); margin: auto;"></div>

<div style="width: 400px; font-family: ARIAL, sans serif; font-size: 11px; line-height: 12px; text-align: justify; background-color: transparent; padding: 10px 10px 10px 10px; color: #55551F; box-shadow: 2px 2px 10px #55551F; margin: auto; overflow: auto; font-weight: bold;">Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vica;rium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.

Apud has gentes, quarum exordiens initium ab Assyriis ad Nili cataractas porrigitur et confinia Blemmyarum, omnes pari sorte sunt bellatores seminudi coloratis sagulis pube tenus amicti, equorum adiumento pernicium graciliumque camelorum per diversa se raptantes, in tranquillis vel turbidis rebus: nec eorum quisquam aliquando stivam adprehendit vel arborem colit aut arva subigendo quaeritat victum, sed errant semper per spatia longe lateque distenta sine lare sine sedibus fixis aut legibus: nec idem perferunt diutius caelum aut tractus unius soli illis umquam placet.

Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.</div>

<p style="text-align: center; font-weight: bold;"> n.1 | 434 mots
code (c) Luinilinëalia</p></div>

• La balise center est dépréciée, cela signifie que dans un avenir proche les navigateurs ne la comprendront plus et elle ne fonctionnera plus dans les codes. A la place, tu peux mettre un

  Code:

  margin:auto;

  dans le style de ta première div.
• La balise b est à utiliser pour mettre du texte en gras de façon ponctuelle. Si tu veux mettre tout un bloc de texte en gras, tu peux utiliser

  Code:

  font-weight: bold;

  dans la div entourant ton texte.
• Est-ce normal que ton image de fond n'aille pas jusqu'à la fin de ton cadre ?
• Il est conseillé d'utiliser un titre présentant un peu mieux ton LS, on a déjà pas mal de "fiche rp simple". Si tu n'as pas d'idée, on peut se charger de remplacer le titre à la validation du LS.

Code:

background-size: cover;

Code:

background-repeat: repeat;

Code:

<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap" rel="stylesheet">

Code:

font-family: "Arial", sans-serif;

Code:

font-family: "Helvetica", sans-serif;

• Le "link" de Google Fonts doit être au tout début du code avant même l'ouverture de ta première "div". Même si cela fonctionne, cela évite les possibles problèmes.


• Il y a encore une balise "center" à la fin de ton code pour les crédits. Comme dit plus haut, il ne faut plus du tout utiliser cette balise. Il faut remplacer par :

  Code:

  <p style="text-align: center;">Ton texte</p>



• Enfin, plus haut je t'ai dit qu'il ne faut PAS utiliser la balise b pour une grande quantité de texte, ici ton le corps de ton RP est entouré d'une balise "b" et c'est le parfait mauvais exemple de son utilisation. Si tu veux mettre toute cette partie en gras, il te suffit d'ajouter dans le style de la div juste avant :

  Code:

  font-weight: bold;