Add files via upload

affancoder · Feb 4, 2024 · b42c58e · b42c58e
1 parent c1f66dc
commit b42c58e
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -125,35 +125,95 @@
     <div class="seperation"></div>
     <section class="faq">
       <h1>Frequently Asked Questions</h1>
-      <div class="faqbox">
+
+      <ul class="accordion" style="margin-top: -10px;">
+        <li>
+          <input type="radio" name="accordian" id="first"/>
+          <label for="first">What is Netflix?</label>
+          <div class="content">
+            <p>Netflix is a streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries and more – on thousands of internet-connected devices.</p>
+            <p>You can watch as much as you want, whenever you want, without a single ad – all for one low monthly price. There's always something new to discover, and new TV shows and movies are added every week!</p>
+          </div>
+        </li>
+        <li>
+          <input type="radio" name="accordian" id="second"/>
+          <label for="second">How much does Netflix cost?</label>
+          <div class="content">
+            <p>Watch Netflix on your smartphone, tablet, Smart TV, laptop, or streaming device, all for one fixed monthly fee. Plans range from ₹149 to ₹649 a month. No extra costs, no contracts.</p>
+          </div>
+        </li>
+
+        <li>
+          <input type="radio" name="accordian" id="third"/>
+          <label for="third">Where can i watch?</label>
+          <div class="content">
+            <p>Watch anywhere, anytime. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.
+            </p>
+          </div>
+        </li> 
+
+        <li>
+          <input type="radio" name="accordian" id="fourth"/>
+          <label for="fourth">How do i cancel?</label>
+          <div class="content">
+            <p>Netflix is flexible. There are no annoying contracts and no commitments. You can easily cancel your account online in two clicks. There are no cancellation fees – start or stop your account anytime.</p>
+          </div>
+        </li> 
+
+        <li>
+          <input type="radio" name="accordian" id="fifth"/>
+          <label for="fifth">What can i watch on Netflix?</label>
+          <div class="content">
+            <p>Netflix has an extensive library of feature films, documentaries, TV shows, anime, award-winning Netflix originals, and more. Watch as much as you want, anytime you want.</p>
+          </div>
+        </li> 
+
+        <li>
+          <input type="radio" name="accordian" id="six"/>
+          <label for="six">Is Netflix good for kids?</label>
+          <div class="content">
+            <p>The Netflix Kids experience is included in your membership to give parents control while kids enjoy family-friendly TV shows and films in their own space.</p>
+
+            <p>Kids profiles come with PIN-protected parental controls that let you restrict the maturity rating of content kids can watch and block specific titles you don’t want kids to see.</p>
+          </div>
+        </li> 
+      </ul>
+
+      <!-- <div class="faqbox">
         <span>What is Netflix?</span>
         <i class="ri-add-line"></i>
       </div>
       <div style="margin: 10px"></div>
+
       <div class="faqbox">
         <span>How much does Netflix cost?</span>
         <i class="ri-add-line"></i>
       </div>
       <div style="margin: 10px"></div>
+
       <div class="faqbox">
         <span>Where can i watch?</span>
         <i class="ri-add-line"></i>
       </div>
       <div style="margin: 10px"></div>
+
       <div class="faqbox">
         <span>How do i cancel?</span>
         <i class="ri-add-line"></i>
       </div>
       <div style="margin: 10px"></div>
+
       <div class="faqbox">
         <span>What can i watch on Netflix?</span>
         <i class="ri-add-line"></i>
       </div>
       <div style="margin: 10px"></div>
+
       <div class="faqbox">
         <span>Is Netflix good for kids?</span>
         <i class="ri-add-line"></i>
-      </div>
+      </div> -->
+
     </section>
     <section class="hero" id="below">
       <span

diff --git a/style.css b/style.css
@@ -172,11 +172,15 @@ section.first > div :nth-child(2) {
   left: 105px;
   top: 65px;
 }
+
+/* ----------------------FAQs Accordion------------------------ */
+
 .faq {
   color: white;
   text-align: center;
   padding: 30px;
 }
+
 .faq h1 {
   padding: 30px;
   font-size: 2.8rem;
@@ -227,6 +231,72 @@ section.first > div :nth-child(2) {
   border: 1px solid rgb(156, 150, 150);
   color: white;
 }
+
+/* accordian */
+
+.accordion {
+  margin: 60px auto;
+  width: 100%;
+  /* max-width: 750px; */
+  max-width: 70vw;
+}
+
+.accordion li {
+  list-style: none;
+  width: 100%;
+  padding: 5px;
+}
+
+.accordion li label {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  font-size: 18px;
+  font-weight: 500;
+  background-color: #303030;
+  margin-bottom: 2px;
+  cursor: pointer;
+  position: relative;
+}
+
+.accordion li label:hover {
+  cursor: pointer;
+  background-color: rgba(128, 128, 128, 0.532);
+  transition: all 0.3s;
+}
+
+label::after {
+  content: "+";
+  font-size: 34px;
+  position: absolute;
+  right: 20px;
+  transition: transform 0.5s;
+}
+
+input[type="radio"] {
+  display: none;
+}
+
+.accordion .content {
+  background-color: #303030;
+  text-align: left;
+  padding: 0 20px;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.5s, padding 0.5s;
+}
+
+.accordion input[type="radio"]:checked + label + .content {
+  max-height: 600px;
+  padding: 30px 20px;
+}
+
+.accordion input[type="radio"]:checked + label::after {
+  transform: rotate(135deg);
+}
+
+/* ----------------footer------------------ */
+
 footer {
   color: #fff;
   max-width: 75vw;