-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (96 loc) · 4.22 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
<!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">
<link rel="stylesheet" href="stylesheet.css">
<!-- <script type="" src=""></script> -->
<title>Frontend Mentor | FAQ accordion</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<!-- <script src="./script.js"></script> -->
<main class="card card--BRadius_16px">
<div class="card__title"><img src="assets/images/icon-star.svg" alt="" class="card__title__img"><h1 class="card__title__h1 card__title__h1--FSize3rem">FAQs</h1></div>
<div class="card__content">
<div class="card__content__list" tabindex="0">
<div class="card__content__list__title"><h2>What is Frontend Mentor, and how will it help me?</h2> <img src="assets/images/icon-plus.svg" alt=""></div>
<div class="card__content__list__text">
<p>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="card__content__list" tabindex="0">
<div class="card__content__list__title"><h2>Is Frontend Mentor free?</h2><img src="assets/images/icon-plus.svg" alt=""></div>
<!-- <div class="card__content__list__title"><a href=""><h2>Is Frontend Mentor free?</h2><img src="assets/images/icon-plus.svg" alt=""></a></div> -->
<div class="card__content__list__text">
<p>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="card__content__list" tabindex="0">
<div class="card__content__list__title"><h2>Can I use Frontend Mentor projects in my portfolio?</h2><img src="assets/images/icon-plus.svg" alt=""></div>
<div class="card__content__list__text">
<p> 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="card__content__list" tabindex="0">
<div class="card__content__list__title"><h2>How can I get help if I'm stuck on a Frontend Mentor challenge?</h2><img src="assets/images/icon-plus.svg" alt=""></div>
<div class="card__content__list__text">
<p>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>
</main>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Kofi K</a>.
</div>
<!-- <script>
var acc = document.getElementsByClassName("card__content__list__title");
var i;
// alert(acc);
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
}
else {
panel.style.display = "block";
}
});
}
</script> -->
<script>
var list=document.querySelectorAll(".card__content__list");
for (j=0;j<list.length;j++){
list[j].addEventListener("click",toggle)
list[j].addEventListener("keydown",toggle_withEnterKey)
function toggle() {
this.classList.toggle("active");
}
// fcn below identifies and uses the Enter key to toggle the content in each list.
function toggle_withEnterKey(event) {
let key=event.key;
// console.log(key);
if (key==="Enter"){
toggle.call(this);
}
}
};
</script>
</body>
</html>