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.


    Page d'accueil "Mozaik", personnalisable (CSS only)

    Partagez
    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Ven 26 Oct 2012 - 16:56

    Rappel du premier message :

    Bonjour !

    Voici une seconde mise en forme de page d'accueil très complète que vous n'avez plus qu'à remplir et modifier à votre goût (couleurs essentiellement). C'est une page d'accueil très condensée donc parfaite pour un forum déjà lourd ou long. En 650px de largeur par 240px de hauteur vous aurez le contexte, les news, le staff, les prédéfinis, les top site, partenaires, et les crédits. En sachant bien entendu que vous pouvez adapter les contenus à votre forum très facilement.

    Voici un aperçu de la page d'accueil dont je vais vous fournir les codes :

    LIEN FORUM TEST

    Il s'agit de la seconde mise en forme, celle comportant juste avant le titre "Page d'accueil "Mozaik" (aperçu du tutoriel)".
    Vous pouvez constater qu'il y a énormément d'animations, elles sont réalisées seulement à l'aide du css donc aucun javascript n'est présent dans ce tutoriel. Le css est par contre assez long.

    Le HTML :

    Code:
    <div id="mozaik"><div id="mozaik_top">
    <span class="mozaik_titretop"><img src="http://img15.hostingpics.net/pics/612828topsite.png" alt="Top sites et Partenaires" /></span><div class="mozaik_contenu2">Votez pour nous !<br />
    <a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a><a href="#"><img src="http://forum.reference-corrs.com/themes/etoile.gif" alt="Top" /></a>
    <br /><br />
    Nos Partenaires<br />
    <a href="#"><img src="http://media2.paperblog.fr/i/468/4683274/bienvenue-nouvelle-partenaire-house-of-night--L-41CNGx-175x130.jpeg" alt="Nom du forum" /></a><a href="#"><img src="http://4.bp.blogspot.com/-ZYIzBqlG43Y/TrGS0QHf0QI/AAAAAAAAAIs/PzQsIVI3s48/s1600/0000000000000101230110642314831.png" alt="Nom du forum" /></a><a href="#"><img src="http://img11.hostingpics.net/pics/913004Partenaire1.gif" alt="Nom du forum" /></a>
    </div>
    </div><div id="mozaik_credits"><span class="mozaik_titrecredits"><img src="http://img15.hostingpics.net/pics/603093crdits.png" alt="Nos Crédits" /></span><div class="mozaik_contenu3">Nous remercions ...<br /><br />
    Le contexte a été élaboré et rédigé par ..., ... et ... sous inspiration des oeuvres de ...<br />
    Le graphisme du forum a été réalisé par ... <br />
    Le codage a pu être mis en place grâce à ..., avec l'aide de ... <br />
    Cette page d'accueil a été réalisée par Sparrow-style, prise sur <a href="http://www.never-utopia.com">Never-Utopia</a>.<br /><br />
    (c) merci de respecter le travail de ces personnes. </div>
    </div><div id="mozaik_accueil"><div id="mozaik1"><div class="mozaik_titre1"></div><div class="mozaik_contenu"><img src="http://24.media.tumblr.com/tumblr_m2pft6YL5K1qhyiolo1_500.gif" alt="" class="mozaik_illu" />Cyprum itidem insulam procul a continenti discretam et portuosam inter municipia crebra urbes duae faciunt claram Salamis et Paphus, altera Iovis delubris altera Veneris templo insignis. tanta autem tamque multiplici fertilitate abundat rerum omnium eadem Cyprus ut nullius externi indigens adminiculi indigenis viribus a fundamento ipso carinae ad supremos usque carbasos aedificet onerariam navem omnibusque armamentis instructam mari committat.
    <br /><br />
    Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</div>
    </div><div id="mozaik2"><div class="mozaik_titre2"></div><div class="mozaik_contenu"><div class="mozaik_news"><span class="mozaik_datenews">15/09/2012</span>Contenu nouveauté 1.</div><div class="mozaik_news"><span class="mozaik_datenews">21/09/2012</span>Contenu nouveauté 2.</div><div class="mozaik_news"><span class="mozaik_datenews">4/10/2012</span>Contenu nouveauté 3.</div></div>
    </div><div id="mozaik3"><div class="mozaik_titre3"></div><div class="mozaik_contenu">

    <span class="mozaik_avatar" style="background: url(http://i64.servimg.com/u/f64/09/04/37/22/avata360.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.</span></span>

    <span class="mozaik_avatar" style="background: url(http://img716.imageshack.us/img716/593/garfunkel01.jpg) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Description du membre, lien MP, etc...</span></span>

    <span class="mozaik_avatar" style="background: url(http://img688.imageshack.us/img688/56/johnnydepp11.png) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Description du membre, lien MP, etc...</span></span></div></div><div id="mozaik4"><div class="mozaik_titre4"></div><div class="mozaik_contenu">
    <table><tr>
    <td style="vertical-align: top;"><span class="mozaik_predef"><span class="predef_icone"><img src="http://images1.fanpop.com/images/photos/1500000/Johnny-Depp-johnny-depp-1567237-100-100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://www.1001cocktails.com/magazine/wp-content/uploads/johnnydepp_whisky-300x213-1-100x100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://99.mgl.skyrock.net/art/PRIP.84674799.3.0.png" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    </td>
    <td style="vertical-align: top;">
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://a4.img.v4.skyrock.net/0836/72220836/pics/photo_72220836_1.png" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://www.actucine.com/wp-content/uploads/2012/01/Johnny+Deep-100x100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    </td>
    </tr></table>
    </div>
    </div>
    </div></div>


    Le CSS :

    Code:
    /* PAGE ACCUEIL MOZAIK */

    #mozaik
    {
      width: 660px;
      height: 260px;
      margin: auto;
    }
    #mozaik a
    {
      font-weight: bold;
      color: #575757 !important;
      text-decoration: none !important;
    }
    #mozaik a:hover
    {
      color: #3a3a3a;
      text-decoration: none !important;
    }
    #mozaik_top
    {
      position: relative;
      z-index: 1;
      width: 30px;
      height: 238px;
      overflow: hidden;
      margin-top: 10px;
      float: left;
      background: #b9b9b9;
      border: 1px solid #d6d6d6;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_top:hover
    {
      position: relative;
      z-index: 999;
      width: 330px;
      background: #d6d6d6;
      border: 1px solid #e3e3e3;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_credits
    {
      position: relative;
      z-index: 1;
      width: 30px;
      height: 238px;
      overflow: hidden;
      margin-top: 10px;
      float: right;
      background: #b9b9b9;
      border: 1px solid #d6d6d6;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_credits:hover
    {
      position: relative;
      z-index: 999;
      width: 330px;
      background: #d6d6d6;
      border: 1px solid #e3e3e3;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titretop
    {
      display: block;
      width: 30px;
      height: 238px;
      float: left;
      overflow: hidden;
      background-color: transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_top:hover .mozaik_titretop
    {
      background-color: #9e9e9e;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titrecredits
    {
      display: block;
      width: 30px;
      height: 238px;
      float: right;
      overflow: hidden;
      background-color: transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_credits:hover .mozaik_titrecredits
    {
      background-color: #9e9e9e;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik_accueil
    {
      width: 600px;
      height: 240px;
      margin: auto;
      padding: 10px;
      text-align: justify;
    }
    #mozaik1
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #c19898;
      border-left: 3px solid #9e3535;
      box-shadow: 0px 0px 0px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik1:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      background: #dcdcdc;
      border-left: 0px solid #9e3535;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik2
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #a8b6cc;
      border-right: 3px solid #3b5d94;
      box-shadow: 0px 0px 0px #000000;
      margin-left: 300px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik2:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      margin-left: 0px;
      background: #dcdcdc;
      border-right: 0px solid #3b5d94;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik3
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #a3c5a5;
      border-left: 3px solid #429046;
      box-shadow: 0px 0px 0px #000000;
      margin-top: 120px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik3:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      margin-top: 0px;
      background: #dcdcdc;
      border-left: 0px solid #429046;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik4
    {
      position: absolute;
      z-index: 1;
      width: 300px;
      height: 120px;
      overflow: hidden;
      background: #d7d1a0;
      border-right: 3px solid #c7b731;
      box-shadow: 0px 0px 0px #000000;
      margin-left: 300px;
      margin-top: 120px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik4:hover
    {
      z-index: 999;
      width: 600px;
      height: 240px;
      margin-left: 0px;
      margin-top: 0px;
      background: #dcdcdc;
      border-right: 0px solid #c7b731;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }

    .mozaik_titre1
    {
      width: 300px;
      height: 120px;
      background: url(http://img15.hostingpics.net/pics/372569contexte.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik1:hover .mozaik_titre1
    {
      width: 600px;
      height: 60px;
      background: url(http://img15.hostingpics.net/pics/372569contexte.png) top left no-repeat #9e3535;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titre2
    {
      width: 300px;
      height: 120px;
      background: url(http://img15.hostingpics.net/pics/898361lesnews.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik2:hover .mozaik_titre2
    {
      width: 600px;
      height: 60px;
      background: url(http://img15.hostingpics.net/pics/898361lesnews.png) top left no-repeat #3b5d94;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titre3
    {
      width: 300px;
      height: 120px;
      background: url(http://img15.hostingpics.net/pics/707275staff.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik3:hover .mozaik_titre3
    {
      width: 600px;
      height: 60px;
      background: url(http://img15.hostingpics.net/pics/707275staff.png) top left no-repeat #429046;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_titre4
    {
      width: 300px;
      height: 120px;
      background: url(http://img15.hostingpics.net/pics/585458predef.png) top left no-repeat transparent;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    #mozaik4:hover .mozaik_titre4
    {
      width: 600px;
      height: 60px;
      background: url(http://img15.hostingpics.net/pics/585458predef.png) top left no-repeat #c7b731;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }

    .mozaik_contenu
    {
      width: 98%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 160px;
      overflow: auto;
      font-size: 11px;
      color: #7d7d7d;
      text-shadow: 1px 1px 0px #f1f1f1;
    }
    .mozaik_contenu2
    {
      width: 280px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 220px;
      overflow: auto;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      text-align: center;
      color: #7d7d7d;
      text-shadow: 1px 1px 0px #f1f1f1;
    }
    .mozaik_contenu3
    {
      width: 280px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 5px;
      height: 220px;
      overflow: auto;
      font-size: 11px;
      font-style: italic;
      text-align: left;
      color: #7d7d7d;
      text-shadow: 1px 1px 0px #f1f1f1;
    }
    .mozaik_illu
    {
      width: 150px;
      float: left;
      border: 1px solid #ffffff;
      margin: 5px;
    }
    .mozaik_news
    {
      margin: 5px;
      padding-bottom: 5px;
      border-bottom: 1px solid #3b5d94;
    }
    .mozaik_datenews
    {
      display: inline-block;
      font-size: 12px;
      font-weight: bold;
      color: #3b5d94;
      margin-right: 20px;
    }
    .mozaik_avatar
    {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: 80px;
      height: 150px;
      overflow: hidden;
      border: 2px solid #9e9e9e;
      box-shadow: 0px 0px 0px #000000;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(opacity=50);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatar:hover
    {
      position: relative;
      z-index: 999;
      display: inline-block;
      width: 150px;
      height: 150px;
      overflow: hidden;
      border: 2px solid #9e9e9e;
      box-shadow: 0px 0px 5px #000000;
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatardescr
    {
      display: block;
      background: url(http://img15.hostingpics.net/pics/301068noir50.png);
      margin-top: 150px;
      height: 150px;
      overflow: auto;
      color: #e4e4e4;
      font-size: 10px;
      line-height: 12px;
      text-shadow: 1px 1px 0px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatar:hover .mozaik_avatardescr
    {
      margin-top: 130px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatardescr:hover
    {
      margin-top: 0px !important;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_avatartitre
    {
      display: block;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .mozaik_predef
    {
      clear: both;
      display: block;
      height: 60px;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_predef:hover
    {
      display: block;
      height: 60px;
      box-shadow: 0px 0px 5px #000000;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -ms-transition: 1s;
    }
    .mozaik_predef a
    {
      text-transform: uppercase;
      color: #52400a !important;
      text-decoration: none !important;
      text-shadow: 1px 1px 0px #ffffff;
    }
    .mozaik_predef a:hover
    {
      text-decoration: none !important;
    }
    .predef_icone
    {
      display: block;
      float: left;
      width: 50px;
      height 50px;
      overflow: hidden;
      margin: 5px;
      border: 2px solid #9e9e9e;
    }
    .predef_icone img
    {
      width: 50px;
    }
    .predef_nom
    {
      display: block;
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      color: #937723;
    }


    Les Modifications :

    Pour simplifier les choses j'ai affiché le titre des blocs et des onglets coulissants en image. ainsi, vous pourrez assez facilement réaliser les votres, selon le genre de votre forum. Il suffira de les faire en transparence pour conserver l'effet de transition dans le changement de la couleur de fond du titre.
    Je vous conseille également de garder les mêmes tailles d'image que moi, pour éviter d'avoir à modifier les tailles dans le css.

    Les couleurs sont bien évidemment modifiables dans le css, il peut s'agit de la même couleur pour chaque cadre. Il y a beaucoup de changements de couleur, je vous conseille de faire pour un bloc survolé un fond plus clair que lorsqu'il n'est pas survolé.

    Voici pour vous aider des morceaux de code, ceux correspondant uniquement aux avatars du staff ou aux prédéfinis, si vous souhaitez en ajouter et que vous vous perdez un peu dans les codes :

    Ajouter une news :
    Code:
    <div class="mozaik_news"><span class="mozaik_datenews">15/09/2012</span>Contenu nouveauté 1.</div>

    Ajouter un membre du staff :
    Code:
    <span class="mozaik_avatar" style="background: url(http://img716.imageshack.us/img716/593/garfunkel01.jpg) center center no-repeat;"><span class="mozaik_avatardescr"><span class="mozaik_avatartitre">Nom du perso'</span>Description du membre, lien MP, etc...</span></span>

    Ajouter un prédéfini :
    Code:
    <span class="mozaik_predef"><span class="predef_icone"><img src="http://images1.fanpop.com/images/photos/1500000/Johnny-Depp-johnny-depp-1567237-100-100.jpg" alt="Predef" /></span><span class="predef_nom">Nom du Personnage</span>Description rapide du personnage. <a href="#">Voir sa fiche</a></span></span>
    (Ils sont à ajouter d'un côté ou de l'autre du tableau.)

    Si vous utilisez cette mise en forme, même modifiée, merci de LAISSER LE CREDIT déjà présent dans le code. Que vous réorganisiez tout à l'intérieur c'est une chose, dès lors que vous vous êtes servi du code de base pour démarrer pour avoir sa structure le crédit est mérité me semble-t-il, puisque c'est tout de même une aide apportée, donc il doit être laissé.
    Je vous en remercie par avance x)
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 12:51, édité 2 fois



    avatar
    SafiraPhoenix
    FémininAge : 22Messages : 8

    le Sam 27 Fév 2016 - 20:14

    Tres sympa, Merci.
    avatar
    thidabou
    FémininAge : 17Messages : 37

    le Mer 2 Mar 2016 - 0:50

    Merci !! Very Happy
    avatar
    Irys
    FémininAge : 28Messages : 145

    le Mar 15 Mar 2016 - 12:12

    Merci pour le partage ! ♥




    Waht is your name?
    avatar
    Kitket
    FémininAge : 34Messages : 100

    le Mar 15 Mar 2016 - 18:48

    Merci
    avatar
    Hakial
    MasculinAge : 21Messages : 50

    le Mar 15 Mar 2016 - 22:53

    Merci!
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Ven 18 Mar 2016 - 12:20

    Bravo, un jolie travaille réaliser.
    avatar
    Sounik
    MasculinAge : 18Messages : 17

    le Sam 19 Mar 2016 - 13:39

    Merci ^^
    avatar
    Keylha
    FémininAge : 18Messages : 82

    le Dim 20 Mar 2016 - 18:52

    Merci Very Happy



    avatar
    xmissmegy
    FémininAge : 23Messages : 7

    le Ven 25 Mar 2016 - 22:53

    Super !
    avatar
    Thessia
    FémininAge : 28Messages : 74

    le Lun 28 Mar 2016 - 2:26

    J'adore



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    avatar
    Xyyny
    FémininAge : 26Messages : 59

    le Mer 30 Mar 2016 - 11:36

    Han c'est sympa *-*
    avatar
    Margaux E.
    FémininAge : 15Messages : 25

    le Ven 1 Avr 2016 - 20:45

    Comme tout ce que tu fait est beau, je vais tester :)
    Merci du partage !
    avatar
    Kami-Chan
    FémininAge : 15Messages : 13

    le Mar 5 Avr 2016 - 13:15

    Merciiiiii ~
    avatar
    Sophie2
    FémininAge : 54Messages : 63

    le Mer 6 Avr 2016 - 16:54

    merci
    avatar
    Roromiya
    FémininAge : 100Messages : 111

    le Dim 10 Avr 2016 - 11:16

    YES MERCI



    avatar
    Loona
    FémininAge : 51Messages : 21

    le Lun 11 Avr 2016 - 11:40

    Merci beaucoup.



    avatar
    Afterglow.winter
    FémininAge : 22Messages : 138

    le Ven 6 Mai 2016 - 21:45

    Merci pour cette jolie mise en page :love:



    How do you get up from an all time low?
    avatar
    -Resis
    MasculinAge : 21Messages : 25

    le Jeu 12 Mai 2016 - 18:38

    magnifique
    avatar
    Orochimaru
    FémininAge : 28Messages : 209

    le Jeu 12 Mai 2016 - 18:46

    J'aime bien Very Happy Beau travail Very Happy Merci du partage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    Alexielios
    FémininAge : 27Messages : 62

    le Sam 14 Mai 2016 - 22:42

    Merci










    "People live their lives bound by what they accept as correct and true. That's how they define reality.
    But what does it mean to be correct or true?"
    avatar
    Stronger
    MasculinAge : 23Messages : 277

    le Dim 15 Mai 2016 - 3:51

    merci



    avatar
    Kiona14
    FémininAge : 27Messages : 4

    le Mer 18 Mai 2016 - 16:25

    Tres beau merci beaucoup!
    avatar
    ~Li Mei
    FémininAge : 27Messages : 21

    le Jeu 26 Mai 2016 - 13:23

    Merci beaucoup :)
    avatar
    Aidden
    MasculinAge : 23Messages : 45

    le Lun 30 Mai 2016 - 0:50

    Merci !
    avatar
    Sideris
    FémininAge : 23Messages : 112

    le Dim 5 Juin 2016 - 17:19

    Merci !









    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 11:49