Merge pull request #25 from Yigaue/master

Final work on FAQs before the accident this morning
hng-tech · Apr 16, 2019 · 7c2790b · 7c2790b
2 parents 5b7bdec + a1cd4dc
commit 7c2790b
Showing 1 changed file with 131 additions and 28 deletions.
diff --git a/views/faqs.hbs b/views/faqs.hbs
@@ -24,7 +24,7 @@
         .faq-text{
             margin: 0;
             color: #11144C;
-            font-size: 18px;
+            font-size: 17px;
         }
 
         .faq-link{
@@ -47,6 +47,7 @@
 
         .faq-answers{
             font-size: 16px;
+            padding-right: 45px;
         }
 
         .pleft-1{
@@ -71,6 +72,7 @@
         }
         .base-color{
             color: #11144C;
+            font-size: 22px;
         }
 
         .faq-body{
@@ -116,70 +118,171 @@
 
 <body>
     {{> header }}
+     <section class="faq-body">
 
     <div id="faqs" class="container">
+
+
         <h1>Frequently Asked Questions</h1>
-        <section class="faq-body">
-         <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
-             <h3 class="base-color mbottom-0">
+
+
+        {{!-- WRITE ALL YOUR FAQS CODE WITHIN --}}
+         <!-- MY SECTION LEKIA  STARTS-->
+
+<button class="accordion"><h3 class="base-color mbottom-0">
                 What is DevAlert?
-             </h3>
+             </h3></button>
+<div class="panel">
+
+         <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
+
              <p class="faq-answers">
                 It is a platform that connects developers to remote jobs all over the globe.
              </p>
          </div>
-         <hr/>
-         <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
-            <h3 class="base-color mbottom-0">
+</div>
+
+<button class="accordion"><h3 class="base-color mbottom-0">
                 How do I apply to DevAlert?
-            </h3>
+            </h3></button>
+<div class="panel">
+  <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
+
             <p class="faq-answers">
                 Click on the register button and fill in your details. then wait for the confirmation message. subscribe to the newsletter to get the latest jobs.
             </p>
         </div>
-        <hr/>
-        <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
-            <h3 class="base-color mbottom-0">
+</div>
+
+<button class="accordion"><h3 class="base-color mbottom-0">
                 Why can't I register?
-            </h3>
+            </h3></button>
+<div class="panel">
+ <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
+
             <p class="faq-answers">
                 Try checking your internet connection and try again.
             </p>
         </div>
-        <hr/>
-        <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
-            <h3 class="base-color mbottom-0">
+</div>
+
+<button class="accordion"><h3 class="base-color mbottom-0">
                How can I apply to be an Agent?
-            </h3>
+            </h3></button>
+<div class="panel">
+ <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
+
             <p class="faq-answers">
                 Click on the register button and fill in your details. then wait for the confirmation message. subscribe to the newsletter to get the latest jobs.
             </p>
         </div>
-        <hr/>
-        <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
-            <h3 class="base-color mbottom-0">
+</div>
+<button class="accordion"> <h3 class="base-color mbottom-0">
                 How can I stop my subscription?
-            </h3>
+            </h3></button>
+<div class="panel">
+   <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
+
             <p class="faq-answers">
                 Click on profile and go to settings,then log out of the app.
             </p>
         </div>
-        <hr/>
-        <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
-            <h3 class="base-color mbottom-0">
-                How can I get an Agent?
-            </h3>
+</div>
+<button class="accordion"><h3 class="base-color mbottom-0">
+                How can I get an Agent?</h3></button>
+<div class="panel">
+ <div class="faq-box pleft-1 pbottom-1 mbottom-1 mtop-1">
+
             <p class="faq-answers">
                 Follow the button on the homepage, input your details and wait for the mail. after the mail wait for the instructions.                
             </p>
         </div>
-        <hr/>
+
+</div>
+      <br/>
+
+        <br/>
+
+        <br/>
         <p class="mt-1 mbottom-2 txt-c faq-text" style="color: black">
             Still got questions? <a href="/contact" class="faq-link">Contact us!</a> .
         </p>
      </section>
 
-    </div>>
+      </div>
+
+
+<br/>
+
+        <br/>
+
+        <br/>
+<script>
+var acc = document.getElementsByClassName("accordion");
+var i;
+
+for (i = 0; i < acc.length; i++) {
+  acc[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var panel = this.nextElementSibling;
+    if (panel.style.maxHeight){
+      panel.style.maxHeight = null;
+    } else {
+      panel.style.maxHeight = panel.scrollHeight + "px";
+    } 
+  });
+}
+</script>
+
+<style>
+.accordion {
+  background-color: #eee;
+  color: #444;
+  cursor: pointer;
+  padding-right: 20px;
+  width: 100%;
+  height: 80px;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  transition: 0.4s;
+}
+
+.active, .accordion:hover {
+  background-color: #ccc;
+}
+
+.accordion:after {
+  content: '\002B';
+  color: #777;
+  font-weight: bold;
+  float: right;
+  margin-left: 5px;
+}
+
+.active:after {
+  content: "\2212";
+}
+
+.panel {
+  padding: 0 18px;
+  background-color: white;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}
+</style>
+ <!-- MY SECTION LEKIA ENDS-->
+
+
+
+
+
+
+
+
+
 
     {{> footer}}
 </body>