-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
515 lines (483 loc) · 41.5 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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shopify Admin</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<section class="header">
<a href="https://www.shopify.com/" aria-label="Visit Shopify.com to use your store" class="header__logo">
<svg aria-hidden="true" class="header__logo--desktop" role="img" fill="none" height="30"
viewBox="0 0 105 30" width="105" xmlns="http://www.w3.org/2000/svg">
<g fill="#fff">
<path
d="m36.2171 16.6517c-.8931-.4953-1.3631-.8962-1.3631-1.4622 0-.7311.6345-1.1792 1.6452-1.1792 1.1751 0 2.2092.4953 2.2092.4953l.8226-2.5235s-.7521-.5896-2.9848-.5896c-3.1024 0-5.2646 1.7924-5.2646 4.2922 0 1.4151 1.0106 2.4999 2.3502 3.2782 1.0812.6132 1.4572 1.0612 1.4572 1.698 0 .6839-.5406 1.2264-1.5512 1.2264-1.5041 0-2.9143-.7783-2.9143-.7783l-.8696 2.5235s1.3162.8725 3.5019.8725c3.1963 0 5.4761-1.5801 5.4761-4.4101.047-1.5565-1.1281-2.6414-2.5148-3.4432z" />
<path
d="m48.9559 11.3453c-1.5747 0-2.7968.7547-3.7604 1.8867l-.047-.0236 1.3631-7.1694h-3.5723l-3.4549 18.2302h3.5489l1.1751-6.2261c.47-2.3584 1.6687-3.797 2.7968-3.797.7991 0 1.1046.5425 1.1046 1.3207 0 .4953-.047 1.0849-.1645 1.5801l-1.3396 7.1459h3.5489l1.3866-7.3581c.1645-.7783.2585-1.6981.2585-2.3348.047-2.0518-.9871-3.2546-2.8438-3.2546z" />
<path
d="m59.884 11.3453c-4.2775 0-7.1213 3.8678-7.1213 8.1836 0 2.7593 1.6922 4.9997 4.8885 4.9997 4.207 0 7.0273-3.7734 7.0273-8.1835.0235-2.5706-1.4571-4.9998-4.7945-4.9998zm-1.7392 10.424c-1.2221 0-1.7157-1.0377-1.7157-2.3348 0-2.0517 1.0576-5.377 2.9848-5.377 1.2692 0 1.6687 1.0848 1.6687 2.1461 0 2.2168-1.0576 5.5657-2.9378 5.5657z" />
<path
d="m73.798 11.3453c-2.3972 0-3.7604 2.1226-3.7604 2.1226h-.047l.2115-1.9103h-3.1493c-.1645 1.2971-.4466 3.2545-.7286 4.7403l-2.4678 13.0182h3.5489l.9871-5.2827h.0706s.7285.4716 2.0917.4716c4.1834 0 6.9097-4.2922 6.9097-8.6316 0-2.3819-1.0576-4.5281-3.6664-4.5281zm-3.3843 10.4948c-.9166 0-1.4572-.5189-1.4572-.5189l.5876-3.3253c.423-2.2168 1.5746-3.7026 2.7968-3.7026 1.0811 0 1.4101 1.0141 1.4101 1.9574 0 2.2877-1.3631 5.5894-3.3373 5.5894z" />
<path
d="m82.5408 6.22766c-1.1281 0-2.0447.89618-2.0447 2.07537 0 1.06126.6581 1.79237 1.6687 1.79237h.047c1.1046 0 2.0682-.75469 2.0917-2.07538.0235-1.06126-.6816-1.79236-1.7627-1.79236z" />
<path d="m77.5586 24.2692h3.5724l2.4208-12.6408h-3.5959z" />
<path
d="m92.5759 11.6047h-2.4678l.1176-.5895c.2115-1.22639.9166-2.31124 2.1152-2.31124.6346 0 1.1281.18867 1.1281.18867l.7051-2.78288s-.6111-.30659-1.9272-.30659c-1.2692 0-2.5148.35376-3.4784 1.17919-1.2221 1.03768-1.7862 2.52345-2.0682 4.03285l-.0941.5895h-1.6451l-.5171 2.6886h1.6452l-1.8802 9.9759h3.5489l1.8802-9.9759h2.4443z" />
<path
d="m101.131 11.6284s-2.2323 5.6129-3.2194 8.6788h-.047c-.0705-.9906-.8696-8.6788-.8696-8.6788h-3.7369l2.1387 11.6031c.047.2595.0235.4245-.0705.5896-.4231.8019-1.1046 1.5801-1.9272 2.1461-.6581.4953-1.4102.8019-1.9977 1.0141l.9871 3.0188c.7286-.1651 2.2092-.7547 3.4784-1.9339 1.6216-1.533 3.1258-3.8677 4.6531-7.0751l4.348-9.3627z" />
<path
d="m17.5094 3.42124s-.329.09434-.8696.25942c-.094-.30659-.235-.66034-.423-1.03768-.6111-1.17919-1.5277-1.815945-2.6088-1.815945-.0705 0-.141 0-.235.023584-.0235-.047168-.0705-.070751-.094-.117919-.4701-.518841-1.0812-.7546779-1.8097-.73109423-1.4102.04716743-2.82034 1.06126423-3.94847 2.87721423-.79909 1.27352-1.41015 2.87721-1.57467 4.12714-1.62168.49526-2.74981.84902-2.77331.8726-.82259.25942-.84609.283-.9401 1.06127-.07051.58959-2.23275 17.19247-2.23275 17.19247l17.768 3.0895v-25.82414c-.1411 0-.2116.02358-.2586.02358zm-4.1129 1.27352c-.9401.283-1.9742.61318-2.9849.91976.2821-1.10843.8461-2.21686 1.5042-2.94796.2585-.25942.6111-.56601 1.0106-.75468.3996.84902.4936 2.00462.4701 2.78288zm-1.9272-3.726223c.329 0 .611.070753.8461.212253-.3761.18867-.7521.49526-1.1047.84901-.8931.96693-1.57464 2.47629-1.85667 3.9149-.84609.25942-1.69218.51884-2.46777.75467.51706-2.26403 2.42077-5.68367 4.58304-5.730833zm-2.72633 12.971063c.09401 1.5093 4.06593 1.8395 4.30093 5.4006.1646 2.8065-1.4806 4.7168-3.85438 4.8583-2.86732.1886-4.442-1.5094-4.442-1.5094l.61107-2.5942s1.57468 1.2028 2.84382 1.1084c.82259-.0471 1.12812-.7311 1.10462-1.2027-.11751-1.9811-3.36087-1.8631-3.5724-5.1177-.18802-2.7357 1.59818-5.49499 5.54657-5.75441 1.5277-.09433 2.3033.28301 2.3033.28301l-.8931 3.396s-1.0106-.4716-2.2092-.3773c-1.73923.1179-1.76274 1.2264-1.73923 1.5094zm5.59363-9.52784c0-.70751-.094-1.72161-.4231-2.57063 1.0812.21226 1.5982 1.41503 1.8332 2.14612-.423.11792-.8931.25942-1.4101.42451z" />
<path
d="m18.3086 29.1747 7.3798-1.8395s-3.1728-21.53194-3.1963-21.67344c-.0235-.14151-.1411-.23584-.2586-.23584s-2.1857-.04717-2.1857-.04717-1.2692-1.22635-1.7392-1.69802z" />
</g>
</svg>
<svg aria-hidden="true" class="header__logo--mobile" width="40" height="40" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g id="Shopify.com svg">
<g id="Group">
<g id="Group_2">
<path id="Vector"
d="M21.2105 3.80402C21.2105 3.80402 20.8505 3.90683 20.259 4.08675C20.1561 3.75261 20.0018 3.36707 19.7961 2.95583C19.1274 1.67069 18.1245 0.976712 16.9415 0.976712C16.8644 0.976712 16.7872 0.976712 16.6843 1.00241C16.6586 0.951009 16.6072 0.925306 16.5815 0.8739C16.0671 0.308439 15.3985 0.0514104 14.6013 0.0771132C13.0583 0.128519 11.5152 1.23374 10.2808 3.21286C9.40646 4.60081 8.73782 6.3486 8.55781 7.71085C6.78334 8.25061 5.54893 8.63615 5.52321 8.66185C4.62312 8.94458 4.59741 8.97029 4.49454 9.81848C4.34024 10.461 2 28.5815 2 28.5815L21.442 31.9486V3.75262C21.3391 3.77832 21.2619 3.77832 21.2105 3.80402ZM16.7101 5.19197C15.6814 5.50041 14.5498 5.86025 13.444 6.19438C13.7526 4.98635 14.3698 3.77832 15.0899 2.98153C15.3728 2.6988 15.7585 2.36466 16.1957 2.15904C16.6329 3.08434 16.7358 4.34378 16.7101 5.19197ZM14.627 1.10523C14.987 1.10523 15.2956 1.18233 15.5528 1.33655C15.1413 1.54217 14.7299 1.87631 14.3441 2.26185C13.3669 3.31567 12.6211 4.96065 12.3125 6.52852C11.3867 6.81125 10.4609 7.09398 9.6122 7.35101C10.1523 4.90924 12.2353 1.18233 14.627 1.10523ZM11.6181 15.2418C11.721 16.8868 16.0671 17.2466 16.3243 21.1277C16.5043 24.1863 14.7041 26.2683 12.1067 26.4225C8.96928 26.6281 7.24625 24.7775 7.24625 24.7775L7.91488 21.9502C7.91488 21.9502 9.63792 23.261 11.0266 23.1582C11.9267 23.1068 12.261 22.3615 12.2353 21.8474C12.1067 19.6884 8.55781 19.8169 8.32635 16.2699C8.12062 13.3141 10.0751 10.3068 14.3955 10.0241C16.0671 9.92129 16.9158 10.3325 16.9158 10.3325L15.9386 14.0337C15.9386 14.0337 14.8327 13.5197 13.5212 13.6225C11.6181 13.751 11.5924 14.959 11.6181 15.2418ZM17.7387 4.88354C17.7387 4.11245 17.6359 3.00723 17.2758 2.08193C18.4588 2.31326 19.0246 3.6241 19.2817 4.42089C18.8188 4.5494 18.3045 4.70362 17.7387 4.88354Z"
fill="white" />
<path id="Vector_2"
d="M22.085 31.8458L30.1601 29.841C30.1601 29.841 26.6883 6.3743 26.6626 6.22009C26.6369 6.06587 26.5083 5.96306 26.3797 5.96306C26.2511 5.96306 23.988 5.91165 23.988 5.91165C23.988 5.91165 22.5993 4.57511 22.085 4.06105V31.8458Z"
fill="white" />
</g>
</g>
</g>
</svg>
</a>
<form role="search" class="header__searchbox" method="post" action="#">
<span role="button" class="header__searchbox--icon" aria-label="Search">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 13 14"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8.82264 10.3833C7.89957 11.0841 6.74835 11.5 5.5 11.5C2.46243 11.5 0 9.03757 0 6C0 2.96243 2.46243 0.5 5.5 0.5C8.53757 0.5 11 2.96243 11 6C11 7.24835 10.5841 8.39957 9.8833 9.32264L12.7803 12.2197C13.0732 12.5126 13.0732 12.9874 12.7803 13.2803C12.4874 13.5732 12.0126 13.5732 11.7197 13.2803L8.82264 10.3833ZM9.5 6C9.5 8.20914 7.70914 10 5.5 10C3.29086 10 1.5 8.20914 1.5 6C1.5 3.79086 3.29086 2 5.5 2C7.70914 2 9.5 3.79086 9.5 6Z"
fill="currentcolor" />
</svg>
</span>
<input class="header__searchbox--input" type="search" placeholder="Search" id="search"
aria-label="search Shopify Website">
</form>
<div class="header__profile">
<button id="notification__button" class="header__profile--notification" aria-haspopup="true"
aria-expanded="false" aria-controls="notification__menu" aria-label="Notifications">
<svg class="notification__icon" aria-hidden="true" width="20" height="20" viewBox="0 0 21 20"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.75203 14.4239L5.3061 14.1427C3.45144 13.9295 2.92542 11.4844 4.52838 10.5274L4.5933 10.4886C5.466 9.96761 6.00045 9.02609 6.00045 8.00969V7.5C6.00045 5.01472 8.01517 3 10.5005 3C12.9857 3 15.0005 5.01472 15.0005 7.5V8.00969C15.0005 9.02609 15.5349 9.96761 16.4076 10.4886L16.4725 10.5274C18.0755 11.4844 17.5495 13.9295 15.6948 14.1427L13.152 14.435V14.8C13.152 16.2912 11.9432 17.5 10.452 17.5C8.96086 17.5 7.75203 16.2912 7.75203 14.8V14.4239ZM11.652 14.5H9.25203V14.8C9.25203 15.4627 9.78929 16 10.452 16C11.1148 16 11.652 15.4627 11.652 14.8V14.5ZM8.50045 13H12.5005L15.5235 12.6525C15.953 12.6032 16.0748 12.0369 15.7036 11.8153L15.6387 11.7766C15.5591 11.7291 15.4815 11.6793 15.4057 11.6273C15.2506 11.521 15.1036 11.4055 14.9651 11.2818C14.9405 11.2598 14.9162 11.2377 14.8922 11.2152C14.0144 10.395 13.5005 9.23833 13.5005 8.00969V7.5C13.5005 5.84315 12.1573 4.5 10.5005 4.5C8.8436 4.5 7.50045 5.84315 7.50045 7.5V8.00969C7.50045 9.23833 6.98651 10.395 6.10871 11.2152C6.08469 11.2377 6.06039 11.2598 6.03583 11.2818C5.89734 11.4055 5.75029 11.521 5.59523 11.6273C5.51945 11.6793 5.44176 11.7291 5.36222 11.7766L5.29729 11.8153C4.9261 12.0369 5.0479 12.6032 5.47739 12.6525L8.50045 13Z"
fill="currentcolor" />
</svg>
</button>
<button class="header__profile--info" aria-label="Profile Settings" id="profile__menu--button"
aria-haspopup="true" aria-expanded="false" aria-controls="profile__menu">
<div aria-hidden="true" class="profilename">Davii Collections</div>
<div aria-hidden="true" class="avatar">DC</div>
</button>
</div>
</section>
<section class="notification__menu " id="notification__menu--section">
<div class="notification__menu--card">
<h4 class="notification__menu--title">Alerts</h4>
<ul class="notification__menu--buttongroup" role="menu" id="notification__menu"
aria-labelledby="notification__button">
<li role="presentation">
<button role="menuitem" class="notification__menu--menuitem" aria-label="Filter Messages">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="currentcolor">
<path
d="M3 6C3 5.58579 3.33579 5.25 3.75 5.25H16.25C16.6642 5.25 17 5.58579 17 6C17 6.41421 16.6642 6.75 16.25 6.75H3.75C3.33579 6.75 3 6.41421 3 6Z"
fill="currentcolor" />
<path
d="M6.75 14C6.75 13.5858 7.08579 13.25 7.5 13.25H12.5C12.9142 13.25 13.25 13.5858 13.25 14C13.25 14.4142 12.9142 14.75 12.5 14.75H7.5C7.08579 14.75 6.75 14.4142 6.75 14Z"
fill="currentcolor" />
<path
d="M5.5 9.25C5.08579 9.25 4.75 9.58579 4.75 10C4.75 10.4142 5.08579 10.75 5.5 10.75H14.5C14.9142 10.75 15.25 10.4142 15.25 10C15.25 9.58579 14.9142 9.25 14.5 9.25H5.5Z"
fill="currentcolor" />
</svg>
</button>
</li>
<li role="presentation">
<button role="menuitem" class="notification__menu--menuitem" aria-label="Mark Messages As Read">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 20 20" fill="none">
<path
d="M13.2803 9.03033C13.5732 8.73744 13.5732 8.26256 13.2803 7.96967C12.9874 7.67678 12.5126 7.67678 12.2197 7.96967L9.25 10.9393L8.03033 9.71967C7.73744 9.42678 7.26256 9.42678 6.96967 9.71967C6.67678 10.0126 6.67678 10.4874 6.96967 10.7803L8.71967 12.5303C9.01256 12.8232 9.48744 12.8232 9.78033 12.5303L13.2803 9.03033Z"
fill="currentcolor" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10ZM15.5 10C15.5 13.0376 13.0376 15.5 10 15.5C6.96243 15.5 4.5 13.0376 4.5 10C4.5 6.96243 6.96243 4.5 10 4.5C13.0376 4.5 15.5 6.96243 15.5 10Z"
fill="currentcolor" />
</svg>
</button>
</li>
</ul>
</div>
<div class="notification__menu--banner">Alerts about your store and account will show here</div>
</section>
<section class="profile__menu" id="profile__menu--section">
<ul id="profile__menu" class="profile__menu--card" role="menu" aria-labelledby="profile__menu--button">
<div role="presentation" class="profile__menu--detail">
<div role="presentation" class="profile__menu--info">
<div class="profile__menu--userinfo">
<div role="presentation" class="profile__menu--avatar">DC</div>
<div role="presentation" class="profile__menu--name">Davii Collections</div>
</div>
<svg aria-hidden="true" width="40" height="40" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="none"></circle>
<path
d="M17.2738 8.52629C17.6643 8.91682 17.6643 9.54998 17.2738 9.94051L11.4405 15.7738C11.05 16.1644 10.4168 16.1644 10.0263 15.7738L7.3596 13.1072C6.96908 12.7166 6.96908 12.0835 7.3596 11.693C7.75013 11.3024 8.38329 11.3024 8.77382 11.693L10.7334 13.6525L15.8596 8.52629C16.2501 8.13577 16.8833 8.13577 17.2738 8.52629Z"
fill="currentcolor"></path>
</svg>
</div>
<li>
<button role="menuitem" class="profile__menu--menuitem profile__menu--storemenuitem">
<svg aria-hidden="true" width="41" height="40" viewBox="0 0 21 20" fill="black"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.757 3H7.24302C6.85944 3 6.4971 3.17611 6.26012 3.47772L3.87394 6.51468C3.63169 6.823 3.5 7.20375 3.5 7.59586V8.25C3.5 9.31867 4.10958 10.245 5 10.7001V15.25C5 16.2165 5.7835 17 6.75 17H14.25C15.2165 17 16 16.2165 16 15.25V10.7001C16.8904 10.245 17.5 9.31867 17.5 8.25V7.76879C17.5 7.26465 17.3307 6.77511 17.0192 6.3787L14.7399 3.47772C14.5029 3.17611 14.1406 3 13.757 3ZM13.5 15.5H14.25C14.3881 15.5 14.5 15.3881 14.5 15.25V11C13.712 11 13.0014 10.6686 12.5 10.1375C11.9986 10.6686 11.288 11 10.5 11C9.71199 11 9.00138 10.6686 8.5 10.1375C7.99862 10.6686 7.28801 11 6.5 11V15.25C6.5 15.3881 6.61193 15.5 6.75 15.5H10.5V13C10.5 12.4477 10.9477 12 11.5 12H12.5C13.0523 12 13.5 12.4477 13.5 13V15.5ZM6.5 9.5H6.25C5.55964 9.5 5 8.94036 5 8.25V7.59586C5 7.53985 5.01881 7.48545 5.05342 7.44141L7.36453 4.5H13.6355L15.8397 7.30543C15.9436 7.43757 16 7.60075 16 7.76879V8.25C16 8.94036 15.4404 9.5 14.75 9.5H14.5C13.8096 9.5 13.25 8.94036 13.25 8.25V7.75C13.25 7.33579 12.9142 7 12.5 7C12.0858 7 11.75 7.33579 11.75 7.75V8.25C11.75 8.94036 11.1904 9.5 10.5 9.5C9.80964 9.5 9.25 8.94036 9.25 8.25V7.75C9.25 7.33579 8.91421 7 8.5 7C8.08579 7 7.75 7.33579 7.75 7.75V8.25C7.75 8.94036 7.19036 9.5 6.5 9.5Z"
fill="black" />
</svg>
<span>All stores</span></button>
</li>
</div>
<div role="presentation" class="profile__menu--dividerline"></div>
<div class="profile__menu--helpsection">
<li>
<button role="menuitem" class="profile__menu--menuitem " aria-label="Help Center Menu Item">Help
Center</button>
</li>
<li>
<button role="menuitem" class="profile__menu--menuitem">Changelog</button>
</li>
<li>
<button role="menuitem" class="profile__menu--menuitem">Community forums</button>
</li>
<li>
<button role="menuitem" class="profile__menu--menuitem">Hire a Shopify Partner</button>
</li>
<li>
<button role="menuitem" class="profile__menu--menuitem">Keyboard shortcuts</button>
</li>
</div>
<div role="presentation" class="profile__menu--dividerline"></div>
<div class="profile__menu--accountsection">
<div class="profile__menu--userdetails">
<p class="fw-600">David Micheal</p>
<p class="lh-130 fw-400 fs-12">[email protected]</p>
</div>
<li>
<button role="menuitem" class="profile__menu--menuitem">Manage Accounts</button>
</li>
<li>
<button role="menuitem" class="profile__menu--menuitem">Log out</button>
</li>
</div>
</ul>
</section>
<section class="app">
<section class="trialModal">
<div class="trialModal__text">
<span>Extend your trial for $1/month for 3 months on select plans.</span>
<button type="button" aria-label="Close Subscription Modal" class="trialModal__button--close"
id="close-modal2">
<svg aria-hidden="true" width="41" height="40" viewBox="0 0 21 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14.4697 15.0303C14.7626 15.3232 15.2374 15.3232 15.5303 15.0303C15.8232 14.7374 15.8232 14.2626 15.5303 13.9697L11.5607 10L15.5303 6.03033C15.8232 5.73744 15.8232 5.26256 15.5303 4.96967C15.2374 4.67678 14.7626 4.67678 14.4697 4.96967L10.5 8.93934L6.53033 4.96967C6.23744 4.67678 5.76256 4.67678 5.46967 4.96967C5.17678 5.26256 5.17678 5.73744 5.46967 6.03033L9.43934 10L5.46967 13.9697C5.17678 14.2626 5.17678 14.7374 5.46967 15.0303C5.76256 15.3232 6.23744 15.3232 6.53033 15.0303L10.5 11.0607L14.4697 15.0303Z"
fill="currentcolor" />
</svg>
</button>
</div>
<div class="trialModal__buttongroup">
<a href="https://www.shopify.com/pricing" role="button" class="trialModal__button"
aria-label="Click Here to Select a Plan" id="select-plan">Select a
plan</a>
<button type="button" aria-label="Close Subscription Modal" class="trialModal__button--close"
id="close-modal">
<svg aria-hidden="true" width="41" height="40" viewBox="0 0 21 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M14.4697 15.0303C14.7626 15.3232 15.2374 15.3232 15.5303 15.0303C15.8232 14.7374 15.8232 14.2626 15.5303 13.9697L11.5607 10L15.5303 6.03033C15.8232 5.73744 15.8232 5.26256 15.5303 4.96967C15.2374 4.67678 14.7626 4.67678 14.4697 4.96967L10.5 8.93934L6.53033 4.96967C6.23744 4.67678 5.76256 4.67678 5.46967 4.96967C5.17678 5.26256 5.17678 5.73744 5.46967 6.03033L9.43934 10L5.46967 13.9697C5.17678 14.2626 5.17678 14.7374 5.46967 15.0303C5.76256 15.3232 6.23744 15.3232 6.53033 15.0303L10.5 11.0607L14.4697 15.0303Z"
fill="currentcolor" />
</svg>
</button>
</div>
</section>
<section class="setup">
<div class="setup__header">
<div class="setup__header--guide">
<div class="setup__header--guidetext">
<h3 class="setup__header--guidetitle">Setup guide</h3>
<p class="setup__header--guidedescription">Use this personalized guide to get your store up and
running.</p>
</div>
<div class="setup__header--progressbar">
<span aria-live="assertive" id="progressbar__text" aria-label="0 out of 5 completed">
0 / 5 completed
</span>
<progress role="progressbar" value="0" max="5" class="setup__progress__bar" aria-valuemin="1"
aria-valuemax="5" aria-valuenow="0">
</progress>
</div>
</div>
<button class="setup__header--dropdown dropdown-activated" id="menu-dropdown" aria-haspopup="true"
aria-expanded="true" aria-controls="setup__menu" aria-label="Setup Guide Menu">
<svg aria-hidden="true" width="41" height="40" viewBox="0 0 21 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.0303 12.2803C14.7374 12.5732 14.2626 12.5732 13.9697 12.2803L10.5 8.81066L7.03033 12.2803C6.73744 12.5732 6.26256 12.5732 5.96967 12.2803C5.67678 11.9874 5.67678 11.5126 5.96967 11.2197L9.96967 7.21967C10.2626 6.92678 10.7374 6.92678 11.0303 7.21967L15.0303 11.2197C15.3232 11.5126 15.3232 11.9874 15.0303 12.2803Z"
fill="currentcolor" />
</svg>
</button>
</div>
<div class="setup__body menu-active" id="setup__menu">
<div class="setup__menuitem accordion-active " id="accordion1">
<div class="setup__menuitem--content menu-active">
<button role="checkbox" aria-checked="false" class="accordion-checkbox"
aria-label="Customize your online store">
<svg class="base-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="12" stroke="#8a8a8a" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 6" />
</svg>
<svg class="loading-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 28 28" fill="none">
<path
d="M26 14C26 16.3734 25.2962 18.6935 23.9776 20.6668C22.6591 22.6402 20.7849 24.1783 18.5922 25.0866C16.3995 25.9948 13.9867 26.2324 11.6589 25.7694C9.33114 25.3064 7.19295 24.1635 5.51472 22.4853C3.83649 20.8071 2.6936 18.6689 2.23058 16.3411C1.76755 14.0133 2.00519 11.6005 2.91345 9.4078C3.8217 7.21509 5.35977 5.34094 7.33316 4.02236C9.30655 2.70379 11.6266 2 14 2"
stroke="#1c181d" stroke-width="2.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg aria-hidden="true" class="checked-icon" width="40" height="40" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#1c181d"></circle>
<path
d="M17.2738 8.52629C17.6643 8.91682 17.6643 9.54998 17.2738 9.94051L11.4405 15.7738C11.05 16.1644 10.4168 16.1644 10.0263 15.7738L7.3596 13.1072C6.96908 12.7166 6.96908 12.0835 7.3596 11.693C7.75013 11.3024 8.38329 11.3024 8.77382 11.693L10.7334 13.6525L15.8596 8.52629C16.2501 8.13577 16.8833 8.13577 17.2738 8.52629Z"
fill="#fff"></path>
</svg>
</button>
<div class="accordion-header-hidden" aria-controls="accordion1" aria-expanded="true">
<span>Customize your online store</span>
</div>
<div class="accordion-content">
<div class="accordion-header">
Customize your online store
</div>
<div class="accordion-description">
Choose a theme and add your logo, colors, and images to reflect your brand. <a
href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes">Learn
more</a>
</div>
<button class="setup__guide--button">
Customize theme
</button>
</div>
</div>
<div class="setup__menuitem--image">
<img src="https://crushingit.tech/hackathon-assets/customise-store.png"
alt="Image of a customized store">
</div>
</div>
<div class="setup__menuitem " id="accordion2">
<div class="setup__menuitem--content menu-active">
<button role="checkbox" aria-checked="false" class="accordion-checkbox"
aria-label="Add your first product">
<svg class="base-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="12" stroke="#8a8a8a" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 6" />
</svg>
<svg class="loading-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 28 28" fill="none">
<path
d="M26 14C26 16.3734 25.2962 18.6935 23.9776 20.6668C22.6591 22.6402 20.7849 24.1783 18.5922 25.0866C16.3995 25.9948 13.9867 26.2324 11.6589 25.7694C9.33114 25.3064 7.19295 24.1635 5.51472 22.4853C3.83649 20.8071 2.6936 18.6689 2.23058 16.3411C1.76755 14.0133 2.00519 11.6005 2.91345 9.4078C3.8217 7.21509 5.35977 5.34094 7.33316 4.02236C9.30655 2.70379 11.6266 2 14 2"
stroke="#1c181d" stroke-width="2.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg aria-hidden="true" class="checked-icon" width="40" height="40" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#1c181d"></circle>
<path
d="M17.2738 8.52629C17.6643 8.91682 17.6643 9.54998 17.2738 9.94051L11.4405 15.7738C11.05 16.1644 10.4168 16.1644 10.0263 15.7738L7.3596 13.1072C6.96908 12.7166 6.96908 12.0835 7.3596 11.693C7.75013 11.3024 8.38329 11.3024 8.77382 11.693L10.7334 13.6525L15.8596 8.52629C16.2501 8.13577 16.8833 8.13577 17.2738 8.52629Z"
fill="#fff"></path>
</svg>
</button>
<div class="accordion-header-hidden" aria-controls="accordion2" aria-expanded="false">
<span>Add your first product</span>
</div>
<div class="accordion-content">
<div class="accordion-header">
Add your first product
</div>
<div class="accordion-description">
Write a description, add photos, and set pricing for the products you plan to sell.
Learn more <a
href="https://help.shopify.com/en/manual/products/add-update-products">Learn
more</a>
</div>
<div class="setup__guide--buttongroup">
<button class="setup__guide--button">
Add product
</button>
<button class="setup__guide--button-light">
Import product
</button>
</div>
</div>
</div>
<div class="setup__menuitem--image">
<img src="https://crushingit.tech/hackathon-assets/product.png"
alt="Image of goods sold by stores">
</div>
</div>
<div class="setup__menuitem " id="accordion3">
<div class="setup__menuitem--content menu-active">
<button role="checkbox" aria-checked="false" class="accordion-checkbox"
aria-label="Add a custom domain">
<svg class="base-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="12" stroke="#8a8a8a" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 6" />
</svg>
<svg class="loading-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 28 28" fill="none">
<path
d="M26 14C26 16.3734 25.2962 18.6935 23.9776 20.6668C22.6591 22.6402 20.7849 24.1783 18.5922 25.0866C16.3995 25.9948 13.9867 26.2324 11.6589 25.7694C9.33114 25.3064 7.19295 24.1635 5.51472 22.4853C3.83649 20.8071 2.6936 18.6689 2.23058 16.3411C1.76755 14.0133 2.00519 11.6005 2.91345 9.4078C3.8217 7.21509 5.35977 5.34094 7.33316 4.02236C9.30655 2.70379 11.6266 2 14 2"
stroke="#1c181d" stroke-width="2.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg aria-hidden="true" class="checked-icon" width="40" height="40" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#1c181d"></circle>
<path
d="M17.2738 8.52629C17.6643 8.91682 17.6643 9.54998 17.2738 9.94051L11.4405 15.7738C11.05 16.1644 10.4168 16.1644 10.0263 15.7738L7.3596 13.1072C6.96908 12.7166 6.96908 12.0835 7.3596 11.693C7.75013 11.3024 8.38329 11.3024 8.77382 11.693L10.7334 13.6525L15.8596 8.52629C16.2501 8.13577 16.8833 8.13577 17.2738 8.52629Z"
fill="#fff"></path>
</svg>
</button>
<div class="accordion-header-hidden" aria-controls="accordion3" aria-expanded="false">
<span>Add a custom domain</span>
</div>
<div class="accordion-content">
<div class="accordion-header">
Add a custom domain
</div>
<div class="accordion-description">
Your current domain is 222219.myshopify.com but you can add a custom domain to help
customers find your online store. <a
href="https://help.shopify.com/en/manual/domains">Learn
more</a>
</div>
<button class="setup__guide--button">
Add domain
</button>
</div>
</div>
<div class="setup__menuitem--image">
<img src="https://crushingit.tech/hackathon-assets/website.png" alt="Image of domains for sale">
</div>
</div>
<div class="setup__menuitem " id="accordion4">
<div class="setup__menuitem--content menu-active">
<button role="checkbox" aria-checked="false" class="accordion-checkbox"
aria-label="Name your store">
<svg class="base-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="12" stroke="#8a8a8a" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 6" />
</svg>
<svg class="loading-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 28 28" fill="none">
<path
d="M26 14C26 16.3734 25.2962 18.6935 23.9776 20.6668C22.6591 22.6402 20.7849 24.1783 18.5922 25.0866C16.3995 25.9948 13.9867 26.2324 11.6589 25.7694C9.33114 25.3064 7.19295 24.1635 5.51472 22.4853C3.83649 20.8071 2.6936 18.6689 2.23058 16.3411C1.76755 14.0133 2.00519 11.6005 2.91345 9.4078C3.8217 7.21509 5.35977 5.34094 7.33316 4.02236C9.30655 2.70379 11.6266 2 14 2"
stroke="#1c181d" stroke-width="2.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg aria-hidden="true" class="checked-icon" width="40" height="40" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#1c181d"></circle>
<path
d="M17.2738 8.52629C17.6643 8.91682 17.6643 9.54998 17.2738 9.94051L11.4405 15.7738C11.05 16.1644 10.4168 16.1644 10.0263 15.7738L7.3596 13.1072C6.96908 12.7166 6.96908 12.0835 7.3596 11.693C7.75013 11.3024 8.38329 11.3024 8.77382 11.693L10.7334 13.6525L15.8596 8.52629C16.2501 8.13577 16.8833 8.13577 17.2738 8.52629Z"
fill="#fff"></path>
</svg>
</button>
<div class="accordion-header-hidden" aria-controls="accordion4" aria-expanded="false">
<span>Name your store</span>
</div>
<div class="accordion-content">
<div class="accordion-header">
Name your store
</div>
<div class="accordion-description">
Your temporary store name is currently Davii collections. The store name appears in your
admin and your online store. <a
href="https://help.shopify.com/en/manual/intro-to-shopify/initial-setup/setup-business-settings#set-or-change-your-online-store-name-and-legal-business-name">Learn
more</a>
</div>
<button class="setup__guide--button">
Name Store
</button>
</div>
</div>
<div class="setup__menuitem--image">
<img src="https://crushingit.tech/hackathon-assets/name-store.png"
alt="Image of examples of stores">
</div>
</div>
<div class="setup__menuitem " id="accordion5">
<div class="setup__menuitem--content menu-active">
<button role="checkbox" aria-checked="false" class="accordion-checkbox"
aria-label="Set up a payment provider">
<svg class="base-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="12" stroke="#8a8a8a" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="4 6" />
</svg>
<svg class="loading-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="0 0 28 28" fill="none">
<path
d="M26 14C26 16.3734 25.2962 18.6935 23.9776 20.6668C22.6591 22.6402 20.7849 24.1783 18.5922 25.0866C16.3995 25.9948 13.9867 26.2324 11.6589 25.7694C9.33114 25.3064 7.19295 24.1635 5.51472 22.4853C3.83649 20.8071 2.6936 18.6689 2.23058 16.3411C1.76755 14.0133 2.00519 11.6005 2.91345 9.4078C3.8217 7.21509 5.35977 5.34094 7.33316 4.02236C9.30655 2.70379 11.6266 2 14 2"
stroke="#1c181d" stroke-width="2.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<svg aria-hidden="true" class="checked-icon" width="40" height="40" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#1c181d"></circle>
<path
d="M17.2738 8.52629C17.6643 8.91682 17.6643 9.54998 17.2738 9.94051L11.4405 15.7738C11.05 16.1644 10.4168 16.1644 10.0263 15.7738L7.3596 13.1072C6.96908 12.7166 6.96908 12.0835 7.3596 11.693C7.75013 11.3024 8.38329 11.3024 8.77382 11.693L10.7334 13.6525L15.8596 8.52629C16.2501 8.13577 16.8833 8.13577 17.2738 8.52629Z"
fill="#fff"></path>
</svg>
</button>
<div class="accordion-header-hidden" aria-controls="accordion5" aria-expanded="false">
<span>Set up a payment provider</span>
</div>
<div class="accordion-content">
<div class="accordion-header">
Set up a payment provider
</div>
<div class="accordion-description">
Choose a payment provider to start accepting payments. You'll need to create an
account
with the payment provider and set it up with your Shopify store. <a
href="https://help.shopify.com/en/manual/payments">Learn
more</a>
</div>
<button class="setup__guide--button">
Set up payment
</button>
</div>
</div>
<div class="setup__menuitem--image">
<img src="https://crushingit.tech/hackathon-assets/payment.png"
alt="Image of payment providers">
</div>
</div>
</div>
</section>
</section>
<script src="./app.js"></script>
</body>
</html>