modif faq

assets/css/faq.css

@@ -2,55 +2,5 @@ h1 {
     text-align: center;
 }
 
-h2 {
-    text-align: center;
-    font-size: medium;
-}
-
-.faq {
-    margin: 0 auto;
-    width: 500px;
-}
-
-.faq ul {
-    padding: 0;
-    list-style-type: none;
-}
-
-.faq ul li a{
-	padding-right: 20px;
-	padding-left: 20px;
-}
-
-.faq ul li {
-    background: #f1f1f1;
-    padding: 10px 0;
-    margin-bottom: 10px;
-    position: relative;
-}
-
-.question {
-    font-size: 18px;
-    color: #47a3da;
-    text-decoration: none;
-    display: block;
-    padding: 0 0 0 20px;
-    position: relative;
-}
-
-.question:hover {
-    color: #000;
-}
 
 
-.question.active {
-    color: #000;
-}
-
-.faq ul li p {
-    display: none;
-    font-size: 14px;
-    color: #2f2f2f;
-    line-height: 24px;
-    padding: 10px 20px;
-}

assets/css/style.css

@@ -16,3 +16,19 @@ body {
     box-sizing: inherit;
     font-family: system-ui;
 }
+
+main {
+    padding: 0 3.75rem;
+}
+
+@media screen and (max-width: 700px){
+    main {
+        padding: 0 1.875rem;
+    }
+}
+
+@media screen and (max-width: 575px) {
+    main {
+        padding: 0 .625rem;
+    }
+}

faq/index.php

@@ -24,36 +24,30 @@
         </header>
         <main>
             <h1>FAQ</h1>
-            <h2>Voici les questions fréquentes de nos clients :</h2>
+            <p>Voici les questions fréquentes de nos clients :<p>
             <div class="faq">
-                <ul>
+                
-                    <li>
+                    
-                        <a class="question" href="#">Quel sont vos partenaires ?</a>
+                        <h2>Quel sont vos partenaires ?</h2>
                         <p>Nous travaillons avec Apple, Samsung, Huawei.</p>
-                    </li>
+                    
-                    <li>
+                        <h2>Quand est-ce que le produit est livré ?</h2>
-                        <a class="question" href="#">Quand est-ce que le produit est livré ?</a>
                         <p>Cela vas dépendre de ce que veux le client et comment adapter la technolgie à l'écran.Nous vous invitons à nous <a href="../contact">contacter</a></p>
-                    </li>
+                    
-                    <li>
+                        <h2>A qui est destiné votre produit ?</h2>
-                        <a class="question" href="#">A qui est destiné votre produit ?</a>
                         <p>Notre produit est principalement destiné aux entrerpises créant des smartphones.</p>
-                    </li>
+                    
-                    <li>
+                        <h2>Pourquoi ce nom ?</h2>
-                        <a class="question" href="#">Pourquoi ce nom ?</a>
                         <p>Notre entreprise se nomme Elite Solar, la première partie (Elite) fait référence à nos ingénieurs d’élite ayant réussi à miniaturiser et à  
                         rendre totalement invisible les cellules photovoltaïques à l’œil nu pour les utilisateurs de notre technologie, la seconde partie (Solar),
                         quant à elle,correspond à la source d’énergie principale des cellules photovoltaïques.</p>
-                    </li>
+                    
-                    <li>
+                        <h2>Est-ce que le produit est garanti ?</h2>
-                        <a class="question" href="#">Est-ce que le produit est garanti ?</a>
                         <p>Oui, le produit est garanti 2 ans.</p>
-                    </li> 
+                    
-                    <li>
+                        <h2>Allez-vous travailler avec d'autres grand partenaires dans les années futures ?</h2>
-                        <a class="question" href="#">Allez-vous travailler avec d'autres grand partenaires dans les années futures ?</a>
                         <p>Oui, nous sommes en contact avec Microsoft et Xiaomi</p>
-                    </li>      
+               
-                </ul>
             </div>
             <script src="../assets/js/faq.js"></script>
         </main>