Update pages/2_Data Cleaning and Processing .py

pages/2_Data Cleaning and Processing .py

@@ -34,15 +34,15 @@ else:
 # Define the URL of the background image (use your own image URL)
 # Apply custom CSS for the background image and overlay
 background_image_url = "https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/MI0hTKaf1a2EmxUfA6TsV.png"
-
 st.markdown(
     f"""
     <style>
         .stApp {{
             background-image: url("{background_image_url}");
-            background-size: cover;
-            background-position: repeat;
-            height: 100vh;
+            background-size: 100% auto;  /* Ensure the image width is 100% of the screen, and the height scales proportionally */
+            background-repeat: repeat-y;  /* Repeat only vertically */
+            background-position: top center;  /* Start repeating from the top center */
+            background-attachment: fixed;  /* Keeps the background fixed as you scroll */
         }}
         
         /* Semi-transparent overlay */
@@ -56,13 +56,64 @@ st.markdown(
             background: rgba(0, 0, 0, 0.4);  /* Adjust transparency here (0.4 for 40% transparency) */
             z-index: -1;
         }}
-
-        /* Styling the content to ensure text visibility */
+        
+        /* Container to center elements and limit width */
+        .content-container {{
+            max-width: 70%;  /* Limit content width to 70% */
+            margin: 0 auto;  /* Center the container */
+            padding: 50px;  /* Add some padding for spacing */
+        }}
+        /* Styling the markdown content */
         .stMarkdown {{
-            color: black;  /* White text to ensure visibility */
-            font-size: 30px;  /* Adjust font size for better readability */
+            color: white;  /* White text to ensure visibility */
+            font-size: 100px;  /* Adjust font size for readability */
         }}
     </style>
     """, 
     unsafe_allow_html=True
-)
+)
+st.markdown(
+    """
+    <style>
+    .custom-button {
+        display: inline-block;
+        padding: 5px 10px;
+        font-size: 14px;
+        color: #ffffff;
+        background-color: #4CAF50;
+        border: none;
+        border-radius: 5px;
+        text-align: center;
+        text-decoration: none;
+        transition: background-color 0.3s ease, transform 0.2s ease;
+        cursor: pointer;
+    }
+    .custom-button:hover {
+        background-color: #45a049;
+        transform: scale(1.05);
+    }
+    .button-container {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 20px;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+import streamlit as st
+
+st.title("Data Cleaning and Processing")
+
+st.write("Perform data cleaning and preprocessing tasks here.")
+
+# Navigation Buttons
+st.markdown(
+    """
+    <div class="button-container">
+        <a href="pages/1_Hotel_Data" target="_self" class="custom-button">Previous ⏮️</a>
+        <a href="pages/3_EDA_and_Feature_Engineering" target="_self" class="custom-button">Next ⏭️</a>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)