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 large en tableau simple

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Mar 10 Juin 2014 - 23:24

    Rappel du premier message :

    Page d'Accueil



    Ceci est un code de Page d'Accueil crée suite à la Demande de Popcorn, ici.

    CSS3 & HTML5 ▬ Ce que ça donne


    On ne voit pas très bien, mais au passage de la souris sur un membre du staff, l'image glisse vers la gauche et le texte apparait en même temps. Il est cependant à noter que les membres du staff les plus à gauche verront les membres du staff plus à droit cacher le texte jusqu'à la fin de l'animation. Je ne sais pas comment corriger ce "bug", donc si vous avez des idées, n'hésitez pas à vous exprimer!

    Dimension des images


    L'image de haut est en 1050px*200px.
    L'image de TOP-Sites et de Membre du Mois est en 255px*65px.
    L'image d'un membre du Staff est en 70px*120px.
    L'image devant un lien, un news et le RP du Mois changeables dans le CSS et non dans le HTML sont en 35px*37px.
    Vous pouvez modifier la police des titres en changeant le link présent dans le code (ou en le retirant) et en changeant toutes les occurrences de la police (ici Architects Daughter) dans le CSS.

    Le Code


    HTML:
    Code:
    <link href="http://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet" type="text/css" />
     <div id="conteneur_pa">
     <img src="IMAGE_TITRE_ICI" />
    <div id="top_pa">
     <a href="#" target="_blank"><img class="img_top" src="IMAGE_TOP_ICI" title="Nom Top-Site" /></a><a href="#" target="_blank"><img class="img_top" src="IMAGE_TOP_ICI" title="Nom Top-Site" /></a> <span class="texte_rappel">Pensez à voter toutes les 2h!</span>
    </div>
     
    <div id="liens_pa">
     <a class="un_lion_lien_pa" href="#">Lien 1</a><br /> <a class="un_lion_lien_pa" href="#">Lien 2</a><br /> <a class="un_lion_lien_pa" href="#">Lien 3</a><br /> <a class="un_lion_lien_pa" href="#">Lien 4</a><br /> <a class="un_lion_lien_pa" href="#">Lien 5</a> <br />
    </div>
     
    <div id="contexte_pa">
     
    <h1>
     Contexte
    </h1>
     
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida pharetra adipiscing. In malesuada ipsum eu aliquam tincidunt. Cras blandit augue at elit malesuada, et imperdiet felis consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor nibh ac vehicula viverra. Donec non augue eros. Aliquam ornare lorem quam, et dictum enim vestibulum at. Sed dictum tellus dolor, in fringilla lacus blandit sit amet. Phasellus bibendum, libero quis viverra convallis, erat ante tempor dui, sagittis accumsan ligula sapien eget quam. In aliquet suscipit arcu, non aliquam metus suscipit sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi mollis dolor ac sollicitudin blandit. Suspendisse facilisis dictum tortor volutpat tincidunt. In venenatis est ipsum, sodales malesuada ante vulputate sit amet. Proin vitae felis volutpat lacus ullamcorper vulputate. Aliquam vitae metus et lacus auctor aliquam. Nam pellentesque est nulla. Mauris fermentum lectus eget nibh lacinia bibendum. Vivamus tincidunt at magna quis viverra. Nunc condimentum vulputate nisi vehicula porta. Integer scelerisque lectus metus, sed porta leo volutpat eu. Proin nec sapien varius, convallis est in, convallis tortor. Vivamus nisi tortor, elementum vel massa eget, congue facilisis quam. Curabitur leo tellus, convallis ut tempus eu, commodo a neque. Vestibulum blandit nisi nec leo imperdiet iaculis. Pellentesque condimentum cursus dolor, non viverra sem tristique quis. Vestibulum mollis felis id tellus ultricies convallis. Pellentesque dignissim tortor eget velit laoreet, at scelerisque lacus vulputate. Nunc accumsan, arcu eget feugiat adipiscing, elit quam placerat massa, mollis tincidunt metus sem eget nibh. Nullam sagittis ac justo rutrum ultricies. Nulla laoreet dapibus neque, quis facilisis nibh dapibus vel. Maecenas tristique tellus metus, euismod rhoncus quam laoreet vel. Duis interdum diam nec viverra varius.
    </p>
     
    <div id="lien_ctxt">
     <a href="#">Lisez la suite!</a>
    </div>
     
    </div>
     
    <div id="staff_pa">
     
    <div id="relative_staff">
     
    <div class="contour_staff_pa" id="staff_un">
     <img src="IMG_STAFF_ICI" />
    <h3>
     Nom Prénom ● Fonction :
    </h3>
     
    <p>
     Ceci est un texte
    </p>
     
    </div>
     
    <div class="contour_staff_pa" id="staff_deux">
     <img src="IMG_STAFF_ICI" />
    <h3>
     Nom Prénom ● Fonction :
    </h3>
     
    <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida pharetra adipiscing. In malesuada ipsum eu aliquam tincidunt. Cras blandit augue at elit malesuada, et imperdiet felis consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse porttitor nibh ac vehicula viverra. Donec non augue eros. Aliquam ornare lorem quam, et dictum enim vestibulum at. Sed dictum tellus dolor, in fringilla lacus blandit sit amet. Phasellus bibendum, libero quis viverra convallis, erat ante tempor dui, sagittis accumsan ligula sapien eget quam. In aliquet suscipit arcu, non aliquam metus suscipit sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi mollis dolor ac sollicitudin blandit. Suspendisse facilisis dictum tortor volutpat tincidunt. In venenatis est ipsum, sodales malesuada ante vulputate sit amet. Proin vitae felis volutpat lacus ullamcorper vulputate. Aliquam vitae metus et lacus auctor aliquam. Nam pellentesque est nulla. Mauris fermentum lectus eget nibh lacinia bibendum. Vivamus tincidunt at magna quis viverra. Nunc condimentum vulputate nisi vehicula porta. Integer scelerisque lectus metus, sed porta leo volutpat eu. Proin nec sapien varius, convallis est in, convallis tortor. Vivamus nisi tortor, elementum vel massa eget, congue facilisis quam. Curabitur leo tellus, convallis ut tempus eu, commodo a neque. Vestibulum blandit nisi nec leo imperdiet iaculis. Pellentesque condimentum cursus dolor, non viverra sem tristique quis. Vestibulum mollis felis id tellus ultricies convallis. Pellentesque dignissim tortor eget velit laoreet, at scelerisque lacus vulputate. Nunc accumsan, arcu eget feugiat adipiscing, elit quam placerat massa, mollis tincidunt metus sem eget nibh. Nullam sagittis ac justo rutrum ultricies. Nulla laoreet dapibus neque, quis facilisis nibh dapibus vel. Maecenas tristique tellus metus, euismod rhoncus quam laoreet vel. Duis interdum diam nec viverra varius.
    </p>
     
    </div>
     
    <div class="contour_staff_pa" id="staff_trois">
     <img src="IMG_STAFF_ICI" />
    <h3>
     Nom Prénom ● Fonction :
    </h3>
     
    <p>
     Ceci est un texte
    </p>
     
    </div>
     
    <div class="contour_staff_pa" id="staff_quatre">
     <img src="IMG_STAFF_ICI" />
    <h3>
     Nom Prénom ● Fonction :
    </h3>
     
    <p>
     Ceci est un texte
    </p>
     
    </div>
     
    <div class="contour_staff_pa" id="staff_cinq">
     <img src="IMG_STAFF_ICI" />
    <h3>
     Nom Prénom ● Fonction :
    </h3>
     
    <p>
     Ceci est un texte
    </p>
     
    </div>
     
    <div class="contour_staff_pa" id="staff_six">
     <img src="IMG_STAFF_ICI" />
    <h3>
     Nom Prénom ● Fonction :
    </h3>
     
    <p>
     Ceci est un texte
    </p>
     
    </div>
     
    <div class="contour_staff_pa" id="staff_sept">
     <img src="IMG_STAFF_ICI" />  
     <h3>
     Nom Prénom ● Fonction :
    </h3>
     
    <p>
     Ceci est un texte
    </p>
     
    </div>
     
    </div>
     <span class="texte_rappel">Retrouvez toutes les infos sur le staff!</span>
    </div>
     
    <div id="partenaires_pa">
     
    <marquee onmouseover="this.stop();" onmouseout="this.start();">
     <a href="#" target="_blank"><img title="Nom Partenaire" alt="Nom Partenaire" src="http://img15.hostingpics.net/pics/775758ImagePartenaire.jpg" /></a> <a href="#" target="_blank"><img title="Nom Partenaire" alt="Nom Partenaire" src="http://img15.hostingpics.net/pics/775758ImagePartenaire.jpg" /></a> <a href="#" target="_blank"><img title="Nom Partenaire" alt="Nom Partenaire" src="http://img15.hostingpics.net/pics/775758ImagePartenaire.jpg" /></a> <a href="#" target="_blank"><img title="Nom Partenaire" alt="Nom Partenaire" src="http://img15.hostingpics.net/pics/775758ImagePartenaire.jpg" /></a>
    </marquee>
     
    </div>
     
    <div id="news_pa">
     
    <div class="un_lion_news_pa">
     Ceci est une news, làlàlà, tralalaa <a href="#">un lien</a>.
    </div><br />
    <div class="un_lion_news_pa">
     News 2
    </div><br />
    <div class="un_lion_news_pa">
     News 3
    </div><br />
    </div>
     
    <div id="infos_pa">
     
    <div class="ptit_titre">
     RP du Mois
    </div>
     
    <div id="infos">
     
    <div class="un_lion_rp_pa">
     <a href="#">Titre du RP</a> par Machin et Bidule, l'amour est dans le navire! <3
    </div><br />
    </div>
     
    <div class="ptit_titre">
     Membre du Mois
    </div>
     <a href="#"><img class="img_top" title="Nom du Membre" alt="Nom du Membre" src="IMG_MEMBRE_DU_MOIS_ICI" /></a>
    </div>
     
    <div id="credits_pa">
     
    <div class="texte_rappel">
     PA par NyoTheNeko de <a href="http://www.never-utopia.com/">NeverUtopia</a>. Design par XX. Ce forum appartient à XX.
    </div>
     
    </div>
     </div><br />

    CSS:
    Code:
    /*********** DÉBUT PA ***********/
    /* Définit la taille de la PA, la couleur du texte et sa police principale. */
    #conteneur_pa {
      position: relative;
      width: 1050px;
      height: 720px;
      color: #000000;
      font-family: Arial;
    }

    /* Définit tous les liens de la PA: couleur, police, etc */
    #conteneur_pa a, #conteneur_pa a:link, #conteneur_pa a:visited, #conteneur_pa a:active {
      color: #000000;
      font-family: 'Architects Daughter';
      text-align: center;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Définit tous les liens de la PA: l'effet au survol de la souris */
    #conteneur_pa a:hover {
      color: #A2ABB1;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Positionnement et mise en forme du bloc des TOP */
    #top_pa {
      position: absolute;
      top: 210px;
      left: 2px;
      /* Taille */
      width: 265px;
      height: 150px;
      /* Couleur de fond et bordure */
      background-color: #e7d8c5;
      border: 1px solid black;
    }

    /* Placement des images de top, avec opacité à 50% */
    .img_top {
      display: block;
      margin: 2px;
      opacity: 0.5;
      transition: all ease 1s;
    }

    /* Opacité passe à 100% au passage de la souris sur les images du TOP */
    .img_top:hover {
      opacity: 1;
      transition: all ease 1s;
    }

    /* Petit texte, utilisé pour les TOP et le staff */
    .texte_rappel {
      display: block;
      margin-top: -3px;
      font-size: 10pt;
      font-family: 'Architects Daughter';
      font-weight: bold;
    }

    /* Positionnement et mise en forme du bloc des liens */
    #liens_pa {
      position: absolute;
      top: 370px;
      left: 2px;
      /* Taille */
      width: 245px;
      height: 280px;
      padding: 10px;
      /* Couleur de fond et bordure */
      background-color: #e7d8c5;
      border: 1px solid black;
      text-align: left;
    }

    /* Crée le contenu qui va suivre une image de lion dans les liens */
    .un_lion_lien_pa {
      display: inline-block;
      font-weight: bold;
      font-size: 20pt;
      font-family: 'Architects Daughter';
      vertical-align:middle;
      margin-bottom: 10px;
    }

    /* Définit la mise en forme des liens dans ce contenu */
    .un_lion_lien_pa a {
      display: inline-block;
      font-weight: bold;
      font-size: 20pt;
    }

    /* Met le lion avant le contenu */
    .un_lion_lien_pa:before {
      content: url('IMAGE_AVANT_LIEN_ICI');
      display: inline-block;
      vertical-align:middle;
      margin-right: 5px;
    }

    /* Positionnement et mise en forme du bloc du Contexte */
    #contexte_pa {
      position: absolute;
      top: 210px;
      left: 274px;
      /* Taille */
      width: 500px;
      height: 300px;
      /* Couleur de fond et bordure */
      background-color: #e7d8c5;
      border: 1px solid black;
    }

    /* Mise en forme du titre dans le contexte */
    #contexte_pa h1 {
      font-size: 20pt;
      font-weight: 800;
      font-family: 'Architects Daughter';
      margin-top: 0px;
    }

    /* Mise e forme du texte dans le contexte */
    #contexte_pa p {
      font-size: 10pt;
      width: 90%;
      height: 190px;
      padding-right: 5px;
      margin: auto;
      text-align: justify;
      overflow: auto;
    }

    /* Mise en fomre du lien vers le reste du contexte */
    #lien_ctxt {
      width: 90%;
      margin: auto;
      margin-top: 5px;
      font-size: 18pt;
      text-align: right;
    }

    /* Positionnement et mise en forme du bloc des staff */
    #staff_pa {
      position: absolute;
      top: 520px;
      left: 274px;
      width: 500px;
      height: 140px;
      padding-top: 10px;
      background-color: #e7d8c5;
      border: 1px solid black;
    }

    /* Bloc de position relative pour permettre la position absolue de chaque membre du staff. */
    #relative_staff {
      position: relative;
      /* Obligatoire pour cacher. */
      overflow: hidden;
      text-align: justify;
      width: 500px;
      height: 122px;
      margin-bottom: 5px;
    }

    /* Va entourer chaque image de staff et bloc descriptif de ce dernier. */
    .contour_staff_pa {
      /* Permet de les positionner les un à c'oté des autres */
      display: inline-block;
      vertical-align: top;
      margin: 0px;
      /* Taille de l'image */
      width: 70px;
      height: 120px;
      /* Obligatoire pour cacher le texte */
      overflow: hidden;
      /* Couleur du fond du texte (ne PAS mettre transparent ou ce sera illisible!) */
      background-color: #E7D8C5;
      text-align: justify;
      border: 1px solid black;
      transition: all ease 1s;
    }

    /* Positionnement de l'image */
    .contour_staff_pa img {
      float: left;
      margin-right: 5px;
    }

    /* Chaque staff doit avoir son id pour sa position absolue, qui va changer. Ici celle de base. */
    #staff_un {
      position: absolute;
      top: 0;
      left: 5px;
      z-index: 1;
    }

    #staff_deux {
      position: absolute;
      top: 0;
      left: 75px;
      z-index: 1;
    }

    #staff_trois {
      position: absolute;
      top: 0;
      left: 145px;
      z-index: 1;
    }

    #staff_quatre {
      position: absolute;
      top: 0;
      left: 215px;
      z-index: 1;
    }

    #staff_cinq {
      position: absolute;
      top: 0;
      left: 285px;
      z-index: 1;
    }

    #staff_six {
      position: absolute;
      top: 0;
      left: 355px;
      z-index: 1;
    }

    #staff_sept {
      position: absolute;
      top: 0;
      left: 425px;
      z-index: 1;
    }

    /* Au passage de la souris on agrandit le toute pour que ça prenne toute la largeur */
    .contour_staff_pa:hover {
      width: 500px;
      height: 120px;
      transition: all ease 1s;
    }

    /* Mise en forme du nom du staff & fonction */
    .contour_staff_pa h3 {
      width: 430px;
      text-align: justify;
      font-family: 'Architects Daughter';
      font-size: 16pt;
      margin: 0;
    }

    /* Mise en forme du texte descriptif du staff */
    .contour_staff_pa p {
      width: 410px;
      height: 95px;
      margin: 0;
      overflow: auto;
      font-family: 'Architects Daughter';
      font-size: 10pt;
    }

    /* Déplacement à top:0; left:0; pour tous les id. z-index à 2 pour les mettre tout en haut */
    #staff_un:hover {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    #staff_deux:hover {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    #staff_trois:hover {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    #staff_quatre:hover {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    #staff_cinq:hover {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    #staff_six:hover {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    #staff_sept:hover {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }

    /* Positionnement et mise en forme du bloc des Partenaires */
    #partenaires_pa {
      position: absolute;
      top: 680px;
      left: 274px;
      width: 500px;
      height: 35px;
      padding-top: 5px;
      background-color: #e7d8c5;
      border: 1px solid black;
    }

    /* Positionnement et mise en forme du bloc des News */
    #news_pa {
      position: absolute;
      top: 210px;
      right: 2px;
      width: 245px;
      height: 130px;
      padding: 10px;
      overflow: auto;
      text-align: justify;
      background-color: #e7d8c5;
      border: 1px solid black;
    }

    /* Mise en forme du contenu derrière le lion dans les news */
    .un_lion_news_pa {
      display: inline-block;
      font-weight: bold;
      font-size: 13pt;
      font-family: 'Architects Daughter';
      vertical-align:middle;
      margin-bottom: 10px;
    }

    /* Mise en forme des liens dans ce contenu */
    .un_lion_news_pa a {
      display: inline-block;
      font-weight: bold;
      font-size: 13pt;
    }

    /* Mettre le lion devant ce contenu */
    .un_lion_news_pa:before {
      content: url('IMAGE_AVANT_NEWS_ICI');
      display: inline-block;
      vertical-align:middle;
      margin-right: 5px;
    }

    /* Positionnement et mise en forme du bloc des infos */
    #infos_pa {
      position: absolute;
      top: 370px;
      right: 2px;
      width: 265px;
      height: 300px;
      background-color: #e7d8c5;
      border: 1px solid black;
    }

    /* Mise en forme du contenu derrière le lion dans les infos */
    .un_lion_rp_pa {
      display: inline-block;
      font-weight: bold;
      font-size: 10pt;
      font-family: 'Architects Daughter';
      vertical-align:middle;
      margin-bottom: 10px;
    }

    /* Mise en forme des liens dans ce contenu */
    .un_lion_rp_pa a {
      display: inline-block;
      font-weight: bold;
      font-size: 12pt;
    }

    /* Mettre le lion devant ce contenu */
    .un_lion_rp_pa:before {
      content: url('IMAGE_AVANT_RP_ICI');
      display: inline-block;
      vertical-align:middle;
      margin-right: 5px;
    }

    /* Permet de réduire la taille prise par els infos por mettre le membre du mois en dessous */
    #infos_pa #infos {
      width: auto;
      height: 150px;
      padding: 10px;
      overflow: auto;
      text-align: justify;
    }

    /* Titre de Membre du Mois et Rp du Mois */
    #infos_pa .ptit_titre {
      display: block;
      margin-top: -3px;
      font-size: 15pt;
      font-family: 'Architects Daughter';
      font-weight: bold;
    }

    /* Positionnement et mise en forme du bloc des crédits */
    #credits_pa {
      position: absolute;
      top: 680px;
      right: 2px;
      width: 265px;
      height: 40px;
    }
    /*********** FIN PA ***********/

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.



    Løve
    MasculinAge : 22Messages : 189

    le Sam 18 Oct 2014 - 14:13

    Merci beaucoup o/
    avatar
    Greedounet
    MasculinAge : 24Messages : 532

    le Dim 19 Oct 2014 - 23:52

    merci



    avatar
    Melik
    MasculinAge : 25Messages : 74

    le Ven 31 Oct 2014 - 11:05

    Merci!
    avatar
    Sakura-chan
    FémininAge : 20Messages : 180

    le Sam 1 Nov 2014 - 0:20

    Mercii ! ^^
    avatar
    Arisu
    FémininAge : 29Messages : 109

    le Mar 18 Nov 2014 - 0:56

    Très joli !
    avatar
    cali60
    FémininAge : 32Messages : 58

    le Sam 6 Déc 2014 - 18:02

    merci :)
    avatar
    NéoLéo
    MasculinAge : 24Messages : 86

    le Mar 9 Déc 2014 - 12:04

    Merci beaucoup pour ce code, bien que je soit une moule en codage, je vais tenter de m'en sortir ^^; avec un peu de patience et de courage je devrait m'en sortir (j'espère).
    avatar
    Damned
    FémininAge : 16Messages : 109

    le Jeu 11 Déc 2014 - 16:01

    Thanks *^*
    avatar
    NéoLéo
    MasculinAge : 24Messages : 86

    le Sam 13 Déc 2014 - 1:20

    J4ai fini par m'en sortir et j'en ai appris plus sur le CSS et l'Html du coup ^^ Sa fait doublement plaisir ^^. Si tu désires voir ce que donnes ta P.A. après mes modifications voici le lien du forum où elle est installée : http://eternalrune.forumsrpg.com/

    N'hésite pas à me donner ton avis si l'envie t'en prend ^^
    avatar
    Chorks
    MasculinAge : 21Messages : 32

    le Jeu 18 Déc 2014 - 1:30

    C'est agnifique *-*
    avatar
    Asami No Yoru
    FémininAge : 19Messages : 12

    le Jeu 18 Déc 2014 - 15:13

    Merci!



    http://thousand-sunny.forumactif.org/
    Mon fofo :3 venez nombreux Very Happy (en fait ... Si vous voulez...)
    avatar
    Selfura
    MasculinAge : 26Messages : 54

    le Mar 6 Jan 2015 - 16:26

    Merci pour le tuto !



    avatar
    Saya Shirayuki
    FémininAge : 25Messages : 150

    le Mar 6 Jan 2015 - 18:48

    Merci beaucoup !
    avatar
    Dreamyland
    FémininAge : 21Messages : 88

    le Mer 7 Jan 2015 - 21:39

    Merci ~
    avatar
    Xperience
    FémininAge : 21Messages : 156

    le Mar 13 Jan 2015 - 11:40

    Merci !



    avatar
    Hyuna
    FémininAge : 21Messages : 98

    le Sam 28 Fév 2015 - 12:48

    Ouah j'aime beaucoup merci :3
    avatar
    Heine
    MasculinAge : 23Messages : 168

    le Lun 9 Mar 2015 - 13:50

    Thanks \o/



    avatar
    Caine Lornan
    MasculinAge : 37Messages : 78

    le Dim 15 Mar 2015 - 14:12

    Merci elle est top
    avatar
    Mimio
    FémininAge : 23Messages : 179

    le Dim 15 Mar 2015 - 21:45

    Très beau, merci du partage de ton talent en libre-service c:



    avatar
    Cassisse
    FémininAge : 25Messages : 120

    le Ven 24 Avr 2015 - 17:52

    Malade je vais le tester merci
    avatar
    Mystick
    FémininAge : 33Messages : 100

    le Dim 31 Mai 2015 - 23:17

    Trop chou **
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Ven 5 Juin 2015 - 22:41

    Merci
    Hop80
    MasculinAge : 28Messages : 138

    le Jeu 9 Juil 2015 - 1:28

    merci
    avatar
    Kenway Kioshi
    MasculinAge : 22Messages : 48

    le Jeu 9 Juil 2015 - 8:15

    En plein ce que je cherchais ! Merci !
    avatar
    Grande
    FémininAge : 30Messages : 207

    le Lun 24 Aoû 2015 - 12:30

    Merci =D



    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Juin 2018 - 2:00