Hugging Face's logo

Spaces:
KingNish
/
netflix-clone
Running

App Files Community
KingNish commited on
Commit
e035f8f
·
verified ·
1 Parent(s): a4772c3

Remake it again make it modern use better font - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +434 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Netflix Clone
3
- emoji: 🌍
4
  colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: netflix-clone
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,434 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Netflix Clone</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .hero {
11
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
12
+ url('https://assets.nflxext.com/ffe/siteui/vlv3/9d3533b2-0e2b-40b2-95e0-ecd7979cc88b/a3873901-5b7c-46eb-b9fa-12fea5197bd3/IN-en-20240311-popsignuptwoweeks-perspective_alpha_website_large.jpg');
13
+ background-size: cover;
14
+ background-position: center;
15
+ height: 90vh;
16
+ }
17
+
18
+ .movie-row {
19
+ display: flex;
20
+ overflow-y: hidden;
21
+ overflow-x: scroll;
22
+ padding: 20px;
23
+ scrollbar-width: none; /* Firefox */
24
+ }
25
+
26
+ .movie-row::-webkit-scrollbar {
27
+ display: none; /* Chrome, Safari, Opera */
28
+ }
29
+
30
+ .movie-card {
31
+ width: 200px;
32
+ margin-right: 15px;
33
+ transition: transform 450ms;
34
+ border-radius: 4px;
35
+ position: relative;
36
+ }
37
+
38
+ .movie-card:hover {
39
+ transform: scale(1.08);
40
+ z-index: 1;
41
+ }
42
+
43
+ .movie-card:hover .movie-info {
44
+ opacity: 1;
45
+ }
46
+
47
+ .movie-info {
48
+ position: absolute;
49
+ bottom: 0;
50
+ left: 0;
51
+ right: 0;
52
+ background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
53
+ padding: 10px;
54
+ opacity: 0;
55
+ transition: opacity 0.3s ease;
56
+ }
57
+
58
+ .nav-scrolled {
59
+ background-color: #111;
60
+ transition: all 0.5s;
61
+ }
62
+
63
+ @media (max-width: 768px) {
64
+ .hero {
65
+ height: 70vh;
66
+ }
67
+
68
+ .movie-card {
69
+ width: 150px;
70
+ }
71
+
72
+ .hero-content h1 {
73
+ font-size: 2rem;
74
+ }
75
+ }
76
+
77
+ @media (max-width: 640px) {
78
+ .movie-card {
79
+ width: 120px;
80
+ }
81
+
82
+ .hero-content h1 {
83
+ font-size: 1.5rem;
84
+ }
85
+
86
+ .hero-content p {
87
+ font-size: 0.9rem;
88
+ }
89
+ }
90
+ </style>
91
+ </head>
92
+ <body class="bg-black text-white">
93
+ <!-- Navigation -->
94
+ <nav id="navbar" class="fixed top-0 w-full z-50 flex justify-between items-center p-4 transition-all duration-500">
95
+ <div class="flex items-center">
96
+ <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" alt="Netflix Logo" class="h-8 md:h-10">
97
+ </div>
98
+ <div class="flex items-center space-x-4">
99
+ <div class="hidden md:block">
100
+ <div class="relative">
101
+ <select class="bg-black text-white border border-gray-600 rounded px-2 py-1 text-sm">
102
+ <option>English</option>
103
+ <option>हिन्दी</option>
104
+ </select>
105
+ </div>
106
+ </div>
107
+ <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm md:text-base">
108
+ Sign In
109
+ </button>
110
+ </div>
111
+ </nav>
112
+
113
+ <!-- Hero Section -->
114
+ <section class="hero flex items-center justify-center text-center pt-16">
115
+ <div class="hero-content px-4 max-w-4xl">
116
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Unlimited movies, TV shows and more</h1>
117
+ <p class="text-xl md:text-2xl mb-6">Watch anywhere. Cancel anytime.</p>
118
+ <p class="text-lg mb-8">Ready to watch? Enter your email to create or restart your membership.</p>
119
+ <div class="flex flex-col md:flex-row gap-2 justify-center">
120
+ <input type="email" placeholder="Email address" class="px-4 py-3 md:py-4 bg-black bg-opacity-70 border border-gray-600 rounded w-full md:w-96">
121
+ <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 md:py-4 rounded font-bold flex items-center justify-center">
122
+ Get Started <i class="fas fa-chevron-right ml-2"></i>
123
+ </button>
124
+ </div>
125
+ </div>
126
+ </section>
127
+
128
+ <!-- Content Sections -->
129
+ <div class="mt-8">
130
+ <!-- Popular on Netflix -->
131
+ <section class="mb-8">
132
+ <h2 class="text-xl md:text-2xl font-bold px-4 md:px-8 mb-2">Popular on Netflix</h2>
133
+ <div class="movie-row">
134
+ <div class="movie-card">
135
+ <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg" alt="Movie" class="w-full h-auto">
136
+ <div class="movie-info">
137
+ <h3 class="font-bold">Stranger Things</h3>
138
+ <div class="flex items-center text-yellow-400 text-sm">
139
+ <i class="fas fa-star mr-1"></i>
140
+ <span>4.8</span>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ <div class="movie-card">
145
+ <img src="https://image.tmdb.org/t/p/w500/9PqD3wSIjntyJDBzMNuxuKHwpUD.jpg" alt="Movie" class="w-full h-auto">
146
+ <div class="movie-info">
147
+ <h3 class="font-bold">The Witcher</h3>
148
+ <div class="flex items-center text-yellow-400 text-sm">
149
+ <i class="fas fa-star mr-1"></i>
150
+ <span>4.5</span>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ <div class="movie-card">
155
+ <img src="https://image.tmdb.org/t/p/w500/34nDCQZwaEvsy4CFO5hkGRFDCVU.jpg" alt="Movie" class="w-full h-auto">
156
+ <div class="movie-info">
157
+ <h3 class="font-bold">Money Heist</h3>
158
+ <div class="flex items-center text-yellow-400 text-sm">
159
+ <i class="fas fa-star mr-1"></i>
160
+ <span>4.7</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="movie-card">
165
+ <img src="https://image.tmdb.org/t/p/w500/6kbAMLteGO8yyewYau6bJ683sw7.jpg" alt="Movie" class="w-full h-auto">
166
+ <div class="movie-info">
167
+ <h3 class="font-bold">The Crown</h3>
168
+ <div class="flex items-center text-yellow-400 text-sm">
169
+ <i class="fas fa-star mr-1"></i>
170
+ <span>4.6</span>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ <div class="movie-card">
175
+ <img src="https://image.tmdb.org/t/p/w500/6UH52Fmau8RPsMAbQbjwN3wJSCj.jpg" alt="Movie" class="w-full h-auto">
176
+ <div class="movie-info">
177
+ <h3 class="font-bold">Peaky Blinders</h3>
178
+ <div class="flex items-center text-yellow-400 text-sm">
179
+ <i class="fas fa-star mr-1"></i>
180
+ <span>4.9</span>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div class="movie-card">
185
+ <img src="https://image.tmdb.org/t/p/w500/4EYPN5mVIhKLfxGruy7Dy41dTVn.jpg" alt="Dark" class="w-full h-auto">
186
+ <div class="movie-info">
187
+ <h3 class="font-bold">Dark</h3>
188
+ <div class="flex items-center text-yellow-400 text-sm">
189
+ <i class="fas fa-star mr-1"></i>
190
+ <span>4.8</span>
191
+ </div>
192
+ </div>
193
+ </div>
194
+ <div class="movie-card">
195
+ <img src="https://image.tmdb.org/t/p/w500/6XYLiMxHAaCsoyrVo38LBWMw2p8.jpg" alt="Movie" class="w-full h-auto">
196
+ <div class="movie-info">
197
+ <h3 class="font-bold">The Queen's Gambit</h3>
198
+ <div class="flex items-center text-yellow-400 text-sm">
199
+ <i class="fas fa-star mr-1"></i>
200
+ <span>4.9</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </section>
206
+
207
+ <!-- Trending Now -->
208
+ <section class="mb-8">
209
+ <h2 class="text-xl md:text-2xl font-bold px-4 md:px-8 mb-2">Trending Now</h2>
210
+ <div class="movie-row">
211
+ <div class="movie-card">
212
+ <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Movie" class="w-full h-auto">
213
+ <div class="movie-info">
214
+ <h3 class="font-bold">Loki</h3>
215
+ <div class="flex items-center text-yellow-400 text-sm">
216
+ <i class="fas fa-star mr-1"></i>
217
+ <span>4.7</span>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ <div class="movie-card">
222
+ <img src="https://image.tmdb.org/t/p/w500/7RyHsO4yDXtBv1zUU3mTpHeQ0d5.jpg" alt="Movie" class="w-full h-auto">
223
+ <div class="movie-info">
224
+ <h3 class="font-bold">Avengers: Endgame</h3>
225
+ <div class="flex items-center text-yellow-400 text-sm">
226
+ <i class="fas fa-star mr-1"></i>
227
+ <span>4.9</span>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="movie-card">
232
+ <img src="https://image.tmdb.org/t/p/w500/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg" alt="Movie" class="w-full h-auto">
233
+ <div class="movie-info">
234
+ <h3 class="font-bold">Spider-Man: No Way Home</h3>
235
+ <div class="flex items-center text-yellow-400 text-sm">
236
+ <i class="fas fa-star mr-1"></i>
237
+ <span>4.8</span>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ <div class="movie-card">
242
+ <img src="https://image.tmdb.org/t/p/w500/6DrHO1jr3qVrViUO6s6kFiAGM7.jpg" alt="Movie" class="w-full h-auto">
243
+ <div class="movie-info">
244
+ <h3 class="font-bold">Squid Game</h3>
245
+ <div class="flex items-center text-yellow-400 text-sm">
246
+ <i class="fas fa-star mr-1"></i>
247
+ <span>4.6</span>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ <div class="movie-card">
252
+ <img src="https://image.tmdb.org/t/p/w500/6MKr3KgOLmzOP6MSuZERO41Lpkt.jpg" alt="Movie" class="w-full h-auto">
253
+ <div class="movie-info">
254
+ <h3 class="font-bold">The Batman</h3>
255
+ <div class="flex items-center text-yellow-400 text-sm">
256
+ <i class="fas fa-star mr-1"></i>
257
+ <span>4.5</span>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ <div class="movie-card">
262
+ <img src="https://image.tmdb.org/t/p/w500/74xTEgt7R36Fpooo50r9T25onhq.jpg" alt="Movie" class="w-full h-auto">
263
+ <div class="movie-info">
264
+ <h3 class="font-bold">The Mandalorian</h3>
265
+ <div class="flex items-center text-yellow-400 text-sm">
266
+ <i class="fas fa-star mr-1"></i>
267
+ <span>4.7</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ <div class="movie-card">
272
+ <img src="https://image.tmdb.org/t/p/w500/bOFaAXmWWXC3Rbv4u4uM9ZSzRXP.jpg" alt="Movie" class="w-full h-auto">
273
+ <div class="movie-info">
274
+ <h3 class="font-bold">Dune</h3>
275
+ <div class="flex items-center text-yellow-400 text-sm">
276
+ <i class="fas fa-star mr-1"></i>
277
+ <span>4.6</span>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- Continue Watching -->
285
+ <section class="mb-8">
286
+ <h2 class="text-xl md:text-2xl font-bold px-4 md:px-8 mb-2">Continue Watching</h2>
287
+ <div class="movie-row">
288
+ <div class="movie-card">
289
+ <img src="https://image.tmdb.org/t/p/w500/5kkw5RT1OjTAMh3POhjo5LdaACZ.jpg" alt="Movie" class="w-full h-auto">
290
+ <div class="movie-info">
291
+ <h3 class="font-bold">Breaking Bad</h3>
292
+ <div class="flex items-center text-yellow-400 text-sm">
293
+ <i class="fas fa-star mr-1"></i>
294
+ <span>4.9</span>
295
+ </div>
296
+ <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2">
297
+ <div class="bg-red-600 h-1.5 rounded-full" style="width: 65%"></div>
298
+ </div>
299
+ <p class="text-xs mt-1">65% watched</p>
300
+ </div>
301
+ </div>
302
+ <div class="movie-card">
303
+ <img src="https://image.tmdb.org/t/p/w500/7IiTTgloJzvGI1TAYymCfbfl3vT.jpg" alt="Movie" class="w-full h-auto">
304
+ <div class="movie-info">
305
+ <h3 class="font-bold">Narcos</h3>
306
+ <div class="flex items-center text-yellow-400 text-sm">
307
+ <i class="fas fa-star mr-1"></i>
308
+ <span>4.7</span>
309
+ </div>
310
+ <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2">
311
+ <div class="bg-red-600 h-1.5 rounded-full" style="width: 30%"></div>
312
+ </div>
313
+ <p class="text-xs mt-1">30% watched</p>
314
+ </div>
315
+ </div>
316
+ <div class="movie-card">
317
+ <img src="https://image.tmdb.org/t/p/w500/6fVX7Fy8N6UQzQmQGqDg5QDeY25.jpg" alt="Movie" class="w-full h-auto">
318
+ <div class="movie-info">
319
+ <h3 class="font-bold">Ozark</h3>
320
+ <div class="flex items-center text-yellow-400 text-sm">
321
+ <i class="fas fa-star mr-1"></i>
322
+ <span>4.6</span>
323
+ </div>
324
+ <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2">
325
+ <div class="bg-red-600 h-1.5 rounded-full" style="width: 45%"></div>
326
+ </div>
327
+ <p class="text-xs mt-1">45% watched</p>
328
+ </div>
329
+ </div>
330
+ <div class="movie-card">
331
+ <img src="https://image.tmdb.org/t/p/w500/5DUMPBSnHOZsbBv81GFXZXvD5BC.jpg" alt="Movie" class="w-full h-auto">
332
+ <div class="movie-info">
333
+ <h3 class="font-bold">Dark</h3>
334
+ <div class="flex items-center text-yellow-400 text-sm">
335
+ <i class="fas fa-star mr-1"></i>
336
+ <span>4.8</span>
337
+ </div>
338
+ <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2">
339
+ <div class="bg-red-600 h-1.5 rounded-full" style="width: 80%"></div>
340
+ </div>
341
+ <p class="text-xs mt-1">80% watched</p>
342
+ </div>
343
+ </div>
344
+ <div class="movie-card">
345
+ <img src="https://image.tmdb.org/t/p/w500/6UH52Fmau8RPsMAbQbjwN3wJSCj.jpg" alt="Movie" class="w-full h-auto">
346
+ <div class="movie-info">
347
+ <h3 class="font-bold">Peaky Blinders</h3>
348
+ <div class="flex items-center text-yellow-400 text-sm">
349
+ <i class="fas fa-star mr-1"></i>
350
+ <span>4.9</span>
351
+ </div>
352
+ <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2">
353
+ <div class="bg-red-600 h-1.5 rounded-full" style="width: 15%"></div>
354
+ </div>
355
+ <p class="text-xs mt-1">15% watched</p>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </section>
360
+ </div>
361
+
362
+ <!-- Footer -->
363
+ <footer class="bg-black text-gray-400 py-8 px-4 md:px-8">
364
+ <div class="max-w-6xl mx-auto">
365
+ <div class="mb-6">
366
+ <p>Questions? Call 000-800-919-1694</p>
367
+ </div>
368
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
369
+ <div>
370
+ <ul class="space-y-2 text-sm">
371
+ <li><a href="#" class="hover:underline">FAQ</a></li>
372
+ <li><a href="#" class="hover:underline">Investor Relations</a></li>
373
+ <li><a href="#" class="hover:underline">Privacy</a></li>
374
+ <li><a href="#" class="hover:underline">Speed Test</a></li>
375
+ </ul>
376
+ </div>
377
+ <div>
378
+ <ul class="space-y-2 text-sm">
379
+ <li><a href="#" class="hover:underline">Help Centre</a></li>
380
+ <li><a href="#" class="hover:underline">Jobs</a></li>
381
+ <li><a href="#" class="hover:underline">Cookie Preferences</a></li>
382
+ <li><a href="#" class="hover:underline">Legal Notices</a></li>
383
+ </ul>
384
+ </div>
385
+ <div>
386
+ <ul class="space-y-2 text-sm">
387
+ <li><a href="#" class="hover:underline">Account</a></li>
388
+ <li><a href="#" class="hover:underline">Ways to Watch</a></li>
389
+ <li><a href="#" class="hover:underline">Corporate Information</a></li>
390
+ <li><a href="#" class="hover:underline">Only on Netflix</a></li>
391
+ </ul>
392
+ </div>
393
+ <div>
394
+ <ul class="space-y-2 text-sm">
395
+ <li><a href="#" class="hover:underline">Media Centre</a></li>
396
+ <li><a href="#" class="hover:underline">Terms of Use</a></li>
397
+ <li><a href="#" class="hover:underline">Contact Us</a></li>
398
+ </ul>
399
+ </div>
400
+ </div>
401
+ <div class="mb-6">
402
+ <div class="relative inline-block">
403
+ <select class="bg-black text-white border border-gray-600 rounded px-4 py-2">
404
+ <option>English</option>
405
+ <option>हिन्दी</option>
406
+ </select>
407
+ </div>
408
+ </div>
409
+ <div class="text-sm">
410
+ <p>Netflix India</p>
411
+ </div>
412
+ </div>
413
+ </footer>
414
+
415
+ <script>
416
+ // Navbar scroll effect
417
+ window.addEventListener('scroll', function() {
418
+ const navbar = document.getElementById('navbar');
419
+ if (window.scrollY > 50) {
420
+ navbar.classList.add('nav-scrolled');
421
+ } else {
422
+ navbar.classList.remove('nav-scrolled');
423
+ }
424
+ });
425
+
426
+ // Movie row navigation buttons (would be implemented with more time)
427
+ // This is just a placeholder for the functionality
428
+ document.querySelectorAll('.movie-row').forEach(row => {
429
+ // In a real implementation, we would add navigation buttons
430
+ // and handle the scrolling of the movie rows
431
+ });
432
+ </script>
433
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=KingNish/netflix-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
434
+ </html>