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.


    PA simple bleue

    Partagez
    avatar
    Fyraliel
    FémininAge : 27Messages : 1424

    le 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.



    avatar
    Lilith Aube
    FémininAge : 32Messages : 486

    le Dim 30 Aoû 2015 - 17:31

    Bonjour et merci =)
    avatar
    Kelalin
    FémininAge : 25Messages : 1888

    le Dim 30 Aoû 2015 - 19:00

    Merci \(T∇T)/
    avatar
    RPG Maker
    FémininAge : 23Messages : 44

    le Sam 30 Avr 2016 - 20:08

    Ça me plait beaucoup, merci. ^^
    avatar
    defenrir
    MasculinAge : 35Messages : 71

    le Lun 9 Mai 2016 - 15:59

    merci
    avatar
    Djeina
    FémininAge : 21Messages : 233

    le Ven 27 Mai 2016 - 13:29

    Merci Very Happy
    avatar
    Lessien
    FémininAge : 36Messages : 163

    le Mer 29 Juin 2016 - 22:32

    Merci !
    avatar
    cali60
    FémininAge : 32Messages : 58

    le Jeu 15 Sep 2016 - 11:13

    :)
    avatar
    BlueAmethyst
    FémininAge : 26Messages : 12

    le Sam 29 Oct 2016 - 15:30

    Merci!
    avatar
    Shiba Rikubi
    MasculinAge : 23Messages : 22

    le Lun 12 Déc 2016 - 23:18

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

    le Lun 12 Déc 2016 - 23:24

    Merci pour le partage !
    avatar
    vaness123
    FémininAge : 27Messages : 10

    le Lun 19 Déc 2016 - 17:04

    Merci pour le partage :)
    avatar
    Ariemm
    FémininAge : 17Messages : 107

    le Mer 25 Jan 2017 - 16:18

    Merci !
    avatar
    fraumali
    FémininAge : 38Messages : 121

    le Lun 30 Jan 2017 - 18:38

    Bonjour et merci de ce partage
    avatar
    Athéna
    FémininAge : 57Messages : 28

    le Ven 3 Fév 2017 - 13:21

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

    le Sam 8 Avr 2017 - 18:31

    Merci
    avatar
    HEAVEN.SPIRIT
    MasculinAge : 23Messages : 37

    le Mer 12 Avr 2017 - 21:47

    merci du partage
    avatar
    Jay-89
    FémininAge : 29Messages : 86

    le Lun 15 Mai 2017 - 9:14

    Merci
    avatar
    phenixia74
    FémininAge : 39Messages : 48

    le Lun 5 Fév 2018 - 7:55

    Merci pour les codes ♥
    avatar
    Edward Speleers
    FémininAge : 30Messages : 456

    le Mer 23 Mai 2018 - 1:17

    Merci :)



    avatar
    Pink-Panther2a
    FémininAge : 46Messages : 12

    le Dim 27 Mai 2018 - 9:59

    Bonjour et merci =)



    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 7:09