-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
495 lines (479 loc) · 41.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shopify Admin Dashboard - Hackathon</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<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&family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- ARIA LIVE -->
<span id="dashboard-status" aria-live="polite"></span>
<!-- NAVBAR -->
<nav>
<div class="nav-wrapper">
<div class="nav-app-icon-container">
<div id="shopify-logo-1" class="shopify-logo-show">
<a aria-label="Shopify logo / Shopify home page link" aria-roledescription="Click here to visit shopify home page" href="shopify.com" target="_blank">
<svg
title="Visit Shopify Home Page"
aria-hidden="true"
width="32"
height="32"
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>
</div>
<div id="shopify-logo-2" class="shopify-logo-hide">
<a aria-label="Shopify logo / Shopify home page link" aria-roledescription="Click here to visit shopify home page" href="shopify.com" target="_blank">
<svg aria-hidden="true" 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>
</a>
</div>
</div>
<div class="nav-search-container">
<div role="searchbox" aria-label="search box" class="nav-search-tab">
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
width="15"
height="15"
viewBox="0 0 13 14"
fill="none"
class="nav-search-svg"
>
<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="#D9D9D9"
/>
</svg>
<input name="query" type="text " class="query" id="query" placeholder="Search" />
</div>
</div>
<div class="nav-props-container">
<button aria-label="alert notification button" aria-haspopup="true" aria-expanded="false" aria-controls="alert-notification-menu" aria-labelledby="alert-notification-menu" class="nav-notifyProp-container" role="menubar">
<svg
width="20"
height="20"
viewBox="0 0 21 20"
fill="white"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<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="#D9D9D9"
/>
</svg>
</button>
<button aria-label="Navigation menu button" aria-haspopup="true" aria-expanded="false" aria-controls="navigation-menu" role="menubar" aria-labelledby="navigation-menu" class="nav-profileTab-container">
<div class="nav-profileTab-name">Davii Collections</div>
<div class="nav-profileTab-abbreviation">DC</div>
</button>
</div>
</div>
<!-- Drop Down * Navbar -->
<div id="navigation-menu" class="nav-drop-down" aria-label="Navigation menu popup" role="menu">
<div class="nav-drop-down-section-1 " >
<button aria-label="Visit navigation menu item to access dashboard" class="drop-down-name-section section" role="menuitem">
<a href="admin.shopify.com" target="_blank" class="drop-down-name-container">
<p class="drop-down-name-tag1">DC</p>
<p class="drop-down-name-tag2">Davii Collections</p>
</a>
<div class="drop-down-name-validate">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M13.3332 4L5.99984 11.3333L2.6665 8" stroke="#303030" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</button>
<button aria-label="Visit navigation menu item to access all stores" class="drop-down-store-section section" role="menuitem">
<a href="admin.shopify.com" class="drop-down-store-svg">
<svg width="20" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<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="#303030"/>
</svg>
</a>
<div class="drop-down-store-tag">
<a href="admin.shopify.com" >All Stores</a>
</div>
</button>
</div>
<hr/>
<div class="nav-drop-down-section-2">
<button aria-label="Visit navigation menu item for help center" role="button" tab class="drop-down-help-section section" role="menuitem">
<a href="admin.shopify.com">Help Center</a>
</button>
<button aria-label="Visit navigation menu item for changelog" class="drop-down-changelog-section section" role="menuitem">
<a href="admin.shopify.com">Changelog</a>
</button>
<button aria-label="Visit navigation menu item to access community forums" class="drop-down-community-section section" role="menuitem">
<a href="admin.shopify.com">Community forums</a>
</button>
<button aria-label="Visit navigation menu item to hire a shopify partner" class="drop-down-hire-section section" role="menuitem">
<a href="admin.shopify.com">Hire a Shopify Partner</a>
</button>
<button aria-label="Visit navigation menu item for keyboard shortcuts" class="drop-down-keyboard-section section" role="menuitem">
<a href="admin.shopify.com">Keyboard shortcuts</a>
</button>
</div>
<hr/>
<div class="nav-drop-down-section-3">
<button aria-label="Visit navigation menu item to access account credentials" class="drop-down-credential-section section" role="menuitem">
<a href="admin.shopify.com" aria-label="Account name">David Michael</a>
<a href="admin.shopify.com" aria-label="Account email">[email protected]</a>
</button>
<button aria-label="Visit navigation menu item to manage account" class="drop-down-manageAcct-section section" role="menuitem">
<a href="admin.shopify.com">Manage account</a>
</button>
<button aria-label="Visit navigation menu item to logout" class="drop-down-logout-section section" role="menuitem">
<a href="admin.shopify.com" >Log out</a>
</button>
</div>
</div>
<!-- Notification * Navbar -->
<div id="alert-notification-menu" class="nav-notification" aria-label="Alert Notification menu" role="menu">
<div class="nav-notification-header">
<div class="nav-notification-tag">
<h3 aria-label="Alert notification menu header">Alerts</h3>
</div>
<div class="nav-notification-svg-container">
<button class="nav-notification-indiv-svg-1">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20" fill="none">
<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="#616161"/>
<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="#616161"/>
<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="#616161"/>
</svg>
</button>
<button class="nav-notification-indiv-svg-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 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="#616161"/>
<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="#616161"/>
</svg>
</button>
</div>
</div>
<div class="nav-notification-body" aria-label="Below is a list of your notifications. However, you do not have a notification" role="menuitem">
<p>Alerts about your stor and account will show here</p>
</div>
</div>
</nav>
<!-- MAIN BODY -->
<main>
<!-- PLAN NOTICE SECTION -->
<section id="select-plan-wrapper" class="select-plan-wrapper" aria-label="Plan subscription popup notice" role="note">
<div class="select-plan-container">
<div class="select-plan-note">
<p>Extend your trial for $1/month for 3 months on select plans.</p>
</div>
<divaria class="select-plan-btn">
<button aria-label="Button to select a subscription plan" type="button" role="button" >Select a plan</button>
</divar>
</div>
<button aria-label="Button to collapse plan subscription notice" class="select-plan-close-svg" role="button">
<svg
width="20"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<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="#E3E3E3"
/>
</svg>
</button>
</section>
<!-- SETUP SECTION -->
<section id="setup-container" aria-label="Account setup guide section" >
<section id="setup-header-container" class="setup-header-container" aria-label="Account setup header" aria-haspopup="true" aria-expanded="false" aria-controls="setup-all-content-container">
<div class="setup-header">
<h4 class="setup-title">Setup guide</h4>
<button id="setup-svg-drop-down" class="setup-svg-container" aria-label="Setup section expand/collapse button" aria-haspopup="true" aria-expanded="false" aria-controls="setup-all-content-container">
<svg
id="setup-svg-expand"
width="30"
height="30"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
class="setup-active"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.21967 8.46967C6.51256 8.17678 6.98744 8.17678 7.28033 8.46967L10.75 11.9393L14.2197 8.46967C14.5126 8.17678 14.9874 8.17678 15.2803 8.46967C15.5732 8.76256 15.5732 9.23744 15.2803 9.53033L11.2803 13.5303C10.9874 13.8232 10.5126 13.8232 10.2197 13.5303L6.21967 9.53033C5.92678 9.23744 5.92678 8.76256 6.21967 8.46967Z"
fill="#0e0e0e"
/>
</svg>
<svg id="setup-svg-collapse" width="30" height="30" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="setup-inactive">
<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="#0e0e0e"/>
</svg>
</button>
</div>
<p class="setup-intro">
Using this personalized guide to get your store up and running.
</p>
<div class="setup-progress-container">
<small id="setup-progres-num">0 / 5 completed </small>
<div id="setup-progress-item" aria-label="Progress bar" role="progressbar">
<div id="setup-progress-bar" class="setup-progress-bar"></div>
</div>
</div>
</section>
<section id="setup-all-content-container" class="setup-all-content-container" aria-label="Account setup list options" role="list">
<div class="setup-all-container-display">
<div class="setup-body-container" id="tab-1" aria-label="Customize online store list section" role="listitem" aria-haspopup="true" aria-expanded="false" aria-controls="setup-body-content-container-1">
<div class="setup-body-card">
<div class="setup-body-tag-header">
<button id="svg-tab-1" class="setup-tag-icon-container" aria-label="Mark customize online store as done">
<svg id="not-checked" class="svg-for-checking setup-active" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" 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 id="spinner" class="svg-for-checking setup-inactive" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" fill="none" aria-hidden="true">
<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="#8A8A8A"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg id="checked" class="svg-for-checking setup-inactive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="12" cy="12" r="10" fill="#8A8A8A"></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="setup-tag-each-box">
<h4 >Customize your online store</h4>
</div>
</div>
<div id="setup-body-content-container-1" class="setup-body-content-container" role="listbox">
<div class="setup-body-content">
<p class="setup-body-content-note">
Choose a theme and add your logo, color, and images to reflect
your brand. <a class="setup-body-content-note-anchor" href="https://help.shopify.com/en/manual/online-store/themes/customizing-themes" target="_blank" aria-label="Link to shopify customizing theme manual">Learn more</a>
</p>
<button class="setup-body-customize-btn btn-primary" type="button" name="customize-theme" role="button" aria-label="A customize theme button">Customize theme</button>
</div>
</div>
</div>
<div class="setup-image-card setup-bg-img-1">
<!-- <img src="https://crushingit.tech/hackathon-assets/customise-store.png" alt="store-img"> -->
</div>
</div>
<div class="setup-body-container" id="tab-2" aria-label="Add first product list section" role="listitem" aria-haspopup="true" aria-expanded="false" aria-controls="setup-body-content-container-2">
<div class="setup-body-card">
<div class="setup-body-tag-header">
<button id="svg-tab-2" class="setup-tag-icon-container" aria-label="Mark add product as done">
<svg id="not-checked" class="svg-for-checking setup-active" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<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 id="spinner" class="svg-for-checking setup-inactive" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" fill="none" aria-hidden="true">
<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="#8A8A8A"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg id="checked" class="svg-for-checking setup-inactive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="12" cy="12" r="10" fill="#8A8A8A"></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="setup-tag-each-box">
<h4 >Add your first product</h4>
</div>
</div>
<div
id="setup-body-content-container-2"
class="setup-body-content-container"
role="listbox">
<div class="setup-body-content">
<p class="setup-body-content-note">
Write a description, add photos, and set pricing for the products you plan to sell. <a class="setup-body-content-note-anchor" href="https://help.shopify.com/en/manual/products/add-update-products" target="_blank" aria-label="Link to shopify payment manual" aria-label="Link to shopify update product manual">Learn more</a>
</p>
<div class="setup-body-customize-btn-container">
<button class="setup-body-customize-btn btn-primary" type="button" name="customize-theme">Add product</button>
<button class="setup-body-customize-btn btn-secondary" type="button" name="customize-theme" role="button" aria-label="An import product button">Import product</button>
</div>
</div>
</div>
</div>
<div class="setup-image-card setup-bg-img-2">
<!-- <img src="https://crushingit.tech/hackathon-assets/product.png" alt="product-img"> -->
</div>
</div>
<div class="setup-body-container" id="tab-3" aria-label="Add custom domain list section" role="listitem" aria-haspopup="true" aria-expanded="false" aria-controls="setup-body-content-container-3">
<div class="setup-body-card">
<div class="setup-body-tag-header">
<button id="svg-tab-3" class="setup-tag-icon-container" aria-label="Mark add custom domain as done">
<svg id="not-checked" class="svg-for-checking setup-active" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<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 id="spinner" class="svg-for-checking setup-inactive" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" fill="none" aria-hidden="true">
<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="#8A8A8A"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg id="checked" class="svg-for-checking setup-inactive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="12" cy="12" r="10" fill="#8A8A8A"></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="setup-tag-each-box">
<h4 >Add a custom domain</h4>
</div>
</div>
<div
id="setup-body-content-container-3"
class="setup-body-content-container"
role="listbox">
<div class="setup-body-content">
<p class="setup-body-content-note">
Your current domain is <a href="#" target="_blank">222219.myShopify.com</a> but you can add a custom domain to help customers find your online store. <a class="setup-body-content-note-anchor" href="https://help.shopify.com/en/manual/domains" target="_blank" aria-label="Link to shopify domain manual">Learn more</a>
</p>
<button class="setup-body-customize-btn btn-primary" type="button" name="customize-theme" aria-label="A domain button" role="button">Add domain</button>
</div>
</div>
</div>
<div class="setup-image-card setup-bg-img-3">
<!-- <img src="https://crushingit.tech/hackathon-assets/website.png" alt="website-img"> -->
</div>
</div>
<div class="setup-body-container" id="tab-4" aria-label="Name your online store list section" role="listitem" aria-haspopup="true" aria-expanded="false" aria-controls="setup-body-content-container-4">
<div class="setup-body-card">
<div class="setup-body-tag-header">
<button id="svg-tab-4" class="setup-tag-icon-container" aria-label="Mark naming store as done">
<svg id="not-checked" class="svg-for-checking setup-active" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<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 id="spinner" class="svg-for-checking setup-inactive" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" fill="none" aria-hidden="true">
<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="#8A8A8A"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg id="checked" class="svg-for-checking setup-inactive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="12" cy="12" r="10" fill="#8A8A8A"></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="setup-tag-each-box">
<h4 >Name your store</h4>
</div>
</div>
<div
id="setup-body-content-container-4"
class="setup-body-content-container"
role="listbox">
<div class="setup-body-content">
<p class="setup-body-content-note">
Your temporary store name is currently Davii Collections. The store name appears in your admin and your online store. <a class="setup-body-content-note-anchor" 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" target="_blank" aria-label="Link to shopify store naming manual">Learn more</a>
</p>
<button class="setup-body-customize-btn btn-primary" type="button" name="customize-theme" aria-label="A store button" role="button">Name store</button>
</div>
</div>
</div>
<div class="setup-image-card setup-bg-img-4">
<!-- <img src="https://crushingit.tech/hackathon-assets/name-store.png" alt="name-store-img"> -->
</div>
</div>
<div class="setup-body-container" id="tab-5" aria-label="Setup payment provider list section" role="listitem" aria-haspopup="true" aria-expanded="false" aria-controls="setup-body-content-container-5">
<div class="setup-body-card">
<div class="setup-body-tag-header">
<button id="svg-tab-5" class="setup-tag-icon-container" aria-label="Mark set payment provider as done">
<svg id="not-checked" class="svg-for-checking setup-active" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="none" aria-hidden="true">
<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 id="spinner" class="svg-for-checking setup-inactive" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 28 28" fill="none" aria-hidden="true">
<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="#8A8A8A"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg id="checked" class="svg-for-checking setup-inactive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="12" cy="12" r="10" fill="#8A8A8A"></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="setup-tag-each-box">
<h4 >Set up a payment provider</h4>
</div>
</div>
<div
id="setup-body-content-container-5"
class="setup-body-content-container"
role="listbox">
<div class="setup-body-content">
<p class="setup-body-content-note">
Choose a payment provider to start accepting payment. You'll need to create an account with the payment provider and set it up with your Shopify store.<br/> <a class="setup-body-content-note-anchor" href="https://help.shopify.com/en/manual/payments" target="_blank" aria-label="Link to shopify payment manual">Learn more</a>
</p>
<button class="setup-body-customize-btn btn-primary" type="button" name="customize-theme" role="button" aria-label="Set payment button">Set up payment</button>
</div>
</div>
</div>
<div class="setup-image-card setup-bg-img-5">
<!-- <img src="https://crushingit.tech/hackathon-assets/payment.png" alt="payment-img"> -->
</div>
</div>
</div>
</section>
</section>
</main>
<script src="index.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>