Avis sur un codage de fiche administrative

Bien le bonjour à vous :)
Je souhaiterai quémander votre aide afin d'obtenir un avis vis-à-vis de la ressemblance entre mes codes et une éventuelle maquette ainsi que des idées pour améliorer le code et l'optimiser.
Sans attendre, voici mes maquettes :
https://i.imgur.com/xGwbpSM.png
https://i.imgur.com/JdMikFY.png
mon rendu : https://avada-kedavrarpg.forumactif.com/t2-second-test

et les codes :

Code:

<div class="ficheadministrative">
<div class="ficheadministrativetitre">Titre du sujet</div>
<div class="ficheadministrativebloc">
<span style="color: #786655!important;font-weight:bold; font-family: 'Baskervville', italic!important;font-size:11px;">L'avatar</span> doit être original, non tiré d’une série et d’un film (Vous l’aurez compris nous ne voulons pas de Mary Stuart, Catherine De Medicis, etc….). Les formats des Pseudos autorisés sont les suivants : Prénom Nom, Prénom P. Nom ou P. Prénom Nom. Les Pseudos comme Bgoss, Thor (etc….) sont interdits, merci cependant de contacter le Staff si vous désirez jouer une créature ou une toute autre chose.</div>
<div class="ficheadministrativecredit">Fiche codée par Arya</div>
</div>

Code:

<div class="ficheadministrative">
<div class="ficheadministrativebloc">
<div class="ficheadministrativetitre2">titre du sujet</div>

doit être original, non tiré d’une série et d’un film (Vous l’aurez compris nous ne voulons pas de Mary Stuart, Catherine De Medicis, etc….). Les formats des Pseudos autorisés sont les suivants : Prénom Nom, Prénom P. Nom ou P. Prénom Nom. Les Pseudos comme Bgoss, Thor (etc….) sont interdits, merci cependant de contacter le Staff si vous désirez jouer une créature ou une toute autre chose.

<div class="ficheadministrativesoustitre">Sous-titre</div>
doit être original, non tiré d’une série et d’un film (Vous l’aurez compris nous ne voulons pas de Mary Stuart, Catherine De Medicis, etc….). Les formats des Pseudos autorisés sont les suivants : Prénom Nom, Prénom P. Nom ou P. Prénom Nom. Les Pseudos comme Bgoss, Thor (etc….) sont interdits, merci cependant de contacter le Staff si vous désirez jouer une créature ou une toute autre chose.

</div>
<div class="ficheadministrativecredit">Fiche codée par Arya</div>
</div>

Code:

.ficheadministrative{background-image:url(https://www.zupimages.net/up/20/26/fohu.png);
background-repeat:repeat;background-position: center;width:500px;}
.ficheadministrativetitre{background-color:#34170e;margin: auto; width: 400px; height:100px; font-size: 40px; text-align: center;font-family: 'Morva';color:#9a9c9b; padding:20px;}
.ficheadministrativebloc{background-color:#1c1716; margin: auto; max-width:400px!important;border: 3px solid #34170e; font-family: Arial; text-align: justify; overflow:hidden;padding: 25px!important;font-size: 11px;line-height: 11px;color:#9a9c9b;}
.ficheadministrativecredit{font-weight:bold; font-family: 'Baskervville', italic!important;font-size:11px;color:#9a9c9b;margin-left: 350px;margin-top:-20px;}
.ficheadministrativesoustitre{font-size: 16px;font-family: 'Baskervville', italic!important;border-bottom: 3px solid #786655;color:#9a9c9b;font-weight:bold;}
.ficheadministrativetitre2{font-family: 'Baskervville', italic!important;font-size: 35px;text-align:center;}


d'avance merci :)

Hello !

Alors je viens mettre mon grain de sel pour la partie "optimisation" du code. Ce sont surtout des petits conseils pour t'aider à t'organiser et améliorer la lisibilité de ton code.

• Dans ta première fiche tu as du CSS dans une balise style, c'est dommage alors que pour tout le reste tu as bien tout séparé. Il y a une raison à ce choix ?
  
• Je te conseille personnellement de changer les noms de tes class. Elles sont longues et pas facile à lire, tu as rapidement une chance de t'embrouiller (surtout si c'est à réutiliser par des membres qui sont pas forcément à l'aise avec le code).
  
• En plus de cela, si ta fiche administrative sera unique sur le forum, tu n'as pas besoin de réutiliser "ficheadministrative" dans toutes tes class. Tu peux jouer sur le lien de parenté des éléments dans la fiche. Par exemple, au lieu d'avoir "ficheadministrativetitre" tu peux simplement mettre "titre" et ensuite dans le CSS tu cibleras ainsi :

  Code:

  .ficheadministrative .titre { ton CSS }

• N'hésites pas à utiliser d'autres balises que des div avec une class pour améliorer la lisibilité de ton code. Par exemple tu as utilisé un span, si tu ne comptes pas en utiliser d'autres dans ta fiche, tu peux le cibler directement sans utiliser de class de la manière suivante :

  Code:

  .ficheadministrative span { le CSS }

Bon ce n'est pas grand chose, mais déjà ça peut t'aider à moins te casser la tête et à essayer de moins te compliquer les choses lorsque tu codes.

Pour t'aider, je peux te conseiller ici le tuto en 2 parties de Manumanu sur les sélecteurs, je pense que les quelques conseils donnés pourront t'aider à améliorer ton code et l'utilisation de sélecteurs te seras utile si tu viens à faire des codes plus complexes. Partie 1 et partie 2.
Si tu veux aussi en apprendre plus sur les différentes balises qui existent et qui sont utilisables (mais aussi quand les utiliser ou non) je te conseille le très bon HTML5 Doctor (en anglais). De façon générale, tu peux aussi trouver pleins d'infos et bonnes pratiques sur MDN Web Docs de Mozilla (en français), ça va du tuto, les règles pour chaque type d'éléments, les bonnes pratiques aux explorations plus poussées. Pour la partie CSS il y a CSS tricks (en anglais) qui a aussi pleins de guides et d'explorations pour chercher à faire de nouvelles choses avec le HTML/CSS.

Voilà, je pense t'avoir déjà donné pas mal à potasser. N'hésites pas à venir montrer une nouvelle version de ton code