-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (70 loc) · 4.25 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
<!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">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | FAQ accordion</title>
</head>
<body>
<div class="accordion">
<div id = "accordion-logo"><img src = "assets/images/icon-star.svg"><h1>FAQs</h1></div>
<div class="accordion-item">
<!--onClick is used to link the HTML with the JavaScript-->
<button class="accordion-button" onclick="toggleAccordion(this)">
<img src = "assets/images/icon-plus.svg" class = "icon-expand" alt = "expanded icon"> <!-- Icon representation for expand icon-->
<img src = "assets/images/icon-minus.svg" class = "icon-collapse" alt = "collapsed icon" style = "display: none;"> <!--Icon representation for collapsed icon-->
<p class = "accordion-question"><b>What is Frontend Mentor, and how will it help me?</b></p>
</button>
<!--The 'nextElementSibling refers to this next snippet of code'-->
<div class="accordion-content">
<p class = "accordion-answer">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>
</div>
</div>
<div class="accordion-item">
<!--onClick is used to link the HTML with the JavaScript-->
<button class="accordion-button" onclick="toggleAccordion(this)">
<img src = "assets/images/icon-plus.svg" class = "icon-expand" alt = "expanded icon"> <!-- Icon representation for expand icon-->
<img src = "assets/images/icon-minus.svg" class = "icon-collapse" alt = "collapsed icon" style = "display: none;"> <!--Icon representation for collapsed icon-->
<p class = "accordion-question"><b>Is Frontend Mentor free?</b></p>
</button>
<div class="accordion-content">
<p class = "accordion-answer">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>
</div>
</div>
<div class="accordion-item">
<!--onClick is used to link the HTML with the JavaScript-->
<button class="accordion-button" onclick="toggleAccordion(this)">
<img src = "assets/images/icon-plus.svg" class = "icon-expand" alt = "expanded icon"> <!-- Icon representation for expand icon-->
<img src = "assets/images/icon-minus.svg" class = "icon-collapse" alt = "collapsed icon" style = "display: none;"> <!--Icon representation for collapsed icon-->
<p class = "accordion-question"><b>Can I use Frontend Mentor projects in my portfolio?</b></p>
</button>
<div class="accordion-content">
<p class = "accordion-answer">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>
</div>
</div>
<div class="accordion-item">
<!--onClick is used to link the HTML with the JavaScript-->
<button class="accordion-button" onclick="toggleAccordion(this)">
<img src = "assets/images/icon-plus.svg" class = "icon-expand" alt = "expanded icon"> <!-- Icon representation for expand icon-->
<img src = "assets/images/icon-minus.svg" class = "icon-collapse" alt = "collapsed icon" style = "display: none;"> <!--Icon representation for collapsed icon-->
<p><b>How can I get help if I'm stuck on a Frontend Mentor challenge?</b></p>
</button>
<div class="accordion-content">
<p class = "accordion-answer">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>
</div>
</div>
</div>
<footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io/challenges/faq-accordion-wyfFdeBwBz" target="_blank">Frontend Mentor</a>
Coded by <a href="https://github.com/Lolito-Lindsey-Official/faq-accordion" target="_blank">lolito-lindsey-official</a>
</footer>
<script src ="script.js"></script>
</body>
</html>