Spaces:
Running
Running
File size: 4,007 Bytes
803aaea fc48deb 1cf9796 803aaea fc48deb 1cf9796 803aaea 1cf9796 803aaea 728b250 803aaea 1cf9796 803aaea 1cf9796 803aaea 728b250 803aaea 1cf9796 803aaea 1cf9796 728b250 1cf9796 728b250 1cf9796 728b250 1cf9796 803aaea 1cf9796 803aaea f545bc9 803aaea 1cf9796 fc48deb 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 |
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body class="font-sans bg-black text-white">
<!-- 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">
<a href="#" aria-label="Netflix"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Logonetflix.png" alt="Netflix Logo" class="w-32"></a>
<nav>
<ul class="flex space-x-6">
<li><a href="#" class="hover:text-gray-300 transition-colors duration-300">Home</a></li>
<li><a href="#" class="hover:text-gray-300 transition-colors duration-300">TV Shows</a></li>
<li><a href="#" class="hover:text-gray-300 transition-colors duration-300">Movies</a></li>
<li><a href="#" class="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>
<div class="flex flex-col md:flex-row items-center justify-center">
<input type="email" placeholder="Email Address" class="px-4 py-2 rounded-md text-black w-full md:w-1/2 mb-4 md:mb-0">
<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>
</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" id="swiper-movies">
</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>
<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" id="grid-movies">
</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>
<script src="script.js"></script></body>
</html>
|