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

pages/3Life Cycle of Machine Learning Project.py

@@ -90,8 +90,6 @@ html_code = """
             padding: 15px 30px;
             border-radius: 8px;
             cursor: pointer;
-            width: 150px;  /* Ensures all steps are the same size */
-            height: 60px;  /* Ensures all steps have consistent height */
             text-align: center;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             transition: background-color 0.3s;
@@ -100,46 +98,48 @@ html_code = """
             transition: transform 0.5s ease-in-out;
         }
         
+        /* Step transformations to create the circle */
         #step1 {
             background-color: #FFCCCC;
-            transform: rotate(0deg) translateX(200px) rotate(0deg);  /* Adjust translateX for proper positioning */
+            transform: rotate(0deg) translateX(140px) rotate(0deg); /* Keeps original size and position */
         }
         #step2 {
             background-color: #FFDD99;
-            transform: rotate(36deg) translateX(200px) rotate(-36deg);
+            transform: rotate(36deg) translateX(140px) rotate(-36deg);
         }
         #step3 {
             background-color: #FFFF99;
-            transform: rotate(72deg) translateX(200px) rotate(-72deg);
+            transform: rotate(72deg) translateX(140px) rotate(-72deg);
         }
         #step4 {
             background-color: #CCFFCC;
-            transform: rotate(108deg) translateX(200px) rotate(-108deg);
+            transform: rotate(108deg) translateX(140px) rotate(-108deg);
         }
         #step5 {
             background-color: #CCE5FF;
-            transform: rotate(144deg) translateX(200px) rotate(-144deg);
+            transform: rotate(144deg) translateX(140px) rotate(-144deg);
         }
         #step6 {
             background-color: #E5CCFF;
-            transform: rotate(180deg) translateX(200px) rotate(-180deg);
+            transform: rotate(180deg) translateX(140px) rotate(-180deg);
         }
         #step7 {
             background-color: #FFD9E6;
-            transform: rotate(216deg) translateX(200px) rotate(-216deg);
+            transform: rotate(216deg) translateX(140px) rotate(-216deg);
         }
         #step8 {
             background-color: #FFF5CC;
-            transform: rotate(252deg) translateX(200px) rotate(-252deg);
+            transform: rotate(252deg) translateX(140px) rotate(-252deg);
         }
         #step9 {
             background-color: #D9FFF5;
-            transform: rotate(288deg) translateX(200px) rotate(-288deg);
+            transform: rotate(288deg) translateX(140px) rotate(-288deg);
         }
         #step10 {
             background-color: #D9CCFF;
-            transform: rotate(324deg) translateX(200px) rotate(-324deg);
+            transform: rotate(324deg) translateX(140px) rotate(-324deg);
         }
+
         /* Rotate steps to form a circular layout */
         #step4 {
             transform: rotate(0deg) translateX(250px) rotate(0deg);