-
Notifications
You must be signed in to change notification settings - Fork 351
/
faq.html
164 lines (138 loc) · 6.47 KB
/
faq.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>master-web-development</title>
<style>
#faq{
padding-top: 80px;
padding-top: 70px;
}
.faq-container {
max-width: 900px;
margin: 40px auto;
padding: 20px;
background-color: rgb(203, 203, 220);
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 2 10px 8px rgba(0, 0, 0, 0.1);
}
.faq-title {
text-align: center;
font-size: 1.8em;
color: #161515;
margin-bottom: 20px;
}
.faq {
margin-bottom: 15px;
}
.faq input[type="checkbox"] {
display: none;
}
.faq-question {
padding: 15px;
font-size: 1.2em;
background-color: #f8c5c5;
color: #000000;
border: none;
border-radius: 5px;
cursor: pointer;
/* display: block; */
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease;
}
.faq-question:hover {
background-color:#c03737;
}
.faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 15px;
background-color: #f3f1ef;
color: #000000;
border-left: 4px solid #0f0f10;
transition: all 0.6s ease;
}
.faq input[type="checkbox"]:checked ~ .faq-answer {
max-height: 150px;
padding: 15px;
}
.arrow {
margin-top: -3px;
display: inline-block;
width: 12px;
height: 12px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
transition: transform 0.3s ease;
}
/* Rotate arrow on FAQ open */
.faq input[type="checkbox"]:checked + label .arrow {
transform: rotate(225deg);
}
</style>
</head>
<body>
<!-- FAQ Section -->
<section id="faq">
<div class="faq-container">
<h1 class="faq-title" data-aos="fade-right">Frequently Asked Questions</h1>
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq1">
<label for="faq1" class="faq-question">1.What is the purpose of the master-web-development repository? <span class="arrow"></span></label>
<div class="faq-answer">
The repository is designed to help aspiring developers become ace Frontend Developers by providing various frontend projects.
</div>
</div>
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq2">
<label for="faq2" class="faq-question">2. What technologies does the master-web-development repository focus on? <span class="arrow"></span></label>
<div class="faq-answer">
It focuses on HTML, CSS, JavaScript, and Browser APIs such as localStorage and IndexDB.
</div>
</div>
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq3">
<label for="faq3" class="faq-question">3. How can the master-web-development repository help someone improve their frontend skills? <span class="arrow"></span></label>
<div class="faq-answer">
By offering hands-on projects that teach key frontend technologies,
it helps users practice and master skills needed for effective web development.
</div>
</div>
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq4">
<label for="faq4" class="faq-question">4.What is the goal of completing the projects in the master-web-development repository? <span class="arrow"></span></label>
<div class="faq-answer">
The goal is to become well-versed in fundamental frontend technologies, enabling users to build interactive and dynamic web applications.
</div>
</div>
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq5">
<label for="faq5" class="faq-question">5.Why is learning Browser APIs like localStorage and IndexDB important for frontend development? <span class="arrow"></span></label>
<div class="faq-answer">
Browser APIs like localStorage and IndexDB are essential for managing data in the browser, enabling features such as offline functionality and persistent user data storage.
</div>
</div>
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq6">
<label for="faq6" class="faq-question">6. What kind of projects can be found in the master-web-development repository? <span class="arrow"></span></label>
<div class="faq-answer">
The repository contains a variety of frontend projects that cover different aspects of web development,
from creating user interfaces with HTML and CSS to adding interactivity with JavaScript and using Browser APIs.
</div>
</div>
<div class="faq" data-aos="fade-right">
<input type="checkbox" id="faq7">
<label for="faq7" class="faq-question">7. How does the master-web-development repository help users understand JavaScript better? <span class="arrow"></span></label>
<div class="faq-answer">
By providing JavaScript-based projects, it allows users to practice writing scripts, understand event handling, manipulate the DOM, and use Browser APIs, thus deepening their understanding of JavaScript.
</div>
</div>
</div>
</section>
</body>
</html>