Netflix Clone

AryanMittal11 · Jun 27, 2024 · c03a6d3 · c03a6d3
commit c03a6d3
Show file tree

Hide file tree

Showing 13 changed files with 642 additions and 0 deletions.
diff --git a/images/Netflix logo.ico b/images/Netflix logo.ico
diff --git a/images/boxshot.png b/images/boxshot.png
diff --git a/images/device-pile-in.png b/images/device-pile-in.png
diff --git a/images/download-icon.gif b/images/download-icon.gif
diff --git a/images/last_img.png b/images/last_img.png
diff --git a/images/main_img.jpg b/images/main_img.jpg
diff --git a/images/mobile-0819.jpg b/images/mobile-0819.jpg
diff --git a/images/plus-svgrepo-com (1).svg b/images/plus-svgrepo-com (1).svg
diff --git a/images/tv.png b/images/tv.png
diff --git a/index.html b/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Netflix India – Watch TV Shows Online, Watch Movies Online</title>
+    <link rel="shortcut icon" href="images/Netflix logo.ico" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">
+</head>
+<body>
+    <main>
+        <div class="bgimg"></div>
+        <nav>
+            <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" 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>
+
+            <div class="navButtons">
+                <select name="English" class="selection" >
+                    <option value="English">English</option>
+                    <option value="Hindi">Hindi</option>
+                </select>
+
+                <button class="signinbt">
+                    Sign in
+                </button>
+            </div>
+        </nav>
+
+        <div class="maintext">
+            <div class="main_firstline">Unlimited movies, TV shows and more</div>
+            <div class="main_secondline">Watch anywhere. Cancel anytime.</div>
+            <div class="main_thirdline">Ready to watch? Enter your email to create or restart your membership.</div>
+            <div class="mainbuttons">
+                <input type="email" placeholder="Email Address" id="inputemail">
+                <button class="getstarted">Get Started ></button>
+            </div>
+        </div>
+    </main>
+    <div class="break"></div>
+
+    <section class="secondslide media_no_padding">
+        <div class="secslidetext media_text_centre">
+            <div class="second_firstline media_small_heading">Enjoy on your TV</div>
+            <div class="second_secondline media_small_line">Watch on smart TVs, PlayStation, Xbox, Chromecast,</div>
+            <div class="second_thirdline media_small_line">Apple TV, Blu-ray players and more.</div>
+        </div>
+        <div class="secimgbox media_small_image">
+            <img src="images/tv.png" >
+            <video src="videos/video-tv-in-0819.m4v" autoplay muted loop></video>
+        </div>
+    </section>
+    <div class="break"></div>
+
+    <section class="thirdslide media_no_padding">
+        <div class="thirdimgbox media_small_image">
+            <img src="images/mobile-0819.jpg">
+            <div class="thirdimgupper">
+                <div class="boxshotimg">
+                    <img src="images/boxshot.png">
+                </div>
+                <div class="thirduppertext">
+                    <p>Stranger Things </p>
+                    <p>Downloading...</p>
+                </div>
+                <div class="downloadimg">
+                    <img src="images/download-icon.gif">
+                </div>
+            </div>
+        </div>
+        <div class="thirdslidetext media_text_centre">
+            <div class="third_firstline media_small_heading">Download your shows to watch offline</div>
+            <div class="third_secondline media_small_line">Save your favourites easily and always have something to watch.</div>
+        </div>
+    </section>
+    <div class="break"></div>
+
+    <div class="secondslide media_no_padding">
+        <div class="secslidetext media_text_centre">
+            <div class="second_firstline media_small_heading">Watch everywhere</div>
+            <div class="second_secondline media_small_line">Stream unlimited movies and TV shows on your </div>
+            <div class="second_thirdline media_small_line">phone, tablet, laptop, and TV.</div>
+        </div>
+        <div class="secimgbox fourimgbox media_small_image">
+            <img src="images/device-pile-in.png" >
+            <video src="videos/video-devices-in.m4v" autoplay muted loop></video>
+        </div>
+        <!-- <div class="secvideo fourvideo">
+        </div> -->
+    </div>
+    <div class="break"></div>
+
+    <div class="fiveslide media_no_padding">
+        <div class="fiveimgbox media_small_image">
+            <img src="images/last_img.png">
+        </div>
+        <div class="fiveslidetext media_text_centre">
+            <div class="third_firstline media_small_heading">Create profiles for kids</div>
+            <div class="third_secondline media_small_line">Send children on adventures with their favourite characters in a space made just for them—free with your membership.</div>
+        </div>
+    </div>
+    <div class="break"></div>
+
+    <div class="faq">
+        <h2 class="media_text_centre">Frequently Asked Questions</h2>
+        <div class="faqbox"><h3>What is Netflix?</h3><img src="images/plus-svgrepo-com (1).svg"></div>
+        <div class="faqbox"><h3>How much does Netflix cost?</h3><img src="images/plus-svgrepo-com (1).svg"></div>
+        <div class="faqbox"><h3>Where can I watch?</h3><img src="images/plus-svgrepo-com (1).svg"></div>
+        <div class="faqbox"><h3>How do I cancel?</h3><img src="images/plus-svgrepo-com (1).svg"></div>
+        <div class="faqbox"><h3>What can I watch on Netflix?</h3><img src="images/plus-svgrepo-com (1).svg"></div>
+        <div class="faqbox"><h3>Is Netflix good for kids?</h3><img src="images/plus-svgrepo-com (1).svg"></div>
+        <div class="main_thirdline faqline media_no_padding">Ready to watch? Enter your email to create or restart your membership.</div>
+            <div class="mainbuttons faqbuttons">
+                <input type="email" placeholder="Email Address" id="inputemail">
+                <button class="getstarted">Get Started ></button>
+            </div>
+    </div>
+    <div class="break"></div>
+
+    <footer>
+        <div class="containfooter">
+            <p>Questions? Call 000-800-919-1694</p>
+            <div class="footer">
+                <div class="options">
+                    <a href="">FAQ</a>
+                    <a href="">Investor Relations</a>
+                    <a href="">Privacy</a>
+                    <a href="">Speed Test</a>
+                    <select name="English" class="selection" >
+                        <option value="English">English</option>
+                        <option value="Hindi">Hindi</option>
+                    </select>
+                    <a href="">Netflix India</a>
+                </div>
+                <div class="options">
+                    <a href="">Help Centre</a>
+                    <a href="">Job</a>
+                    <a href="">Cookie Preferences</a>
+                    <a href="">Legal Tests</a>
+                </div>
+                <div class="options">
+                    <a href="">Account</a>
+                    <a href="">Ways to Watch</a>
+                    <a href="">Corporate Information</a>
+                    <a href="">Only on Netflix</a>
+                </div>
+                <div class="options">
+                    <a href="">Media Centre</a>
+                    <a href="">Terms of Use</a>
+                    <a href="">Contact Us</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>