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

pages/3Life Cycle of Machine Learning Project.py

@@ -10,17 +10,14 @@ st.set_page_config(
 st.markdown(""" 
     <style>
     body, .stApp {
-        color: #4F4F4F; /* Replace with your desired font color */
+        color: #000; /* Set text color to black */
         background-color: #FFFFFF; /* Optional: Set a fixed background color */
     }
     h1, h2, h3, h4, h5, h6 {
-        color: #BB3385; /* Replace with your heading color */
+        color: #000; /* Set headings to black */
     }
-    p {
-        color: #4F4F4F; /* Replace with your paragraph text color */
-    }
-    ul li {
-        color: #4F4F4F; /* List item color */
+    p, ul li {
+        color: #000; /* Paragraphs and list items text color */
     }
     </style>
 """, unsafe_allow_html=True)
@@ -40,9 +37,7 @@ st.markdown(
 )
 
 # Title of the page
-st.markdown("""<div style="text-align: left; margin-top: 20px;"><h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
-
-
+st.markdown("""<div style="text-align: left; margin-top: 20px;"><h1>Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
 
 # Circle Representation HTML and CSS (properly rendered)
 html_code = """
@@ -61,6 +56,7 @@ html_code = """
             height: 100vh;
             margin: 0;
             background-color: #f4f4f9;
+            color: #000; /* Set body text to black */
         }
         .container {
             text-align: center;
@@ -104,7 +100,7 @@ html_code = """
         .step:hover {
             background-color: #0056b3;
         }
-         /* Different background colors for each step */
+        /* Different background colors for each step */
         #step1 {
             background-color: #FFCCCC;
             transform: rotate(0deg) translateX(140px) rotate(0deg);
@@ -145,39 +141,8 @@ html_code = """
             background-color: #D9CCFF;
             transform: rotate(324deg) translateX(140px) rotate(-324deg);
         }
-        /* Rotate steps to form a circular layout */
-        #step4 {
-            transform: rotate(0deg) translateX(250px) rotate(0deg);
-        }
-        #step5 {
-            transform: rotate(25deg) translateX(250px) rotate(-25deg);
-        }
-        #step6 {
-            transform: rotate(60deg) translateX(250px) rotate(-60deg);
-        }
-        #step7 {
-            transform: rotate(120deg) translateX(250px) rotate(-120deg);
-        }
-        #step8 {
-            transform: rotate(155deg) translateX(250px) rotate(-155deg);
-        }
-        #step9 {
-            transform: rotate(180deg) translateX(250px) rotate(-180deg);
-        }
-        #step10 {
-            transform: rotate(205deg) translateX(250px) rotate(-205deg);
-        }
-        #step1 {
-            transform: rotate(240deg) translateX(250px) rotate(-240deg);
-        }
-        #step2 {
-            transform: rotate(300deg) translateX(250px) rotate(-300deg);
-        }
-        #step3 {
-            transform: rotate(335deg) translateX(250px) rotate(-335deg);
-        }
         a {
-            color: white;  /* Link color */
+            color: #000;  /* Links text color to black */
             text-decoration: none;
         }
         a:hover {
@@ -211,8 +176,3 @@ html_code = """
 # Streamlit: Display the HTML circle with properly spaced steps
 st.markdown(html_code, unsafe_allow_html=True)
 st.write(' ')
-st.write(' ')
-st.write(' ')
-st.write(' ')
-st.write(' ')
-st.write(' ')