Spaces:
Running
Running
File size: 7,134 Bytes
803aaea 3175129 f545bc9 803aaea f545bc9 803aaea 3175129 803aaea 3175129 803aaea 3175129 803aaea 3175129 803aaea f545bc9 803aaea f545bc9 803aaea f545bc9 803aaea f545bc9 803aaea f545bc9 803aaea f545bc9 803aaea f545bc9 803aaea f545bc9 3175129 803aaea |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<input type="email" placeholder="Email Address" class="px-4 py-2 rounded-md text-black w-full md:w-1/2 inline-block">
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md ml-2">Get Started</button>
</div>
</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">
<!-- Movie 1 -->
<div class="animate__animated animate__fadeInUp">
<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="animate__animated animate__fadeInUp">
<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="animate__animated animate__fadeInUp">
<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="animate__animated animate__fadeInUp">
<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="animate__animated animate__fadeInUp">
<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="animate__animated animate__fadeInUp">
<img src="https://picsum.photos/205/300" alt="Movie 6" class="w-full h-auto hover:scale-105 transition-transform duration-200">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gradient-to-r from-gray-800 to-black py-8">
<div class="container mx-auto px-6 text-center">
<p class="text-gray-400">© 2023 Netflix Clone</p>
</div>
</footer>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>
</html>
|