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 du moment :
Code promo Nike : -25% dès 50€ ...
Voir le deal

    PA pour The Big Apple

    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Jeu 13 Fév 2014 - 21:30

    Ma demande



    Bonjour, bonjour!
    Je ne suis pas une adepte des demandes ou des commandes, donc pardonnez moi si je fais mon boulet, c'est une petite habitude chez moi que j'essais de soigner! xD
    Je viens à vous aujourd'hui pour une demande de Page D'accueil, je tatôttes un peu de le codage, mais mon problème vient du fait que je ne suis pas encore suffisament douée pour créer ce que je veux! ^^

    Schéma(s) et Eléments
    Schémas : Pour le schéma, je pourrais vous proposer ceci: https://2img.net/image.noelshack.com/fichiers/2014/07/1392321697-untitled-2.png Qui est un vulgaire schéma que j'ai fait (rassurez-vous les couleurs ne sont que des couleurs prises au pif, ce ne sont pas celles demandé! ^^
    Si vous voulez une idée de ce que je voulais, je vous parlerais sûrement de celle-ci: http://the-happy-ending.forumactif.org/ je souhaiterais en effet une PA qui y ressemble sans pour autant en faire un copier/coller.
    Tailles des éléments : J'y connais pas grand chose, je ferais plus confiance à la personne qui me diras si c'est faisable ou non, mais je dirais quelque chose comme 760x600px pour la taille de la PA; les icons des scéna je dirais du 60x60; pour le staff, il me faudrait une taille genre 100x170 ou un peu plus, sachant que je voudrait mettre des avatars basique qui se redimensionnerait automatiquement.
    Effets voulus : (si vous désirez des effets particuliers, arrondis, transitions...)
    Alors là oui, je veux des effets spéciaux! xD
    * pour le staff par exemple: Je ne sais pas comment expliquer ça, mais j'aimerais un effet alors au choix: Au clique sur l'image, on tombe sur une infobulle avec le nom + un lien vers une boîte MP de la personne ou alors et là c'est un peu plus complique à expliquer, je souhaiterais qu'au passage sur l'image d'admin, qu'une petit fenêtre se lève sur le bas de l'image faisant apparaître les infos.

    * Pour le contexte, caché derrière une image avec un effet de slide au passage de la sourie à vous de voir vers le haut, la gauche ou la droite peu importe! ^^

    Après si d'autres idées vous passe par la tête, je dis pas non ^^


    Ressources
    Pour les images du staff, pour des questions de facilitée, j'aimerais des avatars (200x320) redimensionné en plus petit si c'est possible, je met une image au cas-où https://i.servimg.com/u/f67/13/97/16/29/9s3omi10.png

    Pour le contexte, l'effet slide, l'image: http://25.media.tumblr.com/6d4265b6a129ebc617b2853dc285b740/tumblr_mwapx7oibg1qgfk6po1_r1_500.gif

    Pour les scénario, des icons par exemple: https://31.media.tumblr.com/a56405f253ccbc2d7da244784201831a/tumblr_inline_mz855lt1PO1su3y9u.jpg



    Autres précisions ?
    J'espère ne pas en demander trop et avoir posté au bon endroit... N'arrivant pas à atteindre les commandes, je passe par ici! Si une PA ressemblant existe déjà je m'en excuse, si vous avez le liens pour m'y amener, je veux bien! x)

    Merci d'avance!  :love: 


    Dernière édition par x_Titia le Mer 12 Mar 2014 - 9:54, édité 1 fois
    • Revenir en haut
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Jeu 20 Fév 2014 - 15:22

    Petit Up?
    • Revenir en haut
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Mer 5 Mar 2014 - 15:29

    little up
    • Revenir en haut
    Anonymous
    Invité

    Mar 11 Mar 2014 - 16:00

    Hey,

    Voici mon résultat : www Wink
    • Revenir en haut
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Mar 11 Mar 2014 - 21:16

    Oh My God! :O
    Mais elle est splendide! Very Happy
    J'ai juste une toute petite question ^^ est-il possible de rajouter deux petits membres pour le staff? Nous sommes passé à 5 admins du coup si j'en met certains et pas d'autres il risque d'y avoir une gueguerre! xD
    En tout cas je la surkiff!  :hug2: 
    • Revenir en haut
    Anonymous
    Invité

    Mar 11 Mar 2014 - 21:31

    Arf =/ Le soucis c'est que le tout va être déformé du coup =/
    A moins que l'on fasse quelque chose du genre : www. Mis en forme ça peut donner quelque chose de sympa. A moins que tu n'aies autre chose à proposer ?

    EDIT : Sinon ça peut donner ceci.
    • Revenir en haut
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Mar 11 Mar 2014 - 22:14

    La version de ton édit me va parfaitement, elle est juste totalement parfaite! J'achèèèète! xD
    • Revenir en haut
    Anonymous
    Invité

    Mar 11 Mar 2014 - 22:22

    Tant mieux =)
    Voici donc les codes, dis-moi si tout va bien.

    CSS
    Code:
    /************************ MISE EN FORME PAGE D'ACCUEIL ************************/

    .fond_PA_1 {
      width: 750px;
      background-color: #252525;
      border-radius: 20%;
    }

    .fond_PA_2 {
      width: 750px;
      background-color: #0D0D0D;
      border-radius: 30%;
    }

    .titre {
      font-family: 'Montez', cursive;
      font-size: 50px;
      text-align: center !important;
      position: relative;
      top: -0.8em;
      color: #72BB60;
    }

    .titre1 {
      font-family: 'Mouse Memoirs', sans-serif;
      font-size: 30px;
      text-align: center !important;
      position: relative;
      top: -0.5em;
      color: #72BB60;
    }

    .fond_bloc_prédef {
      width: 270px;
      height: 180px;
      padding: 15px;
      background-color: #252525;
    }

    .fond_bloc_coupsde {
      width: 500px;
      padding: 15px;
      margin-top: -20px;
      background-color: #252525;
    }

    .titrecoupsde {
      font-family: 'Montez', cursive;
      font-size: 50px;
      text-align: center !important;
      position: relative;
      top: 0em;
      color: #72BB60;
    }

    .fond_bloc_news {
      width: 300px;
      height: 100px;
      padding: 15px;
      color: #8c8c8c;
      background-color: #252525;
    }

    .fond_bloc_votes {
      width: 300px;
      padding: 15px;
      background-color: #252525;
      color: #8c8c8c;
    }

    .bloc_crédits {
      width: 500px;
      padding: 15px;
      background-color: #252525;
      color: #8c8c8c;
      -moz-transform: rotate(-2deg);
      -webkit-transform: rotate(-2deg);
      transform: rotate(-2deg);
    }

    /*** STAFF ***/

    .fond_bloc_staff {
      width: 300px;
      height: 270px;
      padding: 15px;
      background-color: #252525;
    }

    .staff {
      width: 93px;
      height: 100px;
      overflow: hidden;
      background-color: #414141;
    }

    .staff_img {
      position: relative;
      z-index: 2;
      height: 100px;
      margin-left: 0px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .staff:hover .staff_img {
      margin-top: -400px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .staff_description {
      position: relative;
      top: 26em;
      z-index: 1;
      width: 93px;
      height: 100px;
      text-align: center;
      font-size: 11px;
      color: #8c8c8c;
      padding: 2px;
      overflow: auto;
    }
     


    /*** CONTEXTE QUI COULISSE ***/
    .contexte {
      width: 300px;
      height: 200px;
      overflow: hidden;
      background-color: #252525;
    }

    .contexte_img {
      position: relative;
      z-index: 2;
      width: 300px;
      height: 200px;
      margin-left: 0px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .contexte:hover .contexte_img {
      margin-left: 400px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .contexte_description {
      position: relative;
      z-index: 1;
      width: 270px;
      height: 200px;
      margin-top: -200px;
      text-align: justify;
      font-size: 11px;
      color: #8c8c8c;
      padding: 10px;
      overflow: auto;
    }

    .lettrine:first-letter {
      font-size: 300%;
      float: left;
      font-family: 'Montez', cursive;
      color: #72BB60;
    }



     /************************ FIN MISE EN FORME PAGE D'ACCUEIL ************************/

    PA
    Code:
    <div class="fond_PA_1">
        <br /> <br /> <br /><br />
       <div class="fond_PA_2">
          
          <div class="titre">
              The Big Apple
          </div>
           <br /><br />
          <table>
             
             <tbody>
                
                <tr>
                   
                   <td>
                      
                      <center>
                         
                         <div class="contexte">
                            
                            <div class="contexte_img">
                                <img src="http://25.media.tumblr.com/6d4265b6a129ebc617b2853dc285b740/tumblr_mwapx7oibg1qgfk6po1_r1_500.gif" />
                            </div>
                            
                            <div class="contexte_description">
                               
                               <div class="lettrine">
                                   C
                               </div>
                                eci est un contexte. minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. <a href="#" style="color: #72BB60 !important;">La suite</a>
                            </div>
                            
                         </div>
                         
                         <div style="clear: both;">
                            
                         </div>
                         
                      </center><br />
                      <div class="fond_bloc_prédef">
                         
                         <div class="titre1">
                             Prédéfinis
                         </div>
                         
                         <center>
                             <a href="#"><img src="https://31.media.tumblr.com/a56405f253ccbc2d7da244784201831a/tumblr_inline_mz855lt1PO1su3y9u.jpg" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="https://31.media.tumblr.com/a56405f253ccbc2d7da244784201831a/tumblr_inline_mz855lt1PO1su3y9u.jpg" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="https://31.media.tumblr.com/a56405f253ccbc2d7da244784201831a/tumblr_inline_mz855lt1PO1su3y9u.jpg" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="https://31.media.tumblr.com/a56405f253ccbc2d7da244784201831a/tumblr_inline_mz855lt1PO1su3y9u.jpg" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="https://31.media.tumblr.com/a56405f253ccbc2d7da244784201831a/tumblr_inline_mz855lt1PO1su3y9u.jpg" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="https://31.media.tumblr.com/a56405f253ccbc2d7da244784201831a/tumblr_inline_mz855lt1PO1su3y9u.jpg" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="https://31.media.tumblr.com/a56405f253ccbc2d7da244784201831a/tumblr_inline_mz855lt1PO1su3y9u.jpg" style="width: 60px; border-radius: 100%;" /></a> <a href="#"><img src="https://31.media.tumblr.com/a56405f253ccbc2d7da244784201831a/tumblr_inline_mz855lt1PO1su3y9u.jpg" style="width: 60px; border-radius: 100%;" /></a>
                         </center>
                         
                      </div>
                       <br />
                      <div class="titrecoupsde">
                          Nos coups de ♥
                      </div>
                      
                      <div class="fond_bloc_coupsde" style="width: 270px;">
                         
                         <center>
                             <a href="http://www.never-utopia.com"><img src="http://img4.hostingpics.net/pics/616830logo3.jpg" /></a>
                         </center>
                         
                      </div>
                      
                   </td>
                   
                   <td style="width: 30px;">
                      
                   </td>
                   
                   <td>
                      
                      <div class="fond_bloc_staff">
                         
                         <div class="titre1">
                             Staff
                         </div>
                         
                         <table>
                            
                            <tbody>
                               
                               <tr>
                                  
                                  <td>
                                     
                                     <div class="staff">
                                        
                                        <div class="staff_img">
                                            <img src="http://i67.servimg.com/u/f67/13/97/16/29/9s3omi10.png" style="height: 150px;" />
                                        </div>
                                        
                                        <div class="staff_description">
                                            <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
                                        </div>
                                        
                                     </div>
                                     
                                  </td>
                                  
                                  <td>
                                     
                                     <div class="staff">
                                        
                                        <div class="staff_img">
                                            <img src="http://i67.servimg.com/u/f67/13/97/16/29/9s3omi10.png" style="height: 150px;" />
                                        </div>
                                        
                                        <div class="staff_description">
                                            <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
                                        </div>
                                        
                                     </div>
                                     
                                  </td>
                                  
                                  <td>
                                     
                                     <div class="staff">
                                        
                                        <div class="staff_img">
                                            <img src="http://i67.servimg.com/u/f67/13/97/16/29/9s3omi10.png" style="height: 150px;" />
                                        </div>
                                        
                                        <div class="staff_description">
                                            <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
                                        </div>
                                        
                                     </div>
                                     
                                  </td>
                                  
                               </tr>
                               
                            </tbody>
                            
                         </table>
                         
                         <center>
                            <table>
                               
                               <tbody>
                                  
                                  <tr>
                                     
                                     <td>
                                        
                                        <div class="staff">
                                           
                                           <div class="staff_img">
                                               <img src="http://i67.servimg.com/u/f67/13/97/16/29/9s3omi10.png" style="height: 150px;" />
                                           </div>
                                           
                                           <div class="staff_description">
                                               <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
                                           </div>
                                           
                                        </div>
                                        
                                     </td>
                                     
                                     <td>
                                        
                                        <div class="staff">
                                           
                                           <div class="staff_img">
                                               <img src="http://i67.servimg.com/u/f67/13/97/16/29/9s3omi10.png" style="height: 150px;" />
                                           </div>
                                           
                                           <div class="staff_description">
                                               <br /><br /> Nom du personnage<br />Rang <br /><br /><a href="#" style="color: #72BB60 !important;">MP</a> <a href="#" style="color: #72BB60 !important;">Profil</a>
                                           </div>
                                           
                                        </div>
                                        
                                     </td>
                                     
                                  </tr>
                                  
                               </tbody>
                               
                            </table>
                         </center>
                         
                      </div><br />
                      <div class="fond_bloc_news">
                         
                         <div class="titre1">
                             New-York Time
                         </div>
                          <span style="width: 290px; height: 90px; overflow: auto;"> <span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#" style="color: #72BB60 !important;">La suite</a> <br /><span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#" style="color: #72BB60 !important;">La suite</a> <br /><span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#" style="color: #72BB60 !important;">La suite</a> <br /><span style="color: #72BB60;"> XX/XX </span> Nouveauté <a href="#" style="color: #72BB60 !important;">La suite</a> </span>
                      </div><br />
                      <div class="fond_bloc_votes">
                         
                         <table>
                            
                            <tbody>
                               
                               <tr>
                                  
                                  <td>
                                     
                                     <center>
                                         <img src="http://i58.servimg.com/u/f58/18/40/69/79/partly10.png" />
                                     </center>
                                     
                                  </td>
                                  
                                  <td>
                                      Votez pour nous <a href="#" style="color: #72BB60 !important;">ici</a>.<br />N'hésitez pas à poster pour nos publicités <a href="#" style="color: #72BB60 !important;">ici</a> et <a href="#" style="color: #72BB60 !important;">ici</a>.
                                  </td>
                                  
                               </tr>
                               
                            </tbody>
                            
                         </table>
                         
                      </div>
                      
                   </td>
                   
                </tr>
                
             </tbody>
             
          </table>
           <br />
          <div class="bloc_crédits">
              Le contexte, l’apparence, les idées sont la propriété du staff de <span style="color: #72BB60 !important;">The Big Apple</span>. Toute reproduction partielle ou totale est interdite.<br />Design par <a href="#" style="color: #72BB60 !important;">Mimiko</a> ; Codage de la PA par <a href="http://www.never-utopia.com/" style="color: #72BB60 !important;">Halloween</a>
          </div>
           <br /><br /> <br /><br />
       </div>
        <br /><br />
    </div>
     <link href="http://fonts.googleapis.com/css?family=Montez" rel="stylesheet" type="text/css" /><link href="http://fonts.googleapis.com/css?family=Mouse+Memoirs" rel="stylesheet" type="text/css" />
    • Revenir en haut
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Mer 12 Mar 2014 - 9:54

    Elle fonctionne à merveille! Very Happy
    Merci vraiment beaucoup depuis le temps que je l'attend, elle est encore mieux que je l'espèrais! ♥
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Mar 2014 - 12:57

    Ravie que ça te convienne =D
    Bonne continuation alors Wink
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 22:36