-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex.html
3495 lines (3413 loc) · 226 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
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<!-- google fonts -->
<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=Roboto:wght@100;300;400;500;700&display=swap"
rel="stylesheet"
/>
<!-- css file link -->
<link rel="stylesheet" href="css/style.css" />
<title>Dribbble Clone</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!-- header starts -->
<header class="header">
<!-- header menu at left of header for small sizes -->
<div class="header__menu-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 18 16"
role="img"
class="header__menu-div--svg icon js-site-nav-mobile-menu-open site-nav-mobile-menu-open icon-18 fill-current"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 2C0 1.37868 0.50368 0.875 1.125 0.875H16.875C17.4963 0.875 18 1.37868 18 2C18 2.62132 17.4963 3.125 16.875 3.125H1.125C0.50368 3.125 0 2.62132 0 2ZM0 8C0 7.37868 0.50368 6.875 1.125 6.875H16.875C17.4963 6.875 18 7.37868 18 8C18 8.62132 17.4963 9.125 16.875 9.125H1.125C0.50368 9.125 0 8.62132 0 8ZM1.125 12.875C0.50368 12.875 0 13.3787 0 14C0 14.6213 0.50368 15.125 1.125 15.125H16.875C17.4963 15.125 18 14.6213 18 14C18 13.3787 17.4963 12.875 16.875 12.875H1.125Z"
></path>
</svg>
</div>
<!-- header dribbble icon at middle of header for small sizes
and at left side -->
<div class="header__dribbble-div">
<svg
xmlns="http://www.w3.org/2000/svg"
width="76"
height="30"
viewBox="0 0 76 19"
class="header__dribbble-div--svg site-nav-logo fill-current"
>
<title>Ehsan's Dribbble Clone</title>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M75.8822 14.657C72.7063 20.0415 67.6766 18.4791 66.166 17.2558C65.5231 17.692 64.3958 18.6481 62.8926 18.5377C59.6913 18.3027 58.5449 13.7279 58.5449 13.7279C58.5679 13.7462 57.5913 14.0649 57.0635 14.0592C57.0567 15.4008 55.897 18.6056 52.7672 18.5646C49.2551 18.5188 48.5411 13.2864 48.5411 13.2864C48.5411 13.2864 48.1916 13.7717 46.8627 14.2551C46.9296 13.2244 46.8807 18.4077 42.6713 18.4839C39.3435 18.5442 38.4452 13.2057 38.4452 13.2057C38.4452 13.2057 37.8679 13.8054 36.7491 14.0134C36.8202 12.9659 36.7046 18.5015 32.4947 18.4839C29.6497 18.4721 28.6775 15.1954 28.7531 14.7406C28.8496 14.161 27.7916 18.5654 25.0281 18.4968C23.8877 18.4633 23.0375 17.6376 22.504 16.5368C21.7898 17.354 20.7529 18.4968 19.5897 18.4968C17.5017 18.4968 16.5812 16.7504 16.7371 11.7624C16.7504 11.1708 16.7077 10.9381 16.1196 10.8496C15.7666 10.7907 15.4051 10.6792 15.0226 10.6204C14.9 11.0295 13.8602 18.3637 10.2847 18.5029C9.08519 18.5496 8.4293 17.5105 7.89066 16.7393C7.06497 17.8316 5.97501 18.5377 4.42227 18.5377C1.79205 18.5377 0 16.4114 0 13.7885C0 11.1655 1.79205 9.03942 4.42227 9.03942C4.88732 9.03942 5.01787 9.10608 5.44272 9.23004C4.569 1.27504 6.63238 0.0317866 8.43739 0.0317866C10.1703 0.0317866 13.1308 4.05384 8.96512 14.2559C9.88998 17.2989 11.8838 17.1268 12.8419 10.8626C13.0369 9.58927 12.5155 7.87099 13.3265 7.63117C14.809 7.19289 14.9663 8.50787 15.6614 8.72697C16.3964 8.95853 16.8254 8.93592 17.531 9.08327C18.7367 9.31873 19.2072 9.96643 19.0603 11.409C18.8839 13.2343 18.5753 15.891 19.5162 16.2148C20.1947 16.45 21.4335 15.0429 21.6509 14.273C21.8682 13.5031 21.9136 13.2396 21.9329 12.6749C21.9623 11.468 21.9992 10.5833 22.205 9.67055C22.2931 9.31736 22.3935 9.08347 22.7931 9.06748C23.1219 9.0591 23.7232 8.96009 23.9879 9.16611C24.3407 9.43119 24.2966 9.70017 24.2561 10.4081C23.8458 20.5015 27.0038 15.4628 27.9454 11.4283C27.6101 6.86623 27.8403 0.115326 30.6991 0.00210112C32.1859 -0.0567822 32.8432 1.13431 32.9155 2.02335C33.12 4.53433 31.9745 8.69372 30.468 11.4909C29.607 17.1984 34.2325 18.3269 34.9722 13.7712C33.762 13.1958 32.4541 10.8668 33.5184 9.73181C34.1156 9.09483 36.6015 10.0099 36.6422 12.0057C37.8616 11.6796 38.0244 10.9911 38.0413 11.1052C37.7061 6.54312 38.017 0.115385 40.876 0.00215941C42.3626 -0.0567239 43.0198 1.13437 43.0921 2.02341C43.2966 4.53438 42.1511 8.69378 40.6448 11.491C39.7837 17.1984 44.4093 18.327 45.1488 13.7713C44.2528 13.5984 42.3614 11.1212 43.4527 9.73187C44.0359 8.98944 46.5127 10.5334 46.79 12.0718C47.9614 11.7403 48.1205 11.0737 48.1373 11.1859C47.802 6.62397 48.1129 0.196235 50.9719 0.0830097C52.4585 0.0241264 53.1157 1.21522 53.188 2.10426C53.3925 4.61523 52.247 8.77471 50.7405 11.5719C49.8796 17.2794 54.5051 18.4077 55.2448 13.852C54.0135 13.647 52.2636 11.0314 53.672 9.69333C54.2347 9.15869 56.3848 10.5465 56.8881 12.1298C57.5874 12.1029 58.0227 11.8617 58.116 11.8374C56.9996 6.4818 57.8307 0.0558781 60.9062 0.00223793C62.5685 -0.0267262 64.1936 0.900905 63.4803 5.99604C62.7994 10.8574 60.3519 12.8975 60.3576 12.9287C60.5 13.5111 61.7559 18.3851 64.9185 15.8134C64.7548 15.4427 64.5909 15.064 64.4993 14.6052C63.9751 11.9327 65.0047 8.91409 67.8032 8.42622C69.4066 8.14671 70.917 8.92734 71.1558 10.6872C71.5487 13.5669 68.9484 15.6524 67.9596 16.1048C67.5167 15.8532 71.9742 18.712 74.6196 12.9829C74.773 12.6558 74.9579 12.6835 75.1975 12.8521C75.3667 12.9712 76.3305 13.8842 75.8822 14.657ZM6.33552 13.0809C6.20092 12.6785 5.92469 11.7918 5.82701 11.4076C5.28905 10.9398 4.90507 10.8638 4.21455 10.8638C2.68 10.8638 1.77679 12.2826 1.77679 13.8125C1.77679 15.3423 2.76077 16.7613 4.29533 16.7613C5.6252 16.7613 6.63735 15.8571 6.94615 14.5771C6.73001 14.0781 6.5156 13.6195 6.33552 13.0809ZM8.39979 2.13753C7.32153 2.13753 6.95576 4.70973 7.02674 6.90406C7.08953 8.84411 7.63164 10.5521 7.91286 11.3174C7.98426 11.4133 7.971 11.3509 8.03474 11.4526C9.90694 7.35053 9.13041 2.13753 8.39979 2.13753ZM30.8531 2.21833C29.4595 2.0585 29.4685 7.86389 29.6415 9.16611C30.3653 8.00823 31.6226 2.53009 30.8531 2.21833ZM41.0297 2.21833C39.6361 2.0585 39.6451 7.86389 39.8182 9.16611C40.5419 8.00823 41.7993 2.53009 41.0297 2.21833ZM51.1257 2.2991C49.732 2.13927 49.741 7.94469 49.9141 9.247C50.6378 8.08902 51.8952 2.61084 51.1257 2.2991ZM61.06 1.87849C58.8887 2.31451 59.3943 9.55399 59.7241 10.8237C62.2817 7.31085 62.3344 1.74654 61.06 1.87849ZM69.1975 10.9254C69.0871 10.4638 68.5351 10.2171 68.1541 10.2779C67.0639 10.4268 66.0065 11.7846 66.4158 13.8518C66.5069 14.3122 66.7349 14.736 66.7312 14.7219C69.1711 13.085 69.3785 11.7951 69.1975 10.9254ZM23.2205 7.46958C22.9089 7.46964 22.6043 7.37729 22.3452 7.20422C22.0861 7.03114 21.8841 6.78512 21.7648 6.49725C21.6455 6.20939 21.6143 5.89261 21.6751 5.587C21.7358 5.28138 21.8859 5.00065 22.1062 4.7803C22.3265 4.55995 22.6072 4.40989 22.9128 4.34909C23.2184 4.28829 23.5352 4.31948 23.8231 4.43873C24.111 4.55797 24.357 4.75991 24.5301 5.019C24.7032 5.27809 24.7956 5.5827 24.7956 5.89429C24.7956 6.10115 24.7549 6.30599 24.6757 6.4971C24.5966 6.68822 24.4806 6.86187 24.3343 7.00815C24.188 7.15443 24.0144 7.27047 23.8233 7.34964C23.6322 7.42882 23.4274 7.46957 23.2205 7.46958Z"
fill="#0D0C22"
></path>
</svg>
<!-- header links and dropdowns -->
<ul class="header__dribbble-div--links">
<li class="header__dribbble-div--links--parent">
<a href="" class="header__dribbble-div--links--link">Inspiration</a>
<div
class="inspiration__div header__dribbble-div--links--parent__div"
>
<ul class="lists-parent inspiration__div--left">
<!-- Explore Design Work dropdown -->
<li
class="list inspiration__div--left--li inspiration__div--left--explore"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg explore__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="explore--icon header__link--svg"
>
<path
d="M2.5 0.75H6.5C7.4665 0.75 8.25 1.5335 8.25 2.5V6.5C8.25 7.4665 7.4665 8.25 6.5 8.25H2.5C1.5335 8.25 0.75 7.4665 0.75 6.5V2.5C0.75 1.5335 1.5335 0.75 2.5 0.75ZM13.5 0.75H17.5C18.4665 0.75 19.25 1.5335 19.25 2.5V6.5C19.25 7.4665 18.4665 8.25 17.5 8.25H13.5C12.5335 8.25 11.75 7.4665 11.75 6.5V2.5C11.75 1.5335 12.5335 0.75 13.5 0.75ZM13.5 11.75H17.5C18.4665 11.75 19.25 12.5335 19.25 13.5V17.5C19.25 18.4665 18.4665 19.25 17.5 19.25H13.5C12.5335 19.25 11.75 18.4665 11.75 17.5V13.5C11.75 12.5335 12.5335 11.75 13.5 11.75ZM2.5 11.75H6.5C7.4665 11.75 8.25 12.5335 8.25 13.5V17.5C8.25 18.4665 7.4665 19.25 6.5 19.25H2.5C1.5335 19.25 0.75 18.4665 0.75 17.5V13.5C0.75 12.5335 1.5335 11.75 2.5 11.75Z"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
Explore Design Work
</div>
<p class="middle__text--div--bottom-text">
Trending designs to inspire you
</p>
</div>
<div class="right__svg-div explore__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- New & Noteworthy -->
<li
class="list inspiration__div--left--li inspiration__div--left--new"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg new__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="new--icon header__link--svg"
>
<path
d="M13.4842 15.5185C11.8769 16.8972 10.4552 17.9485 10 18.279C9.54459 17.9483 8.12304 16.897 6.51599 15.5185C4.62061 13.8926 2.5424 11.8742 1.4452 10.0758L1.44176 10.07L1.43651 10.0611C0.987839 9.31334 0.75 8.45358 0.75 7.57322C0.75 4.91104 2.90591 2.75 5.54681 2.75C7.07683 2.75 8.49854 3.48017 9.39693 4.69529L10 5.51098L10.6031 4.69529C11.5014 3.48018 12.9234 2.75 14.4532 2.75C17.0941 2.75 19.25 4.91104 19.25 7.57322C19.25 8.45358 19.0122 9.31334 18.5635 10.0611L18.5581 10.0701L18.556 10.0738C17.4592 11.8727 15.3803 13.892 13.4842 15.5185Z"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
New & Noteworthy
</div>
<p class="middle__text--div--bottom-text">
Up-and-coming designers
</p>
</div>
<div class="right__svg-div new__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- Playoffs -->
<li
class="list inspiration__div--left--li inspiration__div--left--playoffs"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg playoffs__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="playoffs--icon header__link--svg"
>
<rect
x="0.75"
y="4.75"
width="14.5"
height="14.5"
rx="3.25"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></rect>
<path
d="M16 1.5H8C7.40168 1.5 6.85156 1.70993 6.42022 2.062H4.5C5.18236 0.832288 6.49399 0 8 0H16C18.2091 0 20 1.79086 20 4V12C20 13.4806 19.1956 14.7733 18 15.4649V13.5002C18.314 13.0824 18.5 12.5629 18.5 12V4C18.5 2.61929 17.3807 1.5 16 1.5Z"
fill="currentColor"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">Playoffs</div>
<p class="middle__text--div--bottom-text">
Work designers are riffing on
</p>
</div>
<div class="right__svg-div playoffs__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- Blog -->
<li
class="list inspiration__div--left--li inspiration__div--left--blog"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg blog__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="blog--icon header__link--svg"
>
<rect
x="0.75"
y="0.75"
width="18.5"
height="18.5"
rx="3.25"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></rect>
<path
d="M4.16667 5.08331C4.16667 4.6691 4.50246 4.33331 4.91667 4.33331H14.25C14.6642 4.33331 15 4.6691 15 5.08331C15 5.49753 14.6642 5.83331 14.25 5.83331L4.91667 5.83331C4.50246 5.83331 4.16667 5.49753 4.16667 5.08331Z"
fill="currentColor"
></path>
<path
d="M4.16667 9.25C4.16667 8.83579 4.50246 8.5 4.91667 8.5L12.5833 8.5C12.9976 8.5 13.3333 8.83579 13.3333 9.25C13.3333 9.66422 12.9976 10 12.5833 10L4.91667 10C4.50246 10 4.16667 9.66421 4.16667 9.25Z"
fill="currentColor"
></path>
<path
d="M4.91667 12.6666C4.50246 12.6666 4.16667 13.0024 4.16667 13.4166C4.16667 13.8308 4.50246 14.1666 4.91667 14.1666H9.25001C9.66422 14.1666 10 13.8308 10 13.4166C10 13.0024 9.66422 12.6666 9.25001 12.6666H4.91667Z"
fill="currentColor"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">Blog</div>
<p class="middle__text--div--bottom-text">
Interviews, tutorials, and more
</p>
</div>
<div class="right__svg-div blog__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- Weekly Warm-up -->
<li
class="list inspiration__div--left--li inspiration__div--left--weekly"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg weekly__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="weekly--icon header__link--svg"
>
<rect
x="0.75"
y="2.58331"
width="18.5"
height="16.8333"
rx="3.25"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></rect>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5 0.25C5.41421 0.25 5.75 0.585786 5.75 1V5C5.75 5.41421 5.41421 5.75 5 5.75C4.58579 5.75 4.25 5.41421 4.25 5V1C4.25 0.585786 4.58579 0.25 5 0.25ZM15 0.25C15.4142 0.25 15.75 0.585786 15.75 1V5C15.75 5.41421 15.4142 5.75 15 5.75C14.5858 5.75 14.25 5.41421 14.25 5V1C14.25 0.585786 14.5858 0.25 15 0.25ZM12.8333 12.5H13.8333C14.1095 12.5 14.3333 12.7239 14.3333 13V14C14.3333 14.2761 14.1095 14.5 13.8333 14.5H12.8333C12.5572 14.5 12.3333 14.2761 12.3333 14V13C12.3333 12.7239 12.5572 12.5 12.8333 12.5ZM10.8333 13C10.8333 11.8954 11.7288 11 12.8333 11H13.8333C14.9379 11 15.8333 11.8954 15.8333 13V14C15.8333 15.1046 14.9379 16 13.8333 16H12.8333C11.7288 16 10.8333 15.1046 10.8333 14V13Z"
fill="currentColor"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
Weekly Warm-up
</div>
<p class="middle__text--div--bottom-text">
prompt to flex your design skills
</p>
</div>
<div class="right__svg-div weekly__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
</ul>
<!-- header explore section dropdown right links -->
<ul class="inspiration__div--right">
<p class="browse">Browse Categories</p>
<div class="pointer-curser">
<li class="inspiration__div--right--links">
<a href="">Animation</a>
</li>
<li class="inspiration__div--right--links">
<a href="">Branding</a>
</li>
<li class="inspiration__div--right--links">
<a href="">Illustration</a>
</li>
<li class="inspiration__div--right--links">
<a href="">Mobile</a>
</li>
<li class="inspiration__div--right--links">
<a href="">Print</a>
</li>
<li class="inspiration__div--right--links">
<a href="">Product Design</a>
</li>
<li class="inspiration__div--right--links">
<a href="">Typography</a>
</li>
<li class="inspiration__div--right--links">
<a href="">Web Design</a>
</li>
</div>
</ul>
</div>
</li>
<li class="header__dribbble-div--links--parent">
<a href="" class="header__dribbble-div--links--link">Find Work</a>
<div
class="find-work__div header__dribbble-div--links--parent__div"
>
<!-- Find Work hover section -->
<ul class="lists-parent inspiration__div--left">
<!-- Job Board -->
<li
class="list inspiration__div--left--li inspiration__div--left--job"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg job__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="job--icon header__link--svg"
>
<path
d="M0.75 2.5C0.75 1.5335 1.5335 0.75 2.5 0.75H8.5C9.4665 0.75 10.25 1.5335 10.25 2.5V8.5C10.25 9.4665 9.4665 10.25 8.5 10.25H2.5C1.5335 10.25 0.75 9.4665 0.75 8.5V2.5ZM13.75 2.5C13.75 1.5335 14.5335 0.75 15.5 0.75H17.5C18.4665 0.75 19.25 1.5335 19.25 2.5V8.5C19.25 9.4665 18.4665 10.25 17.5 10.25H15.5C14.5335 10.25 13.75 9.4665 13.75 8.5V2.5ZM9.75 15.5C9.75 14.5335 10.5335 13.75 11.5 13.75H17.5C18.4665 13.75 19.25 14.5335 19.25 15.5V17.5C19.25 18.4665 18.4665 19.25 17.5 19.25H11.5C10.5335 19.25 9.75 18.4665 9.75 17.5V15.5ZM0.75 15.5C0.75 14.5335 1.5335 13.75 2.5 13.75H4.5C5.4665 13.75 6.25 14.5335 6.25 15.5V17.5C6.25 18.4665 5.4665 19.25 4.5 19.25H2.5C1.5335 19.25 0.75 18.4665 0.75 17.5V15.5Z"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">Job Board</div>
<p class="middle__text--div--bottom-text">
Find your dream design job
</p>
</div>
<div class="right__svg-div job__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- Freelance Projects PRO+ -->
<li
class="list inspiration__div--left--li inspiration__div--left--freelance"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg freelance__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="freelance--icon header__link--svg"
>
<path
d="M1.25 8.5C1.25 7.5335 2.0335 6.75 3 6.75H14C14.9665 6.75 15.75 7.5335 15.75 8.5V14C15.75 16.8995 13.3995 19.25 10.5 19.25H6.5C3.60051 19.25 1.25 16.8995 1.25 14V8.5Z"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></path>
<path
d="M6.25 0.833313C6.25 0.419099 5.91421 0.083313 5.5 0.083313C5.08579 0.083313 4.75 0.419099 4.75 0.833313V3.33331C4.75 3.74753 5.08579 4.08331 5.5 4.08331C5.91421 4.08331 6.25 3.74753 6.25 3.33331V0.833313Z"
fill="currentColor"
></path>
<path
d="M9.58331 0.833313C9.58331 0.419099 9.24753 0.083313 8.83331 0.083313C8.4191 0.083313 8.08331 0.419099 8.08331 0.833313V3.33331C8.08331 3.74753 8.4191 4.08331 8.83331 4.08331C9.24753 4.08331 9.58331 3.74753 9.58331 3.33331V0.833313Z"
fill="currentColor"
></path>
<path
d="M12.1667 0.083313C12.5809 0.083313 12.9167 0.419099 12.9167 0.833313V3.33331C12.9167 3.74753 12.5809 4.08331 12.1667 4.08331C11.7525 4.08331 11.4167 3.74753 11.4167 3.33331V0.833313C11.4167 0.419099 11.7525 0.083313 12.1667 0.083313Z"
fill="currentColor"
></path>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16 16C16.1693 16 16.3362 15.9895 16.5 15.9691C18.4732 15.723 20 14.0398 20 12C20 9.96019 18.4732 8.277 16.5 8.03095C16.3362 8.01052 16.1693 8 16 8H15V16H16ZM18.5 12C18.5 10.7905 17.6411 9.78164 16.5 9.55001V14.45C17.6411 14.2184 18.5 13.2095 18.5 12Z"
fill="currentColor"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
Freelance Projects <span class="red__text">PRO+</span>
</div>
<p class="middle__text--div--bottom-text">
Up-and-coming designers
</p>
</div>
<div class="right__svg-div freelance__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<li class="hr__li">
<hr />
</li>
<!-- Want freelance design projects? -->
<li
class="list inspiration__div--left--li inspiration__div--left--want"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg want__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="want--icon header__link--svg"
fill="none"
>
<rect
x="0.75"
y="1.75"
width="18.5"
height="16.5"
rx="3.25"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></rect>
<path
d="M19 4L10 11L1 4"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
Want freelance design projects?
</div>
<p class="middle__text--div--bottom-text">
Get new leads in your inbox every day
</p>
</div>
<div class="right__svg-div want__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- Personalize your profile with video -->
<li
class="list inspiration__div--left--li inspiration__div--left--personalize"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg personalize__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
class="personalize--icon header__link--svg"
fill="none"
>
<rect
x="4.25"
y="0.75"
width="11.5"
height="18.5"
rx="2.25"
stroke="currentColor"
stroke-width="1.5"
></rect>
<path
d="M4.25 17C4.25 14.6528 6.15279 12.75 8.5 12.75H11.5C13.8472 12.75 15.75 14.6528 15.75 17C15.75 18.2426 14.7426 19.25 13.5 19.25H6.5C5.25736 19.25 4.25 18.2426 4.25 17Z"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></path>
<circle
cx="10"
cy="7"
r="3.25"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></circle>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
Personalize your profile with video
</div>
<p class="middle__text--div--bottom-text">
Introduce yourself to new clients with Pitch
</p>
</div>
<div class="right__svg-div personalize__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
</ul>
<!-- -->
<!-- -->
</div>
</li>
<!-- header Learn Design list item -->
<li class="header__dribbble-div--links--parent">
<a href="" class="header__dribbble-div--links--link"
>Learn Design</a
>
<!-- header Learn Design list item hidden section starts -->
<div
class="learn-design__div header__dribbble-div--links--parent__div"
>
<ul class="lists-parent inspiration__div--left">
<!-- Certified Product Design Course -->
<li
class="list inspiration__div--left--li inspiration__div--left--certified"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg certified__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="22"
viewBox="0 0 20 22"
fill="none"
class="certified--icon header__link--svg"
>
<path
d="M4.375 20.375C3.71196 20.375 3.07607 20.1116 2.60723 19.6427C2.13839 19.1739 1.875 18.538 1.875 17.875V6.44165C1.87606 6.05378 1.96736 5.67148 2.14167 5.32498L3.80833 1.99165C3.86038 1.88819 3.94014 1.80123 4.03873 1.74046C4.13732 1.6797 4.25086 1.64752 4.36667 1.64752C4.48248 1.64752 4.59601 1.6797 4.6946 1.74046C4.79319 1.80123 4.87295 1.88819 4.925 1.99165L6.59167 5.32498C6.76598 5.67148 6.85727 6.05378 6.85833 6.44165V17.875C6.85835 18.5351 6.59724 19.1685 6.132 19.6369C5.66676 20.1052 5.03515 20.3706 4.375 20.375Z"
fill="none"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></path>
<path
d="M1.875 6.41669H6.875"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M1.875 16.4167H6.875"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M16.875 1.625H11.875C11.1846 1.625 10.625 2.18464 10.625 2.875V19.125C10.625 19.8154 11.1846 20.375 11.875 20.375H16.875C17.5654 20.375 18.125 19.8154 18.125 19.125V2.875C18.125 2.18464 17.5654 1.625 16.875 1.625Z"
fill="none"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
></path>
<path
d="M10.625 5.375H13.5417"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M10.625 9.125H13.5417"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M10.625 12.875H13.5417"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M10.625 16.625H13.5417"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
Certified Product Design Course
</div>
<p class="middle__text--div--bottom-text">
Learn product design in just 16 weeks...
</p>
</div>
<div class="right__svg-div certified__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- Introduction to UI Design -->
<li
class="list inspiration__div--left--li inspiration__div--left--introduction"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg introduction__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
class="introduction--icon header__link--svg"
>
<g clip-path="url(#clip0_11881_16619)">
<path
d="M8 15L6 19H14L12 15H8Z"
fill="#E54F6D"
fill-opacity="0.22"
stroke="#E54F6D"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<rect
x="0.75"
y="3.75"
width="18.5"
height="11.5"
rx="1.25"
fill="#E54F6D"
fill-opacity="0.22"
stroke="#E54F6D"
stroke-width="1.5"
></rect>
<path
d="M10.3929 6.93852L13.6189 1.54892C14.0545 0.821159 15.0158 0.615322 15.7112 1.1009V1.1009C16.4049 1.58528 16.5441 2.55542 16.0147 3.21536L12.0816 8.11773L10.3929 6.93852Z"
fill="#E54F6D"
fill-opacity="0.22"
stroke="#E54F6D"
stroke-width="1.5"
></path>
<path
d="M9.62285 7.34418C8.52118 7.55943 8.20332 8.14645 8.03211 8.98745C7.86089 9.82846 8.38044 12.4726 8.38044 12.4726C8.58093 12.1374 9.3261 11.3349 10.7029 10.8075C12.0797 10.2801 11.7624 8.8508 11.4317 8.20208C11.2878 7.82642 10.7245 7.12892 9.62285 7.34418Z"
fill="#E54F6D"
fill-opacity="0.13"
stroke="#E54F6D"
stroke-width="1.5"
stroke-linejoin="round"
></path>
<path
d="M4 19L16 19"
stroke="#E54F6D"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</g>
<defs>
<clipPath id="clip0_11881_16619">
<rect width="20" height="20" fill="white"></rect>
</clipPath>
</defs>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
Introduction to UI Design
</div>
<p class="middle__text--div--bottom-text">
Learn UI Design Basics and Figma <br />
Fundementals...
</p>
</div>
<div class="right__svg-div introduction__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- Design Systems Course -->
<li
class="list inspiration__div--left--li inspiration__div--left--systems"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg systems__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="21"
height="21"
viewBox="0 0 21 21"
class="systems--icon header__link--svg"
>
<path
d="M7.47558 7.92103C7.33637 7.85938 7.21159 7.7693 7.10927 7.65657L6.58427 7.07323C6.43433 6.90403 6.23521 6.78598 6.01482 6.7356C5.79442 6.68523 5.56378 6.70508 5.35523 6.79236C5.14668 6.87964 4.97065 7.02998 4.85183 7.22232C4.733 7.41465 4.67733 7.63934 4.6926 7.8649V8.63992C4.70104 8.79208 4.67729 8.94425 4.6229 9.08658C4.56851 9.22892 4.48471 9.35817 4.37696 9.46592C4.26922 9.57367 4.13996 9.6575 3.99762 9.71183C3.85528 9.76625 3.70308 9.79 3.55093 9.78158L2.7676 9.73992C2.54294 9.72942 2.32052 9.78858 2.13076 9.90925C1.94099 10.03 1.79313 10.2063 1.70741 10.4143C1.62169 10.6223 1.60227 10.8516 1.65183 11.0709C1.70139 11.2903 1.81749 11.489 1.98427 11.6399L2.5676 12.1566C2.68272 12.2623 2.77417 12.3913 2.83592 12.5349C2.89768 12.6785 2.92836 12.8336 2.92593 12.9899C2.92943 13.1464 2.89925 13.3018 2.83742 13.4456C2.77559 13.5893 2.68357 13.7182 2.5676 13.8233L1.98427 14.3483C1.81793 14.4993 1.70226 14.698 1.65305 14.9173C1.60383 15.1365 1.62346 15.3656 1.70927 15.5733C1.7951 15.7802 1.94297 15.9553 2.1325 16.0748C2.32203 16.1942 2.54392 16.2518 2.7676 16.2399H3.55093C3.70308 16.2315 3.85528 16.2553 3.99762 16.3096C4.13996 16.364 4.26922 16.4478 4.37696 16.5555C4.48471 16.6633 4.56851 16.7926 4.6229 16.9349C4.67729 17.0773 4.70104 17.2294 4.6926 17.3816V18.1566C4.67925 18.3814 4.73631 18.6048 4.85585 18.7958C4.97538 18.9867 5.15145 19.1355 5.35956 19.2217C5.56766 19.3078 5.79744 19.3271 6.01695 19.2765C6.23645 19.226 6.43475 19.1083 6.58427 18.9399L7.10927 18.3649C7.21159 18.2522 7.33637 18.1621 7.47558 18.1004C7.61479 18.0388 7.76535 18.0069 7.9176 18.0069C8.06985 18.0069 8.22042 18.0388 8.35963 18.1004C8.49883 18.1621 8.62361 18.2522 8.72593 18.3649L9.25093 18.9399C9.40042 19.1083 9.59875 19.226 9.81825 19.2765C10.0378 19.3271 10.2676 19.3078 10.4757 19.2217C10.6838 19.1355 10.8598 18.9867 10.9793 18.7958C11.0989 18.6048 11.1559 18.3814 11.1426 18.1566V17.3816C11.1342 17.2294 11.1579 17.0773 11.2123 16.9349C11.2667 16.7926 11.3505 16.6633 11.4583 16.5555C11.566 16.4478 11.6953 16.364 11.8376 16.3096C11.9799 16.2553 12.1322 16.2315 12.2843 16.2399H13.0676C13.2913 16.2518 13.5132 16.1942 13.7027 16.0748C13.8923 15.9553 14.0401 15.7802 14.1259 15.5733C14.2118 15.3656 14.2313 15.1365 14.1822 14.9173C14.1329 14.698 14.0173 14.4993 13.8509 14.3483L13.2676 13.8233C13.1517 13.7182 13.0596 13.5893 12.9978 13.4456C12.9359 13.3018 12.9058 13.1464 12.9093 12.9899C12.9068 12.8336 12.9375 12.6785 12.9993 12.5349C13.061 12.3913 13.1525 12.2623 13.2676 12.1566L13.8509 11.6399C14.0178 11.489 14.1338 11.2903 14.1833 11.0709C14.2329 10.8516 14.2135 10.6223 14.1278 10.4143C14.0421 10.2063 13.8943 10.03 13.7044 9.90925C13.5147 9.78858 13.2923 9.72942 13.0676 9.73992L12.2843 9.78158C12.1322 9.79 11.9799 9.76625 11.8376 9.71183C11.6953 9.6575 11.566 9.57367 11.4583 9.46592C11.3505 9.35817 11.2667 9.22892 11.2123 9.08658C11.1579 8.94425 11.1342 8.79208 11.1426 8.63992V7.8649C11.1579 7.63934 11.1022 7.41465 10.9833 7.22232C10.8646 7.02998 10.6885 6.87964 10.48 6.79236C10.2714 6.70508 10.0408 6.68523 9.82042 6.7356C9.6 6.78598 9.40083 6.90403 9.25093 7.07323L8.72593 7.65657C8.62361 7.7693 8.49883 7.85938 8.35963 7.92103C8.22042 7.98268 8.06985 8.01453 7.9176 8.01453C7.76535 8.01453 7.61479 7.98268 7.47558 7.92103Z"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M7.9175 14.5315C8.78275 14.5315 9.48413 13.8301 9.48413 12.9649C9.48413 12.0996 8.78275 11.3982 7.9175 11.3982C7.05225 11.3982 6.35083 12.0996 6.35083 12.9649C6.35083 13.8301 7.05225 14.5315 7.9175 14.5315Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M16.1305 5.19857C15.9005 5.19857 15.7139 5.01202 15.7139 4.7819C15.7139 4.55178 15.9005 4.36523 16.1305 4.36523"
stroke="currentColor"
></path>
<path
d="M16.1304 5.19857C16.3605 5.19857 16.547 5.01202 16.547 4.7819C16.547 4.55178 16.3605 4.36523 16.1304 4.36523"
stroke="currentColor"
></path>
<path
d="M14.4455 1.52922C14.4507 1.35282 14.5126 1.18279 14.6221 1.04437C14.7316 0.905966 14.8828 0.806542 15.0532 0.760866C15.2237 0.715191 15.4044 0.725697 15.5684 0.790826C15.7324 0.855957 15.871 0.972232 15.9637 1.12241L16.4591 1.91761C16.541 2.04966 16.6701 2.14566 16.8201 2.18619C16.9702 2.22672 17.13 2.20877 17.2674 2.13594L18.0899 1.69774C18.2462 1.61545 18.4246 1.58541 18.5992 1.61202C18.7737 1.63865 18.9351 1.72052 19.0596 1.84563C19.1842 1.97075 19.2654 2.1325 19.2912 2.30714C19.317 2.48178 19.2862 2.66012 19.2032 2.81593L18.7642 3.64182C18.6912 3.77954 18.673 3.93978 18.7134 4.09034C18.7537 4.24089 18.8495 4.37059 18.9816 4.45337L19.7727 4.95092C19.9225 5.04437 20.0384 5.18338 20.1033 5.34755C20.1683 5.51172 20.1789 5.69237 20.1335 5.86301C20.0882 6.03363 19.9894 6.18524 19.8515 6.29556C19.7137 6.40587 19.5441 6.46908 19.3677 6.47592L18.4362 6.50774C18.2809 6.51333 18.1334 6.5777 18.0238 6.68782C17.9141 6.79795 17.8504 6.94561 17.8454 7.10096L17.8158 8.03427C17.8105 8.21067 17.7486 8.38067 17.6391 8.51908C17.5297 8.6575 17.3784 8.75692 17.208 8.80258C17.0375 8.84833 16.8569 8.83775 16.6929 8.77266C16.5289 8.7075 16.3902 8.59125 16.2975 8.44108L15.8016 7.64604C15.7198 7.514 15.5908 7.41797 15.4409 7.37741C15.2909 7.33685 15.1312 7.35476 14.9939 7.42754L14.1707 7.8659C14.0145 7.9482 13.836 7.97824 13.6615 7.95162C13.4869 7.925 13.3256 7.84312 13.201 7.71801C13.0764 7.5929 12.9953 7.43114 12.9694 7.2565C12.9436 7.08186 12.9744 6.90353 13.0574 6.74771L13.4944 5.92112C13.5674 5.78339 13.5855 5.62315 13.5452 5.4726C13.5049 5.32204 13.409 5.19234 13.2769 5.10957L12.4859 4.61457C12.3361 4.52111 12.2202 4.38209 12.1553 4.21792C12.0904 4.05377 12.0798 3.8731 12.125 3.70247C12.1704 3.53184 12.2692 3.38023 12.407 3.26992C12.5449 3.15961 12.7144 3.09639 12.8909 3.08957L13.823 3.05757C13.9782 3.05198 14.1255 2.98762 14.2351 2.87752C14.3447 2.76741 14.4084 2.61978 14.4132 2.46452L14.4455 1.52922Z"
fill="currentColor"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.3"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
Design Systems Course
</div>
<p class="middle__text--div--bottom-text">
Scale Design Systems in 8 weeks...
</p>
</div>
<div class="right__svg-div systems__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- Design Career Prep Course -->
<li
class="list inspiration__div--left--li inspiration__div--left--career"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg career__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
class="career--icon header__link--svg"
>
<g clip-path="url(#clip0_11974_16556)">
<circle
cx="7.5"
cy="12.5"
r="6.5"
fill="none"
fill-opacity="0.2"
></circle>
<path
d="M10.3084 12.5C10.3083 13.1184 10.1249 13.7229 9.78111 14.237C9.43736 14.7511 8.94881 15.1516 8.3773 15.3879C7.8058 15.6242 7.17704 15.6856 6.57062 15.5643C5.96421 15.4431 5.4074 15.1446 4.97069 14.7068C4.53399 14.2689 4.23702 13.7113 4.11738 13.1045C3.99775 12.4978 4.06082 11.8692 4.29863 11.2983C4.53643 10.7275 4.93826 10.24 5.45326 9.89761C5.96826 9.55524 6.57327 9.37336 7.19168 9.37501"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M13.2167 10.8333C13.3609 11.3771 13.4337 11.9374 13.4334 12.5C13.4282 13.8151 13.0067 15.0948 12.2293 16.1555C11.4518 17.2162 10.3585 18.0035 9.10595 18.4043C7.85343 18.8052 6.50613 18.7991 5.25729 18.3869C4.00845 17.9747 2.92224 17.1776 2.15444 16.1099C1.38665 15.0422 0.976733 13.7588 0.98348 12.4437C0.990228 11.1286 1.41329 9.84941 2.192 8.78964C2.97071 7.72986 4.06504 6.94393 5.31805 6.54457C6.57105 6.14521 7.91834 6.15294 9.16668 6.56666"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M7.19165 12.5L12.875 6.80835"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M0.94165 19.375L3.09165 17.2167"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M13.4334 19.375L11.2834 17.225"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
<path
d="M16.4083 6.80833C16.2734 6.94827 16.1069 7.05383 15.9227 7.11618C15.7386 7.17852 15.5422 7.19584 15.35 7.16667L12.85 6.80833L12.5 4.33333C12.4731 4.14189 12.4907 3.94684 12.5514 3.7633C12.6121 3.57976 12.7143 3.41267 12.85 3.275L15.525 0.625L16.2833 3.40833L19.0583 4.15833L16.4083 6.80833Z"
fill="none"
fill-opacity="0.2"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
></path>
</g>
<defs>
<clipPath id="clip0_11974_16556">
<rect width="20" height="20" fill="white"></rect>
</clipPath>
</defs>
</svg>
</div>
<div class="middle__text--div">
<div class="middle__text--div--top-text">
Design Career Prep Course
</div>
<p class="middle__text--div--bottom-text">
Land your dreame job! You'll have a career <br />
support spetialist to review your portfolio...
</p>
</div>
<div class="right__svg-div career__right__svg-div">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
class="right__svg-div--svg site-nav-dropdown-arrow icon-12 fill-current"
>
<path
d="M11.7803 6.53033C12.0732 6.23744 12.0732 5.76257 11.7803 5.46967L7.18414 0.873479C6.89124 0.580585 6.41637 0.580585 6.12348 0.873478C5.83058 1.16637 5.83058 1.64125 6.12348 1.93414L9.43934 5.25H0.75C0.335787 5.25 0 5.58579 0 6C0 6.41422 0.335787 6.75 0.75 6.75H9.43934L6.12348 10.0659C5.83058 10.3588 5.83058 10.8336 6.12348 11.1265C6.41637 11.4194 6.89124 11.4194 7.18414 11.1265L11.7803 6.53033Z"
></path>
</svg>
</div>
</a>
</li>
<!-- Browse our courses & workshops -->
<li
class="list inspiration__div--left--li inspiration__div--left--browse"
>
<a
href=""
class="list--link inspiration__div--left--li--link"
>
<div class="left--svg browse__svg">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
class="browse--icon header__link--svg"
>