Spaces:

KingNish
/

test-space

Running

App Files Files Community

KingNish

smolSWE commited on May 18

Commit

728b250

verified ·

1 Parent(s): 31cfd8c

SmolSWE text (#9)

Browse files

- SmolSWE text (3175129e4dad57d5afa614bb2c7d411e3594a71c)

Co-authored-by: smolSWE Bot <smolSWE@users.noreply.huggingface.co>

Files changed (1) hide show

index.html +63 -7

index.html CHANGED Viewed

@@ -5,28 +5,29 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Netflix Clone</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 </head>
 <body class="font-sans">
     <!-- Header -->
-    <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10 shadow-md">
         <div class="container mx-auto py-4 px-6 flex justify-between items-center">
             <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32">
             <nav>
                 <ul class="flex space-x-6">
-                    <li><a href="#" class="text-white hover:text-gray-300">Home</a></li>
-                    <li><a href="#" class="text-white hover:text-gray-300">TV Shows</a></li>
-                    <li><a href="#" class="text-white hover:text-gray-300">Movies</a></li>
-                    <li><a href="#" class="text-white hover:text-gray-300">My List</a></li>
                 </ul>
             </nav>
         </div>
     </header>
     <!-- Hero Section -->
-    <section class="bg-gradient-to-b from-black to-transparent h-screen flex items-center justify-center mt-20">
         <div class="container mx-auto px-6 text-center fade-in">
             <h1 class="text-5xl font-bold mb-4">Unlimited movies, TV shows, and more.</h1>
             <p class="text-2xl mb-8">Watch anywhere. Cancel anytime.</p>
@@ -36,7 +37,61 @@
     </section>
     <!-- Movie Listings -->
-    <section class="bg-black py-12">
         <div class="container mx-auto px-6">
             <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
             <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
@@ -76,5 +131,6 @@
     </footer>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Netflix Clone</title>
+<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 </head>
 <body class="font-sans">
     <!-- Header -->
+    <header class="bg-black bg-opacity-80 fixed top-0 left-0 right-0 z-10 shadow-md animate__animated animate__fadeIn">
         <div class="container mx-auto py-4 px-6 flex justify-between items-center">
             <img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32">
             <nav>
                 <ul class="flex space-x-6">
+                    <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">Home</a></li>
+                    <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">TV Shows</a></li>
+                    <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">Movies</a></li>
+                    <li><a href="#" class="text-white hover:text-gray-300 transition-colors duration-300">My List</a></li>
                 </ul>
             </nav>
         </div>
     </header>
     <!-- Hero Section -->
+    <section class="bg-gradient-to-b from-black to-transparent h-screen flex items-center justify-center mt-20 animate__animated animate__fadeIn">
         <div class="container mx-auto px-6 text-center fade-in">
             <h1 class="text-5xl font-bold mb-4">Unlimited movies, TV shows, and more.</h1>
             <p class="text-2xl mb-8">Watch anywhere. Cancel anytime.</p>
     </section>
     <!-- Movie Listings -->
+<section class="bg-black py-12">
+    <div class="container mx-auto px-6">
+        <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
+        <div class="swiper-container">
+            <div class="swiper-wrapper">
+                <!-- Movie 1 -->
+                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
+                    <img src="https://picsum.photos/200/300" alt="Movie 1" class="w-full h-auto hover:scale-105 transition-transform duration-200">
+                </div>
+                <!-- Movie 2 -->
+                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
+                    <img src="https://picsum.photos/201/300" alt="Movie 2" class="w-full h-auto hover:scale-105 transition-transform duration-200">
+                </div>
+                <!-- Movie 3 -->
+                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
+                    <img src="https://picsum.photos/202/300" alt="Movie 3" class="w-full h-auto hover:scale-105 transition-transform duration-200">
+                </div>
+                <!-- Movie 4 -->
+                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
+                    <img src="https://picsum.photos/203/300" alt="Movie 4" class="w-full h-auto hover:scale-105 transition-transform duration-200">
+                </div>
+                <!-- Movie 5 -->
+                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
+                    <img src="https://picsum.photos/204/300" alt="Movie 5" class="w-full h-auto hover:scale-105 transition-transform duration-200">
+                </div>
+                <!-- Movie 6 -->
+                <div class="swiper-slide hover:shadow-lg transition-shadow duration-300">
+                    <img src="https://picsum.photos/205/300" alt="Movie 6" class="w-full h-auto hover:scale-105 transition-transform duration-200">
+                </div>
+            </div>
+            <!-- Add Pagination -->
+            <div class="swiper-pagination"></div>
+            <!-- Add Arrows -->
+            <div class="swiper-button-next"></div>
+            <div class="swiper-button-prev"></div>
+        </div>
+    </div>
+</section>
+<script>
+    var swiper = new Swiper('.swiper-container', {
+        slidesPerView: 3,
+        spaceBetween: 30,
+        pagination: {
+            el: '.swiper-pagination',
+            clickable: true,
+        },
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        },
+    });
+</script>
         <div class="container mx-auto px-6">
             <h2 class="text-3xl font-bold mb-6">Popular on Netflix</h2>
             <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
     </footer>
+<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
 </body>
 </html>