diff --git a/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/Child.png b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/Child.png new file mode 100644 index 00000000..3c87f0ff Binary files /dev/null and b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/Child.png differ diff --git a/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/ST.jpg b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/ST.jpg new file mode 100644 index 00000000..00c8f018 Binary files /dev/null and b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/ST.jpg differ diff --git a/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/bg.jpg b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/bg.jpg new file mode 100644 index 00000000..0eacbc30 Binary files /dev/null and b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/bg.jpg differ diff --git a/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/logo.svg b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/logo.svg new file mode 100644 index 00000000..4aeb03db --- /dev/null +++ b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/tv.png b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/tv.png new file mode 100644 index 00000000..31c0a259 Binary files /dev/null and b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Images/tv.png differ diff --git a/Domains/Frontend/MiniProjects/NetflixClone/Assets/Video/video-tv.m4v b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Video/video-tv.m4v new file mode 100644 index 00000000..602309d8 Binary files /dev/null and b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Video/video-tv.m4v differ diff --git a/Domains/Frontend/MiniProjects/NetflixClone/Assets/Video/video1.m4v b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Video/video1.m4v new file mode 100644 index 00000000..05a2c01c Binary files /dev/null and b/Domains/Frontend/MiniProjects/NetflixClone/Assets/Video/video1.m4v differ diff --git a/Domains/Frontend/MiniProjects/NetflixClone/README.md b/Domains/Frontend/MiniProjects/NetflixClone/README.md new file mode 100644 index 00000000..07c2b5a7 --- /dev/null +++ b/Domains/Frontend/MiniProjects/NetflixClone/README.md @@ -0,0 +1,93 @@ +# ๐ŸŽฌ Netflix Frontend Clone โ€“ A Cinematic UI Experience ๐ŸŽฅ + +> โœจ A jaw-dropping Netflix UI clone that will make even Hollywood proud! โœจ +> Get ready to dive into the world of pixel-perfect design, buttery-smooth interactions, and a frontend experience that screams "Next-Level Web Dev." + +--- + +## ๐Ÿš€ Project Highlights + +๐ŸŽฏ **Netflix-Like Look & Feel** +Faithfully recreated with laser precision โ€” from the iconic header and hero banners to slick carousels and hover effects, this clone delivers the **authentic Netflix vibe**. + +๐Ÿ’… **Responsive Design** +Whether you're binge-scrolling on your desktop, chilling on a tablet, or sneak-peeking from your mobile โ€” this UI adapts **flawlessly** to any screen. + +โšก **Built for Speed** +Lightning-fast load times, optimized assets, and clean code. It's not just Netflix-like, it's Netflix-lightning! + +๐ŸŽจ **CSS Craftsmanship** +A symphony of gradients, shadows, transitions, and layout finesse โ€” no detail is too small when you're re-creating the king of streaming UIs. + +--- + +## ๐Ÿ› ๏ธ Tech Stack + +| Tech | Why It's Awesome ๐Ÿ’ก | +|-----------------|-------------------------------------| +| **HTML5** | The backbone of the structure | +| **CSS3** | Gorgeous styling that stuns | +| **Flexbox/Grid**| Pixel-perfect layout control | +| **Fonts & Icons** | Aesthetic polish for visual impact | + +--- + +## ๐Ÿ“ธ Preview + +> Here's a sneak peek of the UI magic. +> ๐ŸŽž๏ธ *You may mistake it for the real thing!* + +https://github.com/user-attachments/assets/394e9dfc-7552-4b1a-a219-20484f3516aa + +--- + +## ๐Ÿง  Learning Outcomes + +- Mastered UI cloning with real-world standards +- Explored deep layout techniques using Flexbox & Grid +- Practiced responsive and adaptive design patterns +- Improved component reusability and file structure organization + +--- + +## ๐Ÿšง Future Enhancements + +- ๐ŸŽฎ Add authentication & routing +- ๐Ÿง  Integrate TMDB API for dynamic movie data +- ๐ŸŒ™ Enable Dark/Light theme toggles +- ๐Ÿ”ฅ Animate carousels with Swiper.js or Framer Motion + +--- + +## ๐ŸŒŸ Star This Repo If You... + +- โค๏ธ Love Netflix +- ๐Ÿ’ป Love frontend challenges +- ๐Ÿง  Are learning by cloning +- ๐Ÿ’ฅ Want inspiration for UI builds + +> **Your star could be the next spark for innovation.** + +--- + +## ๐Ÿ™Œ Acknowledgements + +- Original inspiration: **Netflix** (All rights reserved by Netflix, Inc.) +- Built with pure love for design, code, and binge-worthy experiences. + +--- + +## ๐Ÿ“ฌ Connect with the Developer + +Made with ๐Ÿ’– by [Abhishek Sharma](https://github.com/AbhishekSharma-9) +๐Ÿ“ซ Reach out on [LinkedIn](https://www.linkedin.com/in/abhishek-sharma-93b46132a/) for collaboration, feedback, or to just say hi! + +--- + +## ๐Ÿ›ก๏ธ Disclaimer + +This project is a **non-commercial UI clone** built purely for learning and showcasing frontend skills. All content, logos, and design inspirations are property of their respective owners. + +--- + +๐ŸŽ‰ **Happy Cloning! Happy Coding! Happy Streaming UI Vibes!** diff --git a/Domains/Frontend/MiniProjects/NetflixClone/favicon.ico b/Domains/Frontend/MiniProjects/NetflixClone/favicon.ico new file mode 100644 index 00000000..b0836722 Binary files /dev/null and b/Domains/Frontend/MiniProjects/NetflixClone/favicon.ico differ diff --git a/Domains/Frontend/MiniProjects/NetflixClone/index.html b/Domains/Frontend/MiniProjects/NetflixClone/index.html new file mode 100644 index 00000000..cc25e60c --- /dev/null +++ b/Domains/Frontend/MiniProjects/NetflixClone/index.html @@ -0,0 +1,166 @@ + + + + + + Document + + + +
+ +
+
+ Enjoy big movies, hit series and more from โ‚น 149. + Join today. Cancel anytime. + Ready to watch? Enter your email to create or restart your membership. +
+ + +
+
+
+
+ +
+
+ Enjoy on your TV + Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more. +
+
+ TV + +
+
+
+ +
+
+
+ ST +
+
+
+ Download your shows to watch offline + Save your favourites easily and always have something to watch. +
+
+
+ +
+
+ Watch everywhere + Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV. +
+ +
+ + +
+
+
+ +
+ +
+ Child + +
+
+ Create profiles for kids + Send children on adventures with their favourite characters in a space made just for themโ€”free with + your membership. +
+
+ +
+ +
+

Frequently Asked Questions

+
+ What is Netflix + + + + + +
+
+ How much does Netflix cost? + + + + + +
+
+ What can I watch on Netflix? + + + + + +
+
+ Where can I watch? + + + + + +
+
+ Is Netflix good for kids? + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/NetflixClone/style.css b/Domains/Frontend/MiniProjects/NetflixClone/style.css new file mode 100644 index 00000000..69652898 --- /dev/null +++ b/Domains/Frontend/MiniProjects/NetflixClone/style.css @@ -0,0 +1,319 @@ +@import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@600&family=Poppins:wght@300;400;700&display=swap'); + +*{ + padding: 0; + margin: 0; + font-family: 'Poppins', sans-serif; +} + +body{ + background-color: black; +} + +.main{ + background-image: url("Assets/Images/bg.jpg"); + background-position: center center; + background-size: max(1200px,100vw); + background-repeat: no-repeat; + height: 70vh; + position: relative; +} + +.main .box{ + height: 70vh; + width: 100%; + opacity: 0.69; + position: absolute; + top: 0; + background-color: black; +} + +nav{ + max-width: 80vh; + display: flex; + margin: auto; + justify-content: space-between; + align-items: center; + height: 100px; +} + +nav img{ + color: red; + width: 130px; + position: relative; + z-index: 10; +} + +nav button{ + position: relative; + z-index: 10; +} + +.hero{ + font-family: 'Martel Sans', sans-serif; + height: calc(100% - 100px); + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + color: white; + position: relative; + gap: 23px; + padding: 0 30px; +} + +.hero> :nth-child(1){ + font-family: 'Poppins', sans-serif; + font-weight: bolder; + font-weight: 900; + font-size: 48px; + text-align: center; +} + +.hero> :nth-child(2){ + font-weight: 400; + font-size: 24px; + text-align: center; +} + +.hero> :nth-child(3){ + font-weight: 400; + font-size: 20px; + text-align: center; +} + +.separation{ + height: 7px; + background-color: rgb(67, 67, 67); +} + +.btn{ + padding: 3px 8px; + font-weight: 400; + color: white; + background-color: rgba(248, 243, 243, 0.021); + border-radius: 4px; + border: 1px solid white; + cursor: pointer; +} + +.btn-red{ + background-color: red; + color:white; + padding: 3px 24px; + font-size: 20px; + border-radius: 4px; + font-weight: 400; +} + +.btn-red-sm{ + background-color: red; + color:white; +} + +.hero-buttons{ + display: flex; + align-items: center; + justify-content: center; + gap: 16px; +} + +.main input{ + padding: 7px 100px 8px 14px; + color: white; + font-size: 12px; + border-radius: 4px; + background-color: rgba(23,23,23,0.7); + border: 1px solid rgba(246, 238, 238, 0.5); +} + +.first{ + display: flex; + justify-content: center; + align-items: center; + max-width: 70vw; + margin: auto; + color: white; +} + +.secImg{ + position: relative; +} + +.secImg img{ + width: 555px; + position: relative; + z-index: 10; +} + +.secImg video{ + position: absolute; + width: 425px; + top: 108px; + right: 58px; +} + +.help video{ + position: absolute; + top: 115px; + right: 60px; +} + +section.first > div{ + display: flex; + flex-direction: column; + padding: 34px 0; +} + +section.first> div :nth-child(1){ + font-size: 48px; + font-weight: bolder; +} + +section.first> div :nth-child(2){ + font-size: 24px; +} + +.faq h2{ + text-align: center; + font-size: 48px; +} + +.faq{ + background-color: black; + color: white; + padding: 34px; +} + +.faqbox svg{ + filter: invert(1); +} + +.faqbox{ + transition: all 1s ease-out; + font-size: 24px; + display: flex; + justify-content: space-between; + background-color: #2d2d2d; + padding: 34px; + max-width: 60vw; + margin: 34px auto; + cursor: pointer; +} + +.faqbox:hover{ + background-color: #414141; +} + +footer{ + color: white; + max-width: 60vw; + margin: auto; + padding: 14px; +} + +.footer a{ + font-size: 14px; + color: white; +} + +footer .questions{ + padding: 34px 0; +} + +.footer{ + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + color: white; +} + +.footer-item{ + display: flex; + flex-direction: column; + gap: 23px; +} + +@media screen and (max-width: 1300px) { + + nav{ + max-width: 90vw; + } + + .first { + flex-wrap: wrap; + } + + .secImg img { + width: 305px; + } + + .secImg video { + width: 225px; + right: 42px; + } + + .help video { + width: 235px; + right: 45px; + top: 78px; + } + + .hero> :nth-child(1) { + font-size: 32px; + } + + .hero> :nth-child(2) { + font-size: 18px; + } + + .hero> :nth-child(3) { + font-size: 18px; + } + + .hero-buttons { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; + } + + .faq h2 { + text-align: center; + font-size: 32px; + } + + footer { + max-width: 90vw; + padding: 75px 0; + } + + .footer-item{ + align-items: center; + } + + +} + + + +@media screen and (max-width: 1300px) { + + .footer { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 25px; + } +} + + +.footer a { + font-size: 14px; + color: white; +} + +.footer-item { + display: flex; + flex-direction: column; + gap: 23px; +} \ No newline at end of file