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 :
Bon plan achat en duo : 2ème robot cuiseur Moulinex Companion ...
600 €
Voir le deal

    PA gris/rose + infobulles + staff + news + partenaires défilants.

    Henrykiki
    Henrykiki
    MasculinAge : 31Messages : 576

    Jeu 25 Déc 2014 - 21:44

    Rappel du premier message :

    Bonjour tout le monde,

    LS ~ PA gris/rose :


    Voici mon premier LS de PA suite à la demande de Madii-x, faite ici. Vous avez également le qeel ainsi que les catégories qui vont avec cette PA.

    Découvrez un aperçu de cette PA en ligne:
    www (avec intéractions)

    Et découvrez celle-ci en images :
    Normale- Infobulles- Survol nouveautés


    La PA contient en elle-même :

    • Une zone concours avec infobulles (peut être adaptée en membre du mois.
    • Une zone staff avec informations apparaissant au survol...
    • Une zone "nouveautés" scrollable et cliquable.
    • Un système de masquage automatique sur les images (effet déchiré).
    • Une zone "partenaires" défilante, aux normes du W3C + arrêt au survol.


    Les codes à insérer !


    Ce code-ci est à insérer dans une page html (PA>Modules>Pages HTML>Créer)

    Code:
    <!doctype html>
    <html lang="fr">
    <head>
            <meta charset="UTF-8" />
       <title>PA grise/rose + scrollbar personnalisée.</title>
       <link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
       <style>

          body {
             background: #e4e1e2;
          }

          #pa h1, #pa h2, #pa h3, #pa h4, #pa h5, #pa h6, #pa p {
             margin: 0; padding: 0; font-weight: normal;
          }

          #pa {
             width: 800px;
             min-height: 400px;
             border-radius: 10px;
             background: #fff;
             margin: 75px auto 20px;
             position: relative;
             padding-top: 50px;
             font-family: "abeatbykai", sans-serif;
             font-size: 12px;
             letter-spacing: 1px;
             color: gray;
          }

          #pa a {
             color: darkgray;
             text-decoration: none;
          }

          #pa a, #pa h2, .news p {
             -webkit-transition: all .2s ease;
             -moz-transition: all .2s ease;
             -ms-transition: all .2s ease;
             -o-transition: all .2s ease;
             transition: all .2s ease;
          }

          #pa a:hover {
             color: #d74e77;
          }
          
          #pa h1 {
             width: 347px;
             height: 70px;
             background: url("http://i39.servimg.com/u/f39/19/07/10/81/titre-10.png") no-repeat;
             position: absolute;
             top: -55px;
             left: 50%;
             margin-left: -173.5px;
             text-indent: -9999px;
          }

          ul#ticker01, ul#concours, ul.groupes, ul#staff
          {
             list-style-type: none;
             margin: 0;
             padding: 0;
          }

          #pa h2 img {
             position: absolute; top:0;
          }

          #pa table td {
             min-height: 50px;
             border-radius: 10px;
             position: relative;
             padding-top: 25px;
          }

          #pa table td.withbg {
             background: #e4e1e2;
          }

          #pa h2 {
             height: 34px;
             position: absolute;
             top: -12.5px;
             z-index: 3;
             font-size: 34px;
             font-family: 'Covered By Your Grace', cursive;
          }

          #pa h2:hover {
             color: rgba(209,42,97,1);
          }

    /* CONCEPT */

          .concept {
             height: 192px; max-height: 192px;
             overflow-y: scroll;
             padding: 1px;
          }

          .concept p {
             margin-bottom: 20px !important;
             padding-right: 20px !important;
          }

          .concept p:last-child {
             margin-bottom: 0px !important;
          }

    /* GROUPES */

          .groupes {
             height: 60px; max-height: 60px;
             text-align: center;
          }

          .groupes li {
             display: inline-block;
             margin: 0 10px;
          }

    /* NEWS */

          .news {
             height: 87px; max-height: 87px;
             overflow-y: scroll;
          }

          .news strong {
             color: #d74e77;
             font-family: sans-serif;
             text-transform: uppercase;
             font-weight: normal;
          }

          .news p {
             border-bottom: 1px solid lightgray;
             padding: 2px 0 !important; margin: 2px 0 !important;
          }

          .news p:hover {
             border-bottom: 1px solid lightgray;
             padding: 2px 0 2px 20px !important; margin: 2px 0 !important;
          }

    /* CONCOURS */
          
          ul#concours {
             width: 280px;
             height: 114px; max-height: 114px;
             margin: 0px auto 0;
             text-align: center;
          }
          
          ul#concours li {
             width: 84px;
             margin: 0 5px;
             display: inline-block;
             position: relative;
             z-index: 4;
          }

          ul#concours li span {
             display: none;
             width: 150px;
             padding: 10px;
             position: absolute;
             bottom: 60px;   right: 50%; margin-right: -75px;
             background: #fff;
             color: #fff;
             z-index: 5;
             border-radius: 10px;
             border-bottom: 1px solid #d74e77;
          }

          ul#concours li:hover span {
             display: block;
          }

          ul#concours li span img {
             max-width: 150px;
             height: auto;
          }

          .fleche {
             width: 26px;
             height: 12px;
             background: url("http://i39.servimg.com/u/f39/19/07/10/81/fleche11.png");
             position: absolute;
             bottom: -12px;
             left: 50%;
             margin-left: -13px;
          }

    /* STAFF */

          #staff img, ul#concours li img.mini {
             -webkit-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
             -moz-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
             -ms-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
             -o-mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
             mask: url(http://henrynicolas.be/fow/pa-madiix/mask.svg) top left / cover;
          }

          #staff li {
             display: inline-block;
             width: 80px; max-width: 80px;
          }

          #staff li:hover {
             cursor: help;
          }

          .staff p {
             padding: 10px 0 10px !important;
          }

          .staff{
             text-align: center;
          }

          .staff .pseudo
          {
             display: inline-block;
             color: #d74e77;
          }

    /* PARTENAIRES */
          
          td.partenaires {
             padding-top: 15px !important;
          }

          .tickercontainer { /* the outer div with the black border */
             width: 750px;
             height: 31px;
             margin: 0 auto;
             padding: 0;
             overflow: hidden;
             position: relative;
             z-index: 2;
          }
          .tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
             position: relative;
             left: 0px;
             top: 0px;
             width: 750px;
             overflow: hidden;
          }
          ul.newsticker { /* that's your list */
             position: relative;
             left: 750px;
          }
          ul.newsticker li {
             float: left; /* important: display inline gives incorrect results when you check for elem's width */
             width: 88px;
             margin: 0 2px;
             padding: 0;
          }

    /* CREDITS */

          #credits {
             position: absolute;
             padding: 0px 10px;
             bottom: -20px;
             right: 0px;
             height: 20px;
             line-height: 20px;
             font-size: 8px;
             color: gray;
             text-transform: uppercase;
             text-shadow: 1px 1px 0px #ffffff;
          }
          
    /* SCROLLBAR */

          ::-webkit-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-webkit-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-webkit-scrollbar-corner{background:none;}

          ::-moz-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-moz-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-moz-scrollbar-corner{background:none;}

          ::-ms-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-ms-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-ms-scrollbar-corner{background:none;}

          ::-o-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-o-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-o-scrollbar-corner{background:none;}

          ::-scrollbar{height:12px;width:5px;background:none;margin-right:5px;}
          ::-scrollbar-thumb{background:rgba(242,163,189,1);height:30px;border-radius:12px;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.75);cursor:crosshair;}
          ::-scrollbar-corner{background:none;}
       </style>
    </head>
    <body>
       <div id="pa">
          <h1>Bienvenue !</h1>
          <table width="800px" cellspacing="15px" cellpadding="10px" id="contenu-general">
             <tr>
                <td rowspan="2" valign="top" class="withbg" width="300px">
                   <h2>Le concept</h2>
                   <div class="concept">
                      <p>Bien le bonjour</p>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, itaque, cum veniam vel sed dicta <a href="">quaerat modi</a> ab soluta molestias voluptas ipsam sit omnis. Nemo, natus facilis suscipit sequi ratione. Lorem ipsum dolor sit amet, consectetur adipisicing </p>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, ab, voluptates, porro totam omnis eos hic mollitia beatae quia dolores corrupti delectus sequi recusandae molestiae sit. Magni saepe repellendus voluptas.</p>
                   </div>
                </td>
                <td valign="top" width="450px">
                   <ul class="groupes">
                      <li><a href="" style="color: red;">groupe 1</a></li>
                      <li><a href="" style="color: green;">groupe 2</a></li>
                      <li><a href="" style="color: orange;">groupe 3</a></li>
                      <li><a href="" style="color: blue;">groupe 4</a></li>
                      <li><a href="" style="color: magenta;">groupe 5</a></li>
                   </ul>
                </td>
             </tr>
             <tr>
                <!-- <td>lol</td> on supprime cette ligne, car rowspan -->
                <td valign="top" class="withbg">
                   <h2>Les nouveautés</h2>
                   <div class="news">
                      <p><strong>News 1 :</strong> <a href="">Les fourmis ont des pattes!</a></p>
                      <p><strong>News 2 :</strong> Quoi, une news sans lien ? </p>
                      <p><strong>News 3 :</strong> <a href="">Pas touche la mouche</a></p>
                      <p><strong>News 4 :</strong> <a href="">T'as pas pris ta douche</a></p>
                      <p><strong>News 5 :</strong> The style for news</p>
                      <p><strong>News 6 :</strong> The style for news</p>
                      <p><strong>News 7 :</strong> The style for news</p>
                      <p><strong>News 8 :</strong> The style for news</p>
                   </div>
                </td>
             </tr>
             <tr>
                <td valign="top" class="withbg">
                   <h2>Concours</h2>
                   <ul id="concours">
                      <li>
                         <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
                         <div class="titre-concours">AOTM</div> <!-- titre concours -->
                         <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                         </span>
                      </li>
                      <li>
                         <img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt="AOTM" class="mini"> <!-- miniature concours 84*37px -->
                         <div class="titre-concours">AOTM</div> <!-- titre concours -->
                         <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt=""> <!-- infobulle -->
                            <div class="fleche"></div> <!-- tite fleche -->
                         </span>
                      </li>
                      <!--
                         BLOC A DUPLIQUER SI 3 OU 4 CONCOURS :
                      <li>
                         <img src="staff.png" alt="AOTM" class="mini">
                         <div class="titre-concours">AOTM</div>
                         <span>
                            <img src="http://r24.imgfast.net/users/2915/57/91/98/avatars/17369-57.jpg" alt="">
                            <div class="fleche"></div>
                         </span>
                      </li> -->
                   </ul>
                </td>
                <td valign="top" class="withbg">
                   <h2>Le staff</h2>
                      <ul id="staff">
                         <li onMouseOver="javascript:staff1()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                         <li onMouseOver="javascript:staff2()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                         <li onMouseOver="javascript:staff3()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                         <li onMouseOver="javascript:staff4()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                         <li onMouseOver="javascript:staff5()"><img src="http://i39.servimg.com/u/f39/19/07/10/81/staff11.png" alt=""></li>
                      </ul>
                   <div class="staff">
                      <div id="staff1">
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, sapiente, quos, qui corporis soluta optio aspernatur harum minus asperiores ipsum repudiandae placeat ipsam.</p>
                         <div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff2" style="display:none;">
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, aliquid, laudantium, neque eius nemo amet dolores velit esse voluptas dicta quisquam quos consequuntur provident</p>
                         <div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff3" style="display:none;">
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, illo, assumenda, pariatur reprehenderit nam vero tempore nostrum laboriosam molestiae maxime incidunt.</p>
                         <div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff4" style="display:none;">
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, autem, dolor in quaerat quas quos pariatur iusto aliquid laudantium et ipsum nulla dignissimos.</p>
                         <div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>

                      <div id="staff5" style="display:none;">
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, voluptate rerum ipsam incidunt magni temporibus voluptatibus voluptas labore praesentium nemo deserunt.</p>
                         <div class="pseudo">PSEUDO</div> • <a href="">PROFIL</a> • <a href="">MP</a>
                      </div>
                   </div>
                </td>
             </tr>
             <tr>
                <td valign="top" colspan="2" class="withbg partenaires">
                   <h2>Partenaires</h2>
                   <ul id="ticker01">
                       <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                       <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                       <li><a href=""><img src="http://i39.servimg.com/u/f39/19/07/10/81/parten11.png" alt=""></a></li>
                       <!-- eccetera -->
                   </ul>
                </td>
             </tr>
          </table>
       <div id="credits">
          PA réalisée par Henrykiki sur <a href="http://www.never-utopia.com/t52871-henrykiki-pa-grise-rose-pale" target="_blank">Never-Utopia</a>
       </div>
       </div>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
       <script type="text/javascript">
          /*!
     * liScroll 1.0
     * Examples and documentation at:
     * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
     * 2007-2010 Gian Carlo Mingati
     * Version: 1.0.2.1 (22-APRIL-2011)
     * Dual licensed under the MIT and GPL licenses:
     * http://www.opensource.org/licenses/mit-license.php
     * http://www.gnu.org/licenses/gpl.html
     * Requires:
     * jQuery v1.2.x or later
     *
     */

    jQuery.fn.liScroll = function(settings) {
          settings = jQuery.extend({
          travelocity: 0.07
          }, settings);      
          return this.each(function(){
                var $strip = jQuery(this);
                $strip.addClass("newsticker")
                var stripWidth = 1;
                $strip.find("li").each(function(i){
                stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
                });
                var $mask = $strip.wrap("<div class='mask'></div>");
                var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");                        
                var containerWidth = $strip.parent().parent().width();   //a.k.a. 'mask' width    
                $strip.width(stripWidth);         
                var totalTravel = stripWidth+containerWidth;
                var defTiming = totalTravel/settings.travelocity;   // thanks to Scott Waye      
                function scrollnews(spazio, tempo){
                $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
                }
                scrollnews(totalTravel, defTiming);            
                $strip.hover(function(){
                jQuery(this).stop();
                },
                function(){
                var offset = jQuery(this).offset();
                var residualSpace = offset.left + stripWidth;
                var residualTime = residualSpace/settings.travelocity;
                scrollnews(residualSpace, residualTime);
                });         
          });   
    };
       </script>
       <script>
          $(function(){
           $("#ticker01").liScroll();
       });

       function staff1() {
             document.getElementById('staff1').style.display='block';
             document.getElementById('staff2').style.display='none';
             document.getElementById('staff3').style.display='none';
             document.getElementById('staff4').style.display='none';
             document.getElementById('staff5').style.display='none';}
          function staff2() {
             document.getElementById('staff1').style.display='none';
             document.getElementById('staff2').style.display='block';
             document.getElementById('staff3').style.display='none';
             document.getElementById('staff4').style.display='none';
             document.getElementById('staff5').style.display='none';}
          function staff3() {
             document.getElementById('staff1').style.display='none';
             document.getElementById('staff2').style.display='none';
             document.getElementById('staff3').style.display='block';
             document.getElementById('staff4').style.display='none';
             document.getElementById('staff5').style.display='none';}
          function staff4() {
             document.getElementById('staff1').style.display='none';
             document.getElementById('staff2').style.display='none';
             document.getElementById('staff3').style.display='none';
             document.getElementById('staff4').style.display='block';
             document.getElementById('staff5').style.display='none';}
          function staff5() {
             document.getElementById('staff1').style.display='none';
             document.getElementById('staff2').style.display='none';
             document.getElementById('staff3').style.display='none';
             document.getElementById('staff4').style.display='none';
             document.getElementById('staff5').style.display='block';}
       </script>
    </body>
    </html>

    Insertion sur la page d'accueil :


    Une fois que tu as enregistré ta page web (copie/colle l'adresse internet de celle-ci quelque part, car tu vas en avoir besoin), il te suffit de te rendre sur ta page d'accueil, et de coller le code pour insérer une iframe, à savoir :

    Code:
    <iframe style="width: 850px; height: 650px;" scrolling="no" frameborder="0" src="HTTP://ADRESSE-DE-TA-PAGE-HTML-RECEMMENT-CREE"></iframe>

    Et tu auras ainsi ta belle Page d'accueil toute fonctionnelle :)

    Attention: cette PA fonctionne avec du Javascript. Il est donc obligatoire de passer via une page html & un iframe!

    Merci de ne pas toucher aux crédits envers Never-Utopia.


    Une question ?


    Je serai ravi de vous y répondre là-bas : problème avec votre code.


    Dernière édition par Henrykiki le Sam 27 Déc 2014 - 22:49, édité 3 fois
    • Revenir en haut
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Sam 16 Jan 2016 - 22:14

    Super !!

    merci



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 20 Signa10
    • Revenir en haut
    Sandym
    Sandym
    FémininAge : 37Messages : 27

    Dim 17 Jan 2016 - 21:55

    merci !
    • Revenir en haut
    Mawie62
    Mawie62
    FémininAge : 29Messages : 125

    Jeu 28 Jan 2016 - 2:10

    J'adore ce design merci beaucoup :)



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 20 Signat10
    • Revenir en haut
    MeowLowDee
    MeowLowDee
    FémininAge : 32Messages : 72

    Jeu 28 Jan 2016 - 16:55

    Merci
    • Revenir en haut
    Jessabelle
    Jessabelle
    FémininAge : 30Messages : 110

    Ven 5 Fév 2016 - 0:15

    Super pa, merci du partage :)
    • Revenir en haut
    Smikyou
    Smikyou
    FémininAge : 30Messages : 85

    Ven 12 Fév 2016 - 3:03

    ty
    • Revenir en haut
    Ishyyn
    Ishyyn
    FémininAge : 28Messages : 90

    Sam 13 Fév 2016 - 17:55

    Merci
    • Revenir en haut
    Nearween
    Nearween
    FémininAge : 25Messages : 213

    Dim 14 Fév 2016 - 14:49

    Merkii pour le code o/



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 20 Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    • Revenir en haut
    Ilario
    Ilario
    MasculinAge : 24Messages : 12

    Jeu 18 Fév 2016 - 14:09

    Merci :)
    • Revenir en haut
    Pretty Girl
    Pretty Girl
    FémininAge : 26Messages : 29

    Ven 19 Fév 2016 - 14:47

    J'adore c'est top :ange:
    • Revenir en haut
    Mystigri
    Mystigri
    FémininAge : 21Messages : 97

    Sam 20 Fév 2016 - 20:25

    J'adore !



    • Revenir en haut
    Zachary Wolf
    Zachary Wolf
    FémininAge : 31Messages : 57

    Dim 21 Fév 2016 - 17:06

    Merci du partage
    • Revenir en haut
    Trimens
    Trimens
    FémininAge : 25Messages : 38

    Lun 22 Fév 2016 - 10:11

    Merci ! ♥
    • Revenir en haut
    Kanu
    Kanu
    FémininAge : 34Messages : 62

    Lun 22 Fév 2016 - 13:44

    Merci beaucoup ! :3
    • Revenir en haut
    Jamy
    Jamy
    FémininAge : 31Messages : 41

    Lun 22 Fév 2016 - 19:47

    merci ! :)
    • Revenir en haut
    Cherry Blossom
    Cherry Blossom
    FémininAge : 31Messages : 7

    Mar 23 Fév 2016 - 16:53

    Merci :)



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 20 1602090811325543313961939
    • Revenir en haut
    Faïryna
    Faïryna
    FémininAge : 21Messages : 87

    Mar 23 Fév 2016 - 20:59

    Merci!
    • Revenir en haut
    Ari
    Ari
    FémininAge : 23Messages : 109

    Jeu 25 Fév 2016 - 13:38

    C'est trop beau! Merci!
    • Revenir en haut
    Angel-chery
    Angel-chery
    FémininAge : 26Messages : 22

    Jeu 25 Fév 2016 - 13:41

    Merci. ~
    • Revenir en haut
    luna-chan86
    luna-chan86
    FémininAge : 35Messages : 201

    Ven 26 Fév 2016 - 0:26

    Merci beaucoup c'est parfait!



    • Revenir en haut
    Kitolia
    Kitolia
    FémininAge : 24Messages : 23

    Ven 26 Fév 2016 - 23:51

    C'est super beau **
    Merci !
    • Revenir en haut
    Nunna
    Nunna
    FémininAge : 27Messages : 48

    Sam 27 Fév 2016 - 22:35

    Merci. ^^
    • Revenir en haut
    Reishi
    Reishi
    MasculinAge : 30Messages : 148

    Mar 1 Mar 2016 - 17:13

    merci !
    • Revenir en haut
    TaraToI
    TaraToI
    FémininAge : 31Messages : 67

    Mer 2 Mar 2016 - 10:45

    Merci pour le partage :-)



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 20 Icone_16
    • Revenir en haut
    Ichibari
    Ichibari
    FémininAge : 38Messages : 90

    Sam 5 Mar 2016 - 17:33

    Merci beaucoup



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 20 378622ginsignature
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Lun 20 Mai 2024 - 9:05