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.


    Page d'accueil pause café

    Cheshire Cat
    Cheshire Cat
    FémininAge : 23Messages : 1000

    le 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 3 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
    Onna
    Onna
    FémininAge : 23Messages : 23

    le Dim 13 Nov 2016 - 8:43

    Merci ♥
    missp
    missp
    FémininAge : 30Messages : 26

    le Lun 14 Nov 2016 - 17:32

    I love it <3
    Patou972
    Patou972
    FémininAge : 41Messages : 172

    le Lun 14 Nov 2016 - 18:43

    merci beaucoup
    Mystick
    Mystick
    FémininAge : 35Messages : 100

    le Lun 28 Nov 2016 - 18:18

    Il est superbe ^^
    Oenyxa
    Oenyxa
    FémininAge : 28Messages : 10

    le Dim 4 Déc 2016 - 22:15

    merci :)
    Nono-Chan
    Nono-Chan
    FémininAge : 22Messages : 273

    le Mar 6 Déc 2016 - 21:46

    merci
    Kaleessi
    Kaleessi
    FémininAge : 28Messages : 75

    le Mer 7 Déc 2016 - 4:08

    Mercii pour le partage ces super :O
    Voltino
    Voltino
    MasculinAge : 26Messages : 55

    le Dim 11 Déc 2016 - 17:29

    Classe, merci !
    Thanos
    Thanos
    MasculinAge : 24Messages : 84

    le Lun 12 Déc 2016 - 19:50

    Mercii
    Bowtie
    Bowtie
    FémininAge : 30Messages : 62

    le Lun 12 Déc 2016 - 23:55

    Très jolie PA *-*. Merci
    Viou
    Viou
    FémininAge : 31Messages : 181

    le Jeu 15 Déc 2016 - 15:19

    Oh j'aime beaucoup cette PA elle change des autres je trouve, très joli travail ! ** Merci pour le partage !
    Odahviing
    Odahviing
    FémininAge : 23Messages : 24

    le Mer 21 Déc 2016 - 21:52

    superbe, merci *^*
    Tiya Melody
    Tiya Melody
    FémininAge : 23Messages : 9

    le Mer 11 Jan 2017 - 9:54

    merciiii
    Kirito
    Kirito
    MasculinAge : 24Messages : 207

    le Ven 13 Jan 2017 - 12:22

    Waw, original ! j'aime !
    Mabari
    Mabari
    FémininAge : 28Messages : 5

    le Dim 29 Jan 2017 - 1:08

    C'est super joli, merci :)
    Moro-PM
    Moro-PM
    FémininAge : 18Messages : 149

    le Mar 31 Jan 2017 - 17:41

    Thanks !
    Noruenu
    Noruenu
    FémininAge : 27Messages : 123

    le Jeu 2 Fév 2017 - 15:57

    Merci ! :B
    Shaïka
    Shaïka
    FémininAge : 23Messages : 79

    le Mer 8 Fév 2017 - 23:27

    Merci beaucoup ♥
    Dalila
    Dalila
    FémininAge : 28Messages : 1

    le Dim 12 Fév 2017 - 0:10

    pas mal, bravo!
    Maevis
    Maevis
    FémininAge : 19Messages : 27

    le Dim 12 Fév 2017 - 12:29

    Oh mon Dieu, c'est bow °q°
    Je craque pour tout ce style ♥
    Merci beaucoup pour le partage ♥
    Pretty Girl
    Pretty Girl
    FémininAge : 22Messages : 29

    le Sam 18 Fév 2017 - 12:08

    J'adore ! Merci :)
    Momiji-chan
    Momiji-chan
    FémininAge : 22Messages : 38

    le Sam 18 Fév 2017 - 20:27

    Hello :)
    J'aime beaucoup le résultat final, c'est un très bon travail Wink
    Calkrys
    Calkrys
    FémininAge : 23Messages : 49

    le Ven 24 Fév 2017 - 19:20

    Merci !
    Cassisse
    Cassisse
    FémininAge : 28Messages : 127

    le Ven 24 Fév 2017 - 21:07

    Supeer beau merciiiiiiiii
    ChupabracaRope
    ChupabracaRope
    FémininAge : 18Messages : 40

    le Sam 25 Fév 2017 - 15:18

    merciiii
    Contenu sponsorisé


      La date/heure actuelle est Dim 25 Oct 2020 - 15:15