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

pages/3Life Cycle of Machine Learning Project.py

@@ -25,8 +25,8 @@ html_code = """
         }
         .circle {
             position: relative;
-            width: 350px;
-            height: 350px;
+            width: 450px;  /* Increased size for better spacing */
+            height: 450px;  /* Increased size for better spacing */
             margin: 20px auto;
             border-radius: 50%;
             display: flex;
@@ -48,7 +48,7 @@ html_code = """
             padding: 15px 30px;
             border-radius: 8px;
             cursor: pointer;
-            width: 150px;
+            width: 170px;
             margin: 10px;
             text-align: center;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -60,46 +60,46 @@ html_code = """
         .step:hover {
             background-color: #0056b3;
         }
-         /* Different background colors for each step */
+        /* Different background colors for each step */
         #step1 {
             background-color: #ff5733;
-            transform: rotate(0deg) translateX(140px) rotate(0deg);
+            transform: rotate(0deg) translateX(180px) rotate(0deg);
         }
         #step2 {
             background-color: #33b5ff;
-            transform: rotate(36deg) translateX(140px) rotate(-36deg);
+            transform: rotate(36deg) translateX(180px) rotate(-36deg);
         }
         #step3 {
             background-color: #33ff57;
-            transform: rotate(72deg) translateX(140px) rotate(-72deg);
+            transform: rotate(72deg) translateX(180px) rotate(-72deg);
         }
         #step4 {
             background-color: #ff33cc;
-            transform: rotate(108deg) translateX(140px) rotate(-108deg);
+            transform: rotate(108deg) translateX(180px) rotate(-108deg);
         }
         #step5 {
             background-color: #ffcc33;
-            transform: rotate(144deg) translateX(140px) rotate(-144deg);
+            transform: rotate(144deg) translateX(180px) rotate(-144deg);
         }
         #step6 {
             background-color: #33ccff;
-            transform: rotate(180deg) translateX(140px) rotate(-180deg);
+            transform: rotate(180deg) translateX(180px) rotate(-180deg);
         }
         #step7 {
             background-color: #ff33a1;
-            transform: rotate(216deg) translateX(140px) rotate(-216deg);
+            transform: rotate(216deg) translateX(180px) rotate(-216deg);
         }
         #step8 {
             background-color: #66ff33;
-            transform: rotate(252deg) translateX(140px) rotate(-252deg);
+            transform: rotate(252deg) translateX(180px) rotate(-252deg);
         }
         #step9 {
             background-color: #9933ff;
-            transform: rotate(288deg) translateX(140px) rotate(-288deg);
+            transform: rotate(288deg) translateX(180px) rotate(-288deg);
         }
         #step10 {
             background-color: #f7a500;
-            transform: rotate(324deg) translateX(140px) rotate(-324deg);
+            transform: rotate(324deg) translateX(180px) rotate(-324deg);
         }
     </style>
 </head>