├── bg.jpg
├── video1.mp4
├── favicon.ico
├── logo.svg
├── logo(1).svg
├── Netflix.css
└── index.html


/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shanisoni/Netflix-Clone_Project/HEAD/bg.jpg


--------------------------------------------------------------------------------
/video1.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shanisoni/Netflix-Clone_Project/HEAD/video1.mp4


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shanisoni/Netflix-Clone_Project/HEAD/favicon.ico


--------------------------------------------------------------------------------
/logo.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 111 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" fill="red" class="default-ltr-cache-1d568uk ev1dnif2"><g><path d="M105.06233,14.2806261 L110.999156,30 C109.249227,29.7497422 107.500234,29.4366857 105.718437,29.1554972 L102.374168,20.4686475 L98.9371075,28.4375293 C97.2499766,28.1563408 95.5928391,28.061674 93.9057081,27.8432843 L99.9372012,14.0931671 L94.4680851,-5.68434189e-14 L99.5313525,-5.68434189e-14 L102.593495,7.87421502 L105.874965,-5.68434189e-14 L110.999156,-5.68434189e-14 L105.06233,14.2806261 Z M90.4686475,-5.68434189e-14 L85.8749649,-5.68434189e-14 L85.8749649,27.2499766 C87.3746368,27.3437061 88.9371075,27.4055675 90.4686475,27.5930265 L90.4686475,-5.68434189e-14 Z M81.9055207,26.93692 C77.7186241,26.6557316 73.5307901,26.4064111 69.250164,26.3117443 L69.250164,-5.68434189e-14 L73.9366389,-5.68434189e-14 L73.9366389,21.8745899 C76.6248008,21.9373887 79.3120255,22.1557784 81.9055207,22.2804387 L81.9055207,26.93692 Z M64.2496954,10.6561065 L64.2496954,15.3435186 L57.8442216,15.3435186 L57.8442216,25.9996251 L53.2186709,25.9996251 L53.2186709,-5.68434189e-14 L66.3436123,-5.68434189e-14 L66.3436123,4.68741213 L57.8442216,4.68741213 L57.8442216,10.6561065 L64.2496954,10.6561065 Z M45.3435186,4.68741213 L45.3435186,26.2498828 C43.7810479,26.2498828 42.1876465,26.2498828 40.6561065,26.3117443 L40.6561065,4.68741213 L35.8121661,4.68741213 L35.8121661,-5.68434189e-14 L50.2183897,-5.68434189e-14 L50.2183897,4.68741213 L45.3435186,4.68741213 Z M30.749836,15.5928391 C28.687787,15.5928391 26.2498828,15.5928391 24.4999531,15.6875059 L24.4999531,22.6562939 C27.2499766,22.4678976 30,22.2495079 32.7809542,22.1557784 L32.7809542,26.6557316 L19.812541,27.6876933 L19.812541,-5.68434189e-14 L32.7809542,-5.68434189e-14 L32.7809542,4.68741213 L24.4999531,4.68741213 L24.4999531,10.9991564 C26.3126816,10.9991564 29.0936358,10.9054269 30.749836,10.9054269 L30.749836,15.5928391 Z M4.78114163,12.9684132 L4.78114163,29.3429562 C3.09401069,29.5313525 1.59340144,29.7497422 0,30 L0,-5.68434189e-14 L4.4690224,-5.68434189e-14 L10.562377,17.0315868 L10.562377,-5.68434189e-14 L15.2497891,-5.68434189e-14 L15.2497891,28.061674 C13.5935889,28.3437998 11.906458,28.4375293 10.1246602,28.6868498 L4.78114163,12.9684132 Z"></path></g></svg>


--------------------------------------------------------------------------------
/logo(1).svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 111 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" fill="red" class="default-ltr-cache-1d568uk ev1dnif2"><g><path d="M105.06233,14.2806261 L110.999156,30 C109.249227,29.7497422 107.500234,29.4366857 105.718437,29.1554972 L102.374168,20.4686475 L98.9371075,28.4375293 C97.2499766,28.1563408 95.5928391,28.061674 93.9057081,27.8432843 L99.9372012,14.0931671 L94.4680851,-5.68434189e-14 L99.5313525,-5.68434189e-14 L102.593495,7.87421502 L105.874965,-5.68434189e-14 L110.999156,-5.68434189e-14 L105.06233,14.2806261 Z M90.4686475,-5.68434189e-14 L85.8749649,-5.68434189e-14 L85.8749649,27.2499766 C87.3746368,27.3437061 88.9371075,27.4055675 90.4686475,27.5930265 L90.4686475,-5.68434189e-14 Z M81.9055207,26.93692 C77.7186241,26.6557316 73.5307901,26.4064111 69.250164,26.3117443 L69.250164,-5.68434189e-14 L73.9366389,-5.68434189e-14 L73.9366389,21.8745899 C76.6248008,21.9373887 79.3120255,22.1557784 81.9055207,22.2804387 L81.9055207,26.93692 Z M64.2496954,10.6561065 L64.2496954,15.3435186 L57.8442216,15.3435186 L57.8442216,25.9996251 L53.2186709,25.9996251 L53.2186709,-5.68434189e-14 L66.3436123,-5.68434189e-14 L66.3436123,4.68741213 L57.8442216,4.68741213 L57.8442216,10.6561065 L64.2496954,10.6561065 Z M45.3435186,4.68741213 L45.3435186,26.2498828 C43.7810479,26.2498828 42.1876465,26.2498828 40.6561065,26.3117443 L40.6561065,4.68741213 L35.8121661,4.68741213 L35.8121661,-5.68434189e-14 L50.2183897,-5.68434189e-14 L50.2183897,4.68741213 L45.3435186,4.68741213 Z M30.749836,15.5928391 C28.687787,15.5928391 26.2498828,15.5928391 24.4999531,15.6875059 L24.4999531,22.6562939 C27.2499766,22.4678976 30,22.2495079 32.7809542,22.1557784 L32.7809542,26.6557316 L19.812541,27.6876933 L19.812541,-5.68434189e-14 L32.7809542,-5.68434189e-14 L32.7809542,4.68741213 L24.4999531,4.68741213 L24.4999531,10.9991564 C26.3126816,10.9991564 29.0936358,10.9054269 30.749836,10.9054269 L30.749836,15.5928391 Z M4.78114163,12.9684132 L4.78114163,29.3429562 C3.09401069,29.5313525 1.59340144,29.7497422 0,30 L0,-5.68434189e-14 L4.4690224,-5.68434189e-14 L10.562377,17.0315868 L10.562377,-5.68434189e-14 L15.2497891,-5.68434189e-14 L15.2497891,28.061674 C13.5935889,28.3437998 11.906458,28.4375293 10.1246602,28.6868498 L4.78114163,12.9684132 Z"></path></g></svg>


--------------------------------------------------------------------------------
/Netflix.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Martel+Sans:wght@600&family=Poppins:wght@300;400;700&display=swap');
  2 | 
  3 | * {
  4 |     padding: 0;
  5 |     margin: 0;
  6 |     font-family: 'Poppins', sans-serif;
  7 | }
  8 | 
  9 | body {
 10 |     background-color: black;
 11 | }
 12 | 
 13 | .main {
 14 |     background-image: url("bg.jpg");
 15 |     background-position: center center;
 16 |     background-size: max(1200px, 100vw);
 17 |     background-repeat: no-repeat;
 18 |     height: 644px;
 19 |     position: relative;
 20 | }
 21 | 
 22 | .main .box {
 23 |     height: 644px;
 24 |     width: 100%;
 25 |     opacity: 0.69;
 26 |     position: absolute;
 27 |     top: 0;
 28 |     background-color: black;
 29 | }
 30 | 
 31 | nav {
 32 |     max-width: 60vw;
 33 |     justify-content: space-between;
 34 |     margin: auto;
 35 |     display: flex;
 36 |     align-items: center;
 37 |     height: 100px;
 38 | }
 39 | 
 40 | nav img {
 41 |     color: red;
 42 |     width: 130px;
 43 |     position: relative;
 44 |     z-index: 10;
 45 | }
 46 | 
 47 | nav button {
 48 |     position: relative;
 49 |     z-index: 10;
 50 | }
 51 | 
 52 | .hero {
 53 |     font-family: 'Martel Sans', sans-serif;
 54 |     height: calc(100% - 100px);
 55 |     display: flex;
 56 |     align-items: center;
 57 |     justify-content: center;
 58 |     flex-direction: column;
 59 |     color: white;
 60 |     position: relative;
 61 |     gap: 23px;
 62 |     padding: 0 30px;
 63 | }
 64 | 
 65 | .hero> :nth-child(1) {
 66 |     font-family: 'Poppins', sans-serif;
 67 |     font-weight: bolder;
 68 |     font-size: 48px;
 69 |     text-align: center;
 70 | }
 71 | 
 72 | .hero> :nth-child(2) {
 73 |     font-weight: 400;
 74 |     font-size: 24px;
 75 |     text-align: center;
 76 | }
 77 | 
 78 | .hero> :nth-child(3) {
 79 |     font-weight: 400;
 80 |     font-size: 20px;
 81 |     text-align: center;
 82 | }
 83 | 
 84 | .separation {
 85 |     height: 7px;
 86 |     background-color: rgb(46, 44, 44);
 87 |     position: relative;
 88 |     z-index: 20;
 89 | }
 90 | 
 91 | .btn {
 92 |     padding: 3px 8px;
 93 |     font-weight: 400;
 94 |     color: white;
 95 |     background-color: rgba(248, 243, 243, 0.021);
 96 |     border-radius: 4px;
 97 |     border: 1px solid white;
 98 |     cursor: pointer;
 99 | 
100 | }
101 | 
102 | .btn-red {
103 |     background-color: red;
104 |     color: white;
105 |     padding: 3px 24px;
106 |     font-size: 20px;
107 |     border-radius: 4px;
108 |     font-weight: 400;
109 | }
110 | 
111 | .btn-red-sm {
112 |     background-color: red;
113 |     color: white;
114 | }
115 | 
116 | .hero-buttons {
117 |     display: flex;
118 |     align-items: center;
119 |     justify-content: center;
120 |     gap: 16px;
121 | }
122 | 
123 | .main input {
124 |     padding: 7px 101px 8px 14px;
125 |     color: white;
126 |     font-size: 12px;
127 |     border-radius: 4px;
128 |     background-color: rgba(23, 23, 23, 0.7);
129 |     border: 1px solid rgba(246, 238, 238, 0.5);
130 | }
131 | 
132 | .first {
133 |     display: flex;
134 |     justify-content: center;
135 |     max-width: 70vw;
136 |     margin: auto;
137 |     color: white;
138 |     justify-content: center;
139 |     align-items: center;
140 | }
141 | 
142 | 
143 | 
144 | .secImg {
145 |     position: relative;
146 | }
147 | 
148 | .secImg img {
149 |     width: 555px;
150 |     position: relative;
151 |     z-index: 10;
152 | }
153 | 
154 | .secImg video {
155 |     position: absolute;
156 |     top: 51px;
157 |     right: 0;
158 |     width: 555px;
159 | }
160 | 
161 | section.first>div {
162 |     display: flex;
163 |     flex-direction: column;
164 |     padding: 34px 0;
165 | }
166 | 
167 | section.first>div :nth-child(1) {
168 |     font-size: 48px;
169 |     font-weight: bolder;
170 | }
171 | 
172 | 
173 | section.first>div :nth-child(2) {
174 |     font-size: 24px;
175 | 
176 | }
177 | 
178 | 
179 | .faq h2 {
180 |     text-align: center;
181 |     font-size: 48px;
182 | }
183 | 
184 | .faq {
185 |     background: black;
186 |     color: white;
187 |     padding: 34px;
188 | }
189 | 
190 | .faqbox:hover {
191 |     background-color: #414141;
192 |     color: white;
193 | }
194 | 
195 | .faqbox svg {
196 |     filter: invert(1);
197 | }
198 | 
199 | .faqbox {
200 |     transition: all 1s ease-out;
201 |     font-size: 24px;
202 |     display: flex;
203 |     justify-content: space-between;
204 |     background-color: #2d2d2d;
205 |     padding: 24px;
206 |     max-width: 60vw;
207 |     margin: 34px auto;
208 |     cursor: pointer;
209 | }
210 | 
211 | footer {
212 |     color: white;
213 |     max-width: 60vw;
214 |     margin: auto;
215 |     padding: 60px;
216 | }
217 | 
218 | footer .questions {
219 |     padding: 34px 0;
220 | }
221 | 
222 | 
223 | .footer {
224 |     display: grid;
225 |     grid-template-columns: 1fr 1fr 1fr 1fr;
226 |     color: white;
227 | }
228 | 
229 | 
230 | 
231 | @media screen and (max-width: 1300px) {
232 | 
233 |     nav{
234 |         max-width: 90vw;
235 |     }
236 | 
237 |     .first {
238 |         flex-wrap: wrap;
239 |     }
240 | 
241 |     .secImg img {
242 |         width: 305px;
243 |     }
244 | 
245 |     .secImg video {
246 |         width: 305px;
247 |     }
248 | 
249 |     .hero> :nth-child(1) {
250 |         font-size: 32px;
251 |     }
252 | 
253 |     .hero> :nth-child(2) {
254 |         font-size: 18px;
255 |     }
256 | 
257 |     .hero> :nth-child(3) {
258 |         font-size: 18px;
259 |     }
260 | 
261 |     .hero-buttons {
262 |         display: flex;
263 |         flex-direction: column;
264 |         align-items: center;
265 |         justify-content: center;
266 |         gap: 16px;
267 |     }
268 | 
269 |     .faq h2 {
270 |         text-align: center;
271 |         font-size: 32px;
272 |     }
273 | 
274 |     footer {
275 |         max-width: 90vw;
276 |         padding: 75px 0;
277 |     }
278 | 
279 |     .footer-item{
280 |         align-items: center;
281 |     }
282 |  
283 | 
284 | }
285 | 
286 | 
287 | 
288 | @media screen and (max-width: 1300px) {
289 | 
290 |     .footer {
291 |         display: grid;
292 |         grid-template-columns: 1fr 1fr;
293 |         gap: 25px;
294 |     }
295 | }
296 | 
297 | 
298 | .footer a {
299 |     font-size: 14px;
300 |     color: white;
301 | }
302 | 
303 | .footer-item {
304 |     display: flex;
305 |     flex-direction: column;
306 |     gap: 23px;
307 | }
308 | 
309 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Netflix India – Watch TV Shows Online, Watch Movies Online</title>
  8 |     <link rel="stylesheet" href="Netflix.css">
  9 | </head>
 10 | 
 11 | <body>
 12 | 
 13 |     <div class="main">
 14 |         <nav>
 15 |             <span><img width="53" src="logo.svg" alt=""></span>
 16 |             <div>
 17 |                 <button class="btn">English</button>
 18 |                 <button class="btn btn-red-sm">Sign In</button>
 19 |             </div>
 20 |         </nav>
 21 |         <div class="box">
 22 |         </div>
 23 |         <div class="hero">
 24 |             <span>Enjoy big movies, hit series and more from ₹ 149.</span>
 25 |             <span>Join today. Cancel anytime.</span>
 26 |             <span>Ready to watch? Enter your email to create or restart your membership.</span>
 27 |             <div class="hero-buttons">
 28 |                 <input type="text" placeholder="Email Address">
 29 |                 <button class="btn btn-red">Get Started &gt;</button>
 30 |             </div>
 31 |             
 32 |         </div>
 33 | 
 34 |         <div class="separation"></div>
 35 | 
 36 | 
 37 |     </div>
 38 | 
 39 |     <section class="first">
 40 |         <div>
 41 |             <span>Enjoy on your TV</span>
 42 |             <span>Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, Blu-ray players and more.</span>
 43 |         </div>
 44 | 
 45 |         <div class="secImg">
 46 |             <img src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png" alt="">
 47 |             <video src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-tv-in-0819.m4v"
 48 |                 autoplay loop muted></video>
 49 |         </div>
 50 |     </section>
 51 |     <div class="separation"></div>
 52 | 
 53 |     <section class="first second">
 54 | 
 55 |         <div class="secImg">
 56 |             <img src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/mobile-0819.jpg" alt="">
 57 | 
 58 |         </div>
 59 |         <div>
 60 |             <span>Download your shows to watch offline</span>
 61 |             <span>Save your favourites easily and always have something to watch.</span>
 62 |         </div>
 63 |     </section>
 64 | 
 65 |     <div class="separation"></div>
 66 |     <section class="first third">
 67 |         <div>
 68 |             <span>Watch everywhere</span>
 69 |             <span>Stream unlimited movies and TV shows on your phone, tablet, laptop, and TV.</span>
 70 |         </div>
 71 | 
 72 |         <div class="secImg">
 73 |             <img src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png" alt="">
 74 |             <video src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-devices-in.m4v"
 75 |                 autoplay loop muted></video>
 76 |         </div>
 77 |     </section>
 78 |     <div class="separation"></div>
 79 | 
 80 | 
 81 |     <section class="first second">
 82 | 
 83 |         <div class="secImg">
 84 |             <img src="https://occ-0-2849-3646.1.nflxso.net/dnm/api/v6/19OhWN2dO19C9txTON9tvTFtefw/AAAABVr8nYuAg0xDpXDv0VI9HUoH7r2aGp4TKRCsKNQrMwxzTtr-NlwOHeS8bCI2oeZddmu3nMYr3j9MjYhHyjBASb1FaOGYZNYvPBCL.png?r=54d"
 85 |                 alt="">
 86 | 
 87 |         </div>
 88 |         <div>
 89 |             <span>Create profiles for kids</span>
 90 |             <span>Send children on adventures with their favourite characters in a space made just for them—free with
 91 |                 your membership.</span>
 92 |         </div>
 93 |     </section>
 94 | 
 95 |     <div class="separation"></div>
 96 | 
 97 |     <section class="faq">
 98 |         <h2>Frequently Asked Questions</h2>
 99 |         <div class="faqbox">
100 |             <span>What is NetFlix</span>
101 |             <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
102 |                 <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
103 |                 <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
104 |             </svg>
105 | 
106 |         </div>
107 |         <div class="faqbox">
108 |             <span>How much does Netflix cost?</span>
109 |             <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
110 |                 <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
111 |                 <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
112 |             </svg>
113 | 
114 |         </div>
115 |         <div class="faqbox">
116 |             <span>What can I watch on Netflix?</span>
117 |             <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
118 |                 <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
119 |                 <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
120 |             </svg>
121 | 
122 |         </div>
123 |         <div class="faqbox">
124 |             <span>Where can I watch?</span>
125 |             <svg width="24" height="24" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
126 |                 <path d="M12 4V20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
127 |                 <path d="M4 12H20" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
128 |             </svg>
129 | 
130 |         </div>
131 |         <div></div>
132 |     </section>
133 |     <div class="separation"></div>
134 | 
135 |     <footer>
136 |         <div class="questions">
137 |             Questions? Call 7084160123
138 |         </div>
139 |         <div class="footer">
140 |             <div class="footer-item"> 
141 |                 <a href="faq">Investor Relations</a>
142 |                 <a href="faq">Jobs</a>
143 |                 <a href="faq">Ways to Watch</a>
144 |                 <a href="faq">Terms of Use</a>
145 |             </div>
146 | 
147 |             <div class="footer-item"> 
148 |                 <a href="faq">Help Centre</a>
149 |                 <a href="faq">Account</a>
150 |                 <a href="faq">Speed Test</a>
151 |                 <a href="faq">Legal Notices</a>
152 |             </div>
153 |             <div class="footer-item">
154 |                 <a href="faq">Media Centre</a>
155 |                 <a href="faq">Privacy</a>
156 |                 <a href="faq">Cookie Preferences</a> 
157 |                 <a href="faq">Corporate</a>
158 |             </div>
159 | 
160 |             <div class="footer-item">
161 |                 <a href="faq">Contact Us</a>
162 |                 <a href="faq">Speed Test</a> 
163 |                 <a href="faq">Legal Notices</a> 
164 |                 <a href="faq">Only on Netflix</a>
165 |             </div>
166 |         </div>
167 |     </footer>
168 |     <div>
169 |         
170 |     </div>
171 | </body>
172 | 
173 | </html>


--------------------------------------------------------------------------------