AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -33%
Remise de 1000 € sur le ...
Voir le deal
1999 €


1 résultat trouvé pour auteur_Argenty

Fiche de Partenariat - Bataille médiévale, tons marrons - Sam 2 Mai 2020 - 22:22

Fiche de Partenariat - Bataille médiévale, tons marrons



Bonsoir ! Je propose mon premier (il me semble) code en LS sur NU. J'espère qu'il ne comporte pas trop des fautes :)
C'est, comme le titre l'indique, une fiche de partenariat. C'est une fiche qui comporte du CSS, il faut donc soit avoir accès à la fiche de CSS du site où vous souhaitez l'héberger, soit avoir un forum où héberger la fiche en entier.
Vous pouvez voir ici le rendu de la fiche, des animations sont présentes sur les cases "Liens" et les cases "Pseudo".
> https://dame-nature-revenge.1fr1.net/h13-epic
Images :

Tag auteur_argenty sur Never Utopia - graphisme, codage et game design Fiche_12
Au passage de la souris sur les "Liens" :
Tag auteur_argenty sur Never Utopia - graphisme, codage et game design Fiche_10
Sur les "Pseudos" :
Tag auteur_argenty sur Never Utopia - graphisme, codage et game design Fiche_11


Les couleurs, images, typographies, etc sont évidemment modifiables. L'image du haut fait 450px de large et les images du staff sont en 100x100 pixels. Et bien sûr, ne retirez pas mon copyright, merci. Voilà le code :

Code:
.a {
    color:#F4F3F3;
    text-decoration : none;
    }
   
    .fond_fiche{
    position : relative;
  height: 625px;
    width: 450px;
    background-color: #929180;
    }
   
    .banniere_nomdufo {
    position : absolute;
    top: -5px;
    height: auto;
    width: 450px;
    background-color:#A9A794 ;
    }
   
    .nomdufo{
    font-family: 'Cinzel', serif;
    color: #F4F3F3;
    font-size: 25px;
    padding-top:3px;
    font-weight : bold;
    text-align: center;
    letter-spacing : 1px;
    }
   
    .bloc_contexte{
    position : absolute;
    top : 45px;
    left: 10px;
    height:235px;
    width:260px;
    border-right: 1px solid #A9A794;
    }
   
    .contenu_contexte{
    position : absolute;
    top: 5px;
    left: 0px;
    height:  225px;
    width: 250px;
    overflow : auto;
    }
   
    .texte{
    font-family: 'Red Hat Display', sans-serif;
    font-size: 11px;
  color: #000000;
    text-align: justify;
    }
   
    .bloc_liens{
    position : absolute;
    right : 10px;
    width :150px;
    height: 25px;
    background-color:#A9A794;
    transition-duration : 1.5s;
    }
   
    .bloc_liens:hover{
    width : 135px;
    transition-duration : 1;5s;
    }
   
    .liensdufo{
    font-family: 'Cizel', serif;
    color: #F4F3F3;
    font-size: 20px;
    text-align :center;
    font-variant : small-caps;
    letter-spacing : 2px;
    transition-duration : 2s;
    }
   
    .liensdufo:hover{
    letter-spacing : 0px;
    transition-duration : 2s;
    }
   
    .banniere_messages_membres {
  position : absolute;
    top : 295px;
    height: auto;
    width: 450px;
    background-color:#A9A794 ;
    text-align: center;
    }
   
    .messages_membres{
    font-family: 'Red Hat Display', sans-serif;
    color: #F4F3F3;
    font-size: 20px;
    font-variant:small-caps;
   
    }
   
    .soustitre_staff {
    position : absolute;
    left : 90px;
    top : 332px;
    color: #F4F3F3;
    font-family :'Cinzel', serif;
    font-size : 23px;
    font-weight : bold;
    }
   
    .image_staff{
    position :absolute;
    left : 20px;
    border : 3px solid #F4F3F3;
    border-radius : 60px;
    }
   
    .pseudostaff{
    position: absolute;
    left : 75px;
    height: 25px;
    width: 140px;
    background-color:#A9A794;
    transition-duration : 1s ;
    }
   
    .pseudostaff:hover{
    width:130px;
  transition-duration : 1s ;
    }
   
    .texte_pseudostaff{
    color: #F4F3F3;
    font-size: 18px;
    font-family :'Cinzel', serif;
    text-align: right;
    padding-right:4px;
    font-variant : small-caps;
    font-weight : bold;
    letter-spacing : 0.5px;
    }
   
    .texte_rangstaff{
    position :absolute;
    right: 250px;
    width : 95px;
    height : 50px;
    font-style :italic;
    font-weight : bold;
    font-size : 12px;
    font-family : 'Red Hat Display', sans-serif;
    color : #F4F3F3;
    text-align : right;
    padding-right : 3px;
    overflow : auto ;
    }
   
    .soustitre_infos{
    position : absolute;
    right: 75px;
    top:332px;
    color: #F4F3F3;
    font-family :'Cinzel', serif;
    font-size : 23px;
    font-weight : bold;
    }
   
    .bloc_infos{
    position : absolute;
    right : 10px;
    top : 364px;
    width : 205px;
    height : 235px;
    border-left: 1px solid #A9A794;
    }
   
    .contenu_infos{
    position : absolute;
    top: 5px;
    left: 10px;
    height:  225px;
    width: 190px;
    overflow : auto;
    }
   
    .credits{
    position : absolute;
    bottom: 5px;
    left :210px ;
    font-family: 'Calibri', sans-serif;
    font-size : 8px;
  color : #000000;
    }


Code:
<img src="https://pre00.deviantart.net/5c26/th/pre/f/2017/112/9/8/the_last_one_by_88grzes-db6preo.jpg"
          style="height:auto;width:450px;" />
       
        <div class="fond_fiche">
         
        <div class="banniere_nomdufo">
          <div class="nomdufo">
            <a class="a" href="#" target="_blank">
              NOM DU FORUM </a>
          </div>
        </div>
          <div class="bloc_contexte">
            <div class="contenu_contexte">
          <div class="texte">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           
          </div>
            </div>
          </div>
         
          <div class="bloc_liens" style="top:45px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">incipit</a> </div></div>
          <div class="bloc_liens" style="top:80px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">effectifs </a></div></div>
          <div class="bloc_liens" style="top:115px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">partenariats </a></div></div>
          <div class="bloc_liens" style="top:150px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">règlement </a></div></div>
          <div class="bloc_liens" style="top:185px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">autre </a></div></div>
            <div class="bloc_liens" style="top:220px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">autre </a></div></div>
            <div class="bloc_liens" style="top:255px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">autre </a></div></div>
         
            <div class="banniere_messages_membres">
          <span class="messages_membres">
            xx membres - xx messages
              </span></div>
       
          <div class="soustitre_staff"> Staff </div>
             
                      <div class="pseudostaff" style="top: 372px;" >
                        <div class="texte_pseudostaff">
                          <a class="a" href="#" target="_blank">Pseudo </a>
                        </div>
                </div>
         
          <div class="texte_rangstaff" style="top : 398px;"> fondateur
           
          </div>
         
  <div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/cheval10.jpg');
    height:70px; width:70px;top : 364px;"></div>
 
            <div class="pseudostaff" style="top: 452px;" >
                        <div class="texte_pseudostaff">
                          <a class="a" href="#" target="_blank">Pseudolong </a>
                    </div>
                </div>

          <div class="texte_rangstaff" style="top : 478px;"> administrateur & codeur
          </div>
         
  <div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/arbre_10.jpg');
    height:70px; width:70px;top : 444px;"></div>
         
            <div class="pseudostaff" style="top: 532px;" >
                        <div class="texte_pseudostaff">
                          <a class="a" href="#" target="_blank">Pseudo </a>
                    </div>
                </div>
         
          <div class="texte_rangstaff" style="top : 558px;"> moderateur
          </div>

<div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/lance_10.jpg');
    height:70px; width:70px;top : 524px;"></div>
         
         
          <div class="soustitre_infos" style=" margin : 0px; "> Infos </div>
         
          <div class="bloc_infos">
            <div class="contenu_infos">
            <div class="texte">
              :arrow_forward: une première information importante sur ton forum : sa date de création ? une particularité ?
              un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
              récente ? <br /><br />
              :arrow_forward: une deuxième information importante sur ton forum : sa date de création ? une particularité ?
              un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
              récente ? <br /><br />
      :arrow_forward: autre chose ?
             
              </div>
            </div>
            </div>
         
          <div class="credits">@Clém20</div>
         
          </div>

Et les deux typographies utilisées :
Code:
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap" rel="stylesheet">


Je vais apporter quelques précisions pour ceux qui seraient novices en codage et/ou ceux que cela intéresse :
Précisions:

- l'image en haut de la fiche a actuellement une largeur de 450 pixels et une hauteur définie en auto. Si vous regardez le code elle n'est pas "à l'intérieur" de la fiche, elle est au dessus, c'est pour éviter tout déréglage de la fiche si la hauteur de votre image était différente de celle de la mienne (car imaginons que votre image soit 50 pixels plus haute, tout le contenu de la fiche se retrouverait décalé de 50 pixels vers le bas et donc hors du fond de la fiche). Vous remarquez que sur le rendu il n'y a pas d'espace entre le bas de l'image et le haut de la fiche, ce qui arrive normalement si vous placez deux éléments indépendants à la suite. Si vous voulez que cela reste comme cela il vous faire attention à la ligne
Code:
top : -5px;
de la fonction
Code:
.banniere_nomdufo{
}
dans le CSS. Il ne faudra pas la supprimer, si vous la modifiez vous pourrez au choix créer un espace entre l'image et la fiche ou faire remonter le bandeau sur votre image.

- de manière générale si vous modifiez les balises
Code:
height : Xpx;
width : Xpx;
dans les fonctions du CSS les éléments de la fiche se retrouveront décalés d'une quelconque façon. Je vous le déconseille donc, sauf si vous avez le temps et l'envie de redimensionner tous les espacements de la fiche via les balises
Code:
top : Xpx;
bottom : Xpx;
left : Xpx;
right : Xpx;
des fonctions du CSS.

- le "nom du forum", les "liens" et les "pseudos" peuvent être des liens vers des sujets de votre forum, il faudra pour cela placer l'url du sujet en question à la place du # entre les guillemets ici :
Code:
 <a class="a" href="#" target="_blank"></a>

Pour que votre fiche soit agréable à ceux qui la verront ne supprimez pas le
Code:
target="_blank"
c'est la partie du code qui permet d'ouvrir un nouvel onglet avec le lien sélectionné. Pratique pour éviter les retours en arrière sur une unique page active Wink
Pour terminer sur les liens, vous pouvez voir que dans ce code ils ont une class associée, c'est la première fonction du CSS. Vous pouvez bien sûr modifier la couleur des liens, pour ce qui est du
Code:
text-decoration : none;
il permet d'empêcher que votre lien ne soit souligné, ce qui est nettement plus esthétique, faites attention à ne pas le supprimer.

-enfin, s'il s'avère que le nom du forum, du lien ou le pseudo que vous voulez écrire est un peu trop long, vous pouvez réduire l'espacement entre les lettres, respectivement de 1px, 0.5px et 2px via cette balise
Code:
letter-spacing : Xpx;
dans les fonctions associées au trois éléments précédemment cités. Si ce que vous voulez écrire est vraiment trop long il faudra modifier la taille de la div dans laquelle vous écrivez et par conséquent gérer sa disposition dans la fiche. Si jamais vous n'y arrivez pas n'hésitez pas à me demander par MP ou dans cette section du forum !


Revenir en haut

La date/heure actuelle est Sam 4 Juil 2020 - 4:30