From 9ff27451e6a909fdb4509d22d6a0a317eb0678aa Mon Sep 17 00:00:00 2001
From: kumari06khushi <khushi16bce@gmail.com>
Date: Mon, 4 Aug 2025 16:21:45 +0530
Subject: [PATCH] improvements to the current styling of the Netflix Clone page
 to enhance the overall visual appeal and user experience.

---
 index.html | 38 +++++++++++++++++++-------------------
 style.css  | 51 +++++++++++++++++++++++++++++----------------------
 2 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index fd1cdb8..2ed4309 100644
--- a/index.html
+++ b/index.html
@@ -16,15 +16,15 @@
         <div class="nav-btn">
           <button class="btn" id="theme-toggle">☀️</button>
           <div class="btn btn-lang">
-          <img class="language-switch" src="assets/language-svgrepo-com.svg"/>
+          <img class="language-switch" src="https://cdn2.iconfinder.com/data/icons/basic-ui-elements-line/512/World_logo_line_earth-512.png"/>
           <select name="language" id="language-select">
           <option value="english">English</option>
           <option value="hindi">Hindi</option>
           </select>
-         <img class="down-arrow" src="assets/down-arrow-svgrepo-com.svg"/>
+         <img class="down-arrow" src="https://icons.veryicon.com/png/o/system/eva-all/chevron-down-outline-2.png"/>
          </div>
 
-          <button class="btn btn-red-sm">Sign_In</button>
+          <button class="btn btn-red-sm">Sign In</button>
         </div>
       </nav>
       <div class="box"></div>
@@ -33,45 +33,45 @@
         <span>Starts at ₹149. Cancel at any time.</span>
         <span>
           Ready to watch? Enter your email to create or restart your
-          membership </span>
+          membership. </span>
           <!-- Remove <br></br> -->
         <div class="hero-buttons">
-          <input type="text" placeholder="Email Address" />
-          <button class="btn btn-red">Get Started &gt;</button>
+          <input type="text" placeholder="Email address" />
+          <button class="btn btn-red">Get Started &rarr;</button>
         </div>
       </div>
-      <div class="separation"></div>
+      <div class="separation"></div> //first page end
     </div>
-    <section class="first">
+    <section class="first"> 
       <div>
         <span>Enjoy on your TV</span>
         <span
-          >Watch on smart TVs, PlayStations, XBox, Chromecast, Apple TV, Blu-ray
+          > <br>Watch on smart TVs, PlayStations, XBox, Chromecast, Apple TV, Blu-ray
           Players and more.</span
         >
       </div>
-      <div class="secImg">
+      <div class="secImg"> 
         <img
           width="50vm"
-          src="https://st3.depositphotos.com/5689602/17945/i/450/depositphotos_179451970-stock-photo-tv-screen-with-noise-glitcher.jpg"
-          alt=""
+          src="https://s3-alpha.figma.com/hub/file/4711603543/c35e3e9b-7203-4f50-9425-c850336a2e7b-cover.png"
+          alt="nexflix show"
         />
       </div>
     </section>
     <div class="separation"></div>
     <section class="first second">
-      <div class="secImg">
+    <div>
+        <span>Download your shows to watch offline</span>
+        <span
+          >Save your favourites easily and always have something to watch.</span>
+      </div>
+      <br>
+          <div class="secImg">
         <img
           src="https://tse2.mm.bing.net/th?id=OIP.aNDBtSjZWVGuq1XUBp4P5QHaFj&pid=Api&P=0&h=180"
           alt=""
         />
       </div>
-      <br>
-      <div>
-        <span>Download your shows to watch offline</span>
-        <span
-          >Save your favourites easily and always have something to watch.</span>
-      </div>
     </section>
     <div class="separation"></div>
     <section class="first third">
diff --git a/style.css b/style.css
index 04512b5..ff8dbd1 100644
--- a/style.css
+++ b/style.css
@@ -18,7 +18,7 @@
 
   --first-image-filter: none;
 
-  --btn-text-on-light-bg:white;
+  --btn-text-on-light-bg:rgb(239, 232, 232);
   --btn-lang-svg-filter: invert(1);
 
   --separation-color:rgb(248, 38, 38);
@@ -31,7 +31,7 @@
 }
 
 /* Light Mode Overrides for the variables */
-body[data-theme="light"] {
+body[data-theme="light"]{
   --main-page-bg: white;
   --main-text-color: black;
 
@@ -42,10 +42,10 @@ body[data-theme="light"] {
   --faq-box-hover-bg: lightgray;
   --faq-svg-filter: none;
 
-  --first-image-filter: brightness(1.5) grayscale(0.5);
+  --first-image-filter: brightness(1.2) grayscale(0.5);
 
   --btn-text-on-light-bg:black;
-  --btn-lang-svg-filter: none;
+  --btn-lang-svg-filter:none;
 }
 * {
   padding: 0;
@@ -127,30 +127,31 @@ nav button {
   color: var(--main-text-color);
   position: relative;
   font-family: "Martel Sans", serif;
-  gap: 23px;
+  gap:23px;
   padding: 0 30px;
+
 }
 
 .hero > :first-child {
-  font-weight: bolder;
+  font-weight:500;
   font-size: 48px;
   text-align: center;
 }
 
 .hero > :nth-child(2) {
-  font-weight: 400;
-  font-size: 24px;
+  font-weight: 300;
+  font-size: 25px;
   text-align: center;
 }
 
 .hero > :nth-child(3) {
-  font-weight: 400;
+  font-weight: 300;
   font-size: 20px;
   text-align: center;
 }
 
 .separation {
-  height: 6px;
+  height: 2px;
   background-color: var(--separation-color);
   position: relative;
   z-index: 20;
@@ -166,7 +167,7 @@ nav button {
 
 .btn {
   background: #666;
-  color: rgb(255, 255, 255);
+  color: rgb(245, 241, 241);
   padding:5px 25px;
   margin: 10px 12px;
   border: none;
@@ -185,6 +186,7 @@ transform: scale(1.05);
   background:rgb(228, 15, 15);
   font-size:15px;
   font-weight:lighter;
+  padding: 10px 30px;
 }
 
 .btn-red:hover {
@@ -211,12 +213,12 @@ transform: scale(1.05);
   border: none;
   font-size: 16px;
   appearance: none;
-  padding: 8px;
+  padding: 2px 4px;
   cursor: pointer;
 }
 
 .down-arrow {
-  width: 8px;
+  width:12px;
   padding: 0 2px;
 }
 
@@ -239,12 +241,14 @@ transform: scale(1.05);
 
 .btn-lang {
   background-color: var(--section-bg);
-  border: 1px solid var(--btn-default-text);
+  border: 1px solid (--btn-default-bg);
   color: var(--btn-text-on-light-bg);
   display: flex;
   align-items: center;
+  border-radius: 4px;
 }
 
+
 .english {
   padding: 0 5px;
 }
@@ -254,7 +258,9 @@ transform: scale(1.05);
   color: var(--btn-red-text); 
   display: flex;
   align-items: center;
+  padding: 8 20px;
   margin:3px;
+  white-space: nowrap;
 }
 
 .btn-lang .language-switch,
@@ -284,7 +290,8 @@ transform: scale(1.05);
     font-size: 32px;
   }
   .hero > :nth-child(2) {
-    font-size: 18px;
+    font-size:20px;
+  
   }
   .hero > :nth-child(3) {
     font-size: 18px;
@@ -307,7 +314,7 @@ transform: scale(1.05);
     flex-wrap: wrap;
 }
 
-.second {
+.second{
     flex-direction: row-reverse;
 }
 
@@ -369,10 +376,7 @@ section.first > div :nth-child(2) {
         justify-content: center;
         gap: 14px;
     }
-    .faq h2{
-        text-align: center;
-        font-size: 32px;
-    }
+   
     footer{
         max-width: 90vw;
     }
@@ -384,8 +388,10 @@ section.first > div :nth-child(2) {
         grid-template-columns: 1fr 1fr;
         color: white;
         gap: 25px;
-    }
-    flex-direction: column;
+      }
+ 
+   display: flex;
+    flex-direction:column;
     align-items: center;
     justify-content: center;
     gap: 14px;
@@ -455,6 +461,7 @@ footer{
     display: flex;
     flex-direction: column;
     gap: 23px;
+}
 .faqbox:hover {
   background-color: var(--faq-box-hover-bg);