-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
546 lines (544 loc) · 29.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles/main.css" />
<link rel="stylesheet" href="styles/common.css" />
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<div class="whole-content">
<header>
<div class="content_wrapper">
<div class="header-container">
<div class="side-bar">
<div class="logo">
<img src="images/image 1.svg" alt="honey movies logo" />
<h2>Honey Movies</h2>
</div>
<nav>
<ul>
<li><h4>Menu</h4></li>
<li class="active">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.71205 19.2165C0.731983 14.7378 0.979718 10.7505 1.19878 9.21903C1.22156 9.18083 1.26188 9.12096 1.3271 9.03762C1.47501 8.84861 1.70084 8.60214 2.00458 8.30278C2.60899 7.7071 3.44945 6.97258 4.4089 6.17899C6.32335 4.59548 8.64444 2.83178 10.3366 1.57188C11.3568 0.812318 12.7404 0.80911 13.7633 1.5639C15.4695 2.82291 17.8111 4.58864 19.7304 6.17389C20.6926 6.96861 21.53 7.70271 22.1245 8.29655C22.4236 8.59528 22.6406 8.8382 22.778 9.02132C22.8258 9.08502 22.8572 9.13255 22.8767 9.16498C22.9852 10.7948 23.2496 14.7791 22.3719 19.2371C22.1475 20.3774 21.7303 21.0875 21.1279 21.5714C20.5005 22.0755 19.5539 22.4301 18.0887 22.6131C17.3588 22.7043 16.6359 22.7793 15.9182 22.8382C13.272 23.0553 10.6918 23.0539 8.08393 22.8342C7.39282 22.776 6.69945 22.7024 6.00208 22.6135C4.54036 22.427 3.60663 22.0692 2.98443 21.5644C2.38303 21.0765 1.96249 20.361 1.71205 19.2165ZM1.18016 9.25341C1.18007 9.25343 1.18083 9.25163 1.1827 9.2479C1.18118 9.25152 1.18025 9.25338 1.18016 9.25341ZM22.9016 9.2113C22.9014 9.21126 22.9003 9.20897 22.8986 9.20457C22.9008 9.20914 22.9017 9.21135 22.9016 9.2113Z"
stroke="#F8B319"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Home
</li>
<li>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 12c0 2.448.132 4.347.461 5.827.327 1.469.834 2.465 1.54 3.172.707.707 1.703 1.213 3.173 1.54C7.653 22.867 9.552 23 12 23s4.347-.133 5.827-.461c1.47-.327 2.465-.834 3.172-1.54.707-.707 1.213-1.703 1.54-3.173.329-1.48.461-3.379.461-5.827s-.132-4.347-.461-5.827c-.327-1.469-.834-2.465-1.54-3.172-.707-.707-1.703-1.213-3.173-1.54C16.347 1.133 14.448 1 12 1S7.653 1.132 6.173 1.461C4.703 1.788 3.707 2.295 3.001 3.001c-.707.707-1.213 1.703-1.54 3.173C1.132 7.653 1 9.552 1 12z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M17.159 8.766c.443-1.201-.724-2.368-1.925-1.925l-5.484 2.02c-.412.152-.737.477-.89.889l-2.02 5.484c-.443 1.201.725 2.368 1.925 1.925l5.484-2.02c.412-.152.737-.477.89-.89l2.02-5.484z"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Discover
</li>
<li>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.51752 3.26677C6.66282 3.09088 7.17879 2.72998 8.30232 2.43105C9.34893 2.15259 10.6527 2.00001 12 2C13.3474 1.99999 14.6511 2.15253 15.6977 2.43098C16.8212 2.72989 17.3371 3.0908 17.4824 3.26669C17.4796 3.26328 17.4803 3.26448 17.4838 3.27111C17.5035 3.30746 17.6117 3.50716 17.7215 4.00542C17.8401 4.5443 17.9231 5.25301 17.9659 6.10651C18.0513 7.80965 17.9675 9.87339 17.8146 11.8691C17.5926 14.7663 15.0869 17 12 17C8.91306 17 6.40736 14.7662 6.18539 11.8691C6.03248 9.87334 5.94874 7.80958 6.03413 6.10643C6.07692 5.25293 6.15985 4.54422 6.27855 4.00536C6.38826 3.50726 6.4964 3.30758 6.5161 3.27119C6.5197 3.26454 6.52035 3.26334 6.51752 3.26677ZM4.9756 1.993C7.17069 -0.664204 16.8293 -0.664466 19.0244 1.993C19.4223 2.47475 19.676 3.34072 19.8246 4.43579C23.1158 5.02972 24 6.3396 24 8.99996C24 11.7433 23.0598 13.0506 19.5094 13.6177C18.5377 16.8058 15.4848 19 12 19C8.5152 19 5.46233 16.8058 4.49061 13.6177C0.940222 13.0506 0 11.7433 0 8.99996C0 6.3396 0.884176 5.02972 4.17539 4.43579C4.324 3.3407 4.57766 2.47472 4.9756 1.993ZM4.0162 6.50893C3.62811 6.59841 3.31553 6.69703 3.06348 6.80205C2.51426 7.03089 2.34242 7.24963 2.25002 7.42288C2.12217 7.66258 2 8.10604 2 8.99996C2 9.89388 2.12217 10.3373 2.25002 10.577C2.34242 10.7503 2.51426 10.969 3.06348 11.1979C3.34479 11.3151 3.70151 11.4243 4.15446 11.5218C4.03516 9.82661 3.96685 8.06778 4.0162 6.50893ZM19.8455 11.5218C20.2985 11.4243 20.6552 11.3151 20.9365 11.1979C21.4857 10.969 21.6576 10.7503 21.75 10.577C21.8778 10.3373 22 9.89388 22 8.99996C22 8.10604 21.8778 7.66258 21.75 7.42288C21.6576 7.24963 21.4857 7.03089 20.9365 6.80205C20.6845 6.69703 20.3719 6.5984 19.9838 6.50893C20.0331 8.06778 19.9648 9.82662 19.8455 11.5218Z"
fill="#F9F9F9"
/>
<path
d="M12 19V23H15H9"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Awards
</li>
<li>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 10L11 15L9 13"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.1909 1.89863C11.0994 0.700456 12.9006 0.700456 13.8091 1.89863L14.9438 3.39506C15.1917 3.72195 15.5966 3.88968 16.003 3.8338L17.8635 3.578C19.3531 3.37318 20.6268 4.64685 20.422 6.13651L20.1662 7.99698C20.1103 8.40339 20.2781 8.80832 20.6049 9.05618L22.1014 10.1909C23.2995 11.0994 23.2995 12.9006 22.1014 13.8091L20.6049 14.9438C20.2781 15.1917 20.1103 15.5966 20.1662 16.003L20.422 17.8635C20.6268 19.3531 19.3531 20.6268 17.8635 20.422L16.003 20.1662C15.5966 20.1103 15.1917 20.2781 14.9438 20.6049L13.8091 22.1014C12.9006 23.2995 11.0994 23.2995 10.1909 22.1014L9.05618 20.6049C8.80832 20.2781 8.40339 20.1103 7.99698 20.1662L6.13651 20.422C4.64685 20.6268 3.37318 19.3531 3.578 17.8635L3.8338 16.003C3.88968 15.5966 3.72195 15.1917 3.39506 14.9438L1.89863 13.8091C0.700456 12.9006 0.700456 11.0994 1.89863 10.1909L3.39506 9.05618C3.72195 8.80832 3.88968 8.40339 3.8338 7.99698L3.578 6.13651C3.37318 4.64685 4.64685 3.37318 6.13651 3.578L7.99698 3.8338C8.40339 3.88968 8.80832 3.72195 9.05618 3.39506L10.1909 1.89863Z"
stroke="#F9F9F9"
stroke-width="2"
/>
</svg>
Celebrities
</li>
</ul>
<ul>
<li><h4>Library</h4></li>
<li>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="side-bar-svg"
>
<path
d="M1 12C1 14.4477 1.13246 16.3463 1.46153 17.827C1.78807 19.2963 2.29478 20.2921 3.00136 20.9986C3.70794 21.7052 4.70365 22.2119 6.17298 22.5385C7.65366 22.8675 9.55232 23 12 23C14.4477 23 16.3463 22.8675 17.827 22.5385C19.2963 22.2119 20.2921 21.7052 20.9986 20.9986C21.7052 20.2921 22.2119 19.2963 22.5385 17.827C22.8675 16.3463 23 14.4477 23 12C23 9.55232 22.8675 7.65366 22.5385 6.17298C22.2119 4.70365 21.7052 3.70794 20.9986 3.00136C20.2921 2.29478 19.2963 1.78807 17.827 1.46153C16.3463 1.13246 14.4477 1 12 1C9.55232 1 7.65366 1.13246 6.17298 1.46153C4.70365 1.78807 3.70794 2.29478 3.00136 3.00136C2.29478 3.70794 1.78807 4.70365 1.46153 6.17298C1.13246 7.65366 1 9.55232 1 12Z"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 6C12 6 12 10 12 11C12 12 12 12 13 12C14 12 18 12 18 12"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Recent
</li>
<li>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.0312 1C13.0666 1 14.6926 5.69969 15.2795 7.50668C15.4141 7.92126 15.7943 8.20684 16.23 8.22162C18.1151 8.28556 23 8.55772 23 9.66144C23 10.7495 19.5188 13.4853 18.0955 14.5583C17.7427 14.8243 17.5982 15.2836 17.734 15.704C18.3132 17.4975 19.7048 22.1483 18.8117 22.8815C17.9323 23.6034 14.1749 20.7486 12.6485 19.5286C12.2692 19.2254 11.7305 19.2251 11.3511 19.528C9.82346 20.7477 6.06764 23.6035 5.25065 22.8815C4.41962 22.1471 5.73815 17.4816 6.28237 15.6949C6.40915 15.2786 6.26319 14.8287 5.91569 14.5668C4.4996 13.4997 1 10.7523 1 9.66144C1 8.55659 5.89498 8.285 7.77586 8.22142C8.20861 8.2068 8.58723 7.92462 8.72415 7.51385C9.32468 5.71216 10.9944 1 12.0312 1Z"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Top Rated
</li>
<li>
<svg
width="24"
height="22"
viewBox="0 0 24 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17 10L12 15M12 15L7 10M12 15L12 1"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M5 5.296C5 4.62866 4.36871 4.13099 3.74865 4.37771C0.806956 5.54824 0 7.98146 0 12.7057C0 20.3595 2.118 21.9999 12 21.9999C21.882 21.9999 24 20.3595 24 12.7057C24 7.98146 23.193 5.54824 20.2513 4.37771C19.6313 4.13099 19 4.62866 19 5.296C19 5.74846 19.3009 6.13662 19.714 6.32119C20.0273 6.46119 20.2776 6.61212 20.4811 6.7697C21.4189 7.49607 22 8.88206 22 12.7057C22 16.5294 21.4189 17.9154 20.4811 18.6418C19.9576 19.0472 19.1238 19.4087 17.7047 19.653C16.2861 19.8972 14.436 19.9999 12 19.9999C9.56404 19.9999 7.71385 19.8972 6.2953 19.653C4.87622 19.4087 4.04241 19.0472 3.51891 18.6418C2.58107 17.9154 2 16.5294 2 12.7057C2 8.88206 2.58107 7.49607 3.51891 6.7697C3.72237 6.61212 3.97269 6.46119 4.28602 6.32119C4.69912 6.13662 5 5.74846 5 5.296Z"
fill="#F9F9F9"
/>
</svg>
Downloaded
</li>
<li>
<svg
width="24"
height="20"
viewBox="0 0 24 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.6 1C9.29038 1 10.8323 1.84142 12 2.8C13.1677 1.84142 14.7096 1 16.4 1C20.0451 1 23 3.71049 23 7.05386C23 13.795 15.3274 17.721 12.7981 18.8321C12.2886 19.056 11.7114 19.056 11.2019 18.8321C8.67259 17.721 1 13.7948 1 7.0537C1 3.71033 3.95492 1 7.6 1Z"
stroke="#F9F9F9"
stroke-width="2"
/>
</svg>
Playlists
</li>
<li>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 12C1 14.4477 1.13246 16.3463 1.46153 17.827C1.78807 19.2963 2.29478 20.2921 3.00136 20.9986C3.70794 21.7052 4.70365 22.2119 6.17298 22.5385C7.65366 22.8675 9.55232 23 12 23C14.4477 23 16.3463 22.8675 17.827 22.5385C19.2963 22.2119 20.2921 21.7052 20.9986 20.9986C21.7052 20.2921 22.2119 19.2963 22.5385 17.827C22.8675 16.3463 23 14.4477 23 12C23 9.55232 22.8675 7.65366 22.5385 6.17298C22.2119 4.70365 21.7052 3.70794 20.9986 3.00136C20.2921 2.29478 19.2963 1.78807 17.827 1.46153C16.3463 1.13246 14.4477 1 12 1C9.55232 1 7.65366 1.13246 6.17298 1.46153C4.70365 1.78807 3.70794 2.29478 3.00136 3.00136C2.29478 3.70794 1.78807 4.70365 1.46153 6.17298C1.13246 7.65366 1 9.55232 1 12Z"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M12 8V12M12 16V12M12 12H16H8"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Watchlist
</li>
<li>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.7071 9.70711C17.0976 9.31658 17.0976 8.68342 16.7071 8.29289C16.3166 7.90237 15.6834 7.90237 15.2929 8.29289L11 12.5858L9.20711 10.7929C8.81658 10.4024 8.18342 10.4024 7.79289 10.7929C7.40237 11.1834 7.40237 11.8166 7.79289 12.2071L10.2929 14.7071C10.6834 15.0976 11.3166 15.0976 11.7071 14.7071L16.7071 9.70711Z"
fill="#F9F9F9"
/>
<path
d="M1 12C1 14.4477 1.13246 16.3463 1.46153 17.827C1.78807 19.2963 2.29478 20.2921 3.00136 20.9986C3.70794 21.7052 4.70365 22.2119 6.17298 22.5385C7.65366 22.8675 9.55232 23 12 23C14.4477 23 16.3463 22.8675 17.827 22.5385C19.2963 22.2119 20.2921 21.7052 20.9986 20.9986C21.7052 20.2921 22.2119 19.2963 22.5385 17.827C22.8675 16.3463 23 14.4477 23 12C23 9.55232 22.8675 7.65366 22.5385 6.17298C22.2119 4.70365 21.7052 3.70794 20.9986 3.00136C20.2921 2.29478 19.2963 1.78807 17.827 1.46153C16.3463 1.13246 14.4477 1 12 1C9.55232 1 7.65366 1.13246 6.17298 1.46153C4.70365 1.78807 3.70794 2.29478 3.00136 3.00136C2.29478 3.70794 1.78807 4.70365 1.46153 6.17298C1.13246 7.65366 1 9.55232 1 12Z"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Completed
</li>
</ul>
<ul>
<li>
<h4>General</h4>
</li>
<li>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.415 3.83878C14.7095 0.0537398 9.2905 0.0537401 8.58499 3.83878C8.41886 4.73006 7.49808 5.26091 6.64603 4.96004C3.01257 3.67704 0.312178 8.37772 3.23044 10.8784C3.91803 11.4676 3.91803 12.5324 3.23044 13.1216C0.312178 15.6223 3.01257 20.323 6.64603 19.04C7.49808 18.7391 8.41886 19.2699 8.58499 20.1612C9.2905 23.9463 14.7095 23.9463 15.415 20.1612C15.5811 19.2699 16.5019 18.7391 17.354 19.04C20.9874 20.323 23.6878 15.6223 20.7696 13.1216C20.082 12.5324 20.082 11.4676 20.7696 10.8784C23.6878 8.37772 20.9874 3.67704 17.354 4.96004C16.5019 5.26091 15.5811 4.73006 15.415 3.83878Z"
stroke="#F9F9F9"
stroke-width="2"
stroke-linejoin="round"
/>
<circle
cx="4"
cy="4"
r="3"
transform="matrix(-1 0 0 1 16 8)"
stroke="#F9F9F9"
stroke-width="2"
/>
</svg>
Settings
</li>
<li>
<svg
width="24"
height="27"
viewBox="0 0 24 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1 13.0909C1 15.6437 1.0665 17.4629 1.28113 18.8163C1.49358 20.1558 1.83711 20.9396 2.31996 21.4951C2.81162 22.0608 3.54214 22.5002 4.75903 22.9651C5.66398 23.3108 6.75137 23.6409 8.10867 24.0529C8.59827 24.2015 9.12299 24.3608 9.68693 24.5353C11.7072 25.1605 13.1538 25.2957 14.1923 25.0968C15.1715 24.9092 15.8493 24.4144 16.3628 23.5693C16.9059 22.6756 17.2748 21.3685 17.4967 19.5765C17.7171 17.7975 17.7826 15.6354 17.7826 13.0909C17.7826 10.5464 17.7171 8.38435 17.4967 6.60527C17.2748 4.81331 16.9059 3.5062 16.3628 2.61248C15.8493 1.76742 15.1715 1.27265 14.1923 1.08506C13.1538 0.886122 11.7072 1.02136 9.68692 1.64652C9.12307 1.821 8.59843 1.98025 8.1089 2.12884C6.75149 2.54087 5.66403 2.87096 4.75903 3.21667C3.54214 3.68154 2.81162 4.12096 2.31996 4.68661C1.83711 5.24212 1.49358 6.02593 1.28114 7.36552C1.0665 8.71893 1 10.5381 1 13.0909Z"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<ellipse
cx="1.04348"
cy="1.04727"
rx="1.04348"
ry="1.04727"
transform="matrix(-1 0 0 1 14.6087 12.2205)"
fill="#F9F9F9"
/>
<path
d="M17.7391 22.5164C22.9565 22.5164 22.9565 21.243 22.9565 13.2604C22.9565 5.27783 22.9565 3.66547 17.7391 3.66547"
stroke="#F9F9F9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
Log Out
</li>
</ul>
</nav>
</div>
<div class="main-content">
<nav>
<ul>
<li><a href="" class="active">Movies</a></li>
<li><a href="">TV Shows</a></li>
<li><a href="">Anime</a></li>
</ul>
<div class="search-container">
<form class="search-element">
<img
src="images/Search....svg"
alt=""
class="search_icon"
/>
<input
type="text"
placeholder="Search"
class="form-control"
id="movie-search-box"
/>
<button type="submit">
<img src="images/Filter.svg" alt="" class="filter_icon" />
</button>
</form>
<div class="search-list" id="search-list">
<!-- list here -->
<!-- <div class="search-list-item">
<div class="search-item-thumbnail">
<img src="images/bridget.jpg" alt="" />
</div>
<div class="search-item-info">
<h3>bridget jones</h3>
<p>2017</p>
</div>
</div> -->
</div>
</div>
</nav>
<div class="carousel-container">
<div
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="1"
></li>
<li
data-target="#carouselExampleIndicators"
data-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
class="d-block w-100"
src="images/the-crown-3-green-background.jpg"
alt="First slide"
/>
<h4 class="movie-title">The Crown</h4>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
src="images/bridget.jpg"
alt="Second slide"
/>
<h4 class="movie-title">Bridget Jones</h4>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
src="images/rush-hour.jpg"
alt="Third slide"
/>
<h4 class="movie-title">Rush Hour</h4>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleIndicators"
role="button"
data-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleIndicators"
role="button"
data-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-buttons">
<button class="watch-list-btn">
<i class="fa-solid fa-plus plus-icon"></i>Watchlist
</button>
<button class="watch-now-btn">Watch Now</button>
</div>
</div>
</div>
<section>
<div class="section-wrapper">
<h2>Movies</h2>
<div class="movie-list">
<div class="movie-card-1">
<div>
<h3>Loki</h3>
<img src="images/rating/Review.svg" alt="star rating" />
</div>
<div class="movie-info">
<div>
<p>6 Ep</p>
<p>Superhero</p>
</div>
<div>
<button class="add-button">
<img src="images/add.svg" alt="plus sign" />
</button>
<button class="more-info-button">More info</button>
</div>
</div>
</div>
<div class="movie-card-2">
<div>
<h3>Chernobyl</h3>
<img
src="images/rating/Review (1).svg"
alt="star rating"
/>
</div>
<div class="movie-info">
<div>
<p>5 Ep</p>
<p>Mini Series</p>
</div>
<div>
<button class="add-button">
<img src="images/add.svg" alt="plus sign" />
</button>
<button class="more-info-button">More info</button>
</div>
</div>
</div>
<div class="movie-card-3">
<div>
<h3>Rick and Morty</h3>
<img
src="images/rating/Review (1).svg"
alt="star rating"
/>
</div>
<div class="movie-info">
<div>
<p>49 Ep</p>
<p>Fantasy</p>
</div>
<div>
<button class="add-button">
<img src="images/add.svg" alt="plus sign" />
</button>
<button class="more-info-button">More info</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</header>
<section class="top-rated-movies">
<div class="content_wrapper">
<h2>Top Rated Movies</h2>
<div class="top-rated-movies-list"></div>
</div>
<p class="bottom-title">2024. All rights recerved, developed by ----</p>
</section>
</div>
<!-- font awesome links-->
<script
src="https://kit.fontawesome.com/d1e2b24999.js"
crossorigin="anonymous"
></script>
<!-- bootstrap links -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
<!-- movies section js -->
<script type="module" src="js files/app.js"></script>
<script type="module" src="js files/rating.js"></script>
<script type="module" src="js files/fetchMovies.js"></script>
</body>
</html>