-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (120 loc) · 4.1 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon-32x32.png"
/>
<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<!--CSS Stylesheet-->
<link href="./style.css" rel="stylesheet" />
<title>Frontend Mentor | FAQ accordion</title>
</head>
<body>
<!-- Container for the SVG image -->
<div class="svg-container"></div>
<div class="container">
<main class="faq-container">
<div class="header">
<img
src="./assets/images/icon-star.svg"
alt="Star icon"
class="star-icon"
/>
<h1 class="main-title">FAQs</h1>
</div>
<section class="qna-section">
<div class="question-block">
<h2 class="question">
What is Frontend Mentor, and how will it help me?
</h2>
<img
src="assets/images/icon-plus.svg"
alt="Icon plus"
id="icon-collapse-1"
/>
<!--Here use Javascript-->
</div>
<p class="answer-block">
Frontend Mentor offers realistic coding challenges to help
developers improve their frontend coding skills with projects in
HTML, CSS, and JavaScript. It's suitable for all levels and ideal
for portfolio building.
</p>
</section>
<section class="qna-section">
<div class="question-block">
<h2 class="question">Is Frontend Mentor free?</h2>
<img
src="assets/images/icon-plus.svg"
alt="Icon plus"
id="icon-collapse-2"
/>
<!--Here use Javascript-->
</div>
<p class="answer-block">
Yes, Frontend Mentor offers both free and premium coding challenges,
with the free option providing access to a range of projects
suitable for all skill levels.
</p>
</section>
<section class="qna-section">
<div class="question-block">
<h2 class="question">
Can I use Frontend Mentor projects in my portfolio?
</h2>
<img
src="assets/images/icon-plus.svg"
alt="Icon plus"
id="icon-collapse-3"
/>
<!--Here use Javascript-->
</div>
<p class="answer-block">
Yes, you can use projects completed on Frontend Mentor in your
portfolio. It's an excellent way to showcase your skills to
potential employers!
</p>
</section>
<section class="qna-section">
<div class="question-block">
<h2 class="question">
How can I get help if I'm stuck on a Frontend Mentor challenge?
</h2>
<img
src="assets/images/icon-plus.svg"
alt="Icon plus"
id="icon-collapse-4"
/>
<!--Here use Javascript-->
</div>
<p class="answer-block">
The best place to get help is inside Frontend Mentor's Discord
community. There's a help channel where you can ask questions and
seek support from other community members.
</p>
</section>
</main>
<footer class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by
<a href="https://www.frontendmentor.io/profile/Hileene">Aline Behalal</a
>.
</footer>
</div>
<script src="./accordion.js"></script>
</body>
</html>