AccueilDernières imagesRechercherS'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 :
Code promo Nike : -25% dès 50€ d’achats sur tout le site Nike
Voir le deal

    [PAGE D'ACCUEIL] Simple mais jolie !

    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Jeu 28 Avr 2016 - 22:31

    Ma demande



    Bonjouurr (ou bonsoir) ! Tout d'abord un grand merci à celui/celle qui prendra ma commande  :aww:  ham1 Ce que je souhaite, c'est une page d'accueil assez simple mais qui donne un résultat harmonieux sur mon forum qui est en construction encore, j'espère que je ne vous paraîtrais pas trop casse-pieds xD Pour que ce soit plus simple, j'ai fais un schéma :3

    Schéma(s) et Eléments
    Schémas : [PAGE D'ACCUEIL] Simple mais jolie ! Comman10
    Tailles des éléments : Ermm.. bah il faudrait que ce soit de la même largeur que les catégories de mon forum, pour la hauteur c'est libre !
    Effets voulus : Pour les images du staff j'aimerais si possible qu'elles glissent sur le côté ou un effet hover n'importe lequel du moment qu'en dessous apparaisse le nom du personnage + pseudo de l'administrateur + liens vers le profil et message privé (merci !) sinon les images des scénarios un simple lien "voir" sous l'image suffit  :ange:
    Version de votre forum : PHPBB2



    Autres précisions ?
    Ah et au fait si possible remplacer les "crédits" par les boutons des partenaires ? je mettrais les crédits dans le QEEL.. Encore une fois merci beaucoup et n'hésitez pas si vous avez besoin de quoique ce soit, css/templates etc.  :kdo:

    PS : lien vers mon forum >>
    Code:
    http://elinab.forumactif.org



    Dernière édition par Jiya le Ven 13 Mai 2016 - 21:36, édité 1 fois
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Sam 30 Avr 2016 - 13:23

    Up ?
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Lun 2 Mai 2016 - 13:04

    Up ?
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Mer 4 Mai 2016 - 16:03

    Up !
    allcl
    allcl
    FémininAge : 25Messages : 81

    Mer 4 Mai 2016 - 22:35

    Hey!

    Je veux bien essayer quelque chose. Mais de quelle couleur la veux-tu? Je veux dire, ton forum est dans les tons bleu claire, veux tu une page d'accueil avec les mêmes couleurs que le schéma (gris)?
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Mer 4 Mai 2016 - 23:00

    Les couleurs ne sont pas vraiment un soucis, peu importe, je sais bidouiller les codes donc je changerais selon ce que je souhaite ! Et MERCI beaucoup !!! Very Happy :love:
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Dim 8 Mai 2016 - 13:52

    Up ?
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Mer 11 Mai 2016 - 13:02

    Bonjour !
    Je voulais savoir allcl était encore vivante et prête à faire ta commande - parce que sinon, je serais ravie de tenter quelque chose par moi-même.

    EDIT : Et ça sonne peut-être très malpoli alors je m'excuse si c'est le cas je veux juste aider moi ><
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Mer 11 Mai 2016 - 14:01

    Hello! Bah je ne sais vraiment pas vu qu'elle s'est proposée mais qu'elle n'a pas redonné de réponse définitive et que ça fait 1 semaine..? Ce n'est pas impoli puisqu'on ne sait pas si elle veut le faire ou pas au final t'en fais pas, c'est gentil de proposer ton aide ! :)
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Mer 11 Mai 2016 - 15:50

    Au pire, je peux commencer à coder ta petite page d'accueil et si elle revient avant que j'aie fini et qu'elle dit qu'elle veut s'occuper de ta commande elle-même, je la laisserai faire. Partante ? :3
    (Si oui je veux bien les dimensions des images du staff et des images des scénarios, ça sera plus simple pour moi x))
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Mer 11 Mai 2016 - 17:10

    Oui ça me convient parfaitement !
    Pour les images .. Je voudrais que les gifs soient automatiquement redimensionnés à 100x50 ou quelque chose de ce genre même si je mets par exemple un gif de 500x245
    Au fait les tailles je ne sais pas exactement ca depend de tout le reste du moment que le rendu final soit à peu pres comme sur le schéma que j'ai fais :)
    Les predefinis.. Une taille de 70x70 ou quelque chose du genre :)
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Mer 11 Mai 2016 - 17:21

    D'accord ^^
    Je m'y mets dès que possible et je te préviens si j'ai une autre question :)
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Mer 11 Mai 2016 - 19:21

    Franchement si tu veux faire quelques petits trucs un peu a ta maniere parce que tu trouve que ca fait mieux, vas y ! :)
    Et merci!
    allcl
    allcl
    FémininAge : 25Messages : 81

    Jeu 12 Mai 2016 - 18:17

    Alors, je viens de terminer ma proposition, mais comme Eerie Ange's veux également la faire...Bref. Je propose que Jyia choisisse sa Page d'Accueil préféré. Par contre, mes images ne sont pas aux dimensions indiqués après. Wink

    Voici mon rendu: WWW.
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Jeu 12 Mai 2016 - 20:43

    Désolée de t'embêter, allcl ><
    Je trouve ta proposition plutôt juste et gentille :3
    Quoi qu'il en soit, voilà ma proposition à moi : ici !
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Jeu 12 Mai 2016 - 23:29

    Merci beaucoup à vous deux, je suis gâtée j'ai même droit à deux propositions :love:
    Du coup pour le choix je trouve que ce que tu as fait Aerie correspond beaucoup plus à ce que je m'imaginais, donc je veux bien les codes de ta création :33
    Et merci beaucoup à alcool !

    EDIT: Aerie tu peux rajouter tes crédits en passant? Pour que je les ai sous la main, et si je les retire de la PA je tâcherais de les mettre ailleurs t'en fais pas :love: Merciiiii
    Eerie Ange's
    Eerie Ange's
    FémininAge : 23Messages : 166

    Ven 13 Mai 2016 - 12:14

    Je suis vraiment heureuse que ça te plaise *-*

    Donc voilà le HTML
    Code:
    <div class="fond_pa">
                 <a class="lien_pa" href="#">Texte Texte</a><a class="lien_pa" href="#">Texte Texte</a><a class="lien_pa" href="#">Texte Texte</a>     <a class="lien_pa" href="#">Texte Texte</a><a class="lien_pa" href="#">Texte Texte</a><a class="lien_pa" href="#">Texte Texte</a>              
     <div class="bloc_contexte_pa">
                                      Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.                                                                      
     </div>
                                                                
     <table style="width:800px;">
                                                                                                        
     <tbody>
                                                                                                        
     <tr>
                                                                                                        
     <td style="width:150px;">
                        
     <div class="staff_pa">
                                                    <img src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-150x75.png" alt="Staff" /><span>Nom Perso<br />Pseudo Admin<br /><a href="#">Profil</a> - <a href="#">Mp'</a></span>          
     </div>
                      
     <div class="staff_pa">
                                                    <img src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-150x75.png" alt="Staff" /><span>Nom Perso<br />Pseudo Admin<br /><a href="#">Profil</a> - <a href="#">Mp'</a></span>          
     </div>
                      
     <div class="staff_pa">
                                                    <img src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-150x75.png" alt="Staff" /><span>Nom Perso<br />Pseudo Admin<br /><a href="#">Profil</a> - <a href="#">Mp'</a></span>          
     </div>
                                                        
     </td>
                                                                                                        
     <td style="width:485px;">
                                                                                                          
     <div class="bloc_news_pa">
                                                                                              
     <div class="news_pa">
                                          XX/XX/XX - Info info info - <a href="#">www</a>                                      
     </div>
                                                                                              
     <div class="news_pa">
                                          XX/XX/XX - Info info info - <a href="#">www</a>                                      
     </div>
                    
     <div class="news_pa">
                                          XX/XX/XX - Info info info - <a href="#">www</a>                                      
     </div>
                    
     <div class="news_pa">
                                          XX/XX/XX - Info info info - <a href="#">www</a>                                      
     </div>
                                                                                                      
     </div>
                                                                                                        
     </td>
                                                                                                        
     <td style="width:150px;">
                                                                                                  
     <table>
                                                                                                  
     <tbody>
                                                                                                  
     <tr>
                                                                                                  
     <td>
                  
     <div class="scenario_pa">
                                                    <img alt="Scénario" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-75x75.png" /><span>Texte texte texte<br /><a href="#">Voir</a></span>          
     </div>
                                                    
     </td>
                                                                                                  
     <td>
        
     <div class="scenario_pa">
                                                    <img alt="Scénario" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-75x75.png" /><span>Texte texte texte<br /><a href="#">Voir</a></span>          
     </div>
        
     </td>
                                                                                                  
     </tr>
                                                
     <tr>
                                                                                                  
     <td>
        
     <div class="scenario_pa">
                                                    <img alt="Scénario" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-75x75.png" /><span>Texte texte texte<br /><a href="#">Voir</a></span>          
     </div>
        
     </td>
                                                                                                  
     <td>
        
     <div class="scenario_pa">
                                                    <img alt="Scénario" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-75x75.png" /><span>Texte texte texte<br /><a href="#">Voir</a></span>          
     </div>
        
     </td>
                                                                                                  
     </tr>
                                                
     <tr>
                                                                                                  
     <td>
        
     <div class="scenario_pa">
                                                    <img alt="Scénario" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-75x75.png" /><span>Texte texte texte<br /><a href="#">Voir</a></span>          
     </div>
        
     </td>
                                                                                                  
     <td>
        
     <div class="scenario_pa">
                                                    <img alt="Scénario" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-75x75.png" /><span>Texte texte texte<br /><a href="#">Voir</a></span>          
     </div>
        
     </td>
                                                                                                  
     </tr>
                                                                                                  
     </tbody>
                                                                                                  
     </table>
                                                                                                    
     </td>
                                                                                                        
     </tr>
                                                                                                        
     </tbody>
                                                                                                        
     </table>
                                                                              
     <div class="bloc_partenaires_pa">
                                          <a href="#"><img alt="Partenaire" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a><a href="#"><img alt="Partenaire" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a><a href="#"><img alt="Partenaire" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a>  <a href="#"><img alt="Partenaire" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a> <a href="#"><img alt="Partenaire" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a> <a href="#"><img alt="Partenaire" src="http://image.noelshack.com/fichiers/2016/19/1463077310-lily-100x35.png" /></a>                                      
     </div>
               <a href="http://www.never-utopia.com/" class="credits_pa">© Eerie Ange's</a>                                                  
    </div>

    Et le CSS
    Code:
    .fond_pa {
      background-color:#ffffff;
      width:800px;
      padding:20px 10px;
      margin-left:auto;
      margin-right:auto;
      color: #242424;
      text-align:center;
      color:#242424;
    }

    .fond_pa a {
      color: #a6cccb!important;
      font-size: 14px;
      font-weight: 700;
      font-family:'Megrim';
      text-decoration:none!important;
     -webkit-transition: 1s;
      transition:1s;
    }

    .fond_pa a:hover {
      color: #4f9a97!important;
      text-decoration:none!important;
     -webkit-transition: 1s;
      transition:1s;
    }
    .lien_pa {
      padding:5px;
      background-color:#DBEFEF;
      text-align:center;
      color: #a6cccb!important;
      font-size: 14px;
      font-weight: 700;
      font-family:'Megrim';
      text-decoration:none!important;
     -webkit-transition: 1s;
      transition:1s;
      margin-left:5px;
      margin-right:5px;
    }
    .lien_pa:hover {
      color: #4f9a97!important;
      text-decoration:none!important;
     -webkit-transition: 1s;
      transition:1s;
    }

    .bloc_contexte_pa {
      width:780px;
      padding:10px;
      background-color:#DBEFEF;
      border-top: 1px solid #4f9a97;
      border-bottom: 1px solid #4f9a97;
      margin-top:20px;
      margin-bottom:10px;
      text-align:justify;
    }

    .staff_pa {
      width:150px;
      height:75px;
      margin-top:10px;
      margin-bottom:10px;
      overflow:hidden;
    }

    .staff_pa img {
      width:150px;
      height:75px;
     -webkit-transition: 1s;
      transition:1s;
    }

    .staff_pa span {
      width:140px;
      height:55px;
      padding:10px 5px;
     -webkit-transition: 1s;
      transition:1s;
      background-color:#DBEFEF;
      color: #a6cccb!important;
      font-size: 14px;
      font-weight: 700;
      font-family:'Megrim';
      display:block;
    }

    .staff_pa:hover img {
      margin-top: -100px;
     -webkit-transition: 1s;
      transition:1s;
    }


    .bloc_news_pa {
      height:225px;
      overflow:auto;
      width:445px;
      background-color:#DBEFEF;
      margin:10px;
      padding:10px;
      text-align:justify;
    }

    .news_pa {
      border-bottom: 1px solid #4f9a97;
      margin-bottom:10px;
      padding-bottom:5px;
    }

    .scenario_pa {
      width:75px;
      height:75px;
      overflow:hidden;
    }

    .scenario_pa img {
      width:75px;
      height:75px;
     -webkit-transition: 1s;
      transition:1s;
    }

    .scenario_pa span {
      width:65px;
      height:55px;
      padding:10px 5px;
      background-color:#DBEFEF;
      display:block;
      margin-top: 0px;
     -webkit-transition: 1s;
      transition:1s;
    }

    .scenario_pa:hover img {
      margin-top:-75px;
     -webkit-transition: 1s;
      transition:1s;
    }

    .bloc_partenaires_pa {
    background-color:#DBEFEF;
      margin:10px;
      width:750px;
      margin-left:auto;
      margin-right:auto;
      padding:5px;
    }
    .bloc_partenaires_pa img {
      width:100px;
      height:35px;
      opacity:0.7;
     -webkit-transition: 1s;
      transition:1s;
      margin:5px;
    }
    .bloc_partenaires_pa img:hover {
      opacity:1;
     -webkit-transition: 1s;
      transition:1s;
    }
    .credits_pa {
      display:block;
      float:right;
      margin-right:20px;
      font-size:11px;
      height:13px;
    }


    Dernière édition par Eerie Ange's le Mer 18 Mai 2016 - 16:14, édité 1 fois
    EAVENN
    EAVENN
    FémininAge : 28Messages : 162

    Ven 13 Mai 2016 - 21:36

    Un grand merci à toi elle est superbe ! :3 <3
    Du coup le sujet peut être archivé :]
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 1:48