Merge pull request #1368 from neeru24/patch-2

Added hover effects to enhance UI interaction

Author: sanjay-kv

Website/css/styles.css

@@ -379,85 +379,109 @@ button#toggle-stats:hover {
 
 }
 
-.language-and-milestone{
+.language-and-milestone {
     display: flex;
-    gap:20px;
+    gap: 20px;
     justify-content: center;
     align-items: center;
     animation: slide-in-right 0.5s ease-in-out;
     flex-wrap: wrap;
 }
 
-.text-base{
+.text-base {
     text-align: left;
     font-size: 16px;
 }
+
 #languages {
     text-align: center;
     margin-bottom: 30px;
-    width:500px;
+    width: 500px;
     background-color: #121245;
-    padding:10px 20px;
+    padding: 10px 20px;
     border-radius: 15px;
-    height:340px;
-    color:white;
+    height: 340px;
+    color: white;
     animation: slideInRight 0.3s ease-in-out;
+    transition: background-color 0.3s ease;
+}
+
+#languages:hover {
+    background-color: #0D6EFD; 
 }
+
 #language-list {
     list-style: none;
     text-align: center;
-    width:100%;
-    padding:0px;
+    width: 100%;
+    padding: 0px;
 }
 
 #language-list li {
     padding: 10px 0px;
     display: flex;
-    width:100%;
-    gap:20px;
-    border-bottom:2px solid white;
+    width: 100%;
+    gap: 20px;
+    border-bottom: 2px solid white;
     justify-content: space-between;
     font-size: 16px;
     font-weight: 600;
+    transition: color 0.3s ease;
+}
+
+#language-list li:hover {
+    color: #0D6EFD; 
 }
 
-.progress-bar-container{
+.progress-bar-container {
     background-color: whitesmoke;
     border-radius: 8px;
     overflow: hidden;
-    width:300px;
-    height:20px;
+    width: 300px;
+    height: 20px;
     animation: fadeIn 1s ease-in-out;
 }
+
 .progress-bar {
     height: 20px;
-    background-color: #0D6EFD; 
+    background-color: #0D6EFD;
     width: 300px;
     text-align: left;
     display: flex;
     flex-wrap: nowrap;
     font-size: 12px;
     justify-content: center;
     align-items: center;
-    color:white;
+    color: white;
     animation: fadeIn 1s ease-in-out;
+    transition: width 0.3s ease;
+}
+
+.progress-bar-container:hover .progress-bar {
+    width: 320px; 
 }
+
 #milestone {
     text-align: center;
     margin-bottom: 30px;
-    width:500px;
+    width: 500px;
     background-color: #121245;
-    padding:10px 20px;
+    padding: 10px 20px;
     border-radius: 15px;
-    height:340px;
-    color:white;
+    height: 340px;
+    color: white;
     animation: slideInRight 1s ease-in-out;
+    transition: background-color 0.3s ease;
+}
+
+#milestone:hover {
+    background-color: #0D6EFD; 
 }
 
 .chart-container {
     display: flex;
     align-items: center;
-    width:150px;
+    width: 150px;
     margin: 50px 20px;
     animation: slideInRight 1s ease-in-out;
 }
@@ -473,32 +497,45 @@ button#toggle-stats:hover {
     display: flex;
     align-items: center;
     margin-bottom: 8px;
-    width:300px;
+    width: 300px;
+    transition: transform 0.3s ease;
+}
+
+.legend span:hover {
+    transform: scale(1.1); 
 }
+
 @media (max-width: 560px) {
     .chart-container {
-        width:120px;
+        width: 120px;
     }
     .legend span {
-        width:170px;
+        width: 170px;
     }
-    .progress-bar-container{
-        width:200px;
+    .progress-bar-container {
+        width: 200px;
     }
     .progress-bar {
         width: 200px;
     }
 }
+
 .legend span::before {
     content: '';
     display: inline-block;
     width: 20px;
     height: 20px;
     margin-right: 8px;
     border-radius: 50%;
-    background-color: currentColor; /* This will be set dynamically */
+    background-color: currentColor;
+    transition: transform 0.3s ease;
 }
 
+.legend span::before:hover {
+    transform: rotate(45deg); 
+}
+
+
 /* Footer stays at the bottom */
 .footer {
     background-color: #121245;