Zee5 clone project

🎬 **ZEE5 Website Clone | OTT Streaming Platform UI | HTML CSS JavaScript Project** In this video, I am showcasing a **complete front-end clone of the ZEE5 OTT streaming platform**, built using **HTML5, CSS3, and minimal JavaScript**. This project replicates the **core UI/UX of ZEE5**, including premium content sections, subscription plans, TV shows browsing, and a modern dark-themed interface. The main goal of this project is to understand how **real-world OTT platforms** like ZEE5 are designed and structured using **vanilla frontend technologies**, focusing on responsiveness, layout systems, and clean UI design. --- 🌐 **Live Website (Netlify Deployment):** https://zee5clone-atulsingh.netlify.app/ 💻 **Source Code (GitHub Repository):** https://github.com/atulXdev/Zee5-clone.git --- ## 📌 Project Overview This project is a **front-end clone of the ZEE5 streaming platform**, created purely for **learning and educational purposes**. It demonstrates modern web development practices such as **responsive design, card-based layouts, subscription pricing UI, and content discovery interfaces**. The clone includes multiple pages that mirror a real OTT experience: * Home * Sign In * Subscription Plans * TV Shows --- ## ✨ Key Features ### 🏠 Home Page * Premium **hero banner** with featured content and CTAs * Trending Near You section * Popular TV Shows section * Mass Entertainers section * Premium badges on content cards * Hover play button overlay * Sticky navigation header with search, login, and buy plan buttons * Fully designed footer with links and social icons ### 🔐 Sign In Page * Clean authentication UI * Social login options (Google, Facebook, Twitter, Apple) * Email / mobile login input * Glassmorphism-style login card * Responsive centered layout ### 💳 Subscription Page * Three detailed subscription plans: * **All Languages** – ₹399/year (Best Value) * **Hindi + Punjabi + Bhojpuri** – ₹265/year * **Marathi + Gujarati** – ₹132/year * Monthly / yearly plan toggle UI * Best value ribbon badge * Discount and promo banners * Feature comparison with icons * Gradient subscribe buttons with hover effects ### 📺 TV Shows Page * Dedicated TV shows browsing interface * Search bar with gradient banner * Language filters (Hindi, Tamil, Telugu, Malayalam, Kannada, Marathi, Bengali) * Episode badges like NEW EPISODE & WATCH FOR FREE * Responsive grid layout for shows * Active filter state styling --- ## 🎨 Design & UI Highlights * Dark theme inspired by ZEE5 branding * Purple & pink gradient accents * Modern card-based layouts * Smooth hover animations and transitions * Premium badges and episode indicators * CSS animations (fade-in, pulse) * Clean typography and spacing system * Custom scrollbar styling --- ## 🛠️ Technologies Used * **HTML5** – Semantic and SEO-friendly markup * **CSS3** * CSS Grid & Flexbox * CSS Variables (Design system) * Animations & transitions * Media queries for responsiveness * Backdrop filters & gradients * **JavaScript** – Minimal usage for UI behavior This project focuses mainly on **HTML & CSS**, with JavaScript kept to a minimum. --- ## 🎓 What You’ll Learn From This Project * How OTT platforms structure their UI * Building multi-page websites * Responsive layouts using CSS Grid * Subscription pricing page design * Content cards and hover interactions * Clean navigation systems * Writing large-scale, maintainable CSS * Frontend portfolio-level project structure --- ## 👨‍💻 Who Is This Project For? * Frontend development beginners * HTML, CSS & JavaScript learners * Students building OTT-style UI projects * Developers practicing real-world website cloning * Anyone interested in streaming platform UI/UX --- ## ⚠️ Disclaimer This project is created **strictly for educational purposes only**. All brand names, logos, images, and content belong to **ZEE5 / Zee Entertainment Enterprises**. This clone is **not affiliated with or endorsed by ZEE5**. --- 👍 Like the video 💬 Comment your feedback 🔔 Subscribe for more **HTML, CSS & frontend clone projects** --- #ZEE5 #ZEE5Clone #OTTPlatform #StreamingPlatform #HTML #CSS #JavaScript #WebDevelopment #FrontendDevelopment #WebsiteClone #ResponsiveWebDesign #HTMLCSS #WebDesign #UIUX #FrontendProjects #PortfolioProject #CodingProjects #LearnWebDevelopment #OTTUI #DeveloperIndia