| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Cin-Flix | Unlimited Movies & Shows</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | background-color: #0f0f1a; |
| | color: #ffffff; |
| | } |
| | |
| | .hero-gradient { |
| | background: linear-gradient(to right, rgba(15, 15, 26, 0.9), rgba(15, 15, 26, 0.5)), url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
| | background-size: cover; |
| | background-position: center; |
| | } |
| | |
| | .movie-card { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .movie-card:hover { |
| | transform: scale(1.05); |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
| | } |
| | |
| | .movie-card:hover .play-icon { |
| | opacity: 1; |
| | } |
| | |
| | .play-icon { |
| | opacity: 0; |
| | transition: opacity 0.3s ease; |
| | } |
| | |
| | .navbar { |
| | background: linear-gradient(to bottom, rgba(15, 15, 26, 0.9), rgba(15, 15, 26, 0.7)); |
| | backdrop-filter: blur(10px); |
| | } |
| | |
| | .search-input:focus { |
| | outline: none; |
| | box-shadow: 0 0 0 2px #e50914; |
| | } |
| | |
| | .genre-tag { |
| | transition: all 0.2s ease; |
| | } |
| | |
| | .genre-tag:hover { |
| | background-color: #e50914; |
| | color: white; |
| | } |
| | |
| | .footer-link:hover { |
| | color: #e50914; |
| | text-decoration: underline; |
| | } |
| | |
| | |
| | ::-webkit-scrollbar { |
| | width: 8px; |
| | height: 8px; |
| | } |
| | |
| | ::-webkit-scrollbar-track { |
| | background: #1a1a2e; |
| | } |
| | |
| | ::-webkit-scrollbar-thumb { |
| | background: #e50914; |
| | border-radius: 10px; |
| | } |
| | |
| | ::-webkit-scrollbar-thumb:hover { |
| | background: #b20710; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | |
| | <nav class="navbar fixed top-0 left-0 right-0 z-50 py-4 px-6 flex justify-between items-center"> |
| | <div class="flex items-center space-x-8"> |
| | <a href="#" class="text-3xl font-bold text-red-600">CIN-FLIX</a> |
| | <div class="hidden md:flex space-x-6"> |
| | <a href="#" class="hover:text-red-500 transition">Home</a> |
| | <a href="#" class="hover:text-red-500 transition">Movies</a> |
| | <a href="#" class="hover:text-red-500 transition">TV Shows</a> |
| | <a href="#" class="hover:text-red-500 transition">New & Popular</a> |
| | <a href="#" class="hover:text-red-500 transition">My List</a> |
| | </div> |
| | </div> |
| | <div class="flex items-center space-x-4"> |
| | <div class="relative hidden md:block"> |
| | <input type="text" placeholder="Search..." class="search-input bg-gray-800 text-white px-4 py-2 rounded-full w-64 focus:ring-2 focus:ring-red-500"> |
| | <i class="fas fa-search absolute right-3 top-2.5 text-gray-400"></i> |
| | </div> |
| | <div class="flex items-center space-x-2"> |
| | <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center"> |
| | <i class="fas fa-user text-white"></i> |
| | </div> |
| | <span class="hidden md:inline">Profile</span> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <div class="md:hidden fixed top-4 right-4 z-50"> |
| | <button id="mobileMenuButton" class="text-white bg-gray-800 p-2 rounded-full"> |
| | <i class="fas fa-bars"></i> |
| | </button> |
| | </div> |
| |
|
| | |
| | <div id="mobileMenu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex-col items-center justify-center space-y-8"> |
| | <button id="closeMobileMenu" class="absolute top-6 right-6 text-white text-2xl"> |
| | <i class="fas fa-times"></i> |
| | </button> |
| | <a href="#" class="text-2xl hover:text-red-500">Home</a> |
| | <a href="#" class="text-2xl hover:text-red-500">Movies</a> |
| | <a href="#" class="text-2xl hover:text-red-500">TV Shows</a> |
| | <a href="#" class="text-2xl hover:text-red-500">New & Popular</a> |
| | <a href="#" class="text-2xl hover:text-red-500">My List</a> |
| | <div class="relative mt-8"> |
| | <input type="text" placeholder="Search..." class="search-input bg-gray-800 text-white px-4 py-3 rounded-full w-64 focus:ring-2 focus:ring-red-500"> |
| | <i class="fas fa-search absolute right-3 top-3.5 text-gray-400"></i> |
| | </div> |
| | </div> |
| |
|
| | |
| | <section class="hero-gradient min-h-screen flex items-center pt-16"> |
| | <div class="container mx-auto px-6 py-20"> |
| | <div class="max-w-2xl"> |
| | <h1 class="text-5xl md:text-6xl font-bold mb-4">Unlimited Movies, TV Shows, and More</h1> |
| | <p class="text-xl mb-8">Watch anywhere. Cancel anytime. Ready to watch? Enter your email to create or restart your membership.</p> |
| | <div class="flex flex-col md:flex-row gap-4"> |
| | <input type="email" placeholder="Email address" class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg border border-gray-600 rounded px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-red-500 flex-grow"> |
| | <button class="bg-red-600 hover:bg-red-700 text-white font-bold px-6 py-3 rounded flex items-center justify-center transition"> |
| | Get Started <i class="fas fa-chevron-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <div class="container mx-auto px-6 py-16"> |
| | |
| | <section class="mb-16"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h2 class="text-3xl font-bold">Trending Now</h2> |
| | <a href="#" class="text-red-500 hover:underline">See All</a> |
| | </div> |
| | <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">Spider-Man: Across the Spider-Verse</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">8.7</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Action</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Adventure</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">The Flash</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">6.8</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Action</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Sci-Fi</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/4Y1WNkd88JXmGfhtWR7dmDAo1T2.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">Transformers: Rise of the Beasts</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">7.3</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Action</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Sci-Fi</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/5YZbUmjbMa3ClvSW1Wj3D6XGolb.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">Guardians of the Galaxy Vol. 3</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">8.1</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Action</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Comedy</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/1E5baAaEse26fej7uHcjOgEE2t2.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">Avatar: The Way of Water</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">7.6</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Action</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Adventure</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h2 class="text-3xl font-bold">Popular on Cin-Flix</h2> |
| | <a href="#" class="text-red-500 hover:underline">See All</a> |
| | </div> |
| | <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/iuFNMS8U5cb6xfzi51Dbkovj7vM.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">The Witcher</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">8.5</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Fantasy</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Action</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">Spider-Man: Across the Spider-Verse</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">8.7</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Action</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Adventure</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">The Super Mario Bros. Movie</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">7.8</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Animation</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Adventure</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/1X7vow16X7CnCoexXh4H4F2yDJv.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">Oppenheimer</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">8.5</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Drama</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">History</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/5YZbUmjbMa3ClvSW1Wj3D6XGolb.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">Guardians of the Galaxy Vol. 3</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">8.1</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Action</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Comedy</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="mb-16"> |
| | <div class="flex justify-between items-center mb-8"> |
| | <h2 class="text-3xl font-bold">Continue Watching</h2> |
| | <a href="#" class="text-red-500 hover:underline">See All</a> |
| | </div> |
| | <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6"> |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/1X7vow16X7CnCoexXh4H4F2yDJv.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">Oppenheimer</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">8.5</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Drama</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">History</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-600"> |
| | <div class="h-full bg-red-600" style="width: 65%"></div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/8Gxv8gSFCU0XGDykEGv7zR1n2ua.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">The Super Mario Bros. Movie</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">7.8</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Animation</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Adventure</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-600"> |
| | <div class="h-full bg-red-600" style="width: 30%"></div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/iuFNMS8U5cb6xfzi51Dbkovj7vM.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">The Witcher</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">8.5</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Fantasy</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Action</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-600"> |
| | <div class="h-full bg-red-600" style="width: 80%"></div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/4m1Au3YkjqsxF8iwQy0fPYSxE0h.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">The Flash</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">6.8</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Action</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Sci-Fi</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-600"> |
| | <div class="h-full bg-red-600" style="width: 45%"></div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="movie-card relative rounded-lg overflow-hidden group"> |
| | <img src="https://image.tmdb.org/t/p/w500/1E5baAaEse26fej7uHcjOgEE2t2.jpg" alt="Movie Poster" class="w-full h-64 object-cover"> |
| | <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition flex items-end p-4"> |
| | <div> |
| | <h3 class="text-white font-bold">Avatar: The Way of Water</h3> |
| | <div class="flex items-center text-yellow-400 mt-1"> |
| | <i class="fas fa-star"></i> |
| | <span class="ml-1 text-white">7.6</span> |
| | </div> |
| | <div class="flex mt-2"> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded mr-2">Action</span> |
| | <span class="genre-tag bg-gray-800 text-white text-xs px-2 py-1 rounded">Adventure</span> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="absolute bottom-0 left-0 right-0 h-1 bg-gray-600"> |
| | <div class="h-full bg-red-600" style="width: 25%"></div> |
| | </div> |
| | <div class="play-icon absolute inset-0 flex items-center justify-center"> |
| | <div class="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center"> |
| | <i class="fas fa-play text-white"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | </div> |
| |
|
| | |
| | <section class="bg-gray-900 py-16"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-12">Why Choose Cin-Flix?</h2> |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | <div class="text-center p-6"> |
| | <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-tv text-white text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-2">4K Ultra HD</h3> |
| | <p class="text-gray-400">Experience cinema-quality picture and sound with our growing library of titles in 4K Ultra HD.</p> |
| | </div> |
| | <div class="text-center p-6"> |
| | <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-mobile-alt text-white text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-2">Watch Anywhere</h3> |
| | <p class="text-gray-400">Stream on your phone, tablet, laptop, and TV without paying more.</p> |
| | </div> |
| | <div class="text-center p-6"> |
| | <div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4"> |
| | <i class="fas fa-plus-circle text-white text-2xl"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-2">New Content Weekly</h3> |
| | <p class="text-gray-400">We add new movies and shows all the time, so you'll always find something to watch.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16"> |
| | <div class="container mx-auto px-6 max-w-4xl"> |
| | <h2 class="text-3xl font-bold text-center mb-12">Frequently Asked Questions</h2> |
| | <div class="space-y-4"> |
| | |
| | <div class="border border-gray-700 rounded-lg overflow-hidden"> |
| | <button class="faq-toggle w-full text-left p-4 bg-gray-800 hover:bg-gray-700 transition flex justify-between items-center"> |
| | <span class="font-medium">What is Cin-Flix?</span> |
| | <i class="fas fa-plus"></i> |
| | </button> |
| | <div class="faq-content hidden p-4 bg-gray-900"> |
| | <p class="text-gray-300">Cin-Flix is a streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices.</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="border border-gray-700 rounded-lg overflow-hidden"> |
| | <button class="faq-toggle w-full text-left p-4 bg-gray-800 hover:bg-gray-700 transition flex justify-between items-center"> |
| | <span class="font-medium">How much does Cin-Flix cost?</span> |
| | <i class="fas fa-plus"></i> |
| | </button> |
| | <div class="faq-content hidden p-4 bg-gray-900"> |
| | <p class="text-gray-300">Watch Cin-Flix on your smartphone, tablet, Smart TV, laptop, or streaming device, all for one fixed monthly fee. Plans range from $8.99 to $17.99 a month. No extra costs, no contracts.</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="border border-gray-700 rounded-lg overflow-hidden"> |
| | <button class="faq-toggle w-full text-left p-4 bg-gray-800 hover:bg-gray-700 transition flex justify-between items-center"> |
| | <span class="font-medium">Where can I watch?</span> |
| | <i class="fas fa-plus"></i> |
| | </button> |
| | <div class="faq-content hidden p-4 bg-gray-900"> |
| | <p class="text-gray-300">Watch anywhere, anytime. Sign in with your Cin-Flix account to watch instantly on the web at cin-flix.com from your personal computer or on any internet-connected device that offers the Cin-Flix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="border border-gray-700 rounded-lg overflow-hidden"> |
| | <button class="faq-toggle w-full text-left p-4 bg-gray-800 hover:bg-gray-700 transition flex justify-between items-center"> |
| | <span class="font-medium">How do I cancel?</span> |
| | <i class="fas fa-plus"></i> |
| | </button> |
| | <div class="faq-content hidden p-4 bg-gray-900"> |
| | <p class="text-gray-300">Cin-Flix is flexible. There are no pesky contracts and no commitments. You can easily cancel your account online in two clicks. There are no cancellation fees – start or stop your account anytime.</p> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="border border-gray-700 rounded-lg overflow-hidden"> |
| | <button class="faq-toggle w-full text-left p-4 bg-gray-800 hover:bg-gray-700 transition flex justify-between items-center"> |
| | <span class="font-medium">What can I watch on Cin-Flix?</span> |
| | <i class="fas fa-plus"></i> |
| | </button> |
| | <div class="faq-content hidden p-4 bg-gray-900"> |
| | <p class="text-gray-300">Cin-Flix has an extensive library of feature films, documentaries, TV shows, anime, award-winning Cin-Flix originals, and more. Watch as much as you want, anytime you want.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-gray-900 py-16"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <h2 class="text-3xl font-bold mb-6">Ready to watch? Enter your email to create or restart your membership.</h2> |
| | <div class="flex flex-col md:flex-row gap-4 max-w-2xl mx-auto"> |
| | <input type="email" placeholder="Email address" class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg border border-gray-600 rounded px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-red-500 flex-grow"> |
| | <button class="bg-red-600 hover:bg-red-700 text-white font-bold px-6 py-3 rounded flex items-center justify-center transition"> |
| | Get Started <i class="fas fa-chevron-right ml-2"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-black py-12"> |
| | <div class="container mx-auto px-6"> |
| | <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8"> |
| | <div class="col-span-2"> |
| | <h3 class="text-3xl font-bold text-red-600 mb-4">CIN-FLIX</h3> |
| | <p class="text-gray-400 mb-4">The best streaming platform for movies and TV shows. Watch anywhere. Cancel anytime.</p> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
| | <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a> |
| | </div> |
| | </div> |
| | <div> |
| | <h4 class="text-white font-bold mb-4">Navigation</h4> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">Home</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">Movies</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">TV Shows</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">New & Popular</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">My List</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h4 class="text-white font-bold mb-4">Legal</h4> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">Privacy Policy</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">Terms of Service</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">Cookie Preferences</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">Corporate Information</a></li> |
| | </ul> |
| | </div> |
| | <div> |
| | <h4 class="text-white font-bold mb-4">Help</h4> |
| | <ul class="space-y-2"> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">FAQ</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">Help Center</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">Contact Us</a></li> |
| | <li><a href="#" class="footer-link text-gray-400 hover:text-red-500 transition">Speed Test</a></li> |
| | </ul> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-800 mt-12 pt-8"> |
| | <p class="text-gray-400 text-center">© 2023 Cin-Flix. All rights reserved.</p> |
| | </div> |
| | </div> |
| | </footer> |
| |
|
| | <script> |
| | |
| | const mobileMenuButton = document.getElementById('mobileMenuButton'); |
| | const mobileMenu = document.getElementById('mobileMenu'); |
| | const closeMobileMenu = document.getElementById('closeMobileMenu'); |
| | |
| | mobileMenuButton.addEventListener('click', () => { |
| | mobileMenu.classList.remove('hidden'); |
| | mobileMenu.classList.add('flex'); |
| | }); |
| | |
| | closeMobileMenu.addEventListener('click', () => { |
| | mobileMenu.classList.add('hidden'); |
| | mobileMenu.classList.remove('flex'); |
| | }); |
| | |
| | |
| | const faqToggles = document.querySelectorAll('.faq-toggle'); |
| | |
| | faqToggles.forEach(toggle => { |
| | toggle.addEventListener('click', () => { |
| | const content = toggle.nextElementSibling; |
| | const icon = toggle.querySelector('i'); |
| | |
| | if (content.classList.contains('hidden')) { |
| | content.classList.remove('hidden'); |
| | icon.classList.remove('fa-plus'); |
| | icon.classList.add('fa-minus'); |
| | } else { |
| | content.classList.add('hidden'); |
| | icon.classList.remove('fa-minus'); |
| | icon.classList.add('fa-plus'); |
| | } |
| | }); |
| | }); |
| | |
| | |
| | const movieCards = document.querySelectorAll('.movie-card'); |
| | |
| | movieCards.forEach(card => { |
| | card.addEventListener('mouseenter', () => { |
| | card.querySelector('.play-icon').style.opacity = '1'; |
| | }); |
| | |
| | card.addEventListener('mouseleave', () => { |
| | card.querySelector('.play-icon').style.opacity = '0'; |
| | }); |
| | }); |
| | </script> |
| | <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cinflix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| | </html> |
