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.


    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
    Hana Evali
    Hana Evali
    FémininAge : 33Messages : 195

    Mar 10 Fév 2015 - 22:59

    J'adore !



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 6 Ye49
    avatar
    Wolftactick
    FémininAge : 22Messages : 71

    Mer 11 Fév 2015 - 14:41

    Tellement beau
    Lilie
    Lilie
    FémininAge : 40Messages : 190

    Mer 11 Fév 2015 - 16:08

    Whoua j'adore !
    Neymar
    Neymar
    MasculinAge : 25Messages : 139

    Mer 11 Fév 2015 - 22:15

    Thanks a lot o/
    Vegvisir
    Vegvisir
    FémininAge : 24Messages : 411

    Jeu 12 Fév 2015 - 12:29

    Merci Very Happy



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 6 1
    cosmos-chann
    cosmos-chann
    FémininAge : 26Messages : 115

    Jeu 12 Fév 2015 - 17:53

    J'adore !
    LittleMuffin
    LittleMuffin
    FémininAge : 27Messages : 21

    Ven 13 Fév 2015 - 10:00

    c'est magnifique ** merci beaucoup pour le partage
    Fullmoon
    Fullmoon
    FémininAge : 26Messages : 162

    Ven 13 Fév 2015 - 14:18

    Très belle P.A, merci ^^
    Kiki*
    Kiki*
    FémininAge : 27Messages : 32

    Ven 13 Fév 2015 - 14:24

    Merci !
    Loud Clash
    Loud Clash
    MasculinAge : 30Messages : 69

    Sam 14 Fév 2015 - 6:53

    Merci Very Happy
    Draft
    Draft
    FémininAge : 25Messages : 6

    Sam 14 Fév 2015 - 17:59

    Merci pour cette super PA♥
    avatar
    Quinnie
    MasculinAge : 27Messages : 54

    Sam 14 Fév 2015 - 21:32

    J'aime beaucoup Merci :friends:
    Kellen
    Kellen
    FémininAge : 31Messages : 13

    Dim 15 Fév 2015 - 2:15

    merci
    Nathouille
    Nathouille
    FémininAge : 32Messages : 70

    Dim 15 Fév 2015 - 12:40

    Je vais essayer, merci !
    Lunara
    Lunara
    FémininAge : 37Messages : 95

    Dim 15 Fév 2015 - 18:15

    merci pour le partage!
    petit lu
    petit lu
    FémininAge : 31Messages : 184

    Lun 16 Fév 2015 - 11:14

    Merci, c'est superbe!
    Doan Lavita
    Doan Lavita
    FémininAge : 25Messages : 72

    Lun 16 Fév 2015 - 13:41

    C'est superbe, merci beaucoup!



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 6 Freee10
    .lovely
    .lovely
    FémininAge : 26Messages : 54

    Lun 16 Fév 2015 - 22:32

    superbe !
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Mar 17 Fév 2015 - 9:09

    J'adore, merci
    Margogotte
    Margogotte
    FémininAge : 29Messages : 73

    Mar 17 Fév 2015 - 11:12

    Merci beaucoup, elle est super ._.
    Kitty Kat.
    Kitty Kat.
    FémininAge : 29Messages : 86

    Mar 17 Fév 2015 - 14:25

    Elle est magnifique ! Je te l'empreinte ! Very Happy
    Feeline
    Feeline
    FémininAge : 38Messages : 17

    Mar 17 Fév 2015 - 14:52

    Très joli, j'aime beaucoup le rendu :love:
    Yumi-chan
    Yumi-chan
    FémininAge : 30Messages : 67

    Mer 18 Fév 2015 - 9:25

    Ta page est superbe ! :love:
    Merci pour le partage.
    Kortyx
    Kortyx
    MasculinAge : 33Messages : 81

    Jeu 19 Fév 2015 - 16:07

    J'adore ! Merci ^^
    Amacky
    Amacky
    FémininAge : 31Messages : 135

    Ven 20 Fév 2015 - 14:47

    Thank you :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 10:10