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 du moment :
Coffret dresseur d’élite ETB ...
Voir le deal
56.90 €

    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
    Akito
    Akito
    MasculinAge : 31Messages : 73

    Dim 21 Juin 2015 - 9:22

    j'aime beaucoup! Merci :)
    сhampi
    сhampi
    FémininAge : 25Messages : 151

    Dim 21 Juin 2015 - 12:17

    Merci pour ce travail fabuleux, je vous emprunte cette page d'accueil ! :love:
    Alaynna
    Alaynna
    FémininAge : 31Messages : 77

    Dim 21 Juin 2015 - 15:27

    Je suis bluffée là @@ Des mois que je n'ai pas été dans le PA d'un fow, et le retour est rude x) mais ça vaut le coup =3



    -- If we don't have the key we can't open we can't open whatever it is, we don't have, that it unlocks, so what purpose would be served in finding whatever need be unlocked, which we don't have, without first having found the key that unlocks it?
    -- So we're going after this key?
    -- You're not making any sense at all.
    avatar
    Toranpu
    FémininAge : 24Messages : 15

    Lun 22 Juin 2015 - 20:25

    merci beaucoup
    Overdose
    Overdose
    FémininAge : 24Messages : 26

    Mer 24 Juin 2015 - 19:18

    merci
    Kiona_Spencer
    Kiona_Spencer
    FémininAge : 33Messages : 28

    Ven 26 Juin 2015 - 23:07

    Merci beaucoup pour ce partage Very Happy
    Sparky59
    Sparky59
    FémininAge : 24Messages : 54

    Sam 27 Juin 2015 - 3:29

    merci ^^
    MxPrime2
    MxPrime2
    MasculinAge : 29Messages : 81

    Sam 27 Juin 2015 - 16:43

    C'est bien beau ! (:
    Pooni
    Pooni
    FémininAge : 25Messages : 39

    Sam 27 Juin 2015 - 17:26

    Merci beaucoup ! C'est super !
    katia06
    katia06
    FémininAge : 54Messages : 203

    Lun 29 Juin 2015 - 20:25

    sobre et simple, merci



    Espoir
    Espoir
    FémininAge : 28Messages : 54

    Mar 30 Juin 2015 - 11:51

    Merci !
    pawnee
    pawnee
    FémininAge : 34Messages : 21

    Mar 30 Juin 2015 - 12:53

    j'aime beaucoup ! merci pour le partage !
    Pensées
    Pensées
    FémininAge : 79Messages : 41

    Mar 30 Juin 2015 - 17:16

    Mignonne. ^^
    AsadaSama
    AsadaSama
    FémininAge : 30Messages : 34

    Mar 30 Juin 2015 - 19:59

    Page d’accueil vraiment sympathique =)
    Merci
    Love_RPG
    Love_RPG
    FémininAge : 29Messages : 32

    Mer 1 Juil 2015 - 17:16

    Merci beaucoup, c'est juste sublime ♥
    Malf Claymore
    Malf Claymore
    FémininAge : 29Messages : 126

    Mer 1 Juil 2015 - 21:02

    Merci, elle est splendide
    White Lady
    White Lady
    FémininAge : 31Messages : 28

    Jeu 2 Juil 2015 - 19:37

    magnifique merci !
    Anonymous
    Invité

    Lun 6 Juil 2015 - 20:17

    Je viens de me rendre compte que ça allait nickel avec mes catégories. Du coup je te l'emprunte :3 Encore merci pour ce partage !
    -Larme-
    -Larme-
    FémininAge : 23Messages : 63

    Mar 7 Juil 2015 - 15:44

    Merci ^^



    PA gris/rose + infobulles + staff + news + partenaires défilants. - Page 13 226604Larme20
    Daisy Hardman
    Daisy Hardman
    FémininAge : 26Messages : 60

    Mar 7 Juil 2015 - 16:48

    mercii
    Prissy
    Prissy
    FémininAge : 23Messages : 23

    Mar 7 Juil 2015 - 18:51

    Merci !
    Elsyie
    Elsyie
    FémininAge : 26Messages : 6

    Mer 8 Juil 2015 - 11:53

    Merci c'est vraiment très joli!
    Heartfilia
    Heartfilia
    FémininAge : 24Messages : 98

    Mer 8 Juil 2015 - 16:20

    Merchi!



    YOU HELLA SAVED MY LIFE
    - chloe price
    Lauria
    Lauria
    FémininAge : 23Messages : 39

    Mer 8 Juil 2015 - 18:07

    Merci !
    Abysse
    Abysse
    FémininAge : 30Messages : 31

    Mer 8 Juil 2015 - 20:08

    C'est super beau **
    Merci !!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 12:21