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

pages/3Life Cycle of Machine Learning Project.py

@@ -20,22 +20,21 @@ st.markdown("""
         text-align: center;
         color: #BB3385;
         margin-top: 20px;
-        margin-bottom: 10px; /* Reduced space below the title */
+        margin-bottom: 10px;
     }
     .description {
-        margin-bottom: 5px; /* Minimized space below description */
-        padding-bottom: 0px; /* Extra padding removal */
+        margin: 0px; /* Removed all margins for tighter spacing */
     }
     .circle-container {
         display: flex;
         justify-content: center;
         align-items: center;
-        margin-top: -10px; /* Removed extra space above the circle */
+        margin: 0px; /* Removed extra space above the circle */
     }
     .circle {
         position: relative;
-        width: 1150px; /* Increased circle size for better alignment */
-        height: 1150px;
+        width: 1200px; /* Increased circle size */
+        height: 1200px;
         border-radius: 50%;
         display: flex;
         justify-content: center;
@@ -68,16 +67,16 @@ st.markdown("""
     .step:hover {
         background-color: #0056b3;
     }
-    #step1 { transform: rotate(0deg) translateX(300px) rotate(-0deg); } /* Adjusted button positions */
-    #step2 { transform: rotate(36deg) translateX(300px) rotate(-36deg); }
-    #step3 { transform: rotate(72deg) translateX(300px) rotate(-72deg); }
-    #step4 { transform: rotate(108deg) translateX(300px) rotate(-108deg); }
-    #step5 { transform: rotate(144deg) translateX(300px) rotate(-144deg); }
-    #step6 { transform: rotate(180deg) translateX(300px) rotate(-180deg); }
-    #step7 { transform: rotate(216deg) translateX(300px) rotate(-216deg); }
-    #step8 { transform: rotate(252deg) translateX(300px) rotate(-252deg); }
-    #step9 { transform: rotate(288deg) translateX(300px) rotate(-288deg); }
-    #step10 { transform: rotate(324deg) translateX(300px) rotate(-324deg); }
+    #step1 { transform: rotate(0deg) translateX(320px) rotate(-0deg); }
+    #step2 { transform: rotate(36deg) translateX(320px) rotate(-36deg); }
+    #step3 { transform: rotate(72deg) translateX(320px) rotate(-72deg); }
+    #step4 { transform: rotate(108deg) translateX(320px) rotate(-108deg); }
+    #step5 { transform: rotate(144deg) translateX(320px) rotate(-144deg); }
+    #step6 { transform: rotate(180deg) translateX(320px) rotate(-180deg); }
+    #step7 { transform: rotate(216deg) translateX(320px) rotate(-216deg); }
+    #step8 { transform: rotate(252deg) translateX(320px) rotate(-252deg); }
+    #step9 { transform: rotate(288deg) translateX(320px) rotate(-288deg); }
+    #step10 { transform: rotate(324deg) translateX(320px) rotate(-324deg); }
     </style>
 """, unsafe_allow_html=True)
 
@@ -103,16 +102,16 @@ html_code = """
 <div class="circle-container">
     <div class="circle">
         <div class="steps">
-            <div class="step" id="step1"><a href="/?page=ProblemStatement" style="color:white; text-decoration:none;">Problem Statement</a></div>
-            <div class="step" id="step2"><a href="/?page=DataCollection" style="color:white; text-decoration:none;">Data Collection</a></div>
-            <div class="step" id="step3"><a href="/?page=SimpleEDA" style="color:white; text-decoration:none;">Simple EDA</a></div>
-            <div class="step" id="step4"><a href="/?page=DataPreprocessing" style="color:white; text-decoration:none;">Data Preprocessing</a></div>
-            <div class="step" id="step5"><a href="/?page=EDA" style="color:white; text-decoration:none;">EDA</a></div>
-            <div class="step" id="step6"><a href="/?page=FeatureEngineering" style="color:white; text-decoration:none;">Feature Engineering</a></div>
-            <div class="step" id="step7"><a href="/?page=ModelTraining" style="color:white; text-decoration:none;">Model Training</a></div>
-            <div class="step" id="step8"><a href="/?page=ModelTesting" style="color:white; text-decoration:none;">Model Testing</a></div>
-            <div class="step" id="step9"><a href="/?page=ModelDeployment" style="color:white; text-decoration:none;">Model Deployment</a></div>
-            <div class="step" id="step10"><a href="/?page=Monitoring" style="color:white; text-decoration:none;">Monitoring</a></div>
+            <div class="step" id="step1"><a href="/?page=SimpleEDA" style="color:white; text-decoration:none;">Problem Statement</a></div>
+            <div class="step" id="step2"><a href="/?page=DataPreprocessing" style="color:white; text-decoration:none;">Data Collection</a></div>
+            <div class="step" id="step3"><a href="/?page=EDA" style="color:white; text-decoration:none;">Simple EDA</a></div>
+            <div class="step" id="step4"><a href="/?page=Feature Engineering" style="color:white; text-decoration:none;">Data Preprocessing</a></div>
+            <div class="step" id="step5"><a href="/?page=Model Training" style="color:white; text-decoration:none;">EDA</a></div>
+            <div class="step" id="step6"><a href="/?page=Model Testing" style="color:white; text-decoration:none;">Feature Engineering</a></div>
+            <div class="step" id="step7"><a href="/?page=Model Deployment" style="color:white; text-decoration:none;">Model Training</a></div>
+            <div class="step" id="step8"><a href="/?page=Monitoring" style="color:white; text-decoration:none;">Model Testing</a></div>
+            <div class="step" id="step9"><a href="/?page=ProblemStatement" style="color:white; text-decoration:none;">Model Deployment</a></div>
+            <div class="step" id="step10"><a href="/?page=DataCollection" style="color:white; text-decoration:none;">Monitoring</a></div>
         </div>
     </div>
 </div>