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 à ne pas rater :
One Piece TCG: où précommander la display [OP-02] Paramount War en ...
Voir le deal

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

    Argenty
    Argenty
    FémininAge : 20Messages : 42

    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 :

    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:


    Dernière édition par Argenty le Ven 8 Mai 2020 - 20:36, édité 3 fois
    Shaneliae
    Shaneliae
    FémininAge : 26Messages : 313

    Dim 3 Mai 2020 - 1:24

    Déplacé !

    Un autre membre du staff ou moi-même passerons plus tard pour vérifier ton LS 😄



    Argenty
    Argenty
    FémininAge : 20Messages : 42

    Dim 3 Mai 2020 - 14:21

    Merci beaucoup à toi ! Very Happy
    Shaneliae
    Shaneliae
    FémininAge : 26Messages : 313

    Ven 8 Mai 2020 - 19:34

    Hello Argenty !

    Cette fois je viens pour la validation 😉 Alors d'abord un merci pour ton LS, pour un premier ici le rendu est intéressant. En plus de cela tu as laissé des explications 👌

    Malheureusement, avant de valider j'aurai besoin que tu fasses quelques corrections :
    • Ne pas utiliser de caractères avec accent dans le CSS et les class CSS : c'est une règle importante, même si en ajouter peut fonctionner sur des navigateurs récents, certains ne le supportent pas. Seuls sont supporter les lettres simples (en minuscules et majuscules), les chiffres et les tirets/undescores. Donc tes class contenant "bannière" ne sont pas valides.
    • Modifier le titre de ton LS : comme il est expliqué dans les règles de la section il faut mettre un titre décrivant ton LS. Donc il est inutile de préciser LS (puisque la fiche sera dans une section LS) et ton pseudo (on utilise un système de tags/mots-clé que l'on ajoute à la validation où l'on ajoute le nom de l'auteur). Nous préférons des titres décrivant la fiche comme la façon dont sont positionnés les éléments, le style ou les couleurs utilisées. Si tu souhaites avoir un autre pseudo pour les tags tu peux le demander dans ta réponse à ce message, sinon tu peux aussi dépenser des Peanut's pour faire changer ton pseudo et nous mettrons automatiquement ce dernier dans les tags 😉


    Une fois ces points corrigés, je peux valider et déplacer ton LS !



    Argenty
    Argenty
    FémininAge : 20Messages : 42

    Ven 8 Mai 2020 - 20:39

    Bonsoir Shaneliae!
    Merci à toi Very Happy. J'ai modifié le nom de mes balises dans le CSS pour être dans les règles, tout comme le nom de mon sujet. Je ne sais pas s'il est suffisamment détaillé, je peux toujours rajouter qu'il y a quelques hover dedans si jamais :hum: .

    Voilà, s'il y a quoi que ce soit d'autres je le modifierais avec plaisir Very Happy
    Shaneliae
    Shaneliae
    FémininAge : 26Messages : 313

    Sam 23 Mai 2020 - 15:51

    Ce LS est validé !Tout est bon pour nous. Le sujet va maintenant être déplacé dans la section appropriée. Des tags seront ajoutés au début du sujet et ce LS sera aussi ajouté à l'index correspondant.

    @Argenty merci pour ta contribution ! N'oublie pas d'ajouter 5XP Architecte dans ton profil pour ce LS.



    Kelalin
    Kelalin
    FémininAge : 30Messages : 2589

    Sam 23 Mai 2020 - 23:36

    Très joli, j'aime beaucoup ! Merci pour le partage ! :)
    Sieben
    Sieben
    MasculinAge : 25Messages : 51

    Mar 17 Aoû 2021 - 18:08

    Merci \o/
    Mystborn
    Mystborn
    FémininAge : 22Messages : 89

    Dim 24 Avr 2022 - 16:07

    Merci pour cette fiche !
    Je vais l'utiliser pour la fiche de partenaires de mon forum :)



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


      La date/heure actuelle est Jeu 6 Oct 2022 - 12:18