Je suis nouvelle sur le forum, je démarre mon apprentissage en html et css et je viens demander de l'aide
Depuis plusieurs jours, je tourne en rond sur l'exercice de mise en page du CV.
Voici l'énoncé :
Je vais vous demander ici de structurer la page comme ceci :
A gauche, un liseré (purement décoratif, mais vous pouvez aussi mettre des informations à l'intérieur)
A droite, le contenu de votre CV, qui contiendra à l'intérieur, de gauche à droite les sections suivantes :
Mon expérience
Mes compétences
Ma formation
Cela devrait donner quelque chose comme ceci :
Si la hauteur du liseré peut être définie en valeur absolue (en pixels), tout le reste de la mise en page doit être en valeur relative (pourcentages). Le contenu doit occuper tout l'espace en largeur, quelle que soit la largeur de la fenêtre.
N'oubliez pas d'utiliser des balises sémantiques, comme nous l'avons vu dans le cours.
Lorsque je suis dans une fenêtre à 100% dans le navigateur, la mise en page me convient un peu près mais si je réduis la fénêtre, les éléments ne diminuent pas et certains se chevauchent ;(
A force, de m'acharner à tester plusieurs codes, je m'embrouille.
j'ai du mal à savoir si je dois utiliser flexbox, float, des positions absolues ou relatives et aussi je me demande si la structure de mon html est cohérent.Pareil pour le css, il y a sûrement des incohérences ou des valeurs superflus.
Au départ, je voulais mettre ma photo dans mon header, mais je n'arrivais pas à placer la photo correctement, donc j'ai fait autrement.
Je suis embêtée aussi avec la longueur de mon liseré, je lui ai donné une hauteur au pif de 2800px mais n'y a t-il pas un moyen pour que ce liseré s'aligne à la dernière ligne du contenu du CV ?
Si je pouvais avoir vos avis et conseils, ça serait super !
Je copie/colle mes fichiers ci dessous:
ps:les bordures sur mes blocks sont provisoires, c'est juste pour bien me rendre compte de leurs tailles/positions (il n'y a que la celle de la photo qui va rester)
D'avance, merci !
Mon html
<!DOCTYPE html>
<html>
<head>
<title>Mon CV en ligne</title>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="stylesheetcv.css">
</head>
<body>
<section>
<div id="lisere"></div>
<header>
<div id="titre">
<h1>Virginie Monnom</h1>
<p>Assistante Administrative qui se forme à la création de site web</p>
</div>
</header>
<div id="photo">
<img src="images/photo_vb_mini.jpg" alt="Photo VB" id="ma_photo" />
</div>
<div id="contenu_cv">
<div id="experiences">
<h2>Mes expériences</h2>
<h3>2015-2016 Assistante e-business</h3>
<p>(Mission de 6 mois-ADECCO/OFFICE DEPOT-Senlis)</p>
<ul>
<li><strong>Gestion des données</strong> du site de prise de commande en ligne</li>
<li><strong>Paramétrages</strong> des comptes et de l’environnement des utilisateurs (catalogue, profil, logo, liste type, flash info…)</li>
<li><strong>Mise à jour de base de données sensibles</strong> (catalogues, statuts des articles)</li>
<li><strong>Recherche, traitement et dépôt des images</strong> pour le site et les catalogues électroniques</li>
<li><strong>Exécution de différentes tâches</strong> suivant <strong>procédures et planning rigoureux</strong> définis</li>
<li>Intégration de la <strong>facturation en EDI</strong> (SAP, table client, plateforme de dématérialisation…)</li>
<li><strong>Analyse des rapports et anomalies</strong> de la <strong>facturation électronique</strong></li>
</ul>
<p>Utilisation quotidienne <strong>SAP, Excel, Gmail, Xn-View, B-process, Cegedim</strong> et différents outils internes (<strong>Webcat, Isbdtools, Webmethods, GMDC</strong>)</p>
<h3>2011-2015 Assistante de direction</h3>
<p>BV FROID/BV SERVICES-Sénécourt</p>
<ul>
<li><strong>Accueil</strong> physique et <strong>standard téléphonique</strong></li>
<li>Participation au <strong>développement d’un logiciel métier et d’un accès web client</strong> (alimentation base de données, formations et remontées d’infos des utilisateurs, détections des anomalies, suggestions d’améliorations…)</li>
<li>Gestion des <strong>dossiers du personnel</strong></li>
<li>Saisie des <strong>devis, factures, avoir</strong>…</li>
<li>Relation <strong>fournisseurs</strong></li>
<li>Préparation des <strong>contrats de maintenance</strong></li>
<li>Gestion administrative des <strong>appels d’offres</strong> (récupération du dossier de consultation, renseignement des formulaires DC1,2…, compilation du dossier de candidature, dépôt sur plateforme…)</li>
<li>Enregistrement des commandes et créations des <strong>dossiers d’affaires</strong></li>
<li>Compilation des <strong>dossiers d’ouvrages exécutés</strong></li>
<li>Participation à la mise en place, gestion documentaire et communication du <strong>système SSE</strong></li>
<li>Création et mise à jour de <strong>tableaux de bord format excel</strong> (gestion contrats, indicateurs système SSE, formations et habilitations personnel, entretien véhicules et équipements, mouvements des fluides…)</li>
<li>Rédaction <strong>compte rendu, mails, courriers</strong></li>
<li><strong>Mise sous pli, affranchissement</strong></li>
<li>Création de <strong>modèle de documents, publipostage</strong> (courrier, attestation, PV d’essais, contrats de maintenance, documents d’application…)</li>
<li><strong>Tri, classement, archivage</strong> des documents papier et numérique</li>
<li><strong>Réception</strong> des marchandises, <strong>pointages des BL</strong></li>
<li>Gestion des <strong>fournitures de bureau et consommables</strong></li>
<li>Préparation des dossiers, audits… des <strong>organismes de contrôle et de qualification</strong> (Veritas, Qualibat, MASE, Sicli…)</li>
</ul>
<h3>2000-2011 Documentaliste</h3>
<p>HOWDEN BC COMPRESSORS-Nogent sur Oise</p>
<ul>
<li>Gestion papier et électronique des documents (diffusion, archivage…)</li>
<li>Numérisation (tif,pdf), reprographies des documents (du A4 au A0)</li>
<li>Recherches sur AX(GPAO), Paradox (BDD), réseau informatique interne et internet</li>
<li>Compilations de notices et dossiers constructeurs</li>
<li>Créations des cd-rom avec liens et signets sous Acrobat</li>
<li>Vérifications, relances et validations documentation fournisseurs (plans, notice, certificats…)</li>
</ul>
<h3>2008 Maquettiste stagiaire</h3>
<p>SEQUENCES COMMUNICATION-Chantilly</p>
<ul>
<li>Créations et modifications de maquettes sur In Design</li>
<li>Détourages et retouches photos sur Photoshop</li>
</ul>
<h3>1999-2000 Vendeuse grande distribution</h3>
<p>CHAUSS EXPO-Fitz james et Pont sainte Maxence</p>
<ul>
<li>Relations avec la clientèle, ventes</li>
<li>Mise en place des rayons, encaissements</li>
</ul>
</div>
<div id="competences">
<h2>Mes compétences</h2>
<ul>
<li>Secrétariat/assistanat</li>
<li>Devis, facturation</li>
<li>Relations fournisseurs</li>
<li>Rédaction</li>
<li>Gestion des données</li>
<li>Gestion documentaire</li>
<li>PAO</li>
<li>Vente</li>
</ul>
</div>
<div id="formations">
<h2>Mes formations</h2>
<h3>2011 Formation bureautique et web</h3>
<p>MICRO PLUS-Creil</p>
<p>Perfectionnement word et excel<br />
Initiation Dreamwever</p>
<h3>2008 Titre homologué de niveau III (BAC+2) maquettiste PAO</h3>
<p>CETEC INFO-Paris</p>
<p>Maquette et mise en page</p>
<h3>1998 BEP Vente Action Marchande et CAP Vente Relation Clientèle</h3>
<p>CFA-Nogent sur Oise</p>
</div>
</div>
</section>
</body>
</html>
j'était en train de chercher un shéma sur l'utilisation des balises sémantiques.
Ton liseré tu peux le mettre en pixel mais ce n'est pas une obligation.
Relis le cours et sa devrais aller tout seul parfois vos mieux prendre son temps à comprendre les choses que de vouloir aller trop vite et d'en perdre plein
Si tu te base sur le shéma de 4N42K1 ça devrait pas mal te simplifier la tache.
Même si il est bon de résoudre cet exercice avec Flexbox sache qu'il est aussi possible de le faire avec de simples règles @media.
Et comme dit Skull-Dragon tu peut voir à ne pas coller une valeur en pixel pour le liserer, regarde coté vh, wh, %, ... sachant qu'il est à éviter de trop forcer la gestion de la hauteur, souvent en auto ça se passe très bien.
Au départ, j'avais construit mon html un peu comme le schéma de KN42K1, mais comme je ne m 'en sortais pas avec les positionnements dans le css, j'ai pas mal bidouillé et j'ai tout "démonté"
Ca me servira de leçon,je retiendrai :" je construis le html de façon logique et je m'y tiens !"
J'aurai du venir demander de l'aide sur le forum plus tôt, mais j'ai hésité à franchir ce pas, je n'en ai pas l 'habitude..vous êtes très réactifs et je me sens moins seule, merci !
Je vais reprendre tout ça et je vous tiens au courant
@Skull-drangon : Lol non, on ferras en sorte que ce sois l'inverse, apres tout c'est aussi pour ça l'entraide, pour envoyer les autres en galère à notre place par la suite
P.S Je prendrais bien un petit café moi maintenant qu'on en parle ...
J'ai revu mes fichiers et voilà ce que ça donne, ça me parait bien mieux, plus claire et plus simple.
Qu'en pensez vous ? Si vous voyez des erreurs, des incohérences ou du code superflu, n'hésitez pas à me le dire
Et effectivement mon liséré se dimensionne en hauteur correctement automatiquement.
J'ai tous mis en pixels, sauf la photo je lui ai mis une largeur sinon quand je réduis la fenêtre, elle se coupe.
Et j'ai mis aussi une hauteur en pixels à mon header pour pouvoir centrer mon titre (avec margin auto).
Est-ce la bonne technique pour ces deux réglages?
J'ai un petit souci avec les titres de mes articles, j'ai placé h2 et h3 dans chaque balise article.
Mes niveaux de titres sont pris en compte sur toute ma page ou je dois repartir à h1 dans mes articles ? sachant que le titre de niveau 1 de ma page se trouve dans header)
J'ai testé le code sur W3C, et j'ai le message suivant :
"Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections."
Je ne suis pas certaine de bien comprendre...ma section doit obligatoirement posséder un titre ? selon moi ce sont mes articles qui possèdent chacun des titres.
Encore merci, même si je suis déçue vous ne faites pas le café
bon ap'
<!DOCTYPE html>
<html>
<head>
<title>Mon CV en ligne</title>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="stylesheetcv.css">
</head>
<body>
<div id="lisere"></div>
<div id="corps_principal">
<header>
<div id="titre">
<h1>Virginie Monnom</h1>
<p>Assistante Administrative qui se forme à la création de site web</p>
</div>
<div id="photo">
<img src="images/photo_vb_mini.jpg" alt="Photo VB" id="ma_photo" />
</div>
</header>
<section>
<article id="experiences">
<h2>Mes expériences</h2>
<h3>2015-2016 Assistante e-business</h3>
<p>(Mission de 6 mois-ADECCO/OFFICE DEPOT-Senlis)</p>
<ul>
<li><strong>Gestion des données</strong> du site de prise de commande en ligne</li>
<li><strong>Paramétrages</strong> des comptes et de l’environnement des utilisateurs (catalogue, profil, logo, liste type, flash info…)</li>
<li><strong>Mise à jour de base de données sensibles</strong> (catalogues, statuts des articles)</li>
<li><strong>Recherche, traitement et dépôt des images</strong> pour le site et les catalogues électroniques</li>
<li><strong>Exécution de différentes tâches</strong> suivant <strong>procédures et planning rigoureux</strong> définis</li>
<li>Intégration de la <strong>facturation en EDI</strong> (SAP, table client, plateforme de dématérialisation…)</li>
<li><strong>Analyse des rapports et anomalies</strong> de la <strong>facturation électronique</strong></li>
</ul>
<p>Utilisation quotidienne <strong>SAP, Excel, Gmail, Xn-View, B-process, Cegedim</strong> et différents outils internes (<strong>Webcat, Isbdtools, Webmethods, GMDC</strong>)</p>
<h3>2011-2015 Assistante de direction</h3>
<p>BV FROID/BV SERVICES-Sénécourt</p>
<ul>
<li><strong>Accueil</strong> physique et <strong>standard téléphonique</strong></li>
<li>Participation au <strong>développement d’un logiciel métier et d’un accès web client</strong> (alimentation base de données, formations et remontées d’infos des utilisateurs, détections des anomalies, suggestions d’améliorations…)</li>
<li>Gestion des <strong>dossiers du personnel</strong></li>
<li>Saisie des <strong>devis, factures, avoir</strong>…</li>
<li>Relation <strong>fournisseurs</strong></li>
<li>Préparation des <strong>contrats de maintenance</strong></li>
<li>Gestion administrative des <strong>appels d’offres</strong> (récupération du dossier de consultation, renseignement des formulaires DC1,2…, compilation du dossier de candidature, dépôt sur plateforme…)</li>
<li>Enregistrement des commandes et créations des <strong>dossiers d’affaires</strong></li>
<li>Compilation des <strong>dossiers d’ouvrages exécutés</strong></li>
<li>Participation à la mise en place, gestion documentaire et communication du <strong>système SSE</strong></li>
<li>Création et mise à jour de <strong>tableaux de bord format excel</strong> (gestion contrats, indicateurs système SSE, formations et habilitations personnel, entretien véhicules et équipements, mouvements des fluides…)</li>
<li>Rédaction <strong>compte rendu, mails, courriers</strong></li>
<li><strong>Mise sous pli, affranchissement</strong></li>
<li>Création de <strong>modèle de documents, publipostage</strong> (courrier, attestation, PV d’essais, contrats de maintenance, documents d’application…)</li>
<li><strong>Tri, classement, archivage</strong> des documents papier et numérique</li>
<li><strong>Réception</strong> des marchandises, <strong>pointages des BL</strong></li>
<li>Gestion des <strong>fournitures de bureau et consommables</strong></li>
<li>Préparation des dossiers, audits… des <strong>organismes de contrôle et de qualification</strong> (Veritas, Qualibat, MASE, Sicli…)</li>
</ul>
<h3>2000-2011 Documentaliste</h3>
<p>HOWDEN BC COMPRESSORS-Nogent sur Oise</p>
<ul>
<li>Gestion papier et électronique des documents (diffusion, archivage…)</li>
<li>Numérisation (tif,pdf), reprographies des documents (du A4 au A0)</li>
<li>Recherches sur AX(GPAO), Paradox (BDD), réseau informatique interne et internet</li>
<li>Compilations de notices et dossiers constructeurs</li>
<li>Créations des cd-rom avec liens et signets sous Acrobat</li>
<li>Vérifications, relances et validations documentation fournisseurs (plans, notice, certificats…)</li>
</ul>
<h3>2008 Maquettiste stagiaire</h3>
<p>SEQUENCES COMMUNICATION-Chantilly</p>
<ul>
<li>Créations et modifications de maquettes sur In Design</li>
<li>Détourages et retouches photos sur Photoshop</li>
</ul>
<h3>1999-2000 Vendeuse grande distribution</h3>
<p>CHAUSS EXPO-Fitz james et Pont sainte Maxence</p>
<ul>
<li>Relations avec la clientèle, ventes</li>
<li>Mise en place des rayons, encaissements</li>
</ul>
</article>
<article id="competences">
<h2>Mes compétences</h2>
<ul>
<li>Secrétariat/assistanat</li>
<li>Devis, facturation</li>
<li>Relations fournisseurs</li>
<li>Rédaction</li>
<li>Gestion des données</li>
<li>Gestion documentaire</li>
<li>PAO</li>
<li>Vente</li>
</ul>
</article>
<article id="formations">
<h2>Mes formations</h2>
<h3>2011 Formation bureautique et web</h3>
<p>MICRO PLUS-Creil</p>
<p>Perfectionnement word et excel<br />
Initiation Dreamwever</p>
<h3>2008 Titre homologué de niveau III (BAC+2) maquettiste PAO</h3>
<p>CETEC INFO-Paris</p>
<p>Maquette et mise en page</p>
<h3>1998 BEP Vente Action Marchande et CAP Vente Relation Clientèle</h3>
<p>CFA-Nogent sur Oise</p>
</article>
</section>
</div>
</body>
</html>
Salut partie Html je ferais sa moi après ce n'est que mon avis (je n'ai pas la science infuse) pour pouvoir manipuler flex comme tu le veux ,
l'utilisation de conteneur générique par moment aide pas mal d'ou les div supplémentaire
<!Doctype html>
<html>
<head>
<!-- Ton titre -->
<title>Mon CV en ligne</title>
<!-- Balise meta -->
<meta charset="UTF-8" />
<!-- Insertion du CSS -->
<link type="text/css" rel="stylesheet" href="./css/stylesheet.css" />
</head>
<!-- Corp de la page -->
<body>
<!-- Incorporation du lisere -->
<div class="lisere"><p class="rotate">Virginie Monnom</p></div>
<!-- Ouverture d'une div pouvoir adapter avec flex -->
<div class="contenu">
<!-- Mise en place de l'entête -->
<header>
<div id="corps_principal">
<!-- Ton titre en H1 -->
<h1>Virginie Monnom</h1>
<!-- Description de ton profil avec un paragraphe -->
<p>Assistante Administrative qui se forme à la création de site web</p>
</div>
<!-- Insertion de la photo de profil -->
<div id="photo">
<img src="images/photo_vb_mini.jpg" alt="Photo VB" />
</div>
</header>
<!-- Mise en place de la section -->
<section>
<h2>Mon parcours pro exemple</h2>
<!-- Ajout d'une div pour pouvoir mieux adapter avec flex -->
<div class="tout">
<!-- Expériences -->
<!-- Titre de la première section -->
<article class="experiences">
<h3>exp</h3>
</article>
<!-- Compétences -->
<!-- Titre de la deuxième section -->
<article class="competences">
<h3>comp</h3>
</article>
<!-- Formation -->
<!-- Titre de la troisième section -->
<article class="formation">
<h3>form</h3>
</article>
<!-- fermeture de la div class="tout" -->
</div>
</section>
<!-- fermeture de la div class="contenu" -->
</div>
</body>
</html>
avec sa tu devrais t'en sortir reste plus que ton css Attention je le répète encore je n'ai pas la science infuse,mais je ferais sa pour adapter comme je le souhaite,quand à la mise en place de ton css sur résolution plus petite pense au mediaquery
- Edité par Skull-dragon 16 septembre 2017 à 18:38:44
Merci Exen d'avoir pris le temps pour me répondre.
Concernant mes titres, ce que j'ai fais et donc correct ? Puisqu'il ne doit y avoir qu'un h1 sur la page (ce que j'ai lu via ton lien), et qu'il est déjà présent dans header, j'ai bien fais de continuer sur h2 et h3 sur mes articles ?
Du coup, je ne comprends tjs pas l'erreur (warning)détectée dans mon code surW3C ;(
Bien vu pour le 1.em du h2, c'est 1.5
Pour le border-radius, c'est fait, merci
Par contre, la hauteur de mon liseré me convient parfaitement (je me suis peut être mal exprimée), je veux qu'il descende jusqu'en bas du contenu de ma page, si j'applique height:100vh, il s'arrête à hauteur de la taille de ma fenêtre.Je ne connaisais pas vh, ça pourrait m'être utile pour d'autres mises en page
Le box-shadow, je l'avais dans mon exercice précédent mais je l'ai volontairement retiré.
je n'ai pas retouché à la structure html, j'ai appliqué un width en % pour ma photo mais ça m'embête j'aurai aimé que mon header se dimensionne par rapport à ma photo, quand je réduis la fenêtre, la photo diminue car je lui dde de faire 10% mais mon titre lui ne diminue pas, je le retrouve donc avec un gros titre et une petite photo.
J'ai ajouté un flex-wrap:wrap à ma section (visuellement c'est mieux, lorsque je réduis la fenêtre, le texte ne "grimpe" plus sur le liseré (et j'ai ajouté une petite marge gauche et droite à mon corps principal aussi pour aérer) mais je suis partagée car si je réduis bcp ma fenêtre mes 3 articles ne sont plus visibles sur la largeur.et l'enoncé dit "Le contenu doit occuper tout l'espace en largeur, quelle que soit la largeur de la fenêtre." mais j'interprète peut être mal, ça signifie peut être qu'il ne doit pas y avoir de "vide" sur les cotés de ma page.
La police (que j'ai mis en em et non pas en px, j'ai essayé en % ça ne change rien) ne devrait elle pas diminuer en fonction de la taille de la fenêtre ?
C'est sûrement plus parlant avec des imprim écran
En grande fenêtre, ça me va
En moyenne aussi
Mais plus petite, ça ne va plus...la photo et le titre ne sont plus de la même hauteur et donc plus bien centré verticalement
Et le contenu n'apparait plus sur toute la largeur
j'ai testé le code que tu as ecris pour ce que tu appelles rotate, en effet c'est sympa, il y a plein de propriétés que je ne connais pas encore
je n'ai que qqes heures de"vol" en css et html, je débute et je m'entraine avant de peut être démarrer une formation
je vais garder ça sous le coude et le ressortirais lorsque je me sentirais prête à me lancer dans ma propre mise en page de mon CV (pour le moment je l'ai fais juste pour l'exercice mais il ne me plait pas du tout )
pour mediaquery je pense que je m'y pencherai un peu plus tard...
Je vais regarder de plus près ta façon de faire dans le html, merci.
- Edité par vivininivir 16 septembre 2017 à 19:19:17
Pour la photo, tu peux toujours mettre sa hauteur avec une taille (inherit) de son parent(sa largeur sera calculée automatiquement), mais alors mettre sa "div" actuelle parente dans le "header".
Pour les autres choses notamment tailles des titres, espaces occupés lors d'un redimensionnement il va falloir utiliser les media
Pour le redimensionnement tu n'as pas d'autre choix que d'utiliser les media par rapport au cours étant donné que les colonnes "Experiences" , "Compétences" et "formation" doivent être une au dessus de l"autre en plus petite résolution ainsi que ton liseré qui doit disparaître,donc l'usage des médias c'est NOW !!! lol, ce n'est pas compliqué c'est juste tes class ou id ou etc..., qui changent dans ton css pour faire ta page en "Responsive" comme celà elle s'adapte au taille d'écran en changeant la structure de ta page initiale,rien de bien méchant une fois que tu as compris l'usage ça ira tout seul.
Super pour la photo, inherit ça fonctionne bien !Et merci pour la remarque "plus clair/plus propre", ça fait plaisir
Ok ok, j'ai bien compris que j'allais devoir m'y mettre pour "responsive" , mais en fait je suis à la 3ème partie du cours, et pour le moment pas encore vu media queries.
En fait, je crois que j'ai voulu aller plus vite que la musique...
J'ai regardé et le cv en responsive est prévu dans la 4ème partie, donc pour le moment je vais valider mon exercice comme il est (il faut que mon cv occupe tout l'espace de la fenêtre, je vais retirer le flex:wrap) et je vais continuer sur la partie suivante, jusqu'à en arriver à l'exercice "adapter son CV en responsive", et je pense que je reviendrai vosu faire un petit coucou à ce moment là
Il faudra peut être que j 'ouvre un autre sujet et faire cloturer celui-ci , non ? (je clique sur sujet résolu c'est bien ça ?mais si je le fais, savez vous si ce sujet sera tjs visible quand même SVP ? Si j'ai besoin d'y revenir.
En tout cas, merci à vous tous pour votre aide, j'ai encore appris des choses !
oui clique sur résolu si tel est le cas, et oui il sera toujours visible,après si sa concerne toujours la mise en page de ton CV tu pourras revenir sur ce post mais pour une question autre ouvre un nouveau. Bonne continuation et n'oublie pas notre café à Exen et moi lol
Ha ui effectivement nous somment tous partis sur la base de l'exo 4, dans ce cas pour le 3 tu 'a que très peut de code à coller dedans, en faite le placement des éléments avec tres peut de css te permet d’atteindre le résulta voulu.
En tout cas merci pour le café
Compos sui.
Mise en page CV
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Compos sui.
Compos sui.
Compos sui.
Compos sui.
Compos sui.