-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
935 lines (918 loc) · 56.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>YouTube</title>
<link
rel="icon"
href="src/img/favicon.ico"
type="image/x-icon"
/>
<link
rel="stylesheet"
href="src/css/index.css"
/>
</head>
<!-- <body class="dark_mode"> -->
<body>
<div class="wrapper">
<header class="header">
<div class="header__left">
<div class="header__burger-button">
<svg
width="20"
height="17"
viewBox="0 0 20 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.6364 3H1.36364C0.61 3 0 2.328 0 1.5C0 0.672 0.61 0 1.36364 0H18.6364C19.3891 0 20 0.672 20 1.5C20 2.328 19.3891 3 18.6364 3ZM1.36364 7H18.6364C19.3891 7 20 7.672 20 8.5C20 9.328 19.3891 10 18.6364 10H1.36364C0.61 10 0 9.328 0 8.5C0 7.672 0.61 7 1.36364 7ZM18.6364 14H1.36364C0.61 14 0 14.672 0 15.5C0 16.328 0.61 17 1.36364 17H18.6364C19.3891 17 20 16.328 20 15.5C20 14.672 19.3891 14 18.6364 14Z"
fill="#1F2022"
/>
</svg>
</div>
<div class="header__logo">
<img
class="header__logo-img"
src="src/img/logoBlack.png"
alt=""
/>
<img
class="header__logo-img_light"
src="src/img/logoWhite.png"
alt=""
/>
</div>
</div>
<div class="header__right">
<form class="header__search-bar">
<input
class="header__search-input"
type="text"
id="search"
placeholder="Search"
required
/>
<button
class="header__search-button"
type="submit"
id="submit"
>
<svg
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.9005 16.4865L14.3205 12.9065L14.3195 12.9055C16.9095 9.569 16.4594 4.79387 13.2916 2.00007C10.1238 -0.793727 5.32983 -0.643497 2.34317 2.34317C-0.643497 5.32983 -0.793727 10.1238 2.00007 13.2916C4.79387 16.4594 9.569 16.9095 12.9055 14.3195L16.4855 17.8995C16.7364 18.1596 17.1081 18.2642 17.4578 18.1729C17.8075 18.0816 18.0808 17.8088 18.1725 17.4592C18.2643 17.1097 18.1603 16.7378 17.9005 16.4865ZM13.1967 11.0005C12.1249 12.8569 10.1441 14.0005 8.00052 14.0005C4.68681 14.0005 2.00052 11.3142 2.00052 8.00052C2.00052 4.68681 4.68681 2.00052 8.00052 2.00052C10.1441 2.00052 12.1249 3.14411 13.1967 5.00052C14.2685 6.85693 14.2685 9.14411 13.1967 11.0005Z"
/>
</svg>
</button>
</form>
<button
class="header__search-button_mobile"
type="submit"
id="submit"
>
<svg
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.9005 16.4865L14.3205 12.9065L14.3195 12.9055C16.9095 9.569 16.4594 4.79387 13.2916 2.00007C10.1238 -0.793727 5.32983 -0.643497 2.34317 2.34317C-0.643497 5.32983 -0.793727 10.1238 2.00007 13.2916C4.79387 16.4594 9.569 16.9095 12.9055 14.3195L16.4855 17.8995C16.7364 18.1596 17.1081 18.2642 17.4578 18.1729C17.8075 18.0816 18.0808 17.8088 18.1725 17.4592C18.2643 17.1097 18.1603 16.7378 17.9005 16.4865ZM13.1967 11.0005C12.1249 12.8569 10.1441 14.0005 8.00052 14.0005C4.68681 14.0005 2.00052 11.3142 2.00052 8.00052C2.00052 4.68681 4.68681 2.00052 8.00052 2.00052C10.1441 2.00052 12.1249 3.14411 13.1967 5.00052C14.2685 6.85693 14.2685 9.14411 13.1967 11.0005Z"
fill="black"
/>
</svg>
</button>
<div class="header__buttons">
<div class="header__button">
<svg
width="27"
height="20"
viewBox="0 0 27 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M22.2082 2.86766L18.4091 5.68182V2.50266C18.4091 1.11814 17.3104 0 15.955 0H2.4541C1.09644 0 0 1.12048 0 2.50266V17.4973C0 18.8819 1.09874 20 2.4541 20H15.955C17.3126 20 18.4091 18.8795 18.4091 17.4973V14.3182L22.2082 17.1323C22.48 17.3336 22.9801 17.5 23.32 17.5H25.7691C26.456 17.5 27 16.939 27 16.2469V3.75309C27 3.06064 26.4489 2.5 25.7691 2.5H23.32C22.9732 2.5 22.4823 2.66461 22.2082 2.86766ZM2.45455 17.5V2.5H15.9545V17.5H2.45455ZM4.90909 13.75C4.90909 13.0596 5.45956 12.5 6.13996 12.5H12.2691C12.9489 12.5 13.5 13.0548 13.5 13.75C13.5 14.4404 12.9495 15 12.2691 15H6.13996C5.46017 15 4.90909 14.4452 4.90909 13.75ZM23.5108 14.9998L18.424 11.238L18.4243 8.76179L23.5073 4.9966L24.5455 4.99818V14.9988L23.5108 14.9998Z"
/>
</svg>
</div>
<div class="header__button">
<svg
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0 2.5C0 3.88071 1.11929 5 2.5 5C3.88071 5 5 3.88071 5 2.5C5 1.11929 3.88071 0 2.5 0C1.11929 0 0 1.11929 0 2.5ZM2.5 13C1.11929 13 0 11.8807 0 10.5C0 9.11929 1.11929 8 2.5 8C3.88071 8 5 9.11929 5 10.5C5 11.8807 3.88071 13 2.5 13ZM2.5 21C1.11929 21 0 19.8807 0 18.5C0 17.1193 1.11929 16 2.5 16C3.88071 16 5 17.1193 5 18.5C5 19.8807 3.88071 21 2.5 21ZM10.5 21C9.11929 21 8 19.8807 8 18.5C8 17.1193 9.11929 16 10.5 16C11.8807 16 13 17.1193 13 18.5C13 19.8807 11.8807 21 10.5 21ZM16 18.5C16 19.8807 17.1193 21 18.5 21C19.8807 21 21 19.8807 21 18.5C21 17.1193 19.8807 16 18.5 16C17.1193 16 16 17.1193 16 18.5ZM10.5 13C9.11929 13 8 11.8807 8 10.5C8 9.11929 9.11929 8 10.5 8C11.8807 8 13 9.11929 13 10.5C13 11.8807 11.8807 13 10.5 13ZM8 2.5C8 3.88071 9.11929 5 10.5 5C11.8807 5 13 3.88071 13 2.5C13 1.11929 11.8807 0 10.5 0C9.11929 0 8 1.11929 8 2.5ZM18.5 13C17.1193 13 16 11.8807 16 10.5C16 9.11929 17.1193 8 18.5 8C19.8807 8 21 9.11929 21 10.5C21 11.8807 19.8807 13 18.5 13ZM16 2.5C16 3.88071 17.1193 5 18.5 5C19.8807 5 21 3.88071 21 2.5C21 1.11929 19.8807 0 18.5 0C17.1193 0 16 1.11929 16 2.5Z"
/>
</svg>
</div>
<div class="header__button header__button_notifications">
<svg
width="22"
height="26"
viewBox="0 0 22 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.66927 22.4545C1.64382 22.4545 0 20.8655 0 18.9091C0 17.6106 0.727122 16.4532 1.83849 15.835C1.83849 15.4764 1.83333 11.2256 1.83333 11.2256C1.83333 7.14185 4.66852 3.70365 8.55556 2.6765V2.36364C8.55556 1.05824 9.64997 0 11 0C12.35 0 13.4444 1.05824 13.4444 2.36364V2.6765C17.3323 3.70344 20.1667 7.14194 20.1667 11.2318V15.8454C21.2793 16.4664 22 17.619 22 18.9091C22 20.8681 20.3586 22.4545 18.3307 22.4545H14.6667C14.6646 24.413 13.0197 26 11 26C8.97496 26 7.33333 24.4143 7.33333 22.4571L3.66927 22.4545ZM9.77778 22.4545C9.77778 23.1083 10.3244 23.6364 11 23.6364C11.6709 23.6364 12.2201 23.1064 12.2222 22.4545H9.77778ZM17.7222 11.2318V16.9427C17.7222 17.2702 17.9922 17.6032 18.3181 17.6847L18.6385 17.7648C19.1733 17.8984 19.5556 18.3689 19.5556 18.9091C19.5556 19.5624 19.0088 20.0909 18.3307 20.0909H3.66927C2.99369 20.0909 2.44444 19.56 2.44444 18.9091C2.44444 18.3666 2.82517 17.8979 3.36026 17.7647L3.69151 17.6823C4.0153 17.6017 4.27778 17.2732 4.27778 16.9426V11.2256C4.27778 7.63639 7.28675 4.72727 11 4.72727C14.7148 4.72727 17.7222 7.63541 17.7222 11.2318Z"
/>
</svg>
<div class="header__notifications">3</div>
</div>
<div class="header__userpic">
<img
src="src/img/userpic.png"
alt=""
/>
</div>
</div>
</div>
</header>
<main class="main">
<aside class="aside">
<nav class="aside__nav">
<ul class="aside__ul">
<li class="aside__button aside__button_active">
<div class="aside__icon">
<svg
width="20"
height="19"
viewBox="0 0 20 19"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.55192 10.5921C1.19689 10.9455 0.621289 10.9455 0.266267 10.5921C-0.0887555 10.2388 -0.0887555 9.66595 0.266267 9.31262L9.35718 0.264999C9.7122 -0.0883329 10.2878 -0.0883329 10.6428 0.264999L19.7337 9.31262C20.0888 9.66595 20.0888 10.2388 19.7337 10.5921C19.3787 10.9455 18.8031 10.9455 18.4481 10.5921L18.1818 10.3274V17.1945C18.1818 18.1933 17.3689 19 16.3628 19H3.63716C2.63348 19 1.81818 18.1934 1.81818 17.1945V10.3274L1.55192 10.5921ZM3.63716 17.1905L6.36364 17.191V11.7597C6.36364 11.2612 6.77023 10.8571 7.27003 10.8571H12.73C13.2306 10.8571 13.6364 11.2609 13.6364 11.7597V17.1929L16.3636 17.1945V8.51944L10 2.19166L3.63632 8.51948C3.63613 10.2308 3.63716 17.1905 3.63716 17.1905ZM11.8182 12.6653V17.1923L8.18182 17.1914V12.6667L11.8182 12.6653Z"
/>
</svg>
</div>
<div class="aside__title">Home</div>
</li>
<li class="aside__button">
<div class="aside__icon">
<svg
width="16"
height="21"
viewBox="0 0 16 21"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.615 7.20041C15.1323 8.51081 16 10.1175 16 12.321C16 16.9118 12.4133 20.5268 8.0115 20.5268C3.60573 20.5268 0 16.9093 0 12.321C0 9.79412 0.547583 8.23242 2.15502 5.6366C2.66365 4.81522 3.89867 5.11434 3.99436 6.08209C4.08034 6.95167 4.34435 7.69187 4.729 8.25935C4.47244 5.19295 5.80372 1.74433 9.08631 0.10596C9.84629 -0.27335 10.6943 0.424512 10.4966 1.26648C9.98409 3.44851 10.5121 4.62244 11.8924 5.88709C11.926 5.91795 12.098 6.04489 12.3254 6.21279C12.7373 6.51686 13.3311 6.95524 13.615 7.20041ZM2.62075 9.00737C2.33897 9.66335 2 10.4525 2 12.321C2 15.7681 4.70107 18.478 8.0115 18.478C11.3159 18.478 14 15.7727 14 12.321C14 10.7811 13.4246 9.71578 12.3258 8.76679C12.1524 8.61699 11.7458 8.31456 11.3632 8.0299C11.0014 7.76076 10.6609 7.5075 10.559 7.41416C9.23392 6.20002 8.4238 4.9071 8.31376 3.18307C7.64377 3.85212 6.10424 5.93208 6.97198 10.0484C7.1065 10.6865 6.6318 11.289 5.99451 11.289C4.73006 11.289 3.48016 10.2984 2.71627 8.78204C2.68562 8.85634 2.65357 8.93095 2.62075 9.00737Z"
/>
</svg>
</div>
<div class="aside__title">Trending</div>
</li>
<li class="aside__button">
<div class="aside__icon">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.9056 1C3.9056 0.447715 4.35471 0 4.901 0H12.9102C13.4599 0 13.9056 0.443865 13.9056 1C13.9056 1.55228 13.4565 2 12.9102 2H4.901C4.35125 2 3.9056 1.55614 3.9056 1ZM0.0101027 8.0949L0.811023 16.1041C0.917267 17.1665 1.83603 18 2.90122 18H14.91C15.9712 18 16.8943 17.1632 17.0002 16.1041L17.8011 8.0949C17.9152 6.95379 17.0495 6 15.9047 6H1.90647C0.759323 6 -0.103812 6.95576 0.0101027 8.0949ZM2.01101 8.00421L15.7998 8.0079L14.9056 16H2.9056L2.01101 8.00421ZM2.90122 3C2.35555 3 1.9056 3.44772 1.9056 4C1.9056 4.55614 2.35136 5 2.90122 5H14.91C15.4557 5 15.9056 4.55228 15.9056 4C15.9056 3.44386 15.4598 3 14.91 3H2.90122Z"
/>
</svg>
</div>
<div class="aside__title">Subscriptions</div>
</li>
</ul>
<ul class="aside__ul">
<li class="aside__button">
<div class="aside__icon">
<svg
width="20"
height="16"
viewBox="0 0 20 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.81377 0C0.818072 0 0 0.793984 0 1.77341V14.2266C0 15.2066 0.814396 16 1.819 16H18.181C19.185 16 20 15.2042 20 14.2225V4.44412C20 3.4608 19.1843 2.66667 18.1781 2.66667H10.0034L8.71574 0.742815C8.441 0.332343 7.81071 0 7.30762 0H1.81377ZM18.181 14.2222L1.81818 14.2266L1.81377 1.77778L7.27273 1.78212L8.48211 3.64019C8.818 4.14203 9.39005 4.44444 10.0034 4.44444L18.1818 4.44412L18.181 14.2222Z"
/>
</svg>
</div>
<div class="aside__title">Library</div>
</li>
<li class="aside__button">
<div class="aside__icon">
<svg
width="20"
height="18"
viewBox="0 0 20 18"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.36364 0C4.85741 0 3.63636 1.20746 3.63636 2.69744V12.6H0.909091C0.407014 12.6 0 13.0042 0 13.4991V15.3C0 16.7912 1.22411 18 2.72727 18H13.6364C15.1423 18 16.3636 16.7944 16.3636 15.3045V5.4H19.0909C19.5965 5.4 20 4.99813 20 4.5024V2.70439C20 1.21111 18.7799 0 17.2727 0H6.36364ZM5.3 16.2C5.40009 15.9193 5.45455 15.6172 5.45455 15.3026V2.69744C5.45455 2.20206 5.86107 1.8 6.36364 1.8C6.86402 1.8 7.27273 2.2043 7.27273 2.7V4.50094C7.27273 4.99748 7.67624 5.4 8.18182 5.4H14.5455V15.3045C14.5455 15.7991 14.1394 16.2 13.6364 16.2H5.3ZM1.81818 14.4V15.3C1.81818 15.7957 2.22689 16.2 2.72727 16.2C3.22984 16.2 3.63636 15.7979 3.63636 15.3026V14.4H1.81818ZM9.09091 3.6V2.7C9.09091 2.38443 9.03609 2.0815 8.9354 1.8H17.2727C17.7747 1.8 18.1818 2.20414 18.1818 2.70439V3.6H9.09091Z"
/>
</svg>
</div>
<div class="aside__title">History</div>
</li>
<li class="aside__button">
<div class="aside__icon">
<svg
width="17"
height="19"
viewBox="0 0 17 19"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.7263 16.7342C11.4999 17.5194 10.0515 17.973 8.5 17.973C6.94846 17.973 5.50008 17.5194 4.27374 16.7342L3.36555 18.3497C3.08967 18.8405 2.48163 19.0104 2 18.7248C1.52171 18.4412 1.35565 17.817 1.6335 17.3227C1.6335 17.3227 2.68265 15.4627 2.70994 15.4264C1.3407 13.9519 0.5 11.9552 0.5 9.75676C0.5 8.53312 0.760452 7.37196 1.22753 6.32856C0.476253 5.66926 0 4.68905 0 3.59459C0 1.60935 1.567 0 3.5 0C4.79331 0 5.92278 0.720433 6.52869 1.79186C7.15928 1.62774 7.81973 1.54054 8.5 1.54054C9.11512 1.54054 9.71402 1.61184 10.2893 1.74683C10.9011 0.700295 12.017 0 13.2921 0C15.2251 0 16.7921 1.60935 16.7921 3.59459C16.7921 4.61644 16.3769 5.5387 15.7104 6.19316C16.2164 7.27113 16.5 8.47993 16.5 9.75676C16.5 11.9552 15.6593 13.9519 14.2901 15.4264C14.3173 15.4627 15.3665 17.3227 15.3665 17.3227C15.6443 17.817 15.4783 18.4412 15 18.7248C14.5184 19.0104 13.9103 18.8405 13.6344 18.3497L12.7263 16.7342ZM7.5 5.64845C7.5 5.08135 7.94386 4.62162 8.5 4.62162C9.05229 4.62162 9.5 5.07733 9.5 5.64845V9.75676C9.5 10.324 9.05665 10.7838 8.50095 10.7838H6.49905C5.94729 10.7838 5.5 10.3279 5.5 9.75676C5.5 9.18955 5.94335 8.72973 6.49905 8.72973H7.5V5.64845ZM2 3.59459C2 2.74378 2.67157 2.05405 3.5 2.05405C3.93928 2.05405 4.3426 2.24978 4.62052 2.56955C3.73645 3.07397 2.95519 3.74545 2.3172 4.54247C2.11715 4.27879 2 3.9482 2 3.59459ZM14.7921 3.59459C14.7921 2.74378 14.1205 2.05405 13.2921 2.05405C12.8889 2.05405 12.5161 2.21892 12.2426 2.49324C13.1305 2.9768 13.9191 3.62706 14.569 4.4034C14.7112 4.1665 14.7921 3.8885 14.7921 3.59459ZM8.5 15.9189C5.18629 15.9189 2.5 13.16 2.5 9.75676C2.5 6.35349 5.18629 3.59459 8.5 3.59459C11.8137 3.59459 14.5 6.35349 14.5 9.75676C14.5 13.16 11.8137 15.9189 8.5 15.9189Z"
/>
</svg>
</div>
<div class="aside__title">Watch later</div>
</li>
<li class="aside__button">
<div class="aside__icon">
<svg
width="19"
height="18"
viewBox="0 0 19 18"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M15.5882 16.1776C15.8046 17.4345 14.7118 18.2242 13.5793 17.6312C13.5793 17.6312 9.32641 15.4276 9.36773 15.4059L5.11778 17.6312C3.98444 18.2246 2.89263 17.4335 3.10892 16.1776C3.10892 16.1776 3.89901 11.4682 3.93244 11.5007L0.494159 8.16277C-0.422733 7.27264 -0.00467553 5.99401 1.26148 5.81077C1.26148 5.81077 6.00269 5.10388 5.98203 5.14558L8.107 0.857337C8.67367 -0.286213 10.0239 -0.285345 10.5901 0.857337C10.5901 0.857337 12.7302 5.1298 12.684 5.12312L17.4356 5.81077C18.7027 5.99415 19.1191 7.27331 18.2029 8.16277C18.2029 8.16277 14.7844 11.5102 14.7765 11.4644L15.5882 16.1776ZM5.09647 15.5573L8.50515 13.7718C9.0044 13.5104 9.6939 13.511 10.1919 13.7718L13.609 15.561L12.9495 11.7764C12.8542 11.2228 13.0679 10.5699 13.4708 10.1787L16.2242 7.50565L12.4175 6.95008C11.8593 6.8693 11.3019 6.46516 11.0528 5.96262L9.34969 2.52567L7.64427 5.96262C7.39464 6.46637 6.83646 6.8695 6.27962 6.95008L2.46854 7.50163L5.22632 10.1787C5.63022 10.5708 5.84269 11.2241 5.74757 11.7764L5.09647 15.5573Z"
/>
</svg>
</div>
<div class="aside__title">Favourites</div>
</li>
<li class="aside__button">
<div class="aside__icon">
<svg
width="18"
height="17"
viewBox="0 0 18 17"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.6 0C11.217 0 9.95536 0.530866 9 1.40391C8.04464 0.530866 6.78304 0 5.4 0C2.41766 0 0 2.46848 0 5.51351C0 9.95785 4.48072 14.2534 8.62049 16.7595C8.83009 16.8923 9.17315 16.8905 9.38216 16.7577C13.4946 14.2432 18 9.95763 18 5.51351C18 2.46848 15.5823 0 12.6 0ZM9.00509 14.8252C4.5546 11.8546 1.8 8.38441 1.8 5.51351C1.8 3.48349 3.41177 1.83784 5.4 1.83784C6.29958 1.83784 7.14325 2.17359 7.79955 2.77335L8.66561 3.56478C8.8528 3.73585 9.14971 3.73355 9.33439 3.56478L10.2004 2.77335C10.8567 2.17359 11.7004 1.83784 12.6 1.83784C14.5882 1.83784 16.2 3.48349 16.2 5.51351C16.2 8.45823 13.4557 11.8546 9.00509 14.8252Z"
/>
</svg>
</div>
<div class="aside__title">Liked videos</div>
</li>
<li class="aside__button">
<div class="aside__icon">
<svg
width="18"
height="20"
viewBox="0 0 18 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.85 17.2729C16.5897 17.2729 18 15.8484 18 14.0911V0.92929C18.0016 0.854306 17.9939 0.777902 17.9762 0.701509C17.8626 0.212723 17.3782 -0.0904878 16.8943 0.0242693L5.22802 2.79094C4.82628 2.88621 4.55117 3.23961 4.5 3.63657V13.9428C4.09084 13.7464 3.63312 13.6366 3.15 13.6366C1.4103 13.6366 0 15.0611 0 16.8184C0 18.5757 1.4103 20.0002 3.15 20.0002C4.8897 20.0002 6.3 18.5757 6.3 16.8184V8.0407L16.2 5.6929V11.2155C15.7908 11.0192 15.3331 10.9093 14.85 10.9093C13.1103 10.9093 11.7 12.3338 11.7 14.0911C11.7 15.8484 13.1103 17.2729 14.85 17.2729ZM6.3 6.17308V4.40434L16.2 2.05654V3.82528L6.3 6.17308ZM16.2 14.0911C16.2 13.338 15.5956 12.7275 14.85 12.7275C14.1044 12.7275 13.5 13.338 13.5 14.0911C13.5 14.8442 14.1044 15.4548 14.85 15.4548C15.5956 15.4548 16.2 14.8442 16.2 14.0911ZM3.15 15.4548C3.89558 15.4548 4.5 16.0653 4.5 16.8184C4.5 17.5715 3.89558 18.182 3.15 18.182C2.40442 18.182 1.8 17.5715 1.8 16.8184C1.8 16.0653 2.40442 15.4548 3.15 15.4548Z"
/>
</svg>
</div>
<div class="aside__title">Music</div>
</li>
<li class="aside__button">
<div class="aside__icon">
<svg
width="22"
height="16"
viewBox="0 0 22 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12.9034 0.5233C12.1075 0.810958 11.7676 0.88899 10.9998 0.88899C10.232 0.88899 9.89216 0.810958 9.09627 0.5233L9.03409 0.500814C8.02943 0.137542 7.43229 0 6.44525 0C4.05055 0 1.85231 2.2826 0.942996 5.06478C0.245262 7.1996 0.0589768 8.56701 0 11.5385C0.0582506 14.4925 1.34092 15.9856 3.66063 16C5.11467 15.9917 6.11219 15.363 7.03418 14.2208C7.17642 14.0446 7.56758 13.5231 7.60944 13.4673L7.61308 13.4625C8.56208 12.235 9.54325 11.5652 11.0027 11.5556C12.4564 11.5652 13.4376 12.235 14.3866 13.4625L14.3902 13.4673C14.4321 13.5231 14.8232 14.0446 14.9655 14.2208C15.8875 15.363 16.885 15.9917 18.3278 16C20.6587 15.9856 21.9414 14.4925 21.9997 11.5727C21.9407 8.56701 21.7544 7.1996 21.0567 5.06478C20.1474 2.2826 17.9491 0 15.5544 0C14.5674 0 13.9702 0.137542 12.9656 0.500814L12.9034 0.5233ZM8.45597 2.18913C9.4419 2.54547 10.0813 2.66676 10.9998 2.66676C11.9183 2.66676 12.5578 2.54547 13.5437 2.18913L13.6061 2.16655C14.4238 1.87087 14.828 1.77778 15.5544 1.77778C16.9794 1.77778 18.6138 3.47492 19.309 5.60189C19.9465 7.55254 20.1108 8.75828 20.1667 11.5727C20.1263 13.5619 19.5656 14.2146 18.3273 14.2222C17.5536 14.2178 17.0194 13.8811 16.4091 13.125C16.3079 12.9996 16.0221 12.62 15.9044 12.4636L15.9043 12.4634L15.9041 12.4633L15.904 12.4631L15.9037 12.4627L15.9037 12.4627L15.8535 12.3961C14.5953 10.7687 13.164 9.79184 10.9941 9.77782C8.83563 9.79184 7.40436 10.7687 6.14621 12.3961L6.096 12.4626C5.97878 12.6183 5.69198 12.9994 5.59053 13.125C4.98023 13.8811 4.44608 14.2178 3.6611 14.2222C2.43407 14.2146 1.87336 13.5619 1.83299 11.5384C1.88885 8.75828 2.05311 7.55254 2.69066 5.60189C3.38582 3.47492 5.02024 1.77778 6.44525 1.77778C7.17164 1.77778 7.57582 1.87087 8.39355 2.16655L8.45597 2.18913ZM15.5832 5.77778C15.0769 5.77778 14.6665 5.37981 14.6665 4.88889C14.6665 4.39797 15.0769 4 15.5832 4C16.0894 4 16.4998 4.39797 16.4998 4.88889C16.4998 5.37981 16.0894 5.77778 15.5832 5.77778ZM14.6665 8.44444C14.6665 8.93536 15.0769 9.33333 15.5832 9.33333C16.0894 9.33333 16.4998 8.93536 16.4998 8.44444C16.4998 7.95352 16.0894 7.55556 15.5832 7.55556C15.0769 7.55556 14.6665 7.95352 14.6665 8.44444ZM17.4165 7.55556C16.9102 7.55556 16.4998 7.15759 16.4998 6.66667C16.4998 6.17575 16.9102 5.77778 17.4165 5.77778C17.9228 5.77778 18.3332 6.17575 18.3332 6.66667C18.3332 7.15759 17.9228 7.55556 17.4165 7.55556ZM12.8332 6.66667C12.8332 7.15759 13.2436 7.55556 13.7498 7.55556C14.2561 7.55556 14.6665 7.15759 14.6665 6.66667C14.6665 6.17575 14.2561 5.77778 13.7498 5.77778C13.2436 5.77778 12.8332 6.17575 12.8332 6.66667ZM6.4165 9.33333C4.89771 9.33333 3.6665 8.13943 3.6665 6.66667C3.6665 5.19391 4.89771 4 6.4165 4C7.93528 4 9.1665 5.19391 9.1665 6.66667C9.1665 8.13943 7.93528 9.33333 6.4165 9.33333ZM7.33316 6.66667C7.33316 7.15759 6.92276 7.55556 6.4165 7.55556C5.91024 7.55556 5.49983 7.15759 5.49983 6.66667C5.49983 6.17575 5.91024 5.77778 6.4165 5.77778C6.92276 5.77778 7.33316 6.17575 7.33316 6.66667Z"
/>
</svg>
</div>
<div class="aside__title">Games</div>
</li>
<li class="aside__button">
<div class="aside__icon">
<svg
width="14"
height="8"
viewBox="0 0 14 8"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.66931 5.25531L11.6193 0.305313C11.8704 0.0453564 12.2422 -0.0588996 12.5918 0.0326158C12.9415 0.124131 13.2145 0.397176 13.306 0.746806C13.3975 1.09644 13.2933 1.46824 13.0333 1.71931L7.37631 7.37631C6.98581 7.7667 6.35281 7.7667 5.96231 7.37631L0.305313 1.71931C0.0453564 1.46824 -0.0588996 1.09644 0.0326158 0.746806C0.124131 0.397176 0.397176 0.124131 0.746806 0.0326158C1.09644 -0.0588996 1.46824 0.0453564 1.71931 0.305313L6.66931 5.25531Z"
/>
</svg>
</div>
<div class="aside__title">Show more</div>
</li>
</ul>
<ul class="aside__ul aside__ul_subscriptions">
<h3 class="aside__h3">Subscriptions</h3>
<li class="aside__button aside__button_subscriptions">
<div class="aside__img">
<img
src="src/img/subs/Gussie_Singleton.png"
alt=""
/>
</div>
<div class="aside__title">Gussie Singleton</div>
</li>
<li class="aside__button aside__button_subscriptions">
<div class="aside__img">
<img
src="src/img/subs/Nora_Francis.png"
alt=""
/>
</div>
<div class="aside__title">Nora Francis</div>
</li>
<li class="aside__button aside__button_subscriptions">
<div class="aside__img">
<img
src="src/img/subs/Belle_Briggs.png"
alt=""
/>
</div>
<div class="aside__title">Belle Briggs</div>
</li>
<li class="aside__button aside__button_subscriptions">
<div class="aside__img">
<img
src="src/img/subs/Eunice_Cortez.png"
alt=""
/>
</div>
<div class="aside__title">Eunice Cortez</div>
</li>
<li class="aside__button aside__button_subscriptions">
<div class="aside__img">
<img
src="src/img/subs/Emma_Hanson.png"
alt=""
/>
</div>
<div class="aside__title">Emma Hanson</div>
</li>
<li class="aside__button aside__button_subscriptions">
<div class="aside__img">
<img
src="src/img/subs/Leah_Berry.png"
alt=""
/>
</div>
<div class="aside__title">Leah Berry</div>
</li>
</ul>
</nav>
<div class="aside__button aside__button_footer">
<div class="aside__icon">
<svg
width="19"
height="20"
viewBox="0 0 19 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.4684 3.72984L12.7255 3.2963C12.7255 3.2963 11.9499 1.18529 11.8845 1.04241C11.6372 0.446706 10.9608 0 10.2828 0H8.42097C7.74577 0 7.07222 0.445749 6.80795 1.06812C6.75378 1.18551 5.98673 3.29574 5.98673 3.29574L5.25274 3.73208C5.25274 3.73208 3.01723 3.34267 2.86067 3.32789C2.22115 3.24416 1.49608 3.60662 1.15706 4.19382L0.22616 5.80618C-0.11144 6.39092 -0.0621848 7.1971 0.344673 7.73715C0.419296 7.84283 1.8639 9.57203 1.8639 9.57203C1.8639 9.57203 1.85186 9.85686 1.85186 10C1.85186 10.303 1.86248 10.429 1.86248 10.429C1.86248 10.429 0.419296 12.1572 0.328229 12.2853C-0.0641449 12.7973 -0.112893 13.6066 0.22616 14.1938L1.15706 15.8062C1.49462 16.3909 2.21732 16.7514 2.88838 16.6691C3.01723 16.6573 5.23083 16.2672 5.23083 16.2672L5.97602 16.6921C5.97602 16.6921 6.75378 18.8145 6.81919 18.9574C7.06642 19.5532 7.74286 20 8.42097 20H10.2828C10.9579 20 11.6314 19.5544 11.8957 18.9321C11.9499 18.8147 12.7255 16.7 12.7255 16.7L13.4565 16.269C13.4565 16.269 15.8311 16.6709 15.8364 16.6714C16.4824 16.7558 17.2076 16.3934 17.5467 15.8062L18.4776 14.1938C18.8151 13.6091 18.766 12.803 18.3592 12.263C18.2846 12.1573 16.8393 10.4365 16.8393 10.4365C16.8393 10.4365 16.8519 10.146 16.8519 10C16.8519 9.69704 16.8429 9.56952 16.8429 9.56952C16.8429 9.56952 18.2846 7.8427 18.3757 7.71452C18.7679 7.20254 18.8166 6.39338 18.4776 5.80618L17.5467 4.19382C17.2091 3.60908 16.4863 3.24864 15.8151 3.33097C15.6863 3.34276 13.4684 3.72984 13.4684 3.72984ZM10.9423 4.30503L11.0766 4.75439L11.508 4.93843C11.9156 5.11235 12.3007 5.33528 12.6549 5.60181L13.0302 5.88422L13.4872 5.77567C14.151 5.618 15.7116 5.35656 15.8613 5.33828C15.9481 5.32769 16.6964 6.62368 16.6438 6.69352C16.5532 6.81399 15.5466 8.03475 15.0782 8.5308L14.7565 8.8714L14.8124 9.33653C14.8386 9.55534 14.8519 9.77673 14.8519 10C14.8519 10.2233 14.8386 10.4447 14.8124 10.6635L14.7565 11.1286L15.0782 11.4692C15.5466 11.9652 16.5532 13.186 16.6438 13.3065C16.6964 13.3763 15.9126 14.668 15.8613 14.6617C15.7116 14.6434 14.151 14.382 13.4872 14.2243L13.0302 14.1158L12.6549 14.3982C12.3007 14.6647 11.9156 14.8877 11.508 15.0616L11.0766 15.2456L10.9423 15.695C10.747 16.3484 10.1933 17.8297 10.1343 17.9684C10.1001 18.0487 8.60366 18.0487 8.56947 17.9683C8.5105 17.8297 7.95692 16.3484 7.76164 15.6951L7.62731 15.2457L7.1959 15.0616C6.78824 14.8877 6.40322 14.6648 6.04897 14.3983L5.67364 14.1159L5.21666 14.2245C4.55278 14.3822 2.99208 14.6435 2.84241 14.6618C2.75565 14.6724 2.00741 13.3763 2.05996 13.3065C2.15061 13.186 3.15718 11.9654 3.62557 11.4694L3.94723 11.1288L3.89139 10.6637C3.86512 10.4448 3.85186 10.2233 3.85186 10C3.85186 9.77667 3.86512 9.55522 3.89139 9.33635L3.94723 8.87119L3.62557 8.53058C3.15718 8.0346 2.15061 6.81396 2.05996 6.69349C2.00741 6.62365 2.75565 5.32763 2.84241 5.33821C2.99208 5.35647 4.55278 5.61785 5.21666 5.77554L5.67364 5.88408L6.04897 5.6017C6.40322 5.33517 6.78824 5.11226 7.1959 4.93836L7.62731 4.75432L7.76164 4.30495C7.95692 3.65163 8.5105 2.17034 8.56947 2.03168C8.60366 1.9513 10.1001 1.95127 10.1343 2.03164C10.1933 2.1703 10.747 3.65163 10.9423 4.30503ZM9.35186 13C7.69501 13 6.35186 11.6569 6.35186 10C6.35186 8.34315 7.69501 7 9.35186 7C11.0087 7 12.3519 8.34315 12.3519 10C12.3519 11.6569 11.0087 13 9.35186 13ZM10.3519 10C10.3519 10.5523 9.90415 11 9.35186 11C8.79958 11 8.35186 10.5523 8.35186 10C8.35186 9.44771 8.79958 9 9.35186 9C9.90415 9 10.3519 9.44771 10.3519 10Z"
/>
</svg>
</div>
<div class="aside__title">Setting</div>
</div>
</aside>
<article class="article">
<section class="section">
<header class="section__header">
<div class="section__header-left">
<div class="section__header-img">
<img
src="src/img/subs/Gussie_Singleton.png"
alt=""
/>
</div>
<h2 class="section__header-title section__header-title_channel">Dollie Blair</h2>
</div>
<div class="section__header-right">
<div class="section__nav-buttons">
<button class="section__nav-button section__nav-button_left">
<svg
width="8"
height="12"
viewBox="0 0 8 12"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.00168 0.66621L7.53635 1.20523C7.71212 1.39211 7.80005 1.61022 7.80005 1.8593C7.80005 2.11341 7.71212 2.32906 7.53635 2.50641L4.07191 6.0001L7.53626 9.49379C7.71203 9.67114 7.79996 9.88678 7.79996 10.1408C7.79996 10.39 7.71203 10.6081 7.53626 10.795L7.00159 11.3269C6.8211 11.509 6.60482 11.6001 6.35293 11.6001C6.09631 11.6001 5.88248 11.509 5.71143 11.3269L1.07093 6.64711C0.890341 6.47453 0.800049 6.25897 0.800049 6.0001C0.800049 5.74607 0.890341 5.52805 1.07093 5.34602L5.71143 0.66621C5.88729 0.488861 6.10112 0.400098 6.35293 0.400098C6.60009 0.400098 6.81628 0.488861 7.00168 0.66621Z"
/>
</svg>
</button>
<button class="section__nav-button section__nav-button_right">
<svg
width="8"
height="12"
viewBox="0 0 8 12"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.998319 0.66621L0.463653 1.20523C0.287881 1.39211 0.199951 1.61022 0.199951 1.8593C0.199951 2.11341 0.287881 2.32906 0.463653 2.50641L3.92809 6.0001L0.463741 9.49379C0.287968 9.67114 0.200039 9.88678 0.200039 10.1408C0.200039 10.39 0.287968 10.6081 0.463741 10.795L0.998406 11.3269C1.1789 11.509 1.39518 11.6001 1.64707 11.6001C1.90369 11.6001 2.11752 11.509 2.28857 11.3269L6.92907 6.64711C7.10966 6.47453 7.19995 6.25897 7.19995 6.0001C7.19995 5.74607 7.10966 5.52805 6.92907 5.34602L2.28857 0.66621C2.11271 0.488861 1.89888 0.400098 1.64707 0.400098C1.39991 0.400098 1.18372 0.488861 0.998319 0.66621Z"
/>
</svg>
</button>
</div>
</div>
</header>
<ul class="section__video-list">
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/A_Brief.png"
alt=""
/>
<div class="video-item__time">4:15</div>
</div>
<div class="video-item__title">A Brief History Of Creation</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>80k views</span>
<pre>·</pre>
<span>3 days ago</span>
</div>
<div class="video-item__author">Dollie Blair</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Selecting.png"
alt=""
/>
<div class="video-item__time">8:00</div>
</div>
<div class="video-item__title">Selecting The Right Hotel</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>123k views </span>
<pre>·</pre>
<span> 1 months ago</span>
</div>
<div class="video-item__author">Dollie Blair</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Asteroids.png"
alt=""
/>
<div class="video-item__time">5:32</div>
</div>
<div class="video-item__title">Asteroids</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>43k views </span>
<pre>·</pre>
<span> 12 days ago</span>
</div>
<div class="video-item__author">Dollie Blair</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Telescopes.png"
alt=""
/>
<div class="video-item__time">6:40</div>
</div>
<div class="video-item__title">Telescopes 101</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>11k views </span>
<pre>·</pre>
<span> 6 months ago</span>
</div>
<div class="video-item__author">Dollie Blair</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Medical.png"
alt=""
/>
<div class="video-item__time">1:45</div>
</div>
<div class="video-item__title">Medical Care Is Just</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>18k views </span>
<pre>·</pre>
<span> 2 days ago</span>
</div>
<div class="video-item__author">Dollie Blair</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Moon.png"
alt=""
/>
<div class="video-item__time">2:12</div>
</div>
<div class="video-item__title">Moon Gazing</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>67k views </span>
<pre>·</pre>
<span> 4 months ago</span>
</div>
<div class="video-item__author">Dollie Blair</div>
</div>
</li>
</ul>
</section>
<section class="section">
<header class="section__header">
<div class="section__header-left">
<h2 class="section__header-title">Recommended</h2>
</div>
<div class="section__header-right">
<div class="section__nav-buttons">
<button class="section__nav-button section__nav-button_left">
<svg
width="8"
height="12"
viewBox="0 0 8 12"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.00168 0.66621L7.53635 1.20523C7.71212 1.39211 7.80005 1.61022 7.80005 1.8593C7.80005 2.11341 7.71212 2.32906 7.53635 2.50641L4.07191 6.0001L7.53626 9.49379C7.71203 9.67114 7.79996 9.88678 7.79996 10.1408C7.79996 10.39 7.71203 10.6081 7.53626 10.795L7.00159 11.3269C6.8211 11.509 6.60482 11.6001 6.35293 11.6001C6.09631 11.6001 5.88248 11.509 5.71143 11.3269L1.07093 6.64711C0.890341 6.47453 0.800049 6.25897 0.800049 6.0001C0.800049 5.74607 0.890341 5.52805 1.07093 5.34602L5.71143 0.66621C5.88729 0.488861 6.10112 0.400098 6.35293 0.400098C6.60009 0.400098 6.81628 0.488861 7.00168 0.66621Z"
/>
</svg>
</button>
<button class="section__nav-button section__nav-button_right">
<svg
width="8"
height="12"
viewBox="0 0 8 12"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.998319 0.66621L0.463653 1.20523C0.287881 1.39211 0.199951 1.61022 0.199951 1.8593C0.199951 2.11341 0.287881 2.32906 0.463653 2.50641L3.92809 6.0001L0.463741 9.49379C0.287968 9.67114 0.200039 9.88678 0.200039 10.1408C0.200039 10.39 0.287968 10.6081 0.463741 10.795L0.998406 11.3269C1.1789 11.509 1.39518 11.6001 1.64707 11.6001C1.90369 11.6001 2.11752 11.509 2.28857 11.3269L6.92907 6.64711C7.10966 6.47453 7.19995 6.25897 7.19995 6.0001C7.19995 5.74607 7.10966 5.52805 6.92907 5.34602L2.28857 0.66621C2.11271 0.488861 1.89888 0.400098 1.64707 0.400098C1.39991 0.400098 1.18372 0.488861 0.998319 0.66621Z"
/>
</svg>
</button>
</div>
</div>
</header>
<ul class="section__video-list">
<li class="video-item video-item_big">
<div class="video-item__img video-item__img_big">
<img
src="src/img/videos_thumbnails/Dude.png"
alt=""
/>
<div class="video-item__time">3:40</div>
</div>
<div class="video-item__title">
Dude You Re Getting A Telescope
</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>34k views</span>
<pre>·</pre>
<span>5 months ago</span>
</div>
<div class="video-item__author">Gussie French</div>
</div>
</li>
<li class="video-item video-item_big">
<div class="video-item__img video-item__img_big">
<img
src="src/img/videos_thumbnails/Moon2.png"
alt=""
/>
<div class="video-item__time">2:12</div>
</div>
<div class="video-item__title">Moon Gazing</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>54k views</span>
<pre>·</pre>
<span>11 months ago</span>
</div>
<div class="video-item__author">Edward Osborne</div>
</div>
</li>
<li class="video-item video-item_big">
<div class="video-item__img video-item__img_big">
<img
src="src/img/videos_thumbnails/Moon3.png"
alt=""
/>
<div class="video-item__time">2:12</div>
</div>
<div class="video-item__title">Moon Gazing</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>125k views</span>
<pre>·</pre>
<span>4 months ago</span>
</div>
<div class="video-item__author">Dollie Blair</div>
</div>
</li>
</ul>
</section>
<section class="section">
<header class="section__header">
<div class="section__header-left">
<div class="section__header-img">
<img
src="src/img/subs/Food.png"
alt=""
/>
</div>
<div class="header__left-text">
<h2 class="section__header-title section__header-title_channel">Food & Drink</h2>
<div class="section__header-description">
Recommended channel for you
</div>
</div>
</div>
<div class="section__header-right">
<button class="section__subscribe-button">
Subscribe 2.3m
</button>
<div class="section__nav-buttons">
<button class="section__nav-button section__nav-button_left">
<svg
width="8"
height="12"
viewBox="0 0 8 12"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7.00168 0.66621L7.53635 1.20523C7.71212 1.39211 7.80005 1.61022 7.80005 1.8593C7.80005 2.11341 7.71212 2.32906 7.53635 2.50641L4.07191 6.0001L7.53626 9.49379C7.71203 9.67114 7.79996 9.88678 7.79996 10.1408C7.79996 10.39 7.71203 10.6081 7.53626 10.795L7.00159 11.3269C6.8211 11.509 6.60482 11.6001 6.35293 11.6001C6.09631 11.6001 5.88248 11.509 5.71143 11.3269L1.07093 6.64711C0.890341 6.47453 0.800049 6.25897 0.800049 6.0001C0.800049 5.74607 0.890341 5.52805 1.07093 5.34602L5.71143 0.66621C5.88729 0.488861 6.10112 0.400098 6.35293 0.400098C6.60009 0.400098 6.81628 0.488861 7.00168 0.66621Z"
/>
</svg>
</button>
<button class="section__nav-button section__nav-button_right">
<svg
width="8"
height="12"
viewBox="0 0 8 12"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.998319 0.66621L0.463653 1.20523C0.287881 1.39211 0.199951 1.61022 0.199951 1.8593C0.199951 2.11341 0.287881 2.32906 0.463653 2.50641L3.92809 6.0001L0.463741 9.49379C0.287968 9.67114 0.200039 9.88678 0.200039 10.1408C0.200039 10.39 0.287968 10.6081 0.463741 10.795L0.998406 11.3269C1.1789 11.509 1.39518 11.6001 1.64707 11.6001C1.90369 11.6001 2.11752 11.509 2.28857 11.3269L6.92907 6.64711C7.10966 6.47453 7.19995 6.25897 7.19995 6.0001C7.19995 5.74607 7.10966 5.52805 6.92907 5.34602L2.28857 0.66621C2.11271 0.488861 1.89888 0.400098 1.64707 0.400098C1.39991 0.400098 1.18372 0.488861 0.998319 0.66621Z"
/>
</svg>
</button>
</div>
</div>
</header>
<ul class="section__video-list">
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Astronomy.png"
alt=""
/>
<div class="video-item__time">7:36</div>
</div>
<div class="video-item__title">Astronomy Or Astrology</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>240k views</span>
<pre>·</pre>
<span>4 months ago</span>
</div>
<div class="video-item__author">Food & Drink</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Advertising.png"
alt=""
/>
<div class="video-item__time">2:19</div>
</div>
<div class="video-item__title">Advertising Outdoors</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>13k views</span>
<pre>·</pre>
<span>15 days ago</span>
</div>
<div class="video-item__author">Food & Drink</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Radio.png"
alt=""
/>
<div class="video-item__time">9:05</div>
</div>
<div class="video-item__title">Radio Astronomy</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>1k views</span>
<pre>·</pre>
<span>11 months ago</span>
</div>
<div class="video-item__author">Food & Drink</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/A_Good.png"
alt=""
/>
<div class="video-item__time">3:40</div>
</div>
<div class="video-item__title">A Good Autoresponder</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>45k views</span>
<pre>·</pre>
<span>2 months ago</span>
</div>
<div class="video-item__author">Food & Drink</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Baby.png"
alt=""
/>
<div class="video-item__time">1:56</div>
</div>
<div class="video-item__title">Baby Monitor Technology</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>86k views</span>
<pre>·</pre>
<span>7 days ago</span>
</div>
<div class="video-item__author">Food & Drink</div>
</div>
</li>
<li class="video-item">
<div class="video-item__img">
<img
src="src/img/videos_thumbnails/Asteroids2.png"
alt=""
/>
<div class="video-item__time">4:15</div>
</div>
<div class="video-item__title">Asteroids</div>
<div class="video-item__description">
<div class="video-item__views-and-data">
<span>123k views</span>
<pre>·</pre>
<span>4 months ago</span>
</div>
<div class="video-item__author">Food & Drink</div>
</div>
</li>
</ul>
</section>
</article>
</main>
<nav class="nav-mobile-back"></nav>
<nav class="nav-mobile">
<button class="nav-mobile__button nav-mobile__button_active">
<div class="nav-mobile__icon">
<svg
width="20"
height="19"
viewBox="0 0 20 19"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.55192 10.5921C1.19689 10.9455 0.621289 10.9455 0.266267 10.5921C-0.0887555 10.2388 -0.0887555 9.66595 0.266267 9.31262L9.35718 0.264999C9.7122 -0.0883329 10.2878 -0.0883329 10.6428 0.264999L19.7337 9.31262C20.0888 9.66595 20.0888 10.2388 19.7337 10.5921C19.3787 10.9455 18.8031 10.9455 18.4481 10.5921L18.1818 10.3274V17.1945C18.1818 18.1933 17.3689 19 16.3628 19H3.63716C2.63348 19 1.81818 18.1934 1.81818 17.1945V10.3274L1.55192 10.5921ZM3.63716 17.1905L6.36364 17.191V11.7597C6.36364 11.2612 6.77023 10.8571 7.27003 10.8571H12.73C13.2306 10.8571 13.6364 11.2609 13.6364 11.7597V17.1929L16.3636 17.1945V8.51944L10 2.19166L3.63632 8.51948C3.63613 10.2308 3.63716 17.1905 3.63716 17.1905ZM11.8182 12.6653V17.1923L8.18182 17.1914V12.6667L11.8182 12.6653Z"
/>
</svg>
</div>
<div class="nav-mobile__title">Home</div>
</button>
<button class="nav-mobile__button">
<div class="nav-mobile__icon">
<svg
width="16"
height="21"
viewBox="0 0 16 21"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.615 7.20041C15.1323 8.51081 16 10.1175 16 12.321C16 16.9118 12.4133 20.5268 8.0115 20.5268C3.60573 20.5268 0 16.9093 0 12.321C0 9.79412 0.547583 8.23242 2.15502 5.6366C2.66365 4.81522 3.89867 5.11434 3.99436 6.08209C4.08034 6.95167 4.34435 7.69187 4.729 8.25935C4.47244 5.19295 5.80372 1.74433 9.08631 0.10596C9.84629 -0.27335 10.6943 0.424512 10.4966 1.26648C9.98409 3.44851 10.5121 4.62244 11.8924 5.88709C11.926 5.91795 12.098 6.04489 12.3254 6.21279C12.7373 6.51686 13.3311 6.95524 13.615 7.20041ZM2.62075 9.00737C2.33897 9.66335 2 10.4525 2 12.321C2 15.7681 4.70107 18.478 8.0115 18.478C11.3159 18.478 14 15.7727 14 12.321C14 10.7811 13.4246 9.71578 12.3258 8.76679C12.1524 8.61699 11.7458 8.31456 11.3632 8.0299C11.0014 7.76076 10.6609 7.5075 10.559 7.41416C9.23392 6.20002 8.4238 4.9071 8.31376 3.18307C7.64377 3.85212 6.10424 5.93208 6.97198 10.0484C7.1065 10.6865 6.6318 11.289 5.99451 11.289C4.73006 11.289 3.48016 10.2984 2.71627 8.78204C2.68562 8.85634 2.65357 8.93095 2.62075 9.00737Z"
/>
</svg>
</div>
<div class="nav-mobile__title">Trending</div>
</button>
<button class="nav-mobile__button">
<div class="nav-mobile__icon">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.9056 1C3.9056 0.447715 4.35471 0 4.901 0H12.9102C13.4599 0 13.9056 0.443865 13.9056 1C13.9056 1.55228 13.4565 2 12.9102 2H4.901C4.35125 2 3.9056 1.55614 3.9056 1ZM0.0101027 8.0949L0.811023 16.1041C0.917267 17.1665 1.83603 18 2.90122 18H14.91C15.9712 18 16.8943 17.1632 17.0002 16.1041L17.8011 8.0949C17.9152 6.95379 17.0495 6 15.9047 6H1.90647C0.759323 6 -0.103812 6.95576 0.0101027 8.0949ZM2.01101 8.00421L15.7998 8.0079L14.9056 16H2.9056L2.01101 8.00421ZM2.90122 3C2.35555 3 1.9056 3.44772 1.9056 4C1.9056 4.55614 2.35136 5 2.90122 5H14.91C15.4557 5 15.9056 4.55228 15.9056 4C15.9056 3.44386 15.4598 3 14.91 3H2.90122Z"
/>
</svg>
</div>
<div class="nav-mobile__title">Subscriptions</div>
</button>
<button class="nav-mobile__button">
<div class="nav-mobile__icon">
<svg
width="20"
height="16"
viewBox="0 0 20 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.81377 0C0.818072 0 0 0.793984 0 1.77341V14.2266C0 15.2066 0.814396 16 1.819 16H18.181C19.185 16 20 15.2042 20 14.2225V4.44412C20 3.4608 19.1843 2.66667 18.1781 2.66667H10.0034L8.71574 0.742815C8.441 0.332343 7.81071 0 7.30762 0H1.81377ZM18.181 14.2222L1.81818 14.2266L1.81377 1.77778L7.27273 1.78212L8.48211 3.64019C8.818 4.14203 9.39005 4.44444 10.0034 4.44444L18.1818 4.44412L18.181 14.2222Z"
/>
</svg>
</div>
<div class="nav-mobile__title">Library</div>
</button>
</nav>
</div>
</body>
</html>