/
index.html
133 lines (131 loc) · 4.04 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
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="FAQ Accordion card">
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Godfred Gameli | FAQ Accordion Card</title>
</head>
<body>
<!-- card component -->
<div class="content-wrapper container">
<div class="row">
<!-- image wrapper -->
<div class="col-md-6 image-wrapper">
<img src="images/illustration-box-desktop.svg" alt="" class="box" />
<img
src="images/illustration-woman-online-desktop.svg"
alt=""
class="woman"
/>
</div>
<!-- FAQ wrapper -->
<div class="col-md-6 faq-wrapper">
<h1>FAQ</h1>
<div class="faq">
<p class="question" id="first">
How many team members can I invite?
<img
src="images/icon-arrow-down.svg"
alt="arrow"
class="arrow1"
/>
</p>
<p class="answer one">
You can invite up to 2 additional users on the Free plan. There is
no limit on team members for the Premium plan.
</p>
</div>
<div class="faq">
<p class="question" id="second">
What is the maximum file upload size?
<img
src="images/icon-arrow-down.svg"
alt="arrow"
class="arrow2"
/>
</p>
<p class="answer two">
No more than 2GB. All files in your account must fit your allotted
storage space.
</p>
</div>
<div class="faq">
<p class="question" id="third">
How do I reset my password?
<img
src="images/icon-arrow-down.svg"
alt="arrow"
class="arrow3"
/>
</p>
<p class="answer three">
Click “Forgot password” from the login page or “Change password”
from your profile page. A reset link will be emailed to you.
</p>
</div>
<div class="faq">
<p class="question" id="forth">
Can I cancel my subscription?
<img
src="images/icon-arrow-down.svg"
alt="arrow"
class="arrow4"
/>
</p>
<p class="answer four">
Yes! Send us a message and we’ll process your request no questions
asked.
</p>
</div>
<div class="faq">
<p class="question" id="fifth">
Do you provide additional support?
<img
src="images/icon-arrow-down.svg"
alt="arrow"
class="arrow5"
/>
</p>
<p class="answer five">
Chat and email support is available 24/7. Phone lines are open
during normal business hours.
</p>
</div>
</div>
</div>
</div>
<!-- Footer section -->
<footer class="attribution">
Challenge by
<a
href="https://www.frontendmentor.io?ref=challenge"
target="_blank"
rel="noopener"
>Frontend Mentor</a
>. Coded by
<a
href="https://www.Github.com/Godfredgameli"
target="_blank"
rel="noopener"
>
Godfred Gameli</a
>.
</footer>
<script src="script.js"></script>
</body>
</html>