Update pages/4_Data and types of data.py

pages/4_Data and types of data.py

@@ -3,13 +3,13 @@ import pandas as pd
 
 st.markdown("""
     <style>
-    /* Set a vibrant background color */
+    /* Set a dark gradient background */
     body {
-        background-color: #1e1e1e;  /* Dark gray background */
+        background: linear-gradient(135deg, #2a2a72, #009ffd);
     }
     /* Style for main title */
     h1 {
-        color: #FF5733;  /* Bright orange */
+        color: #F4A300;
         font-family: 'Arial', sans-serif;
         font-weight: 700;
         text-align: center;
@@ -17,30 +17,30 @@ st.markdown("""
     }
     /* Style for headers */
     h2 {
-        color: #F1C40F;  /* Golden yellow */
+        color: #fff;
         font-family: 'Arial', sans-serif;
         font-weight: 600;
         margin-top: 30px;
     }
     
     /* Style for subheaders */
-    h3 {
-        color: #58D68D;  /* Light green */
+     h3 {
+        color: #00b8d4;
         font-family: 'Arial', sans-serif;
         font-weight: 500;
         margin-top: 20px;
     }
     .custom-subheader {
-        color: #3498DB;  /* Bright blue */
+        color: #F4A300;
         font-family: 'Arial', sans-serif;
         font-weight: 600;
         margin-bottom: 15px;
     }
     /* Paragraph styling */
     p {
-        font-family: 'Georgia', serif;
+        font-family: 'Times New Roman', serif;
         line-height: 1.8;
-        color: #EAEAEA;  /* Light gray for text */
+        color: #FFFFFF; /* Keeping the text readable on dark backgrounds */
         margin-bottom: 20px;
     }
     /* List styling with checkmark bullets */
@@ -49,29 +49,29 @@ st.markdown("""
         padding-left: 20px;
     }
     .icon-bullet li {
-        font-family: 'Georgia', serif;
+        font-family: 'Times New Roman', serif;
         font-size: 1.1em;
         margin-bottom: 10px;
-        color: #D5DBDB;  /* Light gray */
+        color: #FFFFFF; /* Keep text normal for better contrast */
     }
     .icon-bullet li::before {
         content: "✔️";
         padding-right: 10px;
-        color: #FF5733;  /* Bright orange */
+        color: #F4A300;
     }
     /* Sidebar styling */
     .sidebar .sidebar-content {
-        background-color: #2C3E50;  /* Dark blue-gray */
+        background-color: #ffffff;
         border-radius: 10px;
         padding: 15px;
     }
     .sidebar h2 {
-        color: #ECF0F1;  /* Light gray */
+        color: #495057;
     }
-    /* Mobile specific styles */
+     /* Mobile specific styles */
     @media only screen and (max-width: 600px) {
         .stApp {
-            background-color: #1e1e1e;  /* Dark gray background for mobile */
+            background: linear-gradient(135deg, #2a2a72, #009ffd);
         }
         h1, h2 {
             font-size: 18px;  /* Adjust font size for mobile devices */
@@ -81,6 +81,7 @@ st.markdown("""
     """, unsafe_allow_html=True)
 
 
+
 st.title("DATA")
 st.subheader("What is data?...")
 st.markdown("""