Spaces:
Running
Running
| <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://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), | |
| url('https://assets.nflxext.com/ffe/siteui/vlv3/9d3533b2-0e2b-40b2-95e0-ecd7979cc88b/a3873901-5b7c-46eb-b9fa-12fea5197bd3/IN-en-20240311-popsignuptwoweeks-perspective_alpha_website_large.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| height: 90vh; | |
| } | |
| .movie-row { | |
| display: flex; | |
| overflow-y: hidden; | |
| overflow-x: scroll; | |
| padding: 20px; | |
| scrollbar-width: none; /* Firefox */ | |
| } | |
| .movie-row::-webkit-scrollbar { | |
| display: none; /* Chrome, Safari, Opera */ | |
| } | |
| .movie-card { | |
| width: 200px; | |
| margin-right: 15px; | |
| transition: transform 450ms; | |
| border-radius: 4px; | |
| position: relative; | |
| } | |
| .movie-card:hover { | |
| transform: scale(1.08); | |
| z-index: 1; | |
| } | |
| .movie-card:hover .movie-info { | |
| opacity: 1; | |
| } | |
| .movie-info { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); | |
| padding: 10px; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .nav-scrolled { | |
| background-color: #111; | |
| transition: all 0.5s; | |
| } | |
| @media (max-width: 768px) { | |
| .hero { | |
| height: 70vh; | |
| } | |
| .movie-card { | |
| width: 150px; | |
| } | |
| .hero-content h1 { | |
| font-size: 2rem; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .movie-card { | |
| width: 120px; | |
| } | |
| .hero-content h1 { | |
| font-size: 1.5rem; | |
| } | |
| .hero-content p { | |
| font-size: 0.9rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white"> | |
| <!-- Navigation --> | |
| <nav id="navbar" class="fixed top-0 w-full z-50 flex justify-between items-center p-4 transition-all duration-500"> | |
| <div class="flex items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" alt="Netflix Logo" class="h-8 md:h-10"> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:block"> | |
| <div class="relative"> | |
| <select class="bg-black text-white border border-gray-600 rounded px-2 py-1 text-sm"> | |
| <option>English</option> | |
| <option>हिन्दी</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm md:text-base"> | |
| Sign In | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero flex items-center justify-center text-center pt-16"> | |
| <div class="hero-content px-4 max-w-4xl"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Unlimited movies, TV shows and more</h1> | |
| <p class="text-xl md:text-2xl mb-6">Watch anywhere. Cancel anytime.</p> | |
| <p class="text-lg mb-8">Ready to watch? Enter your email to create or restart your membership.</p> | |
| <div class="flex flex-col md:flex-row gap-2 justify-center"> | |
| <input type="email" placeholder="Email address" class="px-4 py-3 md:py-4 bg-black bg-opacity-70 border border-gray-600 rounded w-full md:w-96"> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 md:py-4 rounded font-bold flex items-center justify-center"> | |
| Get Started <i class="fas fa-chevron-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Content Sections --> | |
| <div class="mt-8"> | |
| <!-- Popular on Netflix --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl md:text-2xl font-bold px-4 md:px-8 mb-2">Popular on Netflix</h2> | |
| <div class="movie-row"> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/1pdfLvkbY9ohJlCjQH2CZjjYVvJ.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Stranger Things</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.8</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/9PqD3wSIjntyJDBzMNuxuKHwpUD.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">The Witcher</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.5</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/34nDCQZwaEvsy4CFO5hkGRFDCVU.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Money Heist</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/6kbAMLteGO8yyewYau6bJ683sw7.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">The Crown</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.6</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/6UH52Fmau8RPsMAbQbjwN3wJSCj.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Peaky Blinders</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/4EYPN5mVIhKLfxGruy7Dy41dTVn.jpg" alt="Dark" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Dark</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.8</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/6XYLiMxHAaCsoyrVo38LBWMw2p8.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">The Queen's Gambit</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trending Now --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl md:text-2xl font-bold px-4 md:px-8 mb-2">Trending Now</h2> | |
| <div class="movie-row"> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/8Vt6mWEReuy4Of61Lnj5Xj704m8.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Loki</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/7RyHsO4yDXtBv1zUU3mTpHeQ0d5.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Avengers: Endgame</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.9</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Spider-Man: No Way Home</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.8</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/6DrHO1jr3qVrViUO6s6kFiAGM7.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Squid Game</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.6</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/6MKr3KgOLmzOP6MSuZERO41Lpkt.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">The Batman</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.5</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/74xTEgt7R36Fpooo50r9T25onhq.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">The Mandalorian</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.7</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/bOFaAXmWWXC3Rbv4u4uM9ZSzRXP.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Dune</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.6</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Continue Watching --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl md:text-2xl font-bold px-4 md:px-8 mb-2">Continue Watching</h2> | |
| <div class="movie-row"> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/5kkw5RT1OjTAMh3POhjo5LdaACZ.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Breaking Bad</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.9</span> | |
| </div> | |
| <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2"> | |
| <div class="bg-red-600 h-1.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <p class="text-xs mt-1">65% watched</p> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/7IiTTgloJzvGI1TAYymCfbfl3vT.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Narcos</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.7</span> | |
| </div> | |
| <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2"> | |
| <div class="bg-red-600 h-1.5 rounded-full" style="width: 30%"></div> | |
| </div> | |
| <p class="text-xs mt-1">30% watched</p> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/6fVX7Fy8N6UQzQmQGqDg5QDeY25.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Ozark</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.6</span> | |
| </div> | |
| <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2"> | |
| <div class="bg-red-600 h-1.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| <p class="text-xs mt-1">45% watched</p> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/5DUMPBSnHOZsbBv81GFXZXvD5BC.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Dark</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.8</span> | |
| </div> | |
| <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2"> | |
| <div class="bg-red-600 h-1.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| <p class="text-xs mt-1">80% watched</p> | |
| </div> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://image.tmdb.org/t/p/w500/6UH52Fmau8RPsMAbQbjwN3wJSCj.jpg" alt="Movie" class="w-full h-auto"> | |
| <div class="movie-info"> | |
| <h3 class="font-bold">Peaky Blinders</h3> | |
| <div class="flex items-center text-yellow-400 text-sm"> | |
| <i class="fas fa-star mr-1"></i> | |
| <span>4.9</span> | |
| </div> | |
| <div class="w-full bg-gray-600 rounded-full h-1.5 mt-2"> | |
| <div class="bg-red-600 h-1.5 rounded-full" style="width: 15%"></div> | |
| </div> | |
| <p class="text-xs mt-1">15% watched</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-black text-gray-400 py-8 px-4 md:px-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="mb-6"> | |
| <p>Questions? Call 000-800-919-1694</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> | |
| <div> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:underline">FAQ</a></li> | |
| <li><a href="#" class="hover:underline">Investor Relations</a></li> | |
| <li><a href="#" class="hover:underline">Privacy</a></li> | |
| <li><a href="#" class="hover:underline">Speed Test</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:underline">Help Centre</a></li> | |
| <li><a href="#" class="hover:underline">Jobs</a></li> | |
| <li><a href="#" class="hover:underline">Cookie Preferences</a></li> | |
| <li><a href="#" class="hover:underline">Legal Notices</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:underline">Account</a></li> | |
| <li><a href="#" class="hover:underline">Ways to Watch</a></li> | |
| <li><a href="#" class="hover:underline">Corporate Information</a></li> | |
| <li><a href="#" class="hover:underline">Only on Netflix</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="hover:underline">Media Centre</a></li> | |
| <li><a href="#" class="hover:underline">Terms of Use</a></li> | |
| <li><a href="#" class="hover:underline">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="relative inline-block"> | |
| <select class="bg-black text-white border border-gray-600 rounded px-4 py-2"> | |
| <option>English</option> | |
| <option>हिन्दी</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="text-sm"> | |
| <p>Netflix India</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Navbar scroll effect | |
| window.addEventListener('scroll', function() { | |
| const navbar = document.getElementById('navbar'); | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('nav-scrolled'); | |
| } else { | |
| navbar.classList.remove('nav-scrolled'); | |
| } | |
| }); | |
| // Movie row navigation buttons (would be implemented with more time) | |
| // This is just a placeholder for the functionality | |
| document.querySelectorAll('.movie-row').forEach(row => { | |
| // In a real implementation, we would add navigation buttons | |
| // and handle the scrolling of the movie rows | |
| }); | |
| </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=KingNish/netflix-clone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |