Challenge section UI Improvement: Smooth Transitions & Box-Shadow

Author: Mrunalisa

index.html

@@ -159,8 +159,8 @@ <h1 data-aos="fade-right" data-aos-duration="650">
       <div class="container">
         <div class="row challengeContainer">
           <!-- ==== Card 1 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
+          <div data-aos-duration="800" data-aos="fade-up" class="col-12 col-md-4">
+            <div class="card">
               <div class="card-body">
                 <div class="card-TopContainer">
                   <h5 class="card-Header">Frontend Challenges</h5>
@@ -191,8 +191,8 @@ <h5 class="card-Header">Frontend Challenges</h5>
           </div>
 
           <!-- ==== Card 2 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
+          <div data-aos-duration="800" data-aos="fade-up"  class="col-12 col-md-4">
+            <div class="card">
               <div class="card-body">
                 <div class="card-TopContainer">
                   <h5 class="card-Header">JavaScript Logics</h5>
@@ -220,8 +220,8 @@ <h5 class="card-Header">JavaScript Logics</h5>
           </div>
 
           <!-- ==== Card 3 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
+          <div data-aos-duration="800" data-aos="fade-up" class="col-12 col-md-4">
+            <div class="card">
               <div class="card-body">
                 <div class="card-TopContainer">
                   <h5 class="card-Header">Backend Basics</h5>
@@ -280,8 +280,8 @@ <h5 class="card-Header">UI Design Tasks</h5>
           </div>
 
           <!-- ==== Card 5 ==== -->
-          <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
+          <div data-aos-duration="800" data-aos="fade-up" class="col-12 col-md-4">
+            <div class="card">
               <div class="card-body">
                 <div class="card-TopContainer">
                   <h5 class="card-Header">Open Source Challenges</h5>
@@ -310,8 +310,8 @@ <h5 class="card-Header">Open Source Challenges</h5>
           </div>
           <!-- added card 6 -->
           <!-- === Card 6 === -->
-           <div class="col-12 col-md-4">
-            <div data-aos-duration="800" data-aos="fade-up" class="card">
+           <div data-aos-duration="800" data-aos="fade-up" class="col-12 col-md-4">
+            <div class="card">
               <div class="card-body">
                 <div class="card-TopContainer">
                   <h5 class="card-Header">JavaScript Mini Projects</h5>

styles/main.css

@@ -303,21 +303,18 @@ nav {
     padding: 2rem 0;
 }
 
-.challengeContainer .card {
-    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+.challengeContainer .card{
+    box-shadow: rgba(19, 117, 216, 0.2) 0px 8px 24px;
     border: none;
     transition: all 0.2s ease-in-out;
     border-radius: 15px;
     margin: 15px 0;
+    transition: transform 0.2s ease-in-out;
 }
 
 .challengeContainer .card:hover {
-    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-}
-
-.challengeContainer .card:hover {
-    transform: translateY(-2px);
-
+    transform: translateY(-3px) scale(1);
+    box-shadow: 0 0 18px rgba(37,99,235,0.45);
 }
 
 .card-TopContainer {
@@ -389,8 +386,8 @@ nav {
 }
 
 .card-Btn:hover {
-    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-    background-color: #0b5ed7;
+    box-shadow: #83aafe 0px 3px 8px;
+    background-color: #1d4ed8;
 }
 
 /* ================== Challenge Styles End Here ================== */
@@ -560,9 +557,6 @@ nav {
   left: 0;
 }
 
-
-
-
 /* ================== About Styles End Here ================== */
 
 /* ================== Footer Styles Start Here ================== */