Skip to content

Commit ce7519f

Browse files
tajulafreentajulafreen
authored
Merge pull request #26 from tajulafreen/FAQ_Application
50Projects-HTML-CSS-JavaScript : Faq application
2 parents 8ae8168 + 09eebee commit ce7519f

File tree

4 files changed

+218
-1
lines changed

4 files changed

+218
-1
lines changed

‎README.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,18 @@ In order to run this project you need:
260260
<p>Analog Watch is a visually appealing and functional timekeeping tool built using HTML, CSS, and JavaScript. This project features a classic analog clock design with distinct hour, minute, and second hands. The clock displays the current time with real-time updates, and its stylish design includes subtle shadowing and color adjustments to enhance its aesthetic appeal. The clock’s hands are dynamically styled with CSS for a modern and engaging look.</p>
261261
<ul>
262262
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/AnalogWatch/">Live Demo</a></li>
263-
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/AnalogWatch/Calculator">Source</a></li>
263+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/AnalogWatch">Source</a></li>
264+
</ul>
265+
</details>
266+
</li>
267+
268+
<li>
269+
<details>
270+
<summary>FAQ Application</summary>
271+
<p>The FAQ Application is a responsive web-based tool designed to provide users with quick and easy access to frequently asked questions and their answers. Built with HTML, CSS, and JavaScript, this project showcases a clean and intuitive interface that allows users to expand and collapse answers with a simple click.</p>
272+
<ul>
273+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/FAQApplication/">Live Demo</a></li>
274+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/FAQApplication">Source</a></li>
264275
</ul>
265276
</details>
266277
</li>

‎Source-Code/FAQApplication/index.html

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

‎Source-Code/FAQApplication/script.js

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

‎Source-Code/FAQApplication/style.css

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
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: linear-gradient(to right, #26265a, #2f1532);
10+
color: white;
11+
background-attachment: fixed;
12+
-ms-overflow-style: none; /* IE and Edge */
13+
scrollbar-width: none; /* Firefox */
14+
}
15+
16+
section {
17+
justify-items: center;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
margin: auto;
22+
}
23+
24+
.title {
25+
font-size: 35px;
26+
margin: 40px 0;
27+
color: rgb(234, 209, 231);
28+
}
29+
30+
.faq {
31+
max-width: 700px;
32+
margin-top: 20px;
33+
padding: 20px;
34+
border: 2px solid greenyellow;
35+
cursor: pointer;
36+
border-radius: 15px;
37+
}
38+
39+
.question {
40+
display: flex;
41+
justify-content: space-between;
42+
align-items: center;
43+
}
44+
45+
h3 {
46+
font-size: 25px;
47+
color: rgb(234, 209, 231);
48+
}
49+
50+
.answer {
51+
max-height: 0;
52+
overflow: hidden;
53+
transition: max-height 1.4s ease;
54+
color: rgb(191, 253, 233);
55+
}
56+
57+
.answer p {
58+
padding-top: 20px;
59+
line-height: 1.6;
60+
font-size: 20px;
61+
}
62+
63+
.faq.active .answer {
64+
max-height: 300px;
65+
animation: fade 1s ease-in-out;
66+
}
67+
68+
i {
69+
transition: transform 0.5s ease-in;
70+
color: yellow;
71+
}
72+
73+
.faq.active i {
74+
transform: rotate(180deg);
75+
}
76+
77+
@keyframes fade {
78+
from {
79+
opacity: 0;
80+
transform: translateY(-10px);
81+
}
82+
83+
to {
84+
opacity: 1;
85+
transform: translateY(0);
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+
} */
100+
101+
::-webkit-scrollbar {
102+
width: 0;
103+
height: 0;
104+
}
105+
106+
body::-webkit-scrollbar {
107+
display: none; /* Safari and Chrome */
108+
}

0 commit comments

Comments
 (0)