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 :
Où acheter la display japonaise One Piece Card ...
Voir le deal

    Page d'accueil pause café

    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    Mer 18 Mai 2016 - 22:38

    Rappel du premier message :

    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.

    En action !
    Page d'accueil pause café - Page 5 38704aab49

    Pour installer votre Page d'Accueil, il vous faudra aller créer une page HTML. Faites Panneau d'administration > Modules > HTML & Javascript > Gestion des pages HTML > Création en mode avancé (HTML) et copiez le code qui va suivre. N'oubliez pas d'enregistrer votre page et d'y mettre un titre.
    Code:
    <!DOCTYPE html>
     <html lang="fr">
     <head>
     <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
     <meta charset="utf-8" />
                       <base target="_blank" />
     <title>Page d'accueil Café par Cheshire Cat</title>
     <style type="text/css">
     .corps{
     position:relative;
     width:720px;
     height:400px;
     margin:auto;
     background: #D8B06C;
     border:10px solid #C19249;
     font-family:'Yanone Kaffeesatz', sans-serif;
     }
     .vote_1{
     position:absolute;
     left:20px;
     bottom:130px;
     display:block;
     width:55px;
     height:45px;
     padding-top:23px;
     padding-left:15px;
                               }
     .vote_2{
     position:absolute;
     bottom:80px;
     left:100px;
     display:block;
     width:100px;
     height:35px;
     padding-top:50px;
                               text-align:center;
     }
     .vote_3{
     position:absolute;
     bottom:130px;
     left:220px;
     display:block;
     width:25px;
     height:50px;
     padding-top:25px;
     padding-left:50px;
     }
                               .vote{
     border-radius:50%;
     background:#A86D3F;
     font-size:30px;
     color:#F3D8AC;
     text-decoration:none;
     -webkit-transition:all linear 0.4s;
     transition:all linear 0.4s;
                               }
     .vote:hover{
     color:#A86D3F;
     background:#F3D8AC;
     -webkit-transition:all linear 0.4s;
     transition:all linear 0.4s;
     }
     .contexte{
     position:absolute;
     overflow:hidden;
     top:20px;
     left:20px;
     width:250px;
     height:250px;
     border-radius:50%;
     border:10px solid #F3D8AC;
     }
     .contexte img{
     z-index:1;
     width:250px;
     border-radius:50%;
     }
     .contexte p{
     position:absolute;
     top:-13px;
     left:0px;
     width:170px;
     height:170px;
     border-radius:50%;
     background:#C19249;
     padding:40px;
     overflow:auto;
     text-align:justify;
     color:#4D2D22;
     font-size:13px;
     font-family: 'PT Sans Narrow', sans-serif;
     opacity:0;
     visibility:hidden;
     -webkit-transform:rotate(30deg) scale(0);
     transform:rotate(30deg) scale(0);
     -webkit-transition:all ease 0.6s;
     transition:all ease 0.6s;
     }
     .contexte:hover p{
     opacity:1;
     visibility:visible;
     -webkit-transform:rotate(0deg) scale(1);
     transform:rotate(0deg) scale(1);
     -webkit-transition:all ease 0.6s;
     transition:all ease 0.6s;
     }
     .contexte a{
     text-decoration:none;
     color:#F3D8AC;
     }
     .staff{
     position:absolute;
     overflow:hidden;
     top:10px;
     right:35px;
     }
     .infobulle{
     display:inline-block;
     overflow:hidden;
     width:100px;
     height:100px;
     margin-right:10px;
     }
     .infobulle img{
     width:100px;
     }
     .contenu{
     position:absolute;
     bottom:0px;
     width:100px;
     height:74px;
     line-height:24px;
     font-size:15px;
     background:#F3D8AC;
     text-align:center;
     color:#A86D3F;
     font-family: 'PT Sans Narrow', sans-serif;
     opacity:0;
     -webkit-transform:translate(0px, 74px);
     transform:translate(0px, 74px);
     -webkit-transition:all ease 0.5s;
     transition:all ease 0.5s;
     }
     .contenu a{
     color:#4D2D22;
     text-decoration:none;
     }
     .infobulle:hover .contenu{
     opacity:1;
     -webkit-transform:translate(0px, 0px);
     transform:translate(0px, 0px);
     -webkit-transition:all ease 0.5s;
     transition:all ease 0.5s;
     }
     #barre{
     position:absolute;
     top:40px;
     right:10px;
     width:400px;
     height:40px;
     background:#F3D8AC;
     }
     .nav{
     position:absolute;
     right:208px;
     bottom:35px;
                               padding:0px;
     list-style-type:none;
     }
     .nav li a{
     display:block;
     width:165px;
     margin-bottom:10px;
     background:#A86D3F;
     text-align:center;
     letter-spacing:1px;
     font-size:23px;
     color:#F3D8AC;
     text-decoration:none;
     -webkit-transition:all linear 0.4s;
     transition:all linear 0.4s;
     }
     .nav li a:hover{
     color:#A86D3F;
     background:#F3D8AC;
     -webkit-transition:all linear 0.4s;
     transition:all linear 0.4s;
     }
     .news{
     position:absolute;
     top:105px;
     right:10px;
     width:178px;
     height:250px;
                               padding:0px;
     background:#D8B06C;
     border:10px solid #F3D8AC;
     overflow:auto;
     list-style-type:none;
     }
     .news li{
     position:relative;
                               top:0px;
                               left:0px;
     box-sizing:border-box;
     padding-left:5px;
     padding-right:5px;
     color:#4D2D22;
     font-size:15px;
     font-family: 'PT Sans Narrow', sans-serif;
     border-bottom:2px solid #A86D3F;
     }
     .partenaires{
     position:absolute;
     left:15px;
     bottom:5px;
     }
     .partenaires img{
     margin-right:5px;
     width:40px;
     height:40px;
     }
     </style>
     </head>
     <body>
     <div class="corps">
     <a href="#" class="vote vote_1">1</a>
     <a href="#" class="vote vote_2">2</a>
     <a href="#" class="vote vote_3">3</a>
     <div class="contexte">
     <img src="http://www.tshirtvortex.net/wp-content/uploads/Coffee-Time-A.gif" alt="image contexte"/>
     <p class="texte">
     Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus. <a href="#">Plus ?</a>
     </p>
     </div>
     <div id="barre"></div>
     <div class="staff">
     <div class="infobulle">
     <div class="contenu">
     Pseudo<br />
                                                            Rôle<br />
     <a href="#">Contacter</a> | <a href="#">Profil</a>
     </div>
     <img src="http://i64.tinypic.com/33mbw3c.png" alt="Membre du staff" />
     </div>
     <div class="infobulle">
     <div class="contenu">
     Pseudo<br />
     Rôle<br />
     <a href="#">Contacter</a> | <a href="#">Profil</a>
     </div>
     <img src="http://i64.tinypic.com/33mbw3c.png" alt="Membre du staff" />
     </div>
     <div class="infobulle">
     <div class="contenu">
     Pseudo<br />
     Rôle<br />
     <a href="#">Contacter</a> | <a href="#">Profil</a>
     </div>
     <img src="http://i64.tinypic.com/33mbw3c.png" alt="Membre du staff" />
     </div>
     </div>
     <ul class="nav">
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     </ul>
     <ul class="news">
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     </ul>
     <div class="partenaires">
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     </div>
     </div>
     </body>
     </html>

    Ensuite dirigez vous dans Affichage > Page d'Accueil > Généralités. Copiez le code qui va suivre et ajoutez-y le lien de votre page HTML.
    Code:
    <iframe name="Page d'accueil par Cheshire Cat" src="URL DE LA PAGE HTML" frameborder="0" scrolling="no" style="width: 755px; height: 435px;"></iframe>

    Vous n'êtes pas obligés de poster pour voir les codes, mais un petit "Merci" fait toujours plaisir :)


    Dernière édition par Cheshire Cat le Dim 26 Aoû 2018 - 16:44, édité 11 fois
    Faïryna
    Faïryna
    FémininAge : 21Messages : 87

    Dim 12 Jan 2020 - 23:16

    Waaaa merci cette pa est chouette comme tout !! Bon taff d;

      La date/heure actuelle est Sam 13 Juil 2024 - 23:40