├── images ├── down-icon.png ├── feature-1.png ├── feature-2.png ├── feature-3.png ├── feature-4.png ├── header-image.png ├── logo.png └── w.png ├── index.html ├── script.js └── style.css /images/down-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Netflix_landing_page/25dc6718f7c8d5e11e9b1cb97d4cae7f568cbbe8/images/down-icon.png -------------------------------------------------------------------------------- /images/feature-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Netflix_landing_page/25dc6718f7c8d5e11e9b1cb97d4cae7f568cbbe8/images/feature-1.png -------------------------------------------------------------------------------- /images/feature-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Netflix_landing_page/25dc6718f7c8d5e11e9b1cb97d4cae7f568cbbe8/images/feature-2.png -------------------------------------------------------------------------------- /images/feature-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Netflix_landing_page/25dc6718f7c8d5e11e9b1cb97d4cae7f568cbbe8/images/feature-3.png -------------------------------------------------------------------------------- /images/feature-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Netflix_landing_page/25dc6718f7c8d5e11e9b1cb97d4cae7f568cbbe8/images/feature-4.png -------------------------------------------------------------------------------- /images/header-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Netflix_landing_page/25dc6718f7c8d5e11e9b1cb97d4cae7f568cbbe8/images/header-image.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Netflix_landing_page/25dc6718f7c8d5e11e9b1cb97d4cae7f568cbbe8/images/logo.png -------------------------------------------------------------------------------- /images/w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nitinrajputind/Netflix_landing_page/25dc6718f7c8d5e11e9b1cb97d4cae7f568cbbe8/images/w.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Netflix 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 21 | 22 | 23 |
24 |

Unlimited movies, TV shows and more

25 |

Watch anywhere. Cancel anytime.

26 |

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

27 | 31 |
32 | 33 |
34 | 35 | 36 |
37 | 38 | 39 |
40 |
41 |

Enjoy on your TV

42 |

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

43 |
44 |
45 | 46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 |

Download your shows to watch offline

55 |

Save your favourites easily and always have something to watch.

56 |
57 |
58 | 59 | 60 |
61 |
62 |

Watch everywhere

63 |

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

64 |
65 |
66 | 67 |
68 |
69 | 70 | 71 |
72 |
73 | 74 |
75 |
76 |

Create profiles for kids

77 |

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

78 |
79 |
80 | 81 |
82 | 83 | 84 |
85 |

Frequently Asked Questions

86 | 149 | 150 | Ready to watch? Enter your email to create or restart your membership. 151 |
152 | 153 | 154 |
155 | 156 |
157 | 158 | 159 |
160 |

Questions? Call -0000-00-0000

161 | 162 |
163 |
164 | FAQ 165 | Investor Relations 166 | Privacy 167 | Speed Test 168 |
169 | 170 |
171 | Help Center 172 | Jobs 173 | Cookies Prefernces 174 | Legal Notice 175 |
176 | 177 |
178 | Acoount 179 | Ways to watch 180 | Corporate Information 181 | Only on Netflix 182 |
183 | 184 |
185 | Media Center 186 | Terms of Use 187 | Contact Us 188 |
189 |
190 | 191 | 192 |

Netflix India

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