css faq

assets/styles/app.css

@@ -17,11 +17,6 @@ main {
     margin-top: 1rem;
 }
 
-.questionBlock {
-    display: block;
-    margin-top: 1rem;
-}
-
 details {
     margin-left: 1rem;
     margin-bottom: 1rem;
@@ -77,7 +72,7 @@ details {
     margin: 0;
 }
 
-footer {
+.pageFooter {
     padding: 1rem;
     text-align: center;
     border-top: 1px solid gray;
@@ -87,6 +82,11 @@ footer {
     text-shadow: 0 0 5px black;
 }
 
+.qFooter {
+    padding: 1rem;
+    text-align: center;
+}
+
 footer p {
     margin: 0;
     display: inline-block;
@@ -100,7 +100,7 @@ footer ul {
     list-style: none;
 }
 
-footer a {
+.pageFooter a {
     color: inherit;
 }
 
@@ -143,6 +143,15 @@ article {
     }
 }
 
+.questionBlock {
+    margin-top: 1rem;
+    max-width: 65ch;
+
+    details {
+        padding: 1rem;
+    }
+}
+
 .adminPanel {
     display: flex;
     border-style: solid;

templates/_footer.html.twig

@@ -1,4 +1,4 @@
-<footer>
+<footer class="pageFooter">
     <p>
         Suivez-nous sur :
     </p>

templates/base.html.twig

@@ -22,6 +22,7 @@
         <main>
             {% block main %}{% endblock %}
         </main>
+        {% block qFooter %}{%endblock%}
         {{ include('_footer.html.twig')}}
     </body>
 </html>

templates/home/faq.html.twig

@@ -3,29 +3,39 @@
 {% block title %}FAQ{% endblock %}
 
 {% block main %}
-    <div class="questionBlock">
-        <details>
-            <summary>En quoi consiste ce site?</summary>
-            <p>Ce site sert à vous aider à gagner en compétences dans la programmation web. Vous découvrirez de nouveaux langages,
-            des nouvelles techniques et autres par exemple.</p>
-        </details>
-        <details>
-            <summary>Par où commencer?</summary>
-            <p>Vous devriez vous créer un compte pour commencer. Un lien est disponible dans la barre de navigation.</p>
-        </details>
-        <details>
-            <summary>J'ai oublié mon mot de passe, comment le réinitialiser?</summary>
-            <p>Vous pouvez demander une réinitialisation dans la page de connexion. Après avoir saisi votre adresse email,
-            on vous enverra un mail avec un lien pour réintialiser le mot de passe.</p>
-        </details>
-        <details>
-            <summary>Comment débloquer de nouveaux chapitres?</summary>
-            <p>Le débloquage de chapitres se fait par la complétions d'autres chapitres. Cela vous permettra d'avoir un chemin
-            plus progressif et d'avoir plus de facilité à trouver des sujets de votre niveau.</p>
-        </details>
-        <details>
-            <summary>Est-ce que ce site est payant?</summary>
-            <p>Ce site, ainsi que toutes les fonctionnalités disponibles, sont 100% gratuit.</p>
-        </details>
-    </div>
+    <article>
+        <h1>FAQ</h1>
+        <section class="questionBlock">
+            <h2>Infos générales</h2>
+            <details>
+                <summary>En quoi consiste ce site?</summary>
+                <p>Ce site sert à vous aider à gagner en compétences dans la programmation web. Vous découvrirez de nouveaux langages,
+                des nouvelles techniques et autres par exemple.</p>
+            </details>
+            <details>
+                <summary>Par où commencer?</summary>
+                <p>Vous devriez vous créer un compte pour commencer. Un lien est disponible dans la barre de navigation. 
+                Créer un compte vous permettra de sauvegarder toute progression.</p>
+            </details>
+            <details>
+                <summary>J'ai oublié mon mot de passe, comment le réinitialiser?</summary>
+                <p>Vous pouvez demander une réinitialisation dans la page de connexion. Après avoir saisi votre adresse email,
+                on vous enverra un mail avec un lien pour réintialiser le mot de passe.</p>
+            </details>
+            <details>
+                <summary>Comment débloquer de nouveaux chapitres?</summary>
+                <p>Le débloquage de chapitres se fait par la complétions d'autres chapitres. Cela vous permettra d'avoir un chemin
+                plus progressif et d'avoir plus de facilité à trouver des sujets de votre niveau.</p>
+            </details>
+            <details>
+                <summary>Est-ce que ce site est payant?</summary>
+                <p>Ce site, ainsi que toutes les fonctionnalités disponibles, sont 100% gratuit.</p>
+            </details>
+        </section>
+    </article>
+{% endblock %}
+{% block qFooter %}
+<footer class="qFooter">
+    <p>Vous n'avez pas votre réponse? <a href="">Posez votre question ici</a></p>
+</footer>
 {% endblock %}