Hugging Face's logo

Spaces:
KingNish
/
test-space
Running

App Files Community
29

SmolSWE text

#9
by smolSWE - opened
base: refs/heads/main
←
from: refs/pr/9
Discussion Files changed
+63
-7
Files changed (1) hide show
  1. index.html +63 -7
index.html CHANGED
@@ -5,28 +5,29 @@
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>
18
  <ul class="flex space-x-6">
19
- <li><a href="#" class="text-white hover:text-gray-300">Home</a></li>
20
- <li><a href="#" class="text-white hover:text-gray-300">TV Shows</a></li>
21
- <li><a href="#" class="text-white hover:text-gray-300">Movies</a></li>
22
- <li><a href="#" class="text-white hover:text-gray-300">My List</a></li>
23
  </ul>
24
  </nav>
25
  </div>
26
  </header>
27
 
28
  <!-- Hero Section -->
29
- <section class="bg-gradient-to-b from-black to-transparent h-screen flex items-center justify-center mt-20">
30
  <div class="container mx-auto px-6 text-center fade-in">
31
  <h1 class="text-5xl font-bold mb-4">Unlimited movies, TV shows, and more.</h1>
32
  <p class="text-2xl mb-8">Watch anywhere. Cancel anytime.</p>
@@ -36,7 +37,61 @@
36
  </section>
37
 
38
  <!-- Movie Listings -->
39
- <section class="bg-black py-12">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  <div class="container mx-auto px-6">
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">
@@ -76,5 +131,6 @@
76
  </footer>
77
 
78
 
 
79
  </body>
80
  </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://unpkg.com/swiper/swiper-bundle.min.css"/>
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
10
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
11
 
12
  </head>
13
  <body class="font-sans">
14
  <!-- Header -->
15
+ <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10 shadow-md animate__animated animate__fadeIn">
16
  <div class="container mx-auto py-4 px-6 flex justify-between items-center">
17
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32">
18
  <nav>
19
  <ul class="flex space-x-6">
20
+ <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">Home</a></li>
21
+ <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">TV Shows</a></li>
22
+ <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">Movies</a></li>
23
+ <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">My List</a></li>
24
  </ul>
25
  </nav>
26
  </div>
27
  </header>
28
 
29
  <!-- Hero Section -->
30
+ <section class="bg-gradient-to-b from-black to-transparent h-screen flex items-center justify-center mt-20 animate__animated animate__fadeIn">
31
  <div class="container mx-auto px-6 text-center fade-in">
32
  <h1 class="text-5xl font-bold mb-4">Unlimited movies, TV shows, and more.</h1>
33
  <p class="text-2xl mb-8">Watch anywhere. Cancel anytime.</p>
 
37
  </section>
38
 
39
  <!-- Movie Listings -->
40
+
41
+ <section class="bg-black py-12">
42
+ <div class="container mx-auto px-6">
43
+ <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
44
+ <div class="swiper-container">
45
+ <div class="swiper-wrapper">
46
+ <!-- Movie 1 -->
47
+ <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
48
+ <img src="https://picsum.photos/200/300" alt="Movie 1" class="w-full h-auto hover:scale-105 transition-transform duration-200">
49
+ </div>
50
+ <!-- Movie 2 -->
51
+ <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
52
+ <img src="https://picsum.photos/201/300" alt="Movie 2" class="w-full h-auto hover:scale-105 transition-transform duration-200">
53
+ </div>
54
+ <!-- Movie 3 -->
55
+ <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
56
+ <img src="https://picsum.photos/202/300" alt="Movie 3" class="w-full h-auto hover:scale-105 transition-transform duration-200">
57
+ </div>
58
+ <!-- Movie 4 -->
59
+ <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
60
+ <img src="https://picsum.photos/203/300" alt="Movie 4" class="w-full h-auto hover:scale-105 transition-transform duration-200">
61
+ </div>
62
+ <!-- Movie 5 -->
63
+ <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
64
+ <img src="https://picsum.photos/204/300" alt="Movie 5" class="w-full h-auto hover:scale-105 transition-transform duration-200">
65
+ </div>
66
+ <!-- Movie 6 -->
67
+ <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
68
+ <img src="https://picsum.photos/205/300" alt="Movie 6" class="w-full h-auto hover:scale-105 transition-transform duration-200">
69
+ </div>
70
+ </div>
71
+ <!-- Add Pagination -->
72
+ <div class="swiper-pagination"></div>
73
+ <!-- Add Arrows -->
74
+ <div class="swiper-button-next"></div>
75
+ <div class="swiper-button-prev"></div>
76
+ </div>
77
+ </div>
78
+ </section>
79
+
80
+ <script>
81
+ var swiper = new Swiper('.swiper-container', {
82
+ slidesPerView: 3,
83
+ spaceBetween: 30,
84
+ pagination: {
85
+ el: '.swiper-pagination',
86
+ clickable: true,
87
+ },
88
+ navigation: {
89
+ nextEl: '.swiper-button-next',
90
+ prevEl: '.swiper-button-prev',
91
+ },
92
+ });
93
+ </script>
94
+
95
  <div class="container mx-auto px-6">
96
  <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
97
  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
 
131
  </footer>
132
 
133
 
134
+ <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
135
  </body>
136
  </html>