From 5ede1cca340f337c27d5139667028ff9345227af Mon Sep 17 00:00:00 2001
From: Vaishnavibansal21 <Vaishnavibansal2023@gmail.com>
Date: Wed, 6 Aug 2025 18:29:29 +0530
Subject: [PATCH] Add some css features and format of index.html file

---
 index.html | 22 ++++++++++------------
 styles.css | 12 ++++++++----
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 01c7dd08..ccddc81a 100644
--- a/index.html
+++ b/index.html
@@ -120,9 +120,7 @@
                 <a
                   class="active"
                   aria-current="page"
-                  href="#top"
-                  >Home</a
-                >
+                  href="#top">Home</a>
               </li>
               <li class="nav-item">
                 <a href="../CodeClip/pages/challenges.html">Challenges</a>
@@ -211,19 +209,19 @@ <h1>
                 <div class="card-TopContainer">
                   <h5 class="card-Header">Frontend Challenges</h5>
                   <p class="card-Level">EASY</p>
-                </div>
+                  </div>
 
-                <p class="card-Participate">
+                  <p class="card-Participate">
                   <i class="fa-solid fa-people-group"></i> 135 coders joined
-                </p>
-                <p class="card-Text">
+                  </p>
+                  <p class="card-Text">
                   Build real UI components using HTML, CSS, and JavaScript.
                   These tasks help you improve your layout, styling,
                   responsiveness, and interactivity,no frameworks, just clean
                   frontend skills.
-                </p>
+                  </p>
 
-                <div class="card-CTAButton">
+                  <div class="card-CTAButton">
                   <!-- === Create webpage of frontend challenge and add link here === -->
                   <a href="frontendChallenges.html" class="card-Btn">Join Now</a>
                 </div>
@@ -238,12 +236,12 @@ <h5 class="card-Header">Frontend Challenges</h5>
                 <div class="card-TopContainer">
                   <h5 class="card-Header">JavaScript Logics</h5>
                   <p class="card-Level medium-Col">MEDIUM</p>
-                </div>
+                  </div>
 
                 <p class="card-Participate">
                   <i class="fa-solid fa-people-group"></i> 189 coders joined
-                </p>
-                <p class="card-Text">
+                  </p>
+                  <p class="card-Text">
                   Master the core of JavaScript by solving logic-based problems
                   that boost your thinking and problem-solving skills. Perfect
                   for beginners and intermediates.
diff --git a/styles.css b/styles.css
index bcd370cb..e703dd22 100644
--- a/styles.css
+++ b/styles.css
@@ -144,7 +144,7 @@ body {
   display: flex;
   gap: 2.5rem;
   list-style: none;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease-in-out;
 }
 
 .nav__link {
@@ -153,13 +153,15 @@ body {
   font-size: 1.1rem;
   font-weight: 500;
   position: relative;
-  transition: color 0.3s ease;
+  transition: color 0.3s ease-in-out;
 }
 
 .nav__link:hover,
 .nav__link:focus,
 .nav__link.active {
   color: #2563eb;
+  transition: width 0.3s ease-in-out;
+
 }
 
 .nav__link::after {
@@ -168,7 +170,7 @@ body {
   width: 0;
   height: 2px;
   background: #2563eb;
-  transition: width 0.3s ease;
+  transition: width 0.3s ease-in-out;
   position: absolute;
   bottom: -4px;
   left: 0;
@@ -178,6 +180,7 @@ body {
 .nav__link:focus::after,
 .nav__link.active::after {
   width: 100%;
+  transition: width 0.3s ease-in-out;
 }
 
 .header__toggle {
@@ -187,6 +190,7 @@ body {
   width: 40px;
   height: 40px;
   background: none;
+  transition: width 0.5s ease-in-out;
   border: none;
   cursor: pointer;
 }
@@ -196,7 +200,7 @@ body {
   height: 4px;
   background: #2563eb;
   border-radius: 3px;
-  transition: all 0.3s ease;
+  transition: all 0.3s ease-in-out;
 }
 
 /* Hero Section */