Update pages/3Life Cycle of Machine Learning Project.py

pages/3Life Cycle of Machine Learning Project.py

@@ -86,22 +86,22 @@ html_code = """
         }
         .step {
             background-color: #007bff;
-            color: #000; /* Changed text color to black */
-            padding: 20px 40px;
+            color: #000; /* Default text color is black */
+            padding: 20px 40px; /* Increased padding for a bigger size */
             border-radius: 8px;
             cursor: pointer;
             text-align: center;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: background-color 0.3s;
+            transition: background-color 0.3s, color 0.3s; /* Added transition for text color */
             position: absolute;
             transform-origin: 50% 50%;
             transition: transform 0.5s ease-in-out;
         }
         
-        /* Step transformations to create the circle */
+        /* Step transformations to create the circle with the same size for each step */
         #step1 {
             background-color: #FFCCCC;
-            transform: rotate(0deg) translateX(180px) rotate(0deg); /* Keeps original size and position */
+            transform: rotate(0deg) translateX(180px) rotate(0deg); /* Increased translateX for bigger size */
         }
         #step2 {
             background-color: #FFDD99;
@@ -139,6 +139,13 @@ html_code = """
             background-color: #D9CCFF;
             transform: rotate(324deg) translateX(180px) rotate(-324deg);
         }
+        
+        /* Hover Effect */
+        .step:hover {
+            background-color: #0056b3; /* Darker background on hover */
+            color: #000; /* Text color remains black on hover */
+        }
+
 
         /* Rotate steps to form a circular layout */
         #step4 {