From f278ac92598329e1ff176a810bb3afbbc4948d72 Mon Sep 17 00:00:00 2001 From: L-22-at Date: Tue, 7 Oct 2025 12:31:17 +0200 Subject: [PATCH] page contact,apropos,faq --- assets/css/a-propos.css | 44 ++++++++++++++ assets/css/contact.css | 58 ++++++++++++++++++ assets/css/faq.css | 38 ++++++++++++ assets/css/global.css | 86 +++++++++++++++++++++++++++ assets/css/images/pages/a-propos.html | 76 +++++++++++++++++++++++ assets/css/images/pages/contact.html | 78 ++++++++++++++++++++++++ assets/css/images/pages/faq.html | 75 +++++++++++++++++++++++ 7 files changed, 455 insertions(+) create mode 100644 assets/css/a-propos.css create mode 100644 assets/css/contact.css create mode 100644 assets/css/faq.css create mode 100644 assets/css/global.css create mode 100644 assets/css/images/pages/a-propos.html create mode 100644 assets/css/images/pages/contact.html create mode 100644 assets/css/images/pages/faq.html diff --git a/assets/css/a-propos.css b/assets/css/a-propos.css new file mode 100644 index 0000000..ff201d6 --- /dev/null +++ b/assets/css/a-propos.css @@ -0,0 +1,44 @@ +/* Styles pour la page À Propos */ + +.a-propos-intro { + text-align: center; + margin-bottom: 40px; + font-size: 1.1rem; +} + +.nos-valeurs { + display: flex; + justify-content: space-around; + text-align: center; + margin-bottom: 50px; +} + +.valeur-item { + width: 30%; + padding: 20px; + border: 1px solid #ccc; + border-radius: 8px; +} + +.valeur-item img { + width: 80px; /* Assurez-vous d'avoir des images dans /assets/images */ + margin-bottom: 10px; +} + +.notre-equipe { + text-align: center; +} + +.equipe-membre { + display: inline-block; + width: 200px; + margin: 20px; +} + +.equipe-membre img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 50%; /* Image circulaire */ + margin-bottom: 10px; +} \ No newline at end of file diff --git a/assets/css/contact.css b/assets/css/contact.css new file mode 100644 index 0000000..b3e699f --- /dev/null +++ b/assets/css/contact.css @@ -0,0 +1,58 @@ +/* Styles pour la page Contact */ + +.contact-page { + display: flex; + flex-direction: column; + align-items: center; +} + +.contact-info { + text-align: center; + margin-bottom: 40px; +} + +.form-container { + width: 100%; + max-width: 600px; + padding: 30px; + background: #ffffff; + border: 1px solid #e9ecef; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0,0,0,0.05); +} + +.contact-form label { + display: block; + margin-top: 15px; + font-weight: bold; +} + +.contact-form input[type="text"], +.contact-form input[type="email"], +.contact-form textarea { + width: 100%; + padding: 10px; + margin-top: 5px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.contact-form textarea { + resize: vertical; +} + +.btn-submit { + background-color: var(--couleur-primaire); + color: white; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + margin-top: 20px; + font-size: 1rem; + transition: background-color 0.3s; +} + +.btn-submit:hover { + background-color: #0056b3; /* Une nuance plus foncée au survol */ +} \ No newline at end of file diff --git a/assets/css/faq.css b/assets/css/faq.css new file mode 100644 index 0000000..671ecd5 --- /dev/null +++ b/assets/css/faq.css @@ -0,0 +1,38 @@ +/* Styles pour la page FAQ */ + +.faq-page h1 { + text-align: center; + margin-bottom: 40px; +} + +.faq-categorie { + margin-bottom: 30px; + padding: 20px; + border: 1px solid #e9ecef; + border-radius: 6px; + background-color: #ffffff; +} + +.faq-categorie h2 { + color: var(--couleur-primaire); + margin-bottom: 15px; + border-bottom: 1px dashed #ccc; + padding-bottom: 5px; +} + +.qa-item { + margin-bottom: 20px; +} + +.qa-item h3 { + font-size: 1.1rem; + color: var(--couleur-texte); + cursor: pointer; /* Indiquer que c'est cliquable (même si c'est statique) */ +} + +.qa-item p { + padding-left: 20px; + border-left: 3px solid #ccc; + margin-top: 5px; + color: var(--couleur-secondaire); +} \ No newline at end of file diff --git a/assets/css/global.css b/assets/css/global.css new file mode 100644 index 0000000..d258099 --- /dev/null +++ b/assets/css/global.css @@ -0,0 +1,86 @@ +/* Définition des variables de couleur pour la charte graphique */ +:root { + --couleur-primaire: #776f73; /* Bleu (boutons, liens) */ + --couleur-secondaire: #cccccc; /* Gris */ + --couleur-fond: #8f253c; /* Fond clair */ + --couleur-texte: #212529; /* Noir/Gris foncé */ +} + +/* Base Reset/Typographie */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Arial, sans-serif; + line-height: 1.6; + color: var(--couleur-texte); + background-color: var(--couleur-fond); +} + +.page-content { + max-width: 1200px; + margin: 40px auto; + padding: 20px; +} + +/* HEADER Styles */ +.main-header { + background-color: #ffffff; + border-bottom: 1px solid #e9ecef; + padding: 15px 50px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo a { + font-size: 1.5rem; + font-weight: bold; + color: var(--couleur-primaire); + text-decoration: none; +} + +.main-nav ul { + list-style: none; + display: flex; +} + +.main-nav li a { + text-decoration: none; + color: var(--couleur-texte); + padding: 0 15px; + transition: color 0.3s; +} + +.main-nav li a:hover { + color: var(--couleur-primaire); +} + +/* FOOTER Styles */ +.main-footer { + background-color: var(--couleur-texte); + color: #ffffff; + padding: 40px 50px; + display: flex; + justify-content: space-around; + flex-wrap: wrap; + margin-top: 50px; +} + +.footer-links, .footer-contact, .footer-copyright { + margin: 10px; +} + +.main-footer h4 { + border-bottom: 2px solid var(--couleur-primaire); + padding-bottom: 5px; + margin-bottom: 15px; +} + +.main-footer a { + color: #cccccc; + text-decoration: none; +} \ No newline at end of file diff --git a/assets/css/images/pages/a-propos.html b/assets/css/images/pages/a-propos.html new file mode 100644 index 0000000..477a8a5 --- /dev/null +++ b/assets/css/images/pages/a-propos.html @@ -0,0 +1,76 @@ + + + + + + Nom du Site - À Propos + + + +
+ + +
+ +
+
+

Notre Histoire & Nos Valeurs

+
+

Bienvenue chez POLYTECHNIC WX ! Notre aventure a commencé en 2O2O avec l'idée simple de...

+
+ +
+

Nos Valeurs Fondamentales

+
+ Icone Écologie +

Durabilité

+

Nous privilégions les matériaux éco-responsables et les circuits courts.

+
+
+ Icone Qualité +

Qualité

+

Chaque produit est sélectionné et testé pour une longévité maximale.

+
+
+ +
+

Rencontrez l'Équipe

+
+ Photo de Personne 1 +

Bakotcha loic

+

Fondatrice & CEO

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/assets/css/images/pages/contact.html b/assets/css/images/pages/contact.html new file mode 100644 index 0000000..1a555e4 --- /dev/null +++ b/assets/css/images/pages/contact.html @@ -0,0 +1,78 @@ + + + + + + Nom du Site - À Propos + + + +
+ + +
+ +
+
+ +

Contactez-Nous

+ +
+

Informations Clés

+

Téléphone : +237 677461149

+

Email : loicbakotcha@gmail.com

+

Adresse : 123 Rue de Melen yaoundé

+
+ +
+

Envoyez-Nous un Message

+
+ + + + + + + + + + + + + +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/assets/css/images/pages/faq.html b/assets/css/images/pages/faq.html new file mode 100644 index 0000000..0c70d1f --- /dev/null +++ b/assets/css/images/pages/faq.html @@ -0,0 +1,75 @@ + + + + + + Nom du Site - À Propos + + + +
+ + +
+ +
+
+

Foire Aux Questions

+ +
+

Commandes et Paiement

+
+

Comment puis-je passer une commande ?

+

Ajoutez les produits souhaités au panier et suivez les étapes de validation.

+
+
+

Quels modes de paiement acceptez-vous ?

+

Nous acceptons Visa, Mastercard, PayPal et virement bancaire.

+
+
+ +
+

Livraison et Retours

+
+

Quel est le délai de livraison ?

+

Le délai standard est de 3 à 5 jours ouvrables pour la France métropolitaine.

+
+
+

Comment effectuer un retour ?

+

Vous disposez de 14 jours pour retourner un article. Veuillez contacter le support par email.

+
+
+ +
+
+ + + + + \ No newline at end of file