From 561d8498eb1917da97594d1eac9d47585a626ee3 Mon Sep 17 00:00:00 2001
From: pratyaksh1610 <pratyakshkhuranaofficial@gmail.com>
Date: Thu, 25 Apr 2024 13:18:20 +0530
Subject: [PATCH] Fix include

- Add faq section
---
 index.html | 181 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 style.css  |  27 +++++++-
 2 files changed, 204 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index de72906..9e5c084 100644
--- a/index.html
+++ b/index.html
@@ -85,7 +85,7 @@
                 <input
                   class="input-bg"
                   type="text"
-                  placeholder="Email address"
+                  placeholder="Email or mobile number"
                 />
               </div>
               <div class="get-started-div white-color">Get Started ></div>
@@ -223,11 +223,15 @@
 
       <div><hr /></div>
 
-
       <div class="black-bg download-fav-div">
         <section class="flex-row download-fav-flex">
           <div>
-            <img src="./images/kids.png" alt="tv" class="kids-img" width="600px"/>
+            <img
+              src="./images/kids.png"
+              alt="tv"
+              class="kids-img"
+              width="600px"
+            />
           </div>
 
           <div class="flex-col">
@@ -244,7 +248,178 @@
 
       <div><hr /></div>
 
+      <div style="padding: 20px 100px 20px 100px">
+        <div class="flex-col faq-flex">
+          <div
+            class="white-color"
+            style="
+              font-weight: 900;
+              font-size: 48px;
+              font-family: Netflix-font;
+              padding: 10px 10px 30px 10px;
+            "
+          >
+            Frequently Asked Questions
+          </div>
 
+          <div class="flex-row flex-row-faq-flex">
+            <div class="white-color faq-ques">What is Netflix ?</div>
+            <div class="faq-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="white"
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                role="img"
+                aria-hidden="true"
+                class="elj7tfr3 default-ltr-cache-1dpnjn e164gv2o4"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M17 17V3H19V17H33V19H19V33H17V19H3V17H17Z"
+                  fill="white"
+                ></path>
+              </svg>
+            </div>
+          </div>
+
+          <div class="flex-row flex-row-faq-flex">
+            <div class="white-color faq-ques">How much does Netflix cost?</div>
+            <div class="faq-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="white"
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                role="img"
+                aria-hidden="true"
+                class="elj7tfr3 default-ltr-cache-1dpnjn e164gv2o4"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M17 17V3H19V17H33V19H19V33H17V19H3V17H17Z"
+                  fill="white"
+                ></path>
+              </svg>
+            </div>
+          </div>
+
+          <div class="flex-row flex-row-faq-flex">
+            <div class="white-color faq-ques">Where can I watch?</div>
+            <div class="faq-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="white"
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                role="img"
+                aria-hidden="true"
+                class="elj7tfr3 default-ltr-cache-1dpnjn e164gv2o4"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M17 17V3H19V17H33V19H19V33H17V19H3V17H17Z"
+                  fill="white"
+                ></path>
+              </svg>
+            </div>
+          </div>
+          <div class="flex-row flex-row-faq-flex">
+            <div class="white-color faq-ques">How do I cancel?</div>
+            <div class="faq-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="white"
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                role="img"
+                aria-hidden="true"
+                class="elj7tfr3 default-ltr-cache-1dpnjn e164gv2o4"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M17 17V3H19V17H33V19H19V33H17V19H3V17H17Z"
+                  fill="white"
+                ></path>
+              </svg>
+            </div>
+          </div>
+          <div class="flex-row flex-row-faq-flex">
+            <div class="white-color faq-ques">What can I watch on Netflix?</div>
+            <div class="faq-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="white"
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                role="img"
+                aria-hidden="true"
+                class="elj7tfr3 default-ltr-cache-1dpnjn e164gv2o4"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M17 17V3H19V17H33V19H19V33H17V19H3V17H17Z"
+                  fill="white"
+                ></path>
+              </svg>
+            </div>
+          </div>
+          <div class="flex-row flex-row-faq-flex">
+            <div class="white-color faq-ques">Is Netflix good for kids?</div>
+            <div class="faq-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="white"
+                width="36"
+                height="36"
+                viewBox="0 0 36 36"
+                role="img"
+                aria-hidden="true"
+                class="elj7tfr3 default-ltr-cache-1dpnjn e164gv2o4"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M17 17V3H19V17H33V19H19V33H17V19H3V17H17Z"
+                  fill="white"
+                ></path>
+              </svg>
+            </div>
+          </div>
+
+         
+
+          <div class="white-color ready-to-watch" style="font-size: 20px; font-weight: 400; margin-top: 50px; margin-bottom: 10px;">
+            Ready to watch? Enter your email to create or restart your
+            membership.
+          </div>
+
+          <div class="flex-row email-get-started-div">
+            <div class="email-address-div">
+              <input
+                class="input-bg"
+                type="text"
+                placeholder="Email or mobile number"
+              />
+            </div>
+            <div class="get-started-div white-color">Get Started ></div>
+          </div>
+        </div>
+      </div>
+
+      <div><hr /></div>
+
+      <div><hr /></div>
       
     </main>
     <footer></footer>
diff --git a/style.css b/style.css
index 0f06230..b804ec2 100644
--- a/style.css
+++ b/style.css
@@ -244,7 +244,6 @@ hr {
 }
 
 .download-show-fav{
-    
     padding-top: 0;
     margin-top: 200px;
 }
@@ -268,6 +267,32 @@ hr {
     left: 118px;
 }
 
+.faq-flex {
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-row-faq-flex {
+    background-color: rgb(45, 45, 45);
+    padding: 20px;
+    width: 1100px;
+    margin: auto;
+    margin-top: 10px;
+    
+}
+.flex-row-faq-flex:hover {
+    background-color: rgb(60, 60, 60);
+    transition: all .5s ease;
+}
+.faq-ques  {
+    /* justify-content: left; */
+    flex-grow: 1;
+    font-family: Netflix-font;
+    font-weight: 400;
+    font-size: 27px;
+
+}
+
 
 /*  */
 /* media auery */