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 gris/rose + infobulles + staff + news + partenaires défilants.

    Partagez
    avatar
    Henrykiki
    MasculinAge : 25Messages : 576

    le 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
    avatar
    Hana Evali
    FémininAge : 28Messages : 167

    le Mar 10 Fév 2015 - 22:59

    J'adore !



    Wolftactick
    FémininAge : 16Messages : 71

    le Mer 11 Fév 2015 - 14:41

    Tellement beau
    avatar
    Lilie
    FémininAge : 34Messages : 162

    le Mer 11 Fév 2015 - 16:08

    Whoua j'adore !
    avatar
    Neymar
    MasculinAge : 20Messages : 138

    le Mer 11 Fév 2015 - 22:15

    Thanks a lot o/
    avatar
    CaraDelevngnie
    FémininAge : 18Messages : 370

    le Jeu 12 Fév 2015 - 12:29

    Merci Very Happy



    avatar
    cosmos-chann
    FémininAge : 20Messages : 115

    le Jeu 12 Fév 2015 - 17:53

    J'adore !
    avatar
    LittleMuffin
    FémininAge : 21Messages : 20

    le Ven 13 Fév 2015 - 10:00

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

    le Ven 13 Fév 2015 - 14:18

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

    le Ven 13 Fév 2015 - 14:24

    Merci !
    avatar
    Loud Clash
    MasculinAge : 24Messages : 58

    le Sam 14 Fév 2015 - 6:53

    Merci Very Happy
    avatar
    Draft
    FémininAge : 19Messages : 6

    le Sam 14 Fév 2015 - 17:59

    Merci pour cette super PA♥
    Quinnie
    MasculinAge : 21Messages : 54

    le Sam 14 Fév 2015 - 21:32

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

    le Dim 15 Fév 2015 - 2:15

    merci
    avatar
    Nathouille
    FémininAge : 26Messages : 70

    le Dim 15 Fév 2015 - 12:40

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

    le Dim 15 Fév 2015 - 18:15

    merci pour le partage!
    avatar
    petit lu
    FémininAge : 25Messages : 172

    le Lun 16 Fév 2015 - 11:14

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

    le Lun 16 Fév 2015 - 13:41

    C'est superbe, merci beaucoup!



    avatar
    .lovely
    FémininAge : 21Messages : 54

    le Lun 16 Fév 2015 - 22:32

    superbe !
    avatar
    Sweet Angel
    FémininAge : 35Messages : 147

    le Mar 17 Fév 2015 - 9:09

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

    le Mar 17 Fév 2015 - 11:12

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

    le Mar 17 Fév 2015 - 14:25

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

    le Mar 17 Fév 2015 - 14:52

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

    le Mer 18 Fév 2015 - 9:25

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

    le Jeu 19 Fév 2015 - 16:07

    J'adore ! Merci ^^
    avatar
    Amacky
    FémininAge : 26Messages : 133

    le Ven 20 Fév 2015 - 14:47

    Thank you :)
    Contenu sponsorisé


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