-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (153 loc) · 7.6 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!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">
<link rel="stylesheet" href="./reset.css">
<script type="module" src="script.js" defer></script>
<title>frontendmentor | FAQ card</title>
</head>
<body>
<section class="faq">
<section class="image-wrapping">
<div class="main-image-wrapping">
<picture class="woman-standing-wrapping">
<source media="(min-width: 1109px)" srcset="./assets/images/illustration-woman-online-desktop.svg">
<source media="(max-width: 1109px)" srcset="./assets/images/illustration-woman-online-mobile.svg" id="mobile-image">
<img src="./assets/images/illustration-woman-online-desktop.svg" alt="woman standing in front of screen" >
</picture>
<picture class="shadow-image-wrapping">
<source media="(min-width: 1109px)" srcset="./assets/images/bg-pattern-desktop.svg">
<source media="(max-width: 1109px)" srcset="./assets/images/bg-pattern-mobile.svg">
<img src="./assets/images/bg-pattern-desktop.svg" alt="shadow of image">
</picture>
</div>
<img src="./assets/images/illustration-box-desktop.svg" alt="box ilustration" class="image-box">
</section>
<section class="text-container">
<h2 class="heading">FAQ</h2>
<div class="item-text-container">
<ul class="list">
<li class="item">
<section class="item-summary">
<p class="question">
How many team members can I invite?
</p>
<div class="arrow-wrap">
<img src="./assets/images/icon-arrow-down.svg" alt="" class="arrow">
</div>
</section>
<section class="detail">
You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.
</section>
</li>
</ul>
<ul class="list">
<li class="item">
<section class="item-summary">
<p class="question">
What is the maximum file upload size?
</p>
<div class="arrow-wrap">
<img src="./assets/images/icon-arrow-down.svg" alt="" class="arrow">
</div>
</section>
<section class="detail">
No more than 2GB. All files in your account must fit your allotted storage space.
</section>
</li>
</ul>
<ul class="list">
<li class="item">
<section class="item-summary">
<p class="question">
How do I reset my password?
</p>
<div class="arrow-wrap">
<img src="./assets/images/icon-arrow-down.svg" alt="" class="arrow">
</div>
</section>
<section class="detail">
Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you. It
</section>
</li>
</ul>
<ul class="list">
<li class="item">
<section class="item-summary">
<p class="question">
Can I cancel my subscription?
</p>
<div class="arrow-wrap">
<img src="./assets/images/icon-arrow-down.svg" alt="" class="arrow">
</div>
</section>
<section class="detail">
Yes! Send us a message and we’ll process your request no questions asked.
</section>
</li>
</ul>
<ul class="list">
<li class="item">
<section class="item-summary">
<p class="question">
Do you provide additional support?
</p>
<div class="arrow-wrap">
<img src="./assets/images/icon-arrow-down.svg" alt="" class="arrow">
</div>
</section>
<section class="detail">
Chat and email support is available 24/7. Phone lines are open during normal business hours.
</section>
</li>
</ul>
</div>
<div id="form">
<form action="">
<p>send me your questions below, we will answer your question quickly</p>
<div class="name-wrap">
<img src="./assets/icon/icons8-person-30.png" alt="" >
<input type="text" id="name" required autocomplete="off">
<label for="name">name</label>
<img src="./assets/icon/icons8-checkmark.svg" alt="">
</div>
<div class="email-wrap">
<img src="./assets/icon/icons8-mail-48.png" alt="">
<input type="email" id="email" required autocomplete="off">
<label for="email">email</label>
<p class="error">please fill correct email</p>
<img src="./assets/icon/icons8-checkmark.svg" alt="">
</div>
<div class="comments-wrap">
<img src="./assets/icon/icons8-question-mark-64.png" alt="">
<input type="text" id="area" required autocomplete="off">
<label for="area">question</label>
<img src="./assets/icon/icons8-checkmark.svg" alt="">
</div>
<div class="button">
<button type="reset">reset</button>
<button type="submit">submit</button>
</div>
</form>
</div>
<span id="aks">still get confusing?</span>
</section>
</section>
<section class="thanks">
<div class="image">
<img src="./assets/icon/stripy-180-hd.png" alt="" width="100">
</div>
<div class="text">
<img src="./assets/images/illustration-woman-online-mobile.svg" alt="">
<span>- submited 1 sec ago</span>
<p>thank you <span class="name"></span> for asked ,wi'll send our answer to <span class="mail"></span> sooner</p>
<br>
</div>
</section>
</body>
</html>