Skip to content

Commit 0547e75

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #136 from khushi-purwar/khushiP
FAQ Application
2 parents af1e38c + 5b8c34b commit 0547e75

File tree

6 files changed

+222
-0
lines changed

6 files changed

+222
-0
lines changed

‎FAQ Application/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# FAQ Accordion
2+
3+
## Description
4+
A accordion is a useful way to squeeze lots of page content into a small space.
5+
6+
## Use of this Project
7+
Generally, Frequently Asked Questions (FAQs) section is made with the help of accordion.
8+
9+
## Stacks Used
10+
* JavaScript
11+
* HTML & CSS
12+
13+
## ScreenShot
14+
15+
<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/khushiP/FAQ%20Application/ScreenShots/ss1.png" />
16+
17+
<img src="https://github.com/khushi-purwar/Web-dev-mini-projects/blob/khushiP/FAQ%20Application/ScreenShots/ss2.png" />

‎FAQ Application/ScreenShots/ss1.png

1.8 MB
Loading

‎FAQ Application/ScreenShots/ss2.png

1.88 MB
Loading

‎FAQ Application/index.html

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>FAQ Application</title>
8+
9+
<!-- font awesome cdn -->
10+
<link
11+
rel="stylesheet"
12+
href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
13+
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
14+
crossorigin="anonymous"
15+
/>
16+
17+
<link rel="stylesheet" href="style.css" />
18+
</head>
19+
20+
<body>
21+
<section>
22+
<h1 class="title">FAQ ACCORDION</h1>
23+
24+
<div class="faq">
25+
<div class="question">
26+
<h3>1. What are the prerequisites for the training ?</h3>
27+
<i class="fas fa-chevron-down"></i>
28+
</div>
29+
<div class="answer">
30+
<p>
31+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, vitae
32+
officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum quidem
33+
dolorem commodi laborum possimus voluptatibus quod minus, id ipsum quo
34+
ducimus!
35+
</p>
36+
</div>
37+
</div>
38+
<div class="faq">
39+
<div class="question">
40+
<h3>2. When can I start my training ?</h3>
41+
<i class="fas fa-chevron-down"></i>
42+
</div>
43+
<div class="answer">
44+
<p>
45+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, vitae
46+
officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum quidem
47+
dolorem commodi laborum possimus voluptatibus quod minus, id ipsum quo
48+
ducimus!
49+
</p>
50+
</div>
51+
</div>
52+
<div class="faq">
53+
<div class="question">
54+
<h3>3. What will be the timings of the training ?</h3>
55+
<i class="fas fa-chevron-down"></i>
56+
</div>
57+
<div class="answer">
58+
<p>
59+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, vitae
60+
officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum quidem
61+
dolorem commodi laborum possimus voluptatibus quod minus, id ipsum quo
62+
ducimus!
63+
</p>
64+
</div>
65+
</div>
66+
<div class="faq">
67+
<div class="question">
68+
<h3>4. Will I get a hard copy of the certificate ?</h3>
69+
<i class="fas fa-chevron-down"></i>
70+
</div>
71+
<div class="answer">
72+
<p>
73+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, vitae
74+
officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum quidem
75+
dolorem commodi laborum possimus voluptatibus quod minus, id ipsum quo
76+
ducimus!
77+
</p>
78+
</div>
79+
</div>
80+
<div class="faq">
81+
<div class="question">
82+
<h3>5. What are the benifits of this training ?</h3>
83+
<i class="fas fa-chevron-down"></i>
84+
</div>
85+
<div class="answer">
86+
<p>
87+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, vitae
88+
officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum quidem
89+
dolorem commodi laborum possimus voluptatibus quod minus, id ipsum quo
90+
ducimus!
91+
</p>
92+
</div>
93+
</div>
94+
</section>
95+
<script src="script.js"></script>
96+
</body>
97+
</html>
98+

‎FAQ Application/script.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const faqs = document.querySelectorAll('.faq');
2+
3+
faqs.forEach((faq) => {
4+
faq.addEventListener('click', () => {
5+
faq.classList.toggle("active");
6+
});
7+
})
8+

‎FAQ Application/style.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Times New Roman", Times, serif;
9+
background: url("https://cdn.searchenginejournal.com/wp-content/uploads/2018/09/25-of-the-Best-Examples-of-Effective-FAQ-Pages-1520x800.png");
10+
color: white;
11+
background-repeat: no-repeat;
12+
background-size: cover;
13+
background-attachment: fixed;
14+
}
15+
16+
section {
17+
width: 80%;
18+
margin: 0 -100px;
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
margin-bottom: 20px;
23+
}
24+
25+
.title {
26+
font-size: 40px;
27+
margin: 40px 0;
28+
color: rgb(255, 103, 235);
29+
}
30+
31+
.faq {
32+
max-width: 700px;
33+
margin-top: 20px;
34+
padding: 20px;
35+
border: 2px solid greenyellow;
36+
cursor: pointer;
37+
border-radius: 15px;
38+
}
39+
40+
.question {
41+
display: flex;
42+
justify-content: space-between;
43+
align-items: center;
44+
}
45+
46+
h3 {
47+
font-size: 25px;
48+
color: rgb(255, 191, 191);
49+
}
50+
51+
.answer {
52+
max-height: 0;
53+
overflow: hidden;
54+
transition: max-height 1.4s ease;
55+
color: rgb(191, 253, 233);
56+
}
57+
58+
.answer p {
59+
padding-top: 20px;
60+
line-height: 1.6;
61+
font-size: 20px;
62+
}
63+
64+
.faq.active .answer {
65+
max-height: 300px;
66+
animation: fade 1s ease-in-out;
67+
}
68+
69+
.faq.active i {
70+
transform: rotate(180deg);
71+
}
72+
73+
i {
74+
transition: transform 0.5s ease-in;
75+
color: yellow;
76+
}
77+
78+
@keyframes fade {
79+
from {
80+
opacity: 0;
81+
transform: translateY(-10px);
82+
}
83+
to {
84+
opacity: 1;
85+
transform: translateY(0px);
86+
}
87+
}
88+
89+
@media screen and (max-width: 768px) {
90+
section {
91+
margin: 0 auto;
92+
}
93+
}
94+
95+
@media screen and (max-width: 1024px) {
96+
section {
97+
margin: 0 auto;
98+
}
99+
}

0 commit comments

Comments
 (0)