Add FAQ page

DSC-Unilag · Jun 9, 2024 · 8ae214d · 8ae214d
1 parent 6809c55
commit 8ae214d
Show file tree

Hide file tree

Showing 8 changed files with 258 additions and 2 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -332,8 +332,62 @@ nav ul li a.active, nav ul li a:hover {
   color: #fff;
   cursor: pointer;
 }
-
-
+.hero .doodle {
+  position: absolute;
+  z-index: -1;
+}
+.hero .doodle:nth-child(1) {
+  top: 50px;
+  left: 7%;
+}
+.hero .doodle:nth-child(2) {
+  top: 200px;
+  right: 5%;
+}
+.faq-container {
+  max-width: 1000px;
+  margin: 0 auto 100px;
+}
+.faq-card {
+  padding: 15px 20px;
+  margin: 0 15px 15px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+.question-expand {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.question {
+  font-weight: bold;
+}
+.expand {
+  border-radius: 100%;
+  padding: 1.5px 2px 0 2px;
+  opacity: 0.8;
+  background-color: #000;
+  background-blend-mode: multiply;
+}
+.answer {
+  display: none;
+}
+.faq-card:nth-child(1), .faq-card:nth-child(5) {
+  background-color: #B3CEFB;
+  border: 1px #b4d1ff solid;
+}
+.faq-card:nth-child(2), .faq-card:nth-child(6) {
+  background-color: #ADDCBC;
+  border: 1px #75ffa3 solid;
+}
+.faq-card:nth-child(3), .faq-card:nth-child(7) {
+  background-color: #FDDDA6;
+  border: 1px #ffb73b solid;
+}
+.faq-card:nth-child(4), .faq-card:nth-child(8) {
+  background-color: #FBD9D7;
+  border: 1px #ffb4b0 solid;
+}
 /* html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

diff --git a/faq.html b/faq.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>FAQ - DSC UNILAG</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="author" content="DSC University of Lagos"/>
+    <meta name="description" content="Developer Student Clubs (DSC) UNILAG is a Google Developers program for university students to learn mobile and web development skills.">
+    <meta name="keywords" content="dsc,dsc unilag,programming in unilag, clubs in unilag, google developers,programming, extra-curriculars, sub saharan africa, computer science"/>
+    <meta name="theme-color" content="#2F5BE7"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="manifest" href="manifest.json"/>
+    <link rel="icon" href="images/icon3.png" type="image/png"/>
+    <link href='https://fonts.googleapis.com/css?family=Google+Sans:400,500,700|Material+Icons' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/styles.css">   
+</head>
+<body>
+    <header>
+        <a class="header-logo" href="index.html">
+            <img src="images/assets/hero/gdsc_logo.svg" width="200" alt="DSC icon">
+        </a>
+        <ul class="header-links">
+            <li class="header-link"><a class="header-link" href="#about">About</a></li>
+            <li class="header-link"><a href="#technologies" class="header-link">Programs</a></li>
+            <li class="header-link"><a href="learn.html" class="header-link">Events</a></li>
+            <li class="header-link"><a href="#workshops" class="header-link">Blogs</a></li>
+            <li class="header-link"><a href="#team" class="header-link">Team</a></li>
+            <li class="header-link"><a href="faq.html" class="header-link">FAQs</a></li>
+        </ul>
+        <a href="http://dscunilag.dev/join" class="header-cta" rel="noreferrer" target="_blank">Join GDSC</a>
+        <span class="menubar">&#9776;</span>
+    </header>
+
+    <nav>
+        <span class="close">&#10006;</span>
+        <ul>
+            <li><a href="#about">About</a></li>
+            <li><a href="#technologies">Programs</a></li>
+            <li><a href="learn.html">Events</a></li>
+            <li><a href="#workshops">Blogs</a></li>
+            <li><a href="#team">Team</a></li>
+            <li><a href="faq.html">FAQs</a></li>
+        </ul>
+    </nav>
+
+    <div class="hero">
+        <img class="doodle" src="images/assets/faq/image 4.svg" alt="">
+        <img class="doodle" src="images/assets/faq/image 5.svg" alt="">
+        <div class="hero-text-container">
+            <h1>Frequently Asked Questions</h1>
+            <p class="sub-title">
+                Ask everything you need to know about our community, 
+                we are ready to answer all your questions
+            </p>
+        </div>
+    </div>
+
+    <div class="faq-container">
+        <div class="faq-card">
+            <div class="question-expand">
+                <span class="question">This is a question</span>
+                <span class="expand">
+                    <img src="images/assets/faq/ic_round-plus.svg" alt="">
+                </span>
+            </div>
+            <div class="answer">
+                This is an answer
+            </div>
+        </div>
+        <div class="faq-card">
+            <div class="question-expand">
+                <span class="question">This is a question</span>
+                <span class="expand">
+                    <img src="images/assets/faq/ic_round-plus.svg" alt="">
+                </span>
+            </div>
+            <div class="answer">
+                This is an answer
+            </div>
+        </div>
+        <div class="faq-card">
+            <div class="question-expand">
+                <span class="question">This is a question</span>
+                <span class="expand">
+                    <img src="images/assets/faq/ic_round-plus.svg" alt="">
+                </span>
+            </div>
+            <div class="answer">
+                This is an answer
+            </div>
+        </div>
+        <div class="faq-card">
+            <div class="question-expand">
+                <span class="question">This is a question</span>
+                <span class="expand">
+                    <img src="images/assets/faq/ic_round-plus.svg" alt="">
+                </span>
+            </div>
+            <div class="answer">
+                This is an answer
+            </div>
+        </div>
+        <div class="faq-card">
+            <div class="question-expand">
+                <span class="question">This is a question</span>
+                <span class="expand">
+                    <img src="images/assets/faq/ic_round-plus.svg" alt="">
+                </span>
+            </div>
+            <div class="answer">
+                This is an answer
+            </div>
+        </div>
+        <div class="faq-card">
+            <div class="question-expand">
+                <span class="question">This is a question</span>
+                <span class="expand">
+                    <img src="images/assets/faq/ic_round-plus.svg" alt="">
+                </span>
+            </div>
+            <div class="answer">
+                This is an answer
+            </div>
+        </div>
+        <div class="faq-card">
+            <div class="question-expand">
+                <span class="question">This is a question</span>
+                <span class="expand">
+                    <img src="images/assets/faq/ic_round-plus.svg" alt="">
+                </span>
+            </div>
+            <div class="answer">
+                This is an answer
+            </div>
+        </div>
+        <div class="faq-card">
+            <div class="question-expand">
+                <span class="question">This is a question</span>
+                <span class="expand">
+                    <img src="images/assets/faq/ic_round-plus.svg" alt="">
+                </span>
+            </div>
+            <div class="answer">
+                This is an answer
+            </div>
+        </div>
+
+    </div>
+    <script src="js/custom.js"></script>
+</body>
+</html>
diff --git a/images/assets/faq/Group 35023.svg b/images/assets/faq/Group 35023.svg
diff --git a/images/assets/faq/ic_round-plus.svg b/images/assets/faq/ic_round-plus.svg
diff --git a/images/assets/faq/image 4.svg b/images/assets/faq/image 4.svg
diff --git a/images/assets/faq/image 5.svg b/images/assets/faq/image 5.svg
diff --git a/index.html b/index.html
@@ -37,6 +37,7 @@
             <li class="header-link"><a href="learn.html" class="header-link">Events</a></li>
             <li class="header-link"><a href="#workshops" class="header-link">Blogs</a></li>
             <li class="header-link"><a href="#team" class="header-link">Team</a></li>
+            <li class="header-link"><a href="faq.html" class="header-link">FAQs</a></li>
         </ul>
         <a href="http://dscunilag.dev/join" class="header-cta" rel="noreferrer" target="_blank">Join GDSC</a>
         <span class="menubar">&#9776;</span>
@@ -50,6 +51,7 @@
             <li><a href="learn.html">Events</a></li>
             <li><a href="#workshops">Blogs</a></li>
             <li><a href="#team">Team</a></li>
+            <li><a href="faq.html">FAQs</a></li>
         </ul>
     </nav>
 

diff --git a/js/custom.js b/js/custom.js
@@ -24,6 +24,29 @@ document.addEventListener('click', function(e) {
 		console.log('=======')
 	}
 })
+faqs = document.querySelectorAll("faq-card")
+
+
+// Select the FAQ container
+const faqContainer = document.querySelector('.faq-container');
+
+// Select all question-expand elements within the FAQ container
+const questionExpandElements = faqContainer.querySelectorAll('.question-expand');
+
+// Add event listeners to each question-expand element
+questionExpandElements.forEach(item => {
+	item.addEventListener('click', () => {
+		const answer = item.nextElementSibling;
+
+		if (answer) {
+			if (answer.style.display === 'block') {
+				answer.style.display = 'none';
+			} else {
+				answer.style.display = 'block';
+			}
+		}
+	});
+});
 
 // $(window).on("load", function() {
 // 	"use strict";