-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
246 lines (235 loc) · 9.33 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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
property="og:title"
content="Results summary component | Frontend Mentor | Alamin"
/>
<meta
name="description"
content="Check out my solution for the FrontendMentor Results Summary Component challenge - a responsive web page with a dark mode toggle feature built with HTML, CSS, and JavaScript."
/>
<meta
property="og:description"
content="Check out my solution for the FrontendMentor Results Summary Component challenge - a responsive web page with a dark mode toggle feature built with HTML, CSS, and JavaScript."
/>
<meta
property="og:image"
content="https://raw.githubusercontent.com/CodeWithAlamin/Results-summary-component/main/screenshots/Screenshot%20compared%20-%20Frontend%20Mentor%20Results%20summary%20component.png"
/>
<meta
property="og:url"
content="https://result-summary-alamin.netlify.app/"
/>
<meta name="author" content="Alamin | codpapa360" />
<meta
name="keywords"
content="FrontendMentor, Results Summary Component, Responsive web design, HTML, CSS, JavaScript, Sass, Dark mode toggle feature, Front-end development, User experience, Accessibility"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="Results summary component | Frontend Mentor | Alamin"
/>
<meta
name="twitter:site"
content="@https://result-summary-alamin.netlify.app/"
/>
<meta
name="twitter:description"
content="Check out my solution for the FrontendMentor Results Summary Component challenge - a responsive web page with a dark mode toggle feature built with HTML, CSS, and JavaScript."
/>
<meta
name="twitter:image"
content="https://raw.githubusercontent.com/CodeWithAlamin/Results-summary-component/main/screenshots/Screenshot%20compared%20-%20Frontend%20Mentor%20Results%20summary%20component.png"
/>
<meta
name="twitter:image:alt"
content="Results summary component | Frontend Mentor | Alamin"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./assets/images/favicon-32x32.png"
/>
<link rel="stylesheet" href="./sass/main.scss" />
<script defer src="./script.js"></script>
<title>Results summary component | Frontend Mentor</title>
</head>
<body>
<div id="dark-mode-toggle">
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 96 960 960"
width="48"
>
<path
d="M518 616Zm6 400H408l12-9.5q12-9.5 26.5-20.5t26.5-20.5l12-9.5h41q97 0 180.5-58T838 754q-90-8-173-41.5T518.5 616Q455 553 422 470.5T381 299q-88 48-144.5 130.5T180 612v11.5q0 6.5 1 11.5l-9.039 3.721q-9.039 3.72-19.961 7.779-10.922 4.059-19.961 7.779L123 658q-2-13-2.5-24t-.5-22q0-146 93-257.5T450 216q-18 98 11 192.635 29 94.635 100 165.736 71 71.101 165.5 100.143Q821 703.555 920 685.529q-26 144.206-138 237.338Q670 1016 524 1016Zm-284-60h180q33.333 0 56.667-23.265Q500 909.471 500 876.235 500 843 477.138 819.5T422 796h-39l-15-35q-17-39-51.688-62-34.687-23-76.312-23-57 0-98.5 41T100 816q0 58.333 40.833 99.167Q181.667 956 240 956Zm0 60q-83 0-141.5-58.5T40 816q0-83 58.5-141.5T240 616q60 0 109.5 32.5T423 736q57 2 97 42.5t40 97.5q0 58-41 99t-99 41H240Z"
/>
</svg>
</div>
<div class="top-container">
<main class="main-contents">
<section class="result-view">
<h1 class="result-view__heading">Your Result</h1>
<div class="result-view__scores">
<p class="result-view__scores__score">76</p>
<p class="result-view__scores__total">of 100</p>
</div>
<h2 class="result-view__greating">Great</h2>
<p class="result-view__score-brief">
You scored higher than 65% of the people who have taken these tests.
</p>
</section>
<section class="summery-view">
<h1 class="summery-view__heading">Summary</h1>
<ul class="summery-view__summeries">
<li
class="summery-view__summeries__summery summery-view__summeries__reaction"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="#F55"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.25"
d="M10.833 8.333V2.5l-6.666 9.167h5V17.5l6.666-9.167h-5Z"
/>
</svg>
<p class="summery-view__summeries__reaction__catagory">
Reaction
</p>
<p class="summery-view__summeries__summery__score">
80 / <span>100</span>
</p>
</li>
<li
class="summery-view__summeries__summery summery-view__summeries__memory"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="#FFB21E"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.25"
d="M5.833 11.667a2.5 2.5 0 1 0 .834 4.858"
/>
<path
stroke="#FFB21E"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.25"
d="M3.553 13.004a3.333 3.333 0 0 1-.728-5.53m.025-.067a2.083 2.083 0 0 1 2.983-2.824m.199.054A2.083 2.083 0 1 1 10 3.75v12.917a1.667 1.667 0 0 1-3.333 0M10 5.833a2.5 2.5 0 0 0 2.5 2.5m1.667 3.334a2.5 2.5 0 1 1-.834 4.858"
/>
<path
stroke="#FFB21E"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.25"
d="M16.447 13.004a3.334 3.334 0 0 0 .728-5.53m-.025-.067a2.083 2.083 0 0 0-2.983-2.824M10 3.75a2.085 2.085 0 0 1 2.538-2.033 2.084 2.084 0 0 1 1.43 2.92m-.635 12.03a1.667 1.667 0 0 1-3.333 0"
/>
</svg>
<p class="summery-view__summeries__memory__category">Memory</p>
<p class="summery-view__summeries__summery__score">
92 / <span>100</span>
</p>
</li>
<li
class="summery-view__summeries__summery summery-view__summeries__verbal"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="#00BB8F"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.25"
d="M7.5 10h5M10 18.333A8.333 8.333 0 1 0 1.667 10c0 1.518.406 2.942 1.115 4.167l-.699 3.75 3.75-.699A8.295 8.295 0 0 0 10 18.333Z"
/>
</svg>
<p class="summery-view__summeries__verbal__category">Verbal</p>
<p class="summery-view__summeries__summery__score">
61 / <span>100</span>
</p>
</li>
<li
class="summery-view__summeries__summery summery-view__summeries__visual"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="#1125D6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.25"
d="M10 11.667a1.667 1.667 0 1 0 0-3.334 1.667 1.667 0 0 0 0 3.334Z"
/>
<path
stroke="#1125D6"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.25"
d="M17.5 10c-1.574 2.492-4.402 5-7.5 5s-5.926-2.508-7.5-5C4.416 7.632 6.66 5 10 5s5.584 2.632 7.5 5Z"
/>
</svg>
<p class="summery-view__summeries__visual__category">Visual</p>
<p class="summery-view__summeries__summery__score">
72 / <span>100</span>
</p>
</li>
</ul>
<button type="button" class="summery-view__btn-continue">
Continue
</button>
</section>
</main>
</div>
<footer>
<div class="attribution-wrapper">
<p class="attribution">
Coded by
<a
class="attb-link"
href="https://twitter.com/CodeWithAlamin"
target="_blank"
>Alamin</a
>
<br />
Challenge by
<a
class="attb-link attb-fem"
href="https://www.frontendmentor.io/profile/CodeWithAlamin"
target="_blank"
>Frontend Mentor</a
>
</p>
</div>
</footer>
</body>
</html>