Spaces:
Running
Running
File size: 4,751 Bytes
803aaea a03e10f 803aaea a03e10f 803aaea a03e10f 803aaea 728b250 803aaea a03e10f 803aaea a03e10f 803aaea 728b250 803aaea a03e10f 803aaea a03e10f 728b250 a03e10f 728b250 a03e10f 728b250 a03e10f 803aaea a03e10f 803aaea f545bc9 803aaea a03e10f 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 |
<!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">
<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>
<script>
const movies = [
{ imageUrl: 'https://picsum.photos/200/300', altText: 'Movie 1' },
{ imageUrl: 'https://picsum.photos/201/300', altText: 'Movie 2' },
{ imageUrl: 'https://picsum.photos/202/300', altText: 'Movie 3' },
{ imageUrl: 'https://picsum.photos/203/300', altText: 'Movie 4' },
{ imageUrl: 'https://picsum.photos/204/300', altText: 'Movie 5' },
{ imageUrl: 'https://picsum.photos/205/300', altText: 'Movie 6' },
];
const swiperMoviesContainer = document.getElementById('swiper-movies');
const gridMoviesContainer = document.getElementById('grid-movies');
movies.forEach(movie => {
swiperMoviesContainer.innerHTML += createMovieCard(movie.imageUrl, movie.altText);
gridMoviesContainer.innerHTML += `<div class="animate__animated animate__fadeInUp"><img src="${movie.imageUrl}" alt="${movie.altText}" class="w-full h-auto hover:scale-105 transition-transform duration-200"></div>`;
});
</script>
</body>
</html>
|