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 : -20%
-20% sur le Lot de 2 écrans PC GIGABYTE ...
Voir le deal
429 €

    PA - Couleurs automnes (avec slideshow automatique)

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 24 Mar 2015 - 6:36

    Rappel du premier message :


    PA - Couleurs automnes (avec slideshow automatique)


    Voici un petit LS de PA que j'ai faite pour la demande de Nyan-cat à partir du code déjà commencé par Nemalus. D'ailleurs, si vous souhaitez mettre mon nom à quelque part pour un crédit, merci de la créditer aussi, elle a fait une bonne partie du travail.

    Pour voir l'aperçu normal : cliquez ici.
    Pour voir l'aperçu au survol des prédéfinis et/ou du staff et/ou des liens : cliquez ici.

    Ce LS est en trois parties.
    • Tout d'abord, nous allons installer la partie HTML de la PA.
    • Puis, nous allons mettre en forme la PA à l'aide du CSS.
    • Enfin, nous verrons comment mettre ajouter ou enlever des images du slideshow automatique.


    La PA a une largeur de 820px.

    Mettre un crédit vers Never-Utopia est obligatoire.

    Vos commentaires et remerciements sont toujours bienvenus ^^


    1. Corps de la PA (HTML)


    Nous allons commencer par aller dans l'espace de la page d'accueil pour y mettre la partie HTML.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > PAGE D'ACCUEIL
    > > > > GÉNÉRALITÉS
    > > > > > CONTENU DU MESSAGE

    On y met le code suivant et on enregistre :
    Code:
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dosis" />                                                           
    <div class="fond_PA">
       <div class="nema">
                                                                        <a href="#">Règlement</a>                                                     
       </div>
       <div class="nema">
                                                                        <a href="#">Présentations</a>                                                     
       </div>
       <div class="nema">
                                                                        <a href="#">Partenariats</a>                                                     
       </div>
       <div class="nema">
                                                                        <a href="#">S'inscrire</a>                                                     
       </div>
       <div class="nema">
                                                                        <a href="#">Crédits</a>                                                     
       </div><br />    <br />    <br />                                                     
       <table cellpadding="0" cellspacing="0">
          <tbody>
             <tr>
                <td>
                   <div class="contexte_PA">
    Contexte - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel congue est, et pharetra augue. Praesent fermentum vulputate elementum. Ut vehicula gravida bibendum. Pellentesque pretium ante purus, non aliquam urna posuere sit amet. Suspendisse potenti. Suspendisse tortor dolor, viverra sed enim vitae, vulputate ornare lectus. Aenean euismod nibh nec urna pretium consectetur. <a href="#">lire plus</a>                                                                                 
                   </div>
                </td>
                <td>
                   <div id="slideshow">
                      <div class="container">
                         <div class="slider">
                                  <img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" />       
                         </div>
                      </div>
                   </div>
                </td>
             </tr>
          </tbody>
       </table>
       <table cellspacing="0" cellpadding="0">
          <tbody>
             <tr>
                <td valign="top" style="width: 320px;" align="center">
                                                                                                       <span class="nema_title">Staff</span>                                                             
                   <div style="width: 320px; height: 75px; overflow: hidden; background-image:url(http://placehold.it/320x75); margin-bottom: 8px;">
                      <div class="stafef">
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                         </div>
                      </div>
                   </div>
                   <div style="width: 320px; height: 75px; overflow: hidden; background-image:url(http://placehold.it/320x75); margin-bottom: 8px;">
                      <div class="stafef">
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                         </div>
                      </div>
                   </div>
                   <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin-right: 5px; display: inline-block;">
                      <div class="stafefico" style="display: inline-block;">
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                         </div>
                      </div>
                   </div>
                   <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin-right: 5px; display: inline-block;">
                      <div class="stafefico" style="display: inline-block;">
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                         </div>
                      </div>
                   </div>
                   <div style="width: 100px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/100x100); margin: 0px; display: inline-block;">
                      <div class="stafefico" style="display: inline-block;">
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                                Nom Prénom<br />                                <a href="#"><span style="color: rgb(213, 199, 180);">Contact</span></a>                                - <a href="#"><span style="color: rgb(213, 199, 180);">Profil</span></a><br />                                Poste occupé                                                                                               
                         </div>
                      </div>
                   </div>
                </td>
                <td valign="top" style="padding-left: 10px; padding-top: 10px; width: 180px;">
                   <div style="background: #EECFB7; color :#BC7349; width:150px; height: 270px; overflow: auto; text-align: justify; padding: 15px;">
                      <div style="text-align: justify">
                                                                                                                         Nouvelles - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel congue est, et pharetra augue. Praesent fermentum vulputate elementum. Ut vehicula gravida bibendum. Pellentesque pretium ante purus, non aliquam urna posuere sit amet. Suspendisse potenti. Suspendisse tortor dolor, viverra sed enim vitae, vulputate ornare lectus. Aenean euismod nibh nec urna pretium consectetur.                                                                                         
                      </div>
                   </div>
                </td>
                <td valign="top" style="padding-top: 10px; padding-left: 10px; width: 266px;" align="center">
                                                                                                             <a href="#" class="nema_2">Lien 1</a>                                          <a href="#" class="nema_2">Lien 2</a>                                                                                                                            <a class="nema_2" href="#">Lien 3</a>                                                                                                                            <a class="nema_2" href="#">Lien 4</a>      <a class="nema_2" href="#">Lien 5</a>    <a class="nema_2" href="#">Lien 6</a>                                                                                                                                                                  <a style="margin-bottom: 15px;" class="nema_2" href="#">Lien 7</a>                               
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                      <div class="predef" style="display: inline-block;">
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                                <a href="#">Nom Prénom</a>  <br />  <br />                              <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                     
                         </div>
                      </div>
                   </div>
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                      <div class="predef" style="display: inline-block;">
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                                <a href="#">Nom Prénom</a>  <br /><br />                                <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                     
                         </div>
                      </div>
                   </div>
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); margin-right: 4px; display: inline-block;">
                      <div class="predef" style="display: inline-block;">
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                                <a href="#">Nom Prénom</a>  <br />  <br />                            <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                     
                         </div>
                      </div>
                   </div>
                   <div style="width: 60px; height: 100px; overflow: hidden; background-image:url(http://placehold.it/60x100); display: inline-block;">
                      <div class="predef" style="display: inline-block;">
                         <div style="color: #DEDDD0; font-size: 11px; text-align: center; font-family: calibri; line-height: 100%; padding-top: 10px; font-weight: 700;">
                                                                                                                                <a href="#">Nom Prénom</a>  <br />  <br />                            <span style="color: rgb(213, 199, 180);">Hors-la-loi</span>                                                     
                         </div>
                      </div>
                   </div>
                </td>
             </tr>
          </tbody>
       </table>
    </div>




    2. Mise en forme (CSS)


    Si vous regardez votre PA, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre PA à l'aide du CSS.

    Pour cela, nous allons aller dans :
    > PANNEAU D'ADMINISTRATION
    > > AFFICHAGE
    > > > IMAGES ET COULEURS
    > > > > COULEURS
    > > > > > FEUILLE DE STYLE CSS

    Puis, nous allons ajouter le CSS suivant :
    Code:
    /* --------------------------------- PA --------------------------------- */

    /* slideshow */
    #slideshow {
      position:relative;
      width:380px;
      height:145px;
    }

    /* gestion des dimensions et débordement du conteneur */
    #slideshow .container {
      position:relative;
      width:380px;
      height:145px;
      overflow:hidden;
    }

    /* le conteneur des slides */
    #slideshow .slider {
      position:absolute;
      left:0;
      top:0;
      width:400%;
      height:145px;
      animation:slider 16s infinite;
      -webkit-animation:slider 16s infinite;
    }

    /* Fonction animation */
    @keyframes slider {
      0%,20%,100% {left:0}
      25%,45% {left:-100%}
      50%,70% {left:-200%}
      75%,95% { left:-300%}
    }
    @-webkit-keyframes slider {
      0%,20%,100% {left:0}
      25%,45% {left:-100%}
      50%,70% {left:-200%}
      75%,95% { left:-300%}
    }

    /* Fond de la PA */
    .fond_PA {
      padding:10px;
      background-color:#E5B994;
      width:800px;
      position:relative;
    }

    /* Contexte */
    .contexte_PA {
      margin-right:10px;
      background-color:#EECFB7;
      width:370px;
      height:115px;
      padding:15px;
      color:#BC7349;
      text-align:justify;
      font-size:12px;
      overflow:auto;
    }

    /* Liens */
    .nema {
      height:40px;
      width:150px;
      display:inline-block;
    }

    .nema a {
      display:inline-block;
      background-color:#80696C;
      color:#fff;
      font-family:'Dosis',sans-serif;
      font-size:25px;
      height:40px;
      text-align:center;
      width:145px;
      transition:all 1s ease;
      -webkit-transition:all 1s ease;
    }

    .nema a:hover {
      background-color:#3E2428;
      color:#fff;
    }

    .nema_2 {
      height:22px;
      width:266px;
      display:block;
      margin-bottom:5px;
      background-color:#80696C;
      color:#fff!important;
      font-family:'Dosis',sans-serif;
      font-size:16px;
      text-align:center;
      transition:all 1s ease;
      -webkit-transition:all 1s ease;
    }

    .nema_2:hover {
      background-color:#3E2428;
      color:#fff;
    }

    /*Titre Staff*/
    .nema_title {
      display:inline-block;
      color:#fff;
      font-family:'Dosis',sans-serif;
      font-size:25px;
      height:30px;
      text-align:center;
      margin-bottom:5px;
      margin-top:10px;
    }

    /* Effets staff + predef */
    .stafef {
      width:320px;
      height:75px;
      background:#3E2428;
      opacity:0;
      transition:all 1s ease-in-out;
      -webkit-transition:all 1s ease-in-out;
    }

    .stafef:hover {
      opacity:1;
      -webkit-transform:rotate(-360deg);
      transform:rotate(-360deg);
    }

    .stafefico {
      width:100px;
      height:100px;
      display:inherit;
      background:#3E2428;
      opacity:0;
      transition:all 1s ease-in-out;
      -webkit-transition:all 1s ease-in-out;
    }

    .stafefico:hover {
      opacity:1;
      transform:rotate(-360deg);
      -webkit-transform:rotate(-360deg);
    }

    .predef {
      width:60px;
      height:100px;
      display:inherit;
      background:#3E2428;
      opacity:0;
      transition:all 1s ease-in-out;
      -webkit-transition:all 1s ease-in-out;
    }

    .predef:hover {
      opacity:1;
      transform:rotate(-360deg);
      -webkit-transform:rotate(-360deg);
    }

    /* --------------------------------- FIN PA --------------------------------- */

    Important : Vous devez cocher "non" à l'option de CSS "Optimiser votre CSS". Sinon, le Slideshow ne fonctionnera pas.





    3. Modifier le Slideshow


    Commençons par la partie HTML. Dans la partie HTML, vous avez ceci :
    Code:
    <div id="slideshow">
                      <div class="container">
                        <div class="slider">
                                  <img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" />       
                        </div>
                      </div>
                  </div>

    Les divs servent à cacher le reste des images du slideshow pour qu'on n'en voit qu'une seule à la fois. La partie qui nous intéresse, c'est celle-ci :
    Code:
     <img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" /><img src="http://placehold.it/380x145" alt="" style="width: 380px; height: 145px;" />

    Il y a 4 images. Vous pouvez enlever une image, en ajouter une et/ou changer l'image en mettant l'url de votre nouvelle image à la place de 'http://placehold.it/380x145'.

    C'était tout pour la partie HTML u_u




    Pour la partie CSS, c'est un peu plus difficile. Il faut aller dans le CSS et retrouver ceci :
    Code:
    /* slideshow */
    #slideshow {
      position:relative;
      width:380px;
      height:145px;
    }

    /* gestion des dimensions et débordement du conteneur */
    #slideshow .container {
      position:relative;
      width:380px;
      height:145px;
      overflow:hidden;
    }

    /* le conteneur des slides */
    #slideshow .slider {
      position:absolute;
      left:0;
      top:0;
      width:400%;
      height:145px;
      animation:slider 16s infinite;
      -webkit-animation:slider 16s infinite;
    }

    /* Fonction animation */
    @keyframes slider {
      0%,20%,100% {left:0}
      25%,45% {left:-100%}
      50%,70% {left:-200%}
      75%,95% { left:-300%}
    }
    @-webkit-keyframes slider {
      0%,20%,100% {left:0}
      25%,45% {left:-100%}
      50%,70% {left:-200%}
      75%,95% { left:-300%}
    }

    Dans "#slideshow .slider", il y a ceci :
    Code:
    width:400%;

    Pourquoi "400%"?
    Parce qu'il y a 4 images. S'il y en avait 5, il faudrait changer cela pour 500%. S'il y avait 3 images, il faudrait changer cela pour 300%.

    Ensuite, toujours dans "#slideshow .slider", il y a ceci :
    Code:
    animation:slider 16s infinite;
      -webkit-animation:slider 16s infinite;

    À quoi ça sert?
    Cela sert à indiquer qu'il y a l'animation "slider" (qu'on va voir ensuite) qui s'effectue pendant une durée totale de 16 secondes et qui se répète à l'infinie. Le "16s" indique donc la durée totale de l'animation du slideshow. Si vous voulez que cela soit plus rapide, il vous suffit de diminuer cette valeur. Si vous voulez que ce soit plus lent, vous devez augmenter cette valeur.




    On continue avec "@keyframes slider" qui détaille l'animation nommée "slider" de notre slideshow. À savoir que "@-webkit-keyframes slider" doit toujours être pareil à "@keyframes slider". Bref, voilà à quoi cela ressemble :
    Code:
    @keyframes slider {
      0%,20%,100% {left:0}
      25%,45% {left:-100%}
      50%,70% {left:-200%}
      75%,95% { left:-300%}
    }

    La ligne "0%,20%,100% {left:0}" indique que de 0% de l'animation à 20% de l'animation, c'est la première image puisque le "left:0" est à "0". D'ailleurs, cela indique aussi que qu'à la fin de l'animation (100%), cela revient à la première image.

    La ligne "25%,45% {left:-100%}" indique que de 25% de l'animation à 45% de l'animation, c'est la deuxième image puisque le "left:-100%" est à "-100%". Le "-100%" indique que pour cette durée, le slideshow est déplacé de 1 image vers la gauche.

    La ligne "50%,70% {left:-200%}" indique que de 50% de l'animation à 70% de l'animation, c'est la troisième image puisque le "left:-200%" est à "-200%". Le "-200%" indique que pour cette durée, le slideshow est déplacé de 2 images vers la gauche.

    La ligne "75%,95% { left:-300%}" indique que de 75% de l'animation à 95% de l'animation, c'est la quatrième image puisque le "left:-300%" est à "-300%". Le "-300%" indique que pour cette durée, le slideshow est déplacé de 3 image vers la gauche.


    Je suis pas sûr de comprendre... Comment ça marche si on veut rajouter des images?

    Eh bien, il y a toujours une certaine structure à suivre. Donc s'il y a 3 images, il y aura au total 3 lignes. S'il y a 5 images, ce sera 5 lignes. Chaque ligne (sauf la première) est structurée de la même façon :
    Code:
    A%,B% { left:C%}

    Le A et B, c'est le début et la fin d'une pause dans l'animation. Cela veut dire que de A à B, il n'y aura pas de mouvement. Par exemple, si mon animation fait au total 100 secondes, que mon A est 20% et mon B est 30%, cela voudra dire que de la 20ème seconde à la 30ème seconde, il n'y aura pas de mouvement.

    Le C nous indique le positionnement des images du slideshow pendant la période de temps entre A et B.
    Vous vous souvenez du "width" de la class "#slideshow .slider"? C'était en %. On avait dit qu'on mettait 100% x le nombre d'images. Si on avait 5 images, cela voulait dire 500%. Selon cette logique, la largeur totale de la zone est égale à 500% et chaque image équivaut à 100%.
    Revenons maintenant à notre C. Disons que C serait "-200%". On vient de dire que chaque image égal "100%". Donc si on est à "-200%", cela veut dire qu'il y a 2 images qui sont cachées sur la gauche. Du coup, le slideshow montre notre troisième image!

    Donc si on résume, la durée totale de l'animation étant 100 secondes, A étant 20%, B étant 30% et C étant -200%, cela veut dire que de la 20ème seconde à la 30ème seconde, il y a deux images de cachées sur la gauche et on voit la troisième image!

    Pas simple ><

    Donc, tout en suivant cette structure, il faut s'assurer de mettre un temps d'apparition (une ligne) pour chaque image. Donc si j'ai 5 images, je mets la première de 0 à 20, la deuxième de 20 à 40, la troisième de 40 à 60, la quatrième de 60 à 80 et la cinquième de 80 à 100.


    Mais il n'y a pas de transition entre les images!

    Effectivement. Pour mettre une transition, il faut laisser un peu de temps entre les images. Si la première image se termine à 20 et que la deuxième se commence à 20, il n'y a pas de temps pour qu'on voit la transition!

    Donc pour laisser une transition, je ferais plutôt ainsi :
    Si j'ai 5 images, je mets la première de 0 à 15, la deuxième de 20 à 35, la troisième de 40 à 55, la quatrième de 60 à 75 et la cinquième de 80 à 95.


    Bon ok, ça marche... Mais tout à l'heure, tu avais dis que c'était un peu plus spécial pour la première ligne, non?

    Oui! Pour qu'on puisse retourner à la première image lorsqu'on a terminé de passer toutes les images, il faut rajouter un petit quelque chose :
    Code:
    A%,B%,D% { left:C%}

    Le D, c'est toujours 100%. Cela veut dire qu'à la fin, on retourne à la première image ^^

    Voilà, c'est tout, si vous avez suivis jusqu'ici, vous devriez vous débrouiller ^^




    C'est tout! Pour les intéressés, je me suis servie de ce tuto pour faire le slideshow :
    http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

    Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec mon code" ou "Personnalisations".

    À plus !


    Dernière édition par Onyx le Mer 30 Mai 2018 - 2:06, édité 1 fois



    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Sam 6 Fév 2016 - 14:52

    Coucou!
    Merci pour le petit code.
    A trés vite!
    Tchii
    Nemalus
    Nemalus
    FémininAge : 26Messages : 358

    Dim 7 Fév 2016 - 14:34

    Dommage que je ne sois pas créditée en même temps qu'Onyx sur certains forums mais ce n'est pas grave !
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 8 Fév 2016 - 19:16

    Oui je sais, j'avais pris la peine de dire de mettre ton nom avec le mien dans les crédits, mais j'ai l'impression que les gens sautent au code et ne lisent rien u_u



    Kaleessi
    Kaleessi
    FémininAge : 31Messages : 78

    Lun 8 Fév 2016 - 19:42

    Mercii du partagee!! Very Happy
    crackle bones
    crackle bones
    FémininAge : 31Messages : 13

    Mer 10 Fév 2016 - 15:08

    Merci beaucoup :love:
    Sorako
    Sorako
    FémininAge : 26Messages : 94

    Ven 12 Fév 2016 - 18:14

    Merci !
    Fantôma
    Fantôma
    MasculinAge : 22Messages : 67

    Sam 13 Fév 2016 - 14:33

    merci!



    PA - Couleurs automnes (avec slideshow automatique) - Page 10 1438369110-fantoma
    .lovely
    .lovely
    FémininAge : 26Messages : 54

    Dim 14 Fév 2016 - 23:19

    merci !
    Espoir
    Espoir
    FémininAge : 28Messages : 54

    Lun 15 Fév 2016 - 11:06

    Merci !
    Nono-Chan
    Nono-Chan
    FémininAge : 26Messages : 273

    Lun 15 Fév 2016 - 16:39

    merciiiii
    plushmasters
    plushmasters
    FémininAge : 31Messages : 71

    Jeu 18 Fév 2016 - 14:02

    j'aime :p
    Hynel
    Hynel
    MasculinAge : 25Messages : 16

    Lun 29 Fév 2016 - 23:51

    merci beaucoup j'en cherchait justement une dans ce style!
    Kimberlay *
    Kimberlay *
    FémininAge : 33Messages : 161

    Lun 7 Mar 2016 - 21:01

    Merci
    Pythia
    Pythia
    FémininAge : 35Messages : 183

    Ven 11 Mar 2016 - 1:26

    Merci :)



    PA - Couleurs automnes (avec slideshow automatique) - Page 10 Neo10
    Geci
    Geci
    FémininAge : 32Messages : 69

    Mar 15 Mar 2016 - 19:46

    Merci à toi ^^
    missphan
    missphan
    FémininAge : 41Messages : 156

    Mer 16 Mar 2016 - 18:40

    merci elle est superbe



    + my personal brand of heroin
    You’re none of them because you’re all of them. Now that we found each other, you’ve given my past and future meaning. You are the sixth. You are the last. ©️endlesslove.
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Dim 20 Mar 2016 - 1:04

    Merciiiiii !
    Vetrox
    Vetrox
    MasculinAge : 23Messages : 37

    Mar 22 Mar 2016 - 19:37

    merci
    Feniix
    Feniix
    MasculinAge : 31Messages : 21

    Mer 23 Mar 2016 - 14:14

    Merci
    Camomille
    Camomille
    FémininAge : 19Messages : 62

    Ven 25 Mar 2016 - 21:20

    Merci Razz Très chaleureuse , elle donne envie Wink
    blomkvist
    blomkvist
    FémininAge : 33Messages : 44

    Sam 26 Mar 2016 - 13:42

    Merci pour le partage cheers



    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    CHi1565456
    CHi1565456
    MasculinAge : 23Messages : 56

    Sam 26 Mar 2016 - 18:07

    Merci !
    summerby
    summerby
    FémininAge : 29Messages : 36

    Dim 27 Mar 2016 - 15:50

    très belle (a)
    avatar
    Luinette
    FémininAge : 23Messages : 34

    Dim 27 Mar 2016 - 18:19

    Merci !
    yukiyuki
    yukiyuki
    FémininAge : 29Messages : 89

    Mer 30 Mar 2016 - 17:19

    merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 10:54