Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29

Update app.py

#7
by smolSWE - opened
base: refs/heads/main
←
from: refs/pr/7
Discussion Files changed
+17
-37
Files changed (1) hide show
  1. index.html +17 -37
index.html CHANGED
@@ -5,25 +5,13 @@
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Netflix Clone</title>
 
8
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
9
- <style>
10
- body {
11
- background-color: #141414;
12
- color: #fff;
13
- }
14
- .fade-in {
15
- animation: fadeIn 1s forwards;
16
- opacity: 0;
17
- }
18
- @keyframes fadeIn {
19
- from { opacity: 0; }
20
- to { opacity: 1; }
21
- }
22
- </style>
23
  </head>
24
  <body class="font-sans">
25
  <!-- Header -->
26
- <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10">
27
  <div class="container mx-auto py-4 px-6 flex justify-between items-center">
28
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32">
29
  <nav>
@@ -53,48 +41,40 @@
53
  <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
54
  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
55
  <!-- Movie 1 -->
56
- <div class="fade-in">
57
- <img src="https://picsum.photos/200/300" alt="Movie 1" class="w-full h-auto">
58
  </div>
59
  <!-- Movie 2 -->
60
- <div class="fade-in">
61
- <img src="https://picsum.photos/201/300" alt="Movie 2" class="w-full h-auto">
62
  </div>
63
  <!-- Movie 3 -->
64
- <div class="fade-in">
65
- <img src="https://picsum.photos/202/300" alt="Movie 3" class="w-full h-auto">
66
  </div>
67
  <!-- Movie 4 -->
68
- <div class="fade-in">
69
- <img src="https://picsum.photos/203/300" alt="Movie 4" class="w-full h-auto">
70
  </div>
71
  <!-- Movie 5 -->
72
- <div class="fade-in">
73
- <img src="https://picsum.photos/204/300" alt="Movie 5" class="w-full h-auto">
74
  </div>
75
  <!-- Movie 6 -->
76
- <div class="fade-in">
77
- <img src="https://picsum.photos/205/300" alt="Movie 6" class="w-full h-auto">
78
  </div>
79
  </div>
80
  </div>
81
  </section>
82
 
83
  <!-- Footer -->
84
- <footer class="bg-black py-8">
85
  <div class="container mx-auto px-6 text-center">
86
  <p class="text-gray-400">© 2023 Netflix Clone</p>
87
  </div>
88
  </footer>
89
 
90
- <script>
91
- // Simple fade-in animation
92
- const elements = document.querySelectorAll('.fade-in');
93
- elements.forEach((element, index) => {
94
- setTimeout(() => {
95
- element.style.opacity = 1;
96
- }, index * 200); // Stagger the animation
97
- });
98
- </script>
99
  </body>
100
  </html>
 
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Netflix Clone</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
9
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
10
+
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  </head>
12
  <body class="font-sans">
13
  <!-- Header -->
14
+ <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10 shadow-md">
15
  <div class="container mx-auto py-4 px-6 flex justify-between items-center">
16
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32">
17
  <nav>
 
41
  <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
42
  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
43
  <!-- Movie 1 -->
44
+ <div class="animate__animated animate__fadeInUp">
45
+ <img src="https://picsum.photos/200/300" alt="Movie 1" class="w-full h-auto hover:scale-105 transition-transform duration-200">
46
  </div>
47
  <!-- Movie 2 -->
48
+ <div class="animate__animated animate__fadeInUp">
49
+ <img src="https://picsum.photos/201/300" alt="Movie 2" class="w-full h-auto hover:scale-105 transition-transform duration-200">
50
  </div>
51
  <!-- Movie 3 -->
52
+ <div class="animate__animated animate__fadeInUp">
53
+ <img src="https://picsum.photos/202/300" alt="Movie 3" class="w-full h-auto hover:scale-105 transition-transform duration-200">
54
  </div>
55
  <!-- Movie 4 -->
56
+ <div class="animate__animated animate__fadeInUp">
57
+ <img src="https://picsum.photos/203/300" alt="Movie 4" class="w-full h-auto hover:scale-105 transition-transform duration-200">
58
  </div>
59
  <!-- Movie 5 -->
60
+ <div class="animate__animated animate__fadeInUp">
61
+ <img src="https://picsum.photos/204/300" alt="Movie 5" class="w-full h-auto hover:scale-105 transition-transform duration-200">
62
  </div>
63
  <!-- Movie 6 -->
64
+ <div class="animate__animated animate__fadeInUp">
65
+ <img src="https://picsum.photos/205/300" alt="Movie 6" class="w-full h-auto hover:scale-105 transition-transform duration-200">
66
  </div>
67
  </div>
68
  </div>
69
  </section>
70
 
71
  <!-- Footer -->
72
+ <footer class="bg-gradient-to-r from-gray-800 to-black py-8">
73
  <div class="container mx-auto px-6 text-center">
74
  <p class="text-gray-400">© 2023 Netflix Clone</p>
75
  </div>
76
  </footer>
77
 
78
+
 
 
 
 
 
 
 
 
79
  </body>
80
  </html>