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
Download
1 formatsVideo Formats
Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.