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 :
Google Pixel 7 5G – Smartphone 6,3″ OLED FHD+ 8 Go + 128 Go
316 €
Voir le deal

    PA simple bleue

    Fyraliel
    Fyraliel
    FémininAge : 33Messages : 1424

    Dim 30 Aoû 2015 - 17:15

    Bonjour tout le monde,

    Je vous propose une Page d'Accueil suite à la Demande de Lilith Aube




    Merci de laisser le crédit vert Never-Utopia.




    Code HTML à mettre dans Panneau d'Administration > onglet Affichage > à gauche dans le cadre Page d'Accueil : Généralité

    Code:
    <div class="pa_totale">
                              
     <div class="cadre_gauche">
                                  
     <div class="cadre_membremois">
                                      
     <div class="membremois">
                               <img src="http://nsa37.casimages.com/img/2015/07/28/150728123047870391.png" />                <span>Infos 1</span>                      
     </div>
                                      
     <div class="membremois">
                               <img src="http://nsa37.casimages.com/img/2015/07/28/150728123047870391.png" />                <span>Infos 2</span>                      
     </div>
                           <span>Membres du mois</span>                  
     </div>
                                  
     <div class="cadre_lienutile">
                                      
     <div class="titre_lienutile">
               Liens Utiles          
     </div>
                                      
     <div class="lien_utile">
               <a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br /><a href="###">Lien Utile</a>                 <br />    
     </div>
                                  
     </div>
                              
     </div>
                              
     <div class="cadre_milieu">
                                  
     <div class="cadre_contexte">
                                      
     <div class="titre_contexte">
               Résumé du contexte          
     </div>
                                      
     <div class="texte_contexte">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra ut nulla vitae tincidunt. Phasellus sagittis ligula risus, eget sagittis ante varius sit amet. Vivamus feugiat pulvinar porttitor. Sed accumsan faucibus ultricies. Morbi et bibendum lacus. Nunc facilisis massa at dolor laoreet auctor. Nam dictum eros maximus justo scelerisque, sit amet imperdiet nisi aliquet. Vivamus ultrices sollicitudin tempus. Donec lacus metus, vulputate a diam sed, bibendum eleifend nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra ut nulla vitae tincidunt. Phasellus sagittis ligula risus, eget sagittis ante varius sit amet. Vivamus feugiat pulvinar porttitor. Sed accumsan faucibus ultricies. Morbi et bibendum lacus. Nunc facilisis massa at dolor laoreet auctor. Nam dictum eros maximus justo scelerisque, sit amet imperdiet nisi aliquet. Vivamus ultrices sollicitudin tempus. Donec lacus metus, vulputate a diam sed, bibendum eleifend nibh.          
     </div>
                                  
     </div>
                                  
     <div class="cadre_partenaire">
                                      
     <div class="titre_partenaire">
               Top Partenaires          
     </div>
                                      
     <div class="lien_part">
                               <a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a><a href="http://www.never-utopia.com/" target="_blank"><img class="partenairetop" src="http://img4.hostingpics.net/pics/213378miniban3.jpg" title="Never-Utopia" alt="Never-Utopia" /></a>  
     </div>
                                  
     </div>
                              
     </div>
                              
     <div class="cadre_droite">
                                  
     <div class="cadre_nouveau">
                                      
     <div class="titre_nouveau">
               Nouveauté/Event          
     </div>
                                      
     <div class="texte_nouveau">
               Metuentes igitur idem latrones Lycaoniam magna parte campestrem cum se inpares nostris fore congressione stataria documentis frequentibus scirent, tramitibus deviis petivere Pamphyliam diu quidem intactam sed timore populationum et caedium, milite per omnia diffuso propinqua, magnis undique praesidiis conmunitam.          
     </div>
                                  
     </div>
                                  
     <div class="cadre_top">
                                      
     <div class="titre_top">
               Top Sites & A Savoir          
     </div>
                           <a rel="nofollow" href="###" target="_blank"><img src="http://img15.hostingpics.net/pics/236519voter2.png" title="Top Site 1" alt="Top Site 1" /></a>             <a rel="nofollow" target="_blank" href="###"><img src="http://img15.hostingpics.net/pics/142965voter3.png" title="Top Site 2" alt="Top Site 2" /></a>             <a rel="nofollow" href="###" target="_blank"><img src="http://img15.hostingpics.net/pics/236519voter2.png" title="Top Site 3" alt="Top Site 3" /></a>                      
     <div class="texte_top">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra ut nulla vitae tincidunt. Phasellus sagittis ligula risus, eget sagittis ante varius sit amet. Vivamus feugiat pulvinar porttitor. Sed accumsan faucibus ultricies. Morbi et bibendum lacus. Nunc facilisis massa at dolor laoreet auctor. Nam dictum eros maximus justo scelerisque, sit amet imperdiet nisi aliquet. Vivamus ultrices sollicitudin tempus. Donec lacus metus, vulputate a diam sed, bibendum eleifend nibh.          
     </div>
                                  
     </div>
                              
     </div>
                              
     <div class="cadre_staff">
                                  
     <div class="staff">
               <img src="http://nsa37.casimages.com/img/2015/07/28/150728123048171810.png" />        <span>Staff 1</span>          
     </div>
                                  
     <div class="staff">
               <img src="http://nsa37.casimages.com/img/2015/07/28/150728123048171810.png" />        <span>Staff 2</span>          
     </div>
                                  
     <div class="staff">
               <img src="http://nsa37.casimages.com/img/2015/07/28/150728123048171810.png" />        <span>Staff 3</span>          
     </div>
                                  
     <div class="staff">
               <img src="http://nsa37.casimages.com/img/2015/07/28/150728123048171810.png" />            <span>Staff 4</span>          
     </div>
                        
     </div>
             <a href="http://www.never-utopia.com/">(c) Never-Utopia</a>
    </div>

    Le code CSS à mettre dans Panneau d'Administration > onglet Affichage > à gauche dans le cadre Images et Couleurs : Couleurs > onglet Feuille de Style CSS

    Code:
    /*       PA       */
    .pa_totale {
        position: relative;
        height: 580px;
        width: 860px;
        border: 2px solid #335C84;
        background: #9BC4EB;
        border-radius: 4px;
        margin: auto;
    }
    .cadre_gauche {
        display: inline-block;
        vertical-align: top;
        width: 249px;
    }
    .cadre_membremois {
        position: relative;
        height: 180px;
        width: 230px;
        margin: 15px 0 0 15px;
        text-align: center;
        background: #82A3C2;
    }
    .cadre_membremois:before, .cadre_membremois:after {
        position: absolute;
        display: block;
        height: 180px;
        width: 230px;
        border: 2px solid #3F5A73;
        content:"";
    }
    .cadre_membremois:before {
        left: -5px;
        top: -5px;
    }
    .cadre_membremois:after {
        right: -5px;
        bottom: -5px;
    }
    .membremois {
        position: relative;
        height: 90px;
        width: 90px;
        margin: 20px 0 0 5px;
        display: inline-block;
        cursor: pointer;
        z-index: 2;
    }
    .membremois img {
        position: relative;
        height: 90px;
        width: 90px;
        border-radius: 50px;
        z-index: 2;
    }
    .membremois span {
        position: absolute;
        height: 80px;
        width: 80px;
        right: -5px;
        bottom: -5px;
        border-radius: 50px;
        background: #000;
        font-size: 11px;
        color: #fff;
        padding: 5px;
        overflow: hidden;
        transition: 0.5s all;
        z-index: 1;
    }
    .membremois:hover span {
        right: 0;
        bottom: 0;
        z-index: 3;
    }
    .cadre_membremois > span {
        display: block;
        margin-top: 15px;
        font: 24px'Vivaldi';
    }
    .cadre_lienutile {
        height: 340px;
        width: 230px;
        background: #82A3C2;
        border: 2px solid #3F5A73;
        margin: 15px 0 0 15px;
        padding-top: 10px;
        border-radius: 4px;
    }
    .titre_lienutile {
        height: 25px;
        width: 180px;
        border-bottom: 2px dotted #465D73;
        margin: auto;
        text-align: center;
    }
    .lien_utile {
        height: 280px;
        width: 185px;
        overflow: auto;
        margin: 10px 0 0 25px;
        text-align: center;
    }
    .cadre_milieu {
        display: inline-block;
        vertical-align: top;
    }
    .cadre_contexte {
        height: 250px;
        width: 230px;
        background: #82A3C2;
        border: 2px solid #3F5A73;
        margin: 10px 0 0 5px;
        padding-top: 10px;
        border-radius: 4px;
    }
    .titre_contexte {
        height: 25px;
        width: 180px;
        border-bottom: 2px dotted #465D73;
        text-align: center;
        margin: auto;
    }
    .texte_contexte {
        height: 200px;
        width: 175px;
        overflow: auto;
        margin: 10px 0 0 25px;
        text-align: justify;
        padding-right: 15px;
    }
    .cadre_partenaire {
        height: 267px;
        width: 230px;
        background: #82A3C2;
        border: 2px solid #3F5A73;
        margin: 10px 0 0 5px;
        padding-top: 10px;
        text-align: center;
        border-radius: 4px;
    }
    .titre_partenaire {
        height: 20px;
        width: 180px;
        border-bottom: 2px dotted #465D73;
        margin: 0 auto 5px;
    }
    .lien_part a{
        display: inline-block;
        vertical-align: middle;
    }
    .lien_part img{
        width: 88px;
        height: 31px;
    }
    .cadre_droite {
        display: inline-block;
        vertical-align: top;
    }
    .cadre_nouveau {
        height: 250px;
        width: 225px;
        background: #82A3C2;
        border: 2px solid #3F5A73;
        margin: 10px 0 0 5px;
        padding-top: 10px;
        padding-right: 5px
        border-radius: 4px;
    }
    .titre_nouveau {
        height: 25px;
        width: 180px;
        border-bottom: 2px dotted #465D73;
        text-align: center;
        margin: auto;
    }
    .texte_nouveau {
        height: 200px;
        width: 185px;
        overflow: auto;
        margin: 10px 0 0 20px;
        padding-right: 5px;
        text-align: justify;
    }
    .cadre_top {
        height: 267px;
        width: 230px;
        background: #82A3C2;
        border: 2px solid #3F5A73;
        margin: 10px 0 0 5px;
        padding-top: 10px;
        text-align: center;
        border-radius: 4px;
    }
    .titre_top {
        height: 20px;
        width: 180px;
        border-bottom: 2px dotted #465D73;
        margin: 0 auto 5px;
    }
    .texte_top {
        height: 170px;
        width: 175px;
        overflow: auto;
        margin: 10px 0 0 25px;
        text-align: justify;
        padding-right: 15px;
    }
    .cadre_staff{
        display: inline-block;
        height: 584px;
        width: 120px;
    }
    .staff{
        position: relative;
        height: 100px;
        width: 100px;
        margin: 30px 0 0 5px;
        cursor: pointer;
    }
    .staff img{
        width: 100px;
        height: 100px;
        border-radius: 60px;
        box-shadow: 5px 5px 0 #000;
        transition: 1s all;
    }
    .staff span{
        position: absolute;
        height: 90px;
        width: 90px;
        top: 0;
        left: 0;
        border-radius: 60px;
        background: #000;
        opacity: 0;
        padding: 5px;
        font-size: 11px;
        color: #fff;
        text-align: center;
        overflow: hidden;
        transition: 1.5s all;
    }
    .staff:hover img{
        transform: rotate(360deg);
        box-shadow: none;
    }
    .staff:hover span{
        opacity: 1;
    }
    .pa_totale *::-webkit-scrollbar{
        width: 5px;
    }
    .pa_totale *::-webkit-scrollbar-thumb{
        background: #1F4971;
        border-radius: 5px;
    }
    .pa_totale *::-webkit-scrollbar-track{
        background: #A3B6C7;
        border-radius: 5px;
    }
    .pa_totale > a {
        position: absolute;
        right: 5px;
        bottom: 5px;
    }

    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.



    PA simple bleue F86e7518c1
    Lilith Aube
    Lilith Aube
    FémininAge : 37Messages : 498

    Dim 30 Aoû 2015 - 17:31

    Bonjour et merci =)
    Anonymous
    Invité

    Dim 30 Aoû 2015 - 19:00

    Merci \(T∇T)/
    RPG Maker
    RPG Maker
    FémininAge : 29Messages : 53

    Sam 30 Avr 2016 - 20:08

    Ça me plait beaucoup, merci. ^^
    defenrir
    defenrir
    MasculinAge : 41Messages : 105

    Lun 9 Mai 2016 - 15:59

    merci
    Djeina
    Djeina
    FémininAge : 27Messages : 233

    Ven 27 Mai 2016 - 13:29

    Merci Very Happy
    Lessien
    Lessien
    FémininAge : 41Messages : 163

    Mer 29 Juin 2016 - 22:32

    Merci !
    cali60
    cali60
    FémininAge : 38Messages : 58

    Jeu 15 Sep 2016 - 11:13

    :)
    BlueAmethyst
    BlueAmethyst
    FémininAge : 32Messages : 12

    Sam 29 Oct 2016 - 15:30

    Merci!
    Shiba Rikubi
    Shiba Rikubi
    MasculinAge : 28Messages : 23

    Lun 12 Déc 2016 - 23:18

    Merci! ^^
    So-chan
    So-chan
    FémininAge : 34Messages : 61

    Lun 12 Déc 2016 - 23:24

    Merci pour le partage !
    vaness123
    vaness123
    FémininAge : 32Messages : 12

    Lun 19 Déc 2016 - 17:04

    Merci pour le partage :)
    Ari
    Ari
    FémininAge : 22Messages : 109

    Mer 25 Jan 2017 - 16:18

    Merci !
    fraumali
    fraumali
    FémininAge : 43Messages : 140

    Lun 30 Jan 2017 - 18:38

    Bonjour et merci de ce partage
    Athéna
    Athéna
    FémininAge : 63Messages : 29

    Ven 3 Fév 2017 - 13:21

    Bonjour et merci pour le partage Wink
    Alexanne
    Alexanne
    FémininAge : 32Messages : 9

    Sam 8 Avr 2017 - 18:31

    Merci
    HEAVEN.SPIRIT
    HEAVEN.SPIRIT
    MasculinAge : 29Messages : 37

    Mer 12 Avr 2017 - 21:47

    merci du partage
    Jay-89
    Jay-89
    FémininAge : 35Messages : 93

    Lun 15 Mai 2017 - 9:14

    Merci
    phenixia74
    phenixia74
    FémininAge : 45Messages : 61

    Lun 5 Fév 2018 - 7:55

    Merci pour les codes ♥
    Edward Speleers
    Edward Speleers
    MasculinAge : 35Messages : 460

    Mer 23 Mai 2018 - 1:17

    Merci :)



    PA simple bleue Edkidd11
    Pink-Panther2a
    Pink-Panther2a
    FémininAge : 51Messages : 25

    Dim 27 Mai 2018 - 9:59

    Bonjour et merci =)



    PA simple bleue Sign_111
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 12:21