General-Questions

revengemiroz · May 19, 2020 · 405fe3e · 405fe3e
1 parent 64185a9
commit 405fe3e
Show file tree

Hide file tree

Showing 3 changed files with 224 additions and 0 deletions.
diff --git a/General-Questions/css/index.css b/General-Questions/css/index.css
@@ -0,0 +1,100 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
+
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    background-color: #f1f5f8;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container{
+    margin-top: 3.5em;
+    /* border: 2px solid green; */
+}
+
+.container>p{
+    color: #c59d5f;
+    font-size: 2.5rem;
+    text-align: center;
+    font-family: 'Great Vibes', cursive;
+    font-weight: 900;
+}
+
+section{
+    display: flex;
+    flex-direction: column;
+    width: 550px;
+}
+
+
+article{
+    font-family: 'Roboto',sans-serif;
+    background-color: white;
+    margin-top: 2em;
+
+    padding: 2em 1.2em 1.7em 1.2em;
+    border-radius: 10px;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
+
+.question{
+    display: flex;
+    justify-content: space-between;
+    font-size: 1.1rem;
+    letter-spacing: 0.2em;
+    border-bottom: none;
+    padding-bottom: 1em;
+}
+
+.question>p{
+    font-weight: 400;
+    color: #102a42;
+}
+
+.answer{
+    display: none;
+    margin-top: 1.3em;
+    color: #6a849e;
+    max-width: 500px;
+    line-height: 1.5em;
+}
+
+i{
+    color: #c59d5f;
+    font-size: 1.5rem;
+    cursor: pointer;
+}
+
+.minus{
+    display: none;
+}
+
+.plus{
+    display: block;
+}
+
+@media (max-width:650px){
+    section{
+        width: 430px;
+    }
+}
+
+@media (max-width:450px){
+    section{
+        width: 390px;
+    }
+}
+
+@media (max-width:400px){
+    section{
+        width: 350px;
+    }
+}
diff --git a/General-Questions/index.html b/General-Questions/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>General Question</title>
+    <link rel="stylesheet" href="./css/index.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
+</head>
+
+<body>
+
+    <div class="container">
+
+        <p>General Questions</p>
+        <section>
+            <article class="first">
+                <div class="question">
+                    <p>Do You Accept All Major Credit Cards?</p>
+
+                    <div class="icons">
+                        <span class="minus">
+                            <i class="far fa-minus-square"></i>
+                        </span>
+
+                        <span class="plus">
+                            <i class="far fa-plus-square"></i>
+                        </span>
+                    </div>
+                </div>
+
+                <div class="answer">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolore illo dolores quia nemo
+                        doloribus quaerat, magni numquam repellat reprehenderit.</p>
+                </div>
+            </article>
+
+            <article class="second">
+                <div class="question">
+                    <p>Do You Suppport Local Farmers?</p>
+
+                    <div class="icons">
+                        <span class="minus">
+                            <i class="far fa-minus-square"></i>
+                        </span>
+
+                        <span class="plus">
+                            <i class="far fa-plus-square"></i>
+                        </span>
+                    </div>
+                </div>
+
+                <div class="answer">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolore illo dolores quia nemo
+                        doloribus quaerat, magni numquam repellat reprehenderit.</p>
+                </div>
+            </article>
+
+            <article class="third">
+                <div class="question">
+                    <p>Do You Use Organic Ingredients?</p>
+
+                    <div class="icons">
+                        <span class="minus">
+                            <i class="far fa-minus-square"></i>
+                        </span>
+
+                        <span class="plus">
+                            <i class="far fa-plus-square"></i>
+                        </span>
+                    </div>
+                </div>
+
+                <div class="answer">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolore illo dolores quia nemo
+                        doloribus quaerat, magni numquam repellat reprehenderit.</p>
+                </div>
+            </article>
+        </section>
+    </div>
+
+
+</body>
+<script src="index.js"></script>
+
+</html>
diff --git a/General-Questions/index.js b/General-Questions/index.js
@@ -0,0 +1,37 @@
+const minus = document.querySelectorAll('.minus')
+const plus = document.querySelectorAll('.plus')
+const icons = document.querySelectorAll('.icons')
+
+plus.forEach(p => {
+    p.style.display = 'block'
+})
+
+icons.forEach(i => {
+    console.log(i)
+
+    i.addEventListener('click', () => {
+
+        const plus = i.querySelector('.plus')
+        const minus = i.querySelector('.minus')
+
+
+        console.log(plus)
+
+        if (plus.style.display == 'block') {
+            i.parentNode.style.borderBottom = '1px solid #a0c5e8'
+            plus.style.display = 'none'
+            minus.style.display = 'block'
+            const parent = i.parentElement
+            parent.nextElementSibling.style.display = 'block'
+        }
+        else {
+            i.parentNode.style.borderBottom = 'none'
+
+            plus.style.display = 'block'
+            minus.style.display = 'none'
+            const parent = i.parentElement
+            parent.nextElementSibling.style.display = 'none'
+        }
+    })
+})
+