-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
69 lines (69 loc) · 3.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<title>Frontend Mentor | FAQ accordion</title>
<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">
<link rel="stylesheet" href="index.css">
</head>
<body>
<main class="faq">
<header>
<img class="faq__icon" src="images/icon-star.svg" alt="icon-star">
<h1 class="faq__title">FAQs</h1>
</header>
<section class="faq__section">
<article class="faq-item">
<div id="question1" class="faq-item__inline">
<h2 class="faq-item__question">What is Frontend Mentor, and how will it help me?</h2>
<img class="faq-item__icon" src="images/icon-plus.svg" alt="icon-plus">
</div>
<p class="faq-item__answer" data-question="question1">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>
</article>
<hr>
<article class="faq-item">
<div id="question2" class="faq-item__inline">
<h2 class="faq-item__question">Is Frontend Mentor free?</h2>
<img class="faq-item__icon" src="images/icon-plus.svg" alt="icon-plus">
</div>
<p class="faq-item__answer" data-question="question2">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>
</article>
<hr>
<article class="faq-item">
<div id="question3" class="faq-item__inline">
<h2 class="faq-item__question">Can I use Frontend Mentor projects in my portfolio?</h2>
<img class="faq-item__icon" src="images/icon-plus.svg" alt="icon-plus">
</div>
<p class="faq-item__answer" data-question="question3">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>
</article>
<hr>
<article class="faq-item">
<div id="question4" class="faq-item__inline">
<h2 class="faq-item__question">How can I get help if I'm stuck on a challenge?</h2>
<img class="faq-item__icon" src="images/icon-plus.svg" alt="icon-plus">
</div>
<p class="faq-item__answer" data-question="question4">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>
</article>
</section>
</main>
<script src="index.js"></script>
</body>
</html>