|
1 | | -This repo is a clone of Netflix Landing page. |
| 1 | +# Netflix Landing Page Clone |
| 2 | + |
| 3 | +## 📺 Project Overview |
| 4 | + |
| 5 | +This project is a responsive clone of the Netflix landing page, created using pure HTML, CSS, and JavaScript. It demonstrates the ability to recreate a modern, interactive web interface with attention to design and user experience. |
| 6 | + |
| 7 | +## 🌟 Features |
| 8 | + |
| 9 | +- Fully responsive design |
| 10 | +- Animated sections mimicking Netflix's original landing page |
| 11 | +- Interactive FAQ |
| 12 | +- Email validation |
| 13 | +- Smooth transitions and hover effects |
| 14 | +- Modern, clean UI that closely resembles the Netflix landing page |
| 15 | + |
| 16 | +## 🚀 Technologies Used |
| 17 | + |
| 18 | +- HTML5 |
| 19 | +- CSS3 (Flexbox & Grid) |
| 20 | +- Vanilla JavaScript |
| 21 | +- Responsive Design Techniques |
| 22 | + |
| 23 | +## 📸 Screenshots |
| 24 | + |
| 25 | +<img src="screenshots/desktop-view-1.png" /> |
| 26 | +<img src="screenshots/desktop-view-2.png" /> |
| 27 | +<div> |
| 28 | + <img src="screenshots/mobile-view-1.jpg" width="270" /> |
| 29 | + <img src="screenshots/mobile-view-2.jpg" width="270" /> |
| 30 | + <img src="screenshots/mobile-view-3.jpg" width="270" /> |
| 31 | +</div> |
| 32 | + |
| 33 | +## 🛠 Installation |
| 34 | + |
| 35 | +### Prerequisites |
| 36 | +- Web browser (Chrome, Firefox, Safari, Edge) |
| 37 | +- Text editor (VS Code, Sublime Text, etc.) |
| 38 | + |
| 39 | +### Steps |
| 40 | +1. Clone the repository |
| 41 | +```bash |
| 42 | +git clone https://github.com/premdood/netflix-clone.git |
| 43 | +``` |
| 44 | + |
| 45 | +2. Navigate to the project directory |
| 46 | +```bash |
| 47 | +cd netflix-clone |
| 48 | +``` |
| 49 | + |
| 50 | +3. Open `index.html` in your preferred web browser |
| 51 | + |
| 52 | +## 🔍 Key Components |
| 53 | + |
| 54 | +### HTML Structure |
| 55 | +- Semantic HTML5 markup |
| 56 | +- Responsive layout sections |
| 57 | +- Accessibility considerations |
| 58 | + |
| 59 | +### CSS Styling |
| 60 | +- Flexbox and Grid for layout |
| 61 | +- Media queries for responsiveness |
| 62 | +- Hover and transition effects |
| 63 | + |
| 64 | +### JavaScript Functionality |
| 65 | +- Email input validation |
| 66 | +- Smooth scrolling |
| 67 | +- Interactive elements |
| 68 | + |
| 69 | +## 🏆 Challenges Overcome |
| 70 | + |
| 71 | +- Replicating Netflix's complex layout |
| 72 | +- Creating responsive design |
| 73 | +- Implementing interactive FAQ section |
| 74 | + |
| 75 | +## 🌐 Live Demo |
| 76 | + |
| 77 | +[View Live Demo](https://premdood.github.io/netflix-clone) |
| 78 | + |
| 79 | +## 📞 Contact |
| 80 | + |
| 81 | +Prem Singh - [LinkedIn](https://www.linkedin.com/in/premdood) |
| 82 | + |
| 83 | +--- |
| 84 | + |
| 85 | +**Disclaimer**: This project is for educational purposes only and is not affiliated with Netflix. |
0 commit comments