├── Assets ├── down-icon.png ├── favicon.png ├── feature-1.png ├── feature-2.png ├── feature-3.png ├── feature-4.png ├── header-image.png ├── logo.png ├── w.png └── world.png ├── LICENSE ├── README.md ├── index.html └── style.css /Assets/down-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/down-icon.png -------------------------------------------------------------------------------- /Assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/favicon.png -------------------------------------------------------------------------------- /Assets/feature-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/feature-1.png -------------------------------------------------------------------------------- /Assets/feature-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/feature-2.png -------------------------------------------------------------------------------- /Assets/feature-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/feature-3.png -------------------------------------------------------------------------------- /Assets/feature-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/feature-4.png -------------------------------------------------------------------------------- /Assets/header-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/header-image.png -------------------------------------------------------------------------------- /Assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/logo.png -------------------------------------------------------------------------------- /Assets/w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/w.png -------------------------------------------------------------------------------- /Assets/world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/0c84b2b11e789773ee074b2b6bf4e8c1561a252c/Assets/world.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Alok Sharma 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Netflix_Home_Page_Using_HTML_And_CSS 2 | 3 | This repository contains the code for building a Netflix-inspired home page using HTML and CSS. The project aims to recreate the visual design and layout of the Netflix home page, providing a starting point for creating similar interfaces or learning web development techniques. 4 | 5 | ## Preview 6 | 7 | ![image](https://github.com/Alok-2002/Netflix_Home_Page_Using_HTML_And_CSS/assets/93814546/4959b8ef-266f-4194-8709-b90223d69b2e) 8 | 9 | ## Features 10 | 11 | - Responsive design: The web page adapts to different screen sizes, ensuring a consistent user experience on desktop and mobile devices. 12 | - Interactive components: The page includes interactive elements such as buttons, dropdown menus, and hover effects. 13 | - Dynamic content: Placeholder content is used to mimic Netflix's movie and TV show recommendations. 14 | - CSS styling: The stylesheets provide a sleek and modern look, resembling the Netflix branding. 15 | 16 | ## Getting Started 17 | 18 | To get started with this project, follow these steps: 19 | 20 | 1. Clone the repository: 21 | 22 | ```bash 23 | git clone https://github.com/alok-2002/Netflix_Home_Page_Using_HTML_And_CSS.git 24 | ``` 25 | 26 | 2. Open the project in your preferred code editor. 27 | 28 | 3. Launch the `index.html` file in a web browser to view the Netflix home page. 29 | 30 | 4. Feel free to modify the code and customize the page according to your preferences. You can update the content, change the colors, or add new features. 31 | 32 | ## Contributing 33 | 34 | Contributions to this project are welcome. If you find any issues or have suggestions for improvements, please open an issue or submit a pull request. 35 | 36 | ## License 37 | 38 | This project is licensed under the [MIT License](LICENSE). Feel free to use the code for personal or commercial purposes. 39 | 40 | ## Acknowledgements 41 | 42 | - The design and inspiration for this project come from the official Netflix website. 43 | - Special thanks to the open-source community for providing helpful resources and tutorials on web development. 44 | 45 | ## Contact 46 | 47 | If you have any questions, suggestions, or feedback, you can reach out to the project maintainer: 48 | 49 | - Your Name : [Alok Sharma](https://linkedin.com/in/alok-sharma2002-) 50 | - Email: [sharmaalok02gwl@gmail.com](mailto:sharmaalok02gwl@gmail.com) 51 | 52 | --- 53 | 54 | Enjoy exploring the code and creating your own Netflix-like home pages! 55 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Netflix India - Watch TV Shows Online, Watch Movies Online 11 | 12 | 13 |
14 | 21 | 22 |
23 |

Unlimited POPCORN, TV shows and more.

24 |

Watch anywhere. Cancel anytime.

25 |

Ready to watch? Enter your email to create or restart your membership.

26 | 30 |
31 |
32 | 33 |
34 |
35 |
36 |

Enjoy on your TV.

37 |

Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.

38 |
39 |
40 | feature-1 41 |
42 |
43 |
44 |
45 | feature-2 46 |
47 |
48 |

Download your shows to watch offline.

49 |

Save your favourites easily and always have something to watch.

50 |
51 |
52 |
53 |
54 |

Watch everywhere.

55 |

Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.

56 |
57 |
58 | feature-3 59 |
60 |
61 |
62 |
63 | feature-4 64 |
65 |
66 |

Create profiles for children.

67 |

Send children on adventures with their favourite characters in a space made just for them—free with your membership.

68 |
69 |
70 |
71 | 72 | 73 | 74 |
75 |

Frequently Asked Questions

76 | 77 | 124 | 125 | Ready to watch? Enter your email to create or restart your membership. 126 | 127 | 128 |
129 | 130 | 131 |
132 |
133 | 134 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;800&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | body { 11 | background-color: #000; 12 | color: #fff; 13 | } 14 | 15 | .header { 16 | width: 100%; 17 | height: 100vh; 18 | background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(./Assets/header-image.png); 19 | background-size: cover; 20 | background-position: center; 21 | padding: 10px 8%; 22 | position: relative; 23 | } 24 | 25 | nav { 26 | display: flex; 27 | align-items: center; 28 | justify-content: space-between; 29 | padding: 10px 0; 30 | } 31 | 32 | .logo { 33 | width: 150px; 34 | cursor: pointer; 35 | } 36 | 37 | nav button { 38 | border: none; 39 | outline: none; 40 | background-color: #db0001; 41 | color: #fff; 42 | padding: 7px 20px; 43 | font-size: 12px; 44 | border-radius: 4px; 45 | margin-left: 10px; 46 | cursor: pointer; 47 | } 48 | 49 | .lang-btn { 50 | display: inline-flex; 51 | align-items: center; 52 | background: transparent; 53 | border: 1px solid #fff; 54 | padding: 7px 10px; 55 | } 56 | 57 | .lang-btn img { 58 | width: 10px; 59 | margin-left: 10px; 60 | } 61 | 62 | .fa-globe { 63 | color: #fff; 64 | width: 10px; 65 | margin-right: 10px; 66 | } 67 | 68 | .header-content { 69 | position: absolute; 70 | top: 50%; 71 | left: 50%; 72 | transform: translate(-50%,-50%); 73 | text-align: center; 74 | margin-top: 100px; 75 | } 76 | 77 | .header-content h1 { 78 | font-size: 60px; 79 | line-height: 70px; 80 | font-weight: 600; 81 | max-width: 650px; 82 | } 83 | 84 | .header-content h3 { 85 | font-weight: 400; 86 | margin-bottom: 20px; 87 | } 88 | 89 | .email-signup { 90 | background: #fff; 91 | border-radius: 4px; 92 | display: flex; 93 | align-items: center; 94 | margin-top: 30px; 95 | overflow: hidden; 96 | } 97 | 98 | .email-signup input { 99 | flex: 1; 100 | border: 0; 101 | outline: 0; 102 | margin-left: 20px; 103 | } 104 | 105 | .email-signup button { 106 | background-color: #db0001; 107 | border: none; 108 | outline: none; 109 | color: #fff; 110 | font-size: 16px; 111 | cursor: pointer; 112 | padding: 15px 30px; 113 | } 114 | 115 | 116 | .features { 117 | padding: 50px 12%; 118 | font-size: 22px; 119 | } 120 | 121 | .row { 122 | display: flex; 123 | align-items: center; 124 | width: 100%; 125 | flex-wrap: wrap; 126 | padding: 50px 0; 127 | } 128 | 129 | .text-col, .img-col { 130 | flex-basis: 50%; 131 | margin-bottom: 20px; 132 | } 133 | 134 | .img-col img { 135 | display: block; 136 | width: 90%; 137 | margin: auto; 138 | } 139 | 140 | .features h2 { 141 | font-size: 50px; 142 | font-weight: 600; 143 | margin-bottom: 20px; 144 | } 145 | 146 | .faq { 147 | padding: 10px 12%; 148 | text-align: center; 149 | font-size: 18px; 150 | } 151 | 152 | .faq h2 { 153 | font-size: 40px; 154 | font-weight: 500; 155 | } 156 | 157 | .accordion { 158 | margin: 60px auto; 159 | width: 100%; 160 | max-width: 750px; 161 | } 162 | 163 | .accordion li { 164 | list-style: none; 165 | width: 100%; 166 | padding: 5px; 167 | } 168 | 169 | .accordion li label { 170 | display: flex; 171 | align-items: center; 172 | padding: 20px; 173 | font-size: 18px; 174 | font-weight: 500; 175 | background-color: #303030; 176 | margin-bottom: 2px; 177 | cursor: pointer; 178 | position: relative; 179 | } 180 | 181 | label::after { 182 | content: '+'; 183 | font-size: 34px; 184 | position: absolute; 185 | right: 20px; 186 | transition: transform 0.5s; 187 | } 188 | 189 | input[type="radio"] { 190 | display: none; 191 | } 192 | 193 | .accordion .content { 194 | background-color: #303030; 195 | text-align: left; 196 | padding: 0 20px; 197 | max-height: 0; 198 | overflow: hidden; 199 | transition: max-height 0.5s, padding 0.5s; 200 | } 201 | 202 | .accordion input[type="radio"]:checked + label + .content { 203 | max-height: 600px; 204 | padding: 30px 20px; 205 | } 206 | 207 | .accordion input[type="radio"]:checked + label::after { 208 | transform: rotate(135deg); 209 | } 210 | 211 | .faq small { 212 | font-size: 13px; 213 | } 214 | 215 | .faq .email-signup { 216 | max-width: 600px; 217 | margin: 20px auto 60px; 218 | } 219 | 220 | 221 | .footer { 222 | padding: 50px 15% 10px; 223 | border-top: 6px solid #333; 224 | color: #777; 225 | } 226 | 227 | .footer h2 { 228 | font-size: 18px; 229 | font-weight: 400; 230 | margin-bottom: 30px; 231 | } 232 | 233 | .footer .col { 234 | flex-basis: 25%; 235 | flex-grow: 1; 236 | margin-bottom: 20px; 237 | } 238 | 239 | .footer .col a { 240 | display: block; 241 | color: #777; 242 | font-size: 14px; 243 | margin-bottom: 10px; 244 | text-decoration: none; 245 | } 246 | 247 | .footer .row { 248 | align-items: flex-start; 249 | padding: 10px 0px; 250 | } 251 | 252 | .footer .lang-btn { 253 | color: #fff; 254 | padding: 10px 20px; 255 | border-radius: 3px; 256 | } 257 | 258 | .copyright-text { 259 | font-size: 14px; 260 | margin-top: 20px; 261 | margin-bottom: 10px; 262 | } 263 | 264 | 265 | 266 | @media only screen and (max-width: 600px) { 267 | .logo { 268 | width: 100px; 269 | } 270 | 271 | nav button { 272 | padding: 5px 10px; 273 | } 274 | 275 | nav .lang-btn { 276 | padding: 4px 8px; 277 | } 278 | 279 | .header-content { 280 | position: unset; 281 | transform: none; 282 | padding-top: 150px; 283 | } 284 | 285 | .header-content h1 { 286 | font-size: 30px; 287 | } 288 | 289 | .email-signup button { 290 | font-size: 12px; 291 | padding: 10px 15px; 292 | } 293 | 294 | .text-col, .img-col { 295 | flex-basis: 100%; 296 | } 297 | 298 | .features h2 { 299 | font-size: 30px; 300 | } 301 | 302 | .features p { 303 | font-size: 15px; 304 | } 305 | 306 | .row:nth-child(2), .row:nth-child(4) { 307 | flex-direction: column-reverse; 308 | } 309 | 310 | .features .row { 311 | padding: 10px 0; 312 | } 313 | 314 | .faq h2 { 315 | font-size: 20px; 316 | } 317 | 318 | .accordion .content { 319 | font-size: 14px; 320 | } 321 | 322 | .accordion li label { 323 | padding: 10px; 324 | font-size: 14px; 325 | } 326 | 327 | label::after { 328 | font-size: 22px; 329 | } 330 | } --------------------------------------------------------------------------------