AccueilFAQRechercherMembresGroupesS'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.

anipassion.com

    Page d'accueil Rose/Violet/Blanc pastel

    Cheshire Cat
    Cheshire Cat
    FémininAge : 21Messages : 999

    le Dim 19 Fév 2017 - 14:48



    Bonjour à vous tous !
    Aujourd'hui je suis là pour vous proposer une petite PA toute gentille.

    Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

    Rendu en image:
    Page d'accueil Rose/Violet/Blanc pastel 7eeaa977d8

    Optimisé pour tous les navigateurs - Toutes versions

    Pour installer votre Page d'Accueil, il vous faudra aller créer une page HTML. Faites Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS et copiez le code qui va suivre dans votre feuille de style
    Code:
    /* Commande de Page d'accueil par Cheshire Cat */
          .inline{
             display:inline-block;
             vertical-align:top;
          }
          .PA{
             background-color:#f1ead6;
             width:800px;
             margin:20px auto;
             padding:10px 20px 20px 20px;
             box-sizing:border-box;
             box-shadow:1px 1px 3px #b1a9a9;
             border-radius:30px;
             font-family:calibri;
             font-size:13px;
             color:#674b4b;
          }
          .PA a{
             color:#de8585;
             transition:all 400ms;
          }
          .PA a:hover{
             color:#8a4c4c;
          }
          .PA h1{
             margin:0 -20px 10px;
             padding-bottom:10px;
             text-align:center;
             font-weight:normal;
             font-size:40px;
             border-bottom:2px solid #b79f9f;
             font-family:'Montez';
          }
          .PA h2{
             margin:0 20px 10px;
             text-align:center;
             font-weight:normal;
             font-size:30px;
             border-bottom:2px solid #b79f9f;
             font-family:'Montez';
          }
          .PA-Gauche{
             width:250px;
          }
          .contexte{
             height:240px;
             margin-bottom:20px;
             padding:10px;
             background-color:#f9f7f7;
             box-shadow:1px 1px 3px #b1a9a9;
             border-radius:20px;
             overflow:auto;
             text-align:justify;
             line-height:16px;
          }
          .PA-Droite{
             width:480px;
             margin-left:20px;
          }
          .staff-votes{
             width:235px;
             margin-right:20px;
          }
          .staff{
             padding:0 10px;
             margin-bottom:10px;
          }
          .infobulle{
             position:relative;
             width:100px;
             height:100px;
             overflow:hidden;
             border-radius:10px;
             background-color:#EFEFEF;
             box-shadow:1px 1px 3px #b1a9a9;
          }
          .infobulle:first-of-type{
             margin-right:10px;
          }
          .infobulle > img{
             width:100%;
          }
          .infobulle div{
             position:absolute;
             top:100px;
             left:0;
             width:100px;
             height:100px;
             padding:10px;
             box-sizing:border-box;
             background-color:#fbf7f7;
             text-align:center;
             font-size:15px;
             line-height:25px;
             opacity:0;
             transition:all 600ms;
          }
          .infobulle:hover div{
             top:0;
             opacity:0.9;
          }
          .votes{
             text-align:center;
             font-size:0;
          }
          .votes img{
             margin:0 3px;
          }
          .nouveautes{
             width:200px;
             height:190px;
             margin-bottom:10px;
             padding:10px;
             overflow:auto;
             background-color:#f9f7f7;
             box-shadow:1px 1px 3px #b1a9a9;
             border-radius:20px;
             text-align:justify;
             line-height:20px;
          }
          .partenaires{
             padding:10px;
             background-color:#f9f7f7;
             box-shadow:1px 1px 3px #b1a9a9;
             border-radius:20px;
             text-align:center;
             line-height:17px;
          }
          #boxe_defil {
             position:relative;
             height:31px;
             overflow:hidden;
          }
          #defile {
             position:absolute;
             margin-top:1px;
             background-color:transparent;
          }
          .credits{
             font-size:10px;
             padding:0 20px;
          }

    Ensuite dirigez vous dans Affichage > Page d'Accueil > Généralités. Copiez le code qui va suivre et collez-le dans la zone.
    Code:
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montez" />      
    <div class="PA">
            
     <h1>
     Namaste {USERNAME}
     </h1>
            
     <div class="inline PA-Gauche">
                
     <h2>
     Contexte
     </h2>
                
     <div class="contexte">
                   En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte. Il était sur le dos, un dos aussi dur qu’une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu’à peine. Ses nombreuses pattes, lamentablement grêles par comparaison avec la corpulence qu’il avait par ailleurs, grouillaient désespérément sous ses yeux. « Qu’est-ce qui m’est arrivé ? » pensa-t-il. Ce n’était pas un rêve.            
     </div>
                
     <div class="credits">
                   © PA codée par Cheshire Cat de <a href="http://epicode.bbactif.com/">Epicode</a> et <a href="http://www.never-utopia.com">N-U</a><br />            
     </div>
            
     </div>
            
     <div class="inline PA-Droite">
                
     <div class="inline staff-votes">
                  
     <h2>
     Staff
     </h2>
                  
     <div class="staff">
                      
     <div class="infobulle inline">
                         <img alt="Pseudo" src="https://i37.servimg.com/u/f37/19/61/08/98/avamoi10.jpg" />                    
     <div>
                            Alrun<br />                        Fondatrice<br />                        <a href="#">Profil</a> - <a href="#">MP</a>                    
     </div>
                      
     </div>
                      
     <div class="infobulle inline">
                         <img alt="Pseudo" src="http://img11.hostingpics.net/pics/675085toto.png" />                    
     <div>
                            Tomgoku<br />                        Fondateur<br />                        <a href="#">Profil</a> - <a href="#">MP</a>                    
     </div>
                      
     </div>
                  
     </div>
                  
     <h2>
     Top-sites
     </h2>
                  
     <div class="votes">
                      <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>              
     </div>
                
     </div>
                
     <div class="inline">
                  
     <h2 class="">
     Nouveautés
     </h2>
                  
     <div class="nouveautes">
                   00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />              
     </div>
                
     </div>
                
     <h2>
     Partenaires
     </h2>
                
     <div class="partenaires">
                  
     <div id="boxe_defil">
                      
     <div id="defile">
                         <a href="http://feminin-pluriel.discutland.net/"><img title="Féminin Pluriel" alt="Féminin Pluriel" src="http://img110.xooimage.com/files/d/b/6/logo-5185e32.gif" /></a>                     <a href="http://www.ouaf-ouaf-pub.com/"><img title="Ouaf Ouaf Pub" alt="Ouaf Ouaf Pub" src="http://image.noelshack.com/fichiers/2016/42/1476784253-oop-kit88.gif" /></a>                     <a href="http://voyances-ombeline.forumgratuit.be/"><img title="Au delà des voyances" alt="Au delà des voyances" src="http://i18.servimg.com/u/f18/11/27/81/85/logo_811.png" /></a>                     <a href="http://dream-pub.forumactif.fr/"><img title="Dream Pub" alt="Dream Pub" src="http://i68.tinypic.com/2n9hnrc.jpg" /></a>                     <a href="http://lecture-publicites.forumactif.com/"><img title="Lecture et publicités" alt="Lecture et publicités" src="https://i37.servimg.com/u/f37/19/58/81/65/logo_810.png" /></a>                  
     </div>
                  
     </div>
                   <script type="text/javascript">
                   var defile;// l'element a deplacer
                   var psinit = 480; // position horizontale de depart
                   var pscrnt = psinit;      
                   function texteDefile() {
                      if (!defile) defile = document.getElementById('defile');
                      if (defile) {
                         if(pscrnt < ( - defile.offsetWidth) ){
                            pscrnt = psinit;
                               } else {
                         pscrnt+= -1; // pixel par deplacement
                      }
                         defile.style.left = pscrnt+"px";
                      }
                   }
                   window.setInterval("texteDefile()",20); // delai de deplacement
                   </script>            
     </div>
            
     </div>
          
    </div>

    Vous avez le droit de poster pour dire un p'tit "merci", ça fait toujours plaisir ! Very Happy
    Plume Rusée
    Plume Rusée
    FémininAge : 13Messages : 13

    le Sam 29 Juil 2017 - 16:04

    Merci elle est magnifique !
    Onyx
    Onyx
    FémininAge : 25Messages : 3266

    le Lun 18 Sep 2017 - 20:16

    Salut !

    C'est parfait, je déplace dans les LS ^^

    Note : J'ai ajouté "N-U" dans les crédits puisqu'il est affiché ici ainsi que sur Épicode.



    Kelalin
    Kelalin
    FémininAge : 26Messages : 2068

    le Lun 18 Sep 2017 - 23:24

    Merci pour le partage !
    Patou972
    Patou972
    FémininAge : 40Messages : 172

    le Ven 1 Déc 2017 - 21:49

    Merci beaucoup pour le partage
    Réglisse
    Réglisse
    FémininAge : 15Messages : 17

    le Lun 18 Juin 2018 - 18:32

    Mercii. :heart:
    azertyuiop2007
    azertyuiop2007
    FémininAge : 17Messages : 4

    le Sam 23 Juin 2018 - 12:29

    Merci mille fois, je met ça sur mon fofo ! C'est magnifique **
    CiitronxMelon
    CiitronxMelon
    FémininAge : 24Messages : 36

    le Mar 17 Juil 2018 - 22:56

    Wow merci !
    Féli
    Féli
    FémininAge : 36Messages : 117

    le Sam 12 Jan 2019 - 12:43

    merci



    Page d'accueil Rose/Violet/Blanc pastel MtGPjQFSeHqzl1zoiU-5zwGCNig
    Bowtie
    Bowtie
    FémininAge : 29Messages : 62

    le Dim 3 Mar 2019 - 23:10

    Merci pour cette belle PA ^^
    angel-insider
    angel-insider
    FémininAge : 38Messages : 15

    le Jeu 14 Mar 2019 - 18:06

    merci beaucoup je l ai utilisé pour mon forum et j ai bien entendu laissé les credits :)



    Page d'accueil Rose/Violet/Blanc pastel Angelb10
    La Reine de Coeur
    La Reine de Coeur
    FémininAge : 21Messages : 16

    le Lun 10 Juin 2019 - 11:01

    merci beaucoup pour le partage ^^
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Juin 2019 - 9:39