Skip to content

Commit ad01375

Browse files
utkarshcse2026utkarshcse2026
authored
Add files via upload
1 parent 39022c2 commit ad01375

File tree

3 files changed

+196
-0
lines changed

3 files changed

+196
-0
lines changed

‎FaqPage/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
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+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>FAQ</title>
9+
</head>
10+
<body>
11+
<h1>Frequently Asked Questions</h1>
12+
<div class="faq-container">
13+
<div class="faq active">
14+
<h3 class="faq-title">
15+
Why shouldn't we trust atoms?
16+
</h3>
17+
18+
<p class="faq-text">
19+
They make up everything
20+
</p>
21+
22+
<button class="faq-toggle">
23+
<i class="fas fa-chevron-down"></i>
24+
<i class="fas fa-times"></i>
25+
</button>
26+
</div>
27+
28+
<div class="faq">
29+
<h3 class="faq-title">
30+
What do you call someone with no body and no nose?
31+
</h3>
32+
<p class="faq-text">
33+
Nobody knows.
34+
</p>
35+
<button class="faq-toggle">
36+
<i class="fas fa-chevron-down"></i>
37+
<i class="fas fa-times"></i>
38+
</button>
39+
</div>
40+
41+
<div class="faq">
42+
<h3 class="faq-title">
43+
What's the object-oriented way to become wealthy?
44+
</h3>
45+
<p class="faq-text">
46+
Inheritance.
47+
</p>
48+
<button class="faq-toggle">
49+
<i class="fas fa-chevron-down"></i>
50+
<i class="fas fa-times"></i>
51+
</button>
52+
</div>
53+
54+
<div class="faq">
55+
<h3 class="faq-title">
56+
How many tickles does it take to tickle an octopus?
57+
</h3>
58+
<p class="faq-text">
59+
Ten-tickles!
60+
</p>
61+
<button class="faq-toggle">
62+
<i class="fas fa-chevron-down"></i>
63+
<i class="fas fa-times"></i>
64+
</button>
65+
</div>
66+
67+
<div class="faq">
68+
<h3 class="faq-title">
69+
What is: 1 + 1?
70+
</h3>
71+
<p class="faq-text">
72+
Depends on who are you asking.
73+
</p>
74+
<button class="faq-toggle">
75+
<i class="fas fa-chevron-down"></i>
76+
<i class="fas fa-times"></i>
77+
</button>
78+
</div>
79+
</div>
80+
<script src="script.js"></script>
81+
</body>
82+
</html>

‎FaqPage/script.js‎

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

‎FaqPage/style.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Muli', sans-serif;
9+
background-color: #f0f0f0;
10+
}
11+
12+
h1 {
13+
margin: 50px 0 30px;
14+
text-align: center;
15+
}
16+
17+
.faq-container {
18+
max-width: 600px;
19+
margin: 0 auto;
20+
}
21+
22+
.faq {
23+
background-color: transparent;
24+
border: 1px solid #9fa4a8;
25+
border-radius: 10px;
26+
margin: 20px 0;
27+
padding: 30px;
28+
position: relative;
29+
overflow: hidden;
30+
transition: 0.3s ease;
31+
}
32+
33+
.faq.active {
34+
background-color: #fff;
35+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
36+
}
37+
38+
.faq.active::before,
39+
.faq.active::after {
40+
content: '\f075';
41+
font-family: 'Font Awesome 5 Free';
42+
color: #2ecc71;
43+
font-size: 7rem;
44+
position: absolute;
45+
opacity: 0.2;
46+
top: 20px;
47+
left: 20px;
48+
z-index: 0;
49+
}
50+
51+
.faq.active::before {
52+
color: #3498db;
53+
top: -10px;
54+
left: -30px;
55+
transform: rotateY(180deg);
56+
}
57+
58+
.faq-title {
59+
margin: 0 35px 0 0;
60+
}
61+
62+
.faq-text {
63+
display: none;
64+
margin: 30px 0 0;
65+
}
66+
67+
.faq.active .faq-text {
68+
display: block;
69+
}
70+
71+
.faq-toggle {
72+
background-color: transparent;
73+
border: 0;
74+
border-radius: 50%;
75+
cursor: pointer;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
font-size: 16px;
80+
padding: 0;
81+
position: absolute;
82+
top: 30px;
83+
right: 30px;
84+
height: 30px;
85+
width: 30px;
86+
}
87+
88+
.faq-toggle:focus {
89+
outline: 0;
90+
}
91+
92+
.faq-toggle .fa-times {
93+
display: none;
94+
}
95+
96+
.faq.active .faq-toggle .fa-times {
97+
color: #fff;
98+
display: block;
99+
}
100+
101+
.faq.active .faq-toggle .fa-chevron-down {
102+
display: none;
103+
}
104+
105+
.faq.active .faq-toggle {
106+
background-color: #9fa4a8;
107+
}

0 commit comments

Comments
 (0)