Update pages/4_Data and types of data.py

pages/4_Data and types of data.py

@@ -3,113 +3,83 @@ import pandas as pd
 
 st.markdown("""
     <style>
-    /* General body styling */
+    /* Set a vibrant background color */
     body {
-        background-color: #1e1e2f; /* Soft dark background */
-        color: #d4d4dc; /* Light gray text for readability */
-        font-family: 'Arial', sans-serif;
+        background-color: #1e1e1e;  /* Dark gray background */
     }
-
-    /* Main title styling */
+    /* Style for main title */
     h1 {
-        color: #ff6f61; /* Vibrant coral for attention */
-        font-family: 'Roboto', sans-serif;
-        font-size: 2.5em;
-        font-weight: bold;
+        color: #FF5733;  /* Bright orange */
+        font-family: 'Arial', sans-serif;
+        font-weight: 700;
         text-align: center;
-        margin: 20px 0;
+        margin-bottom: 25px;
     }
-
-    /* Subheading styling */
-    h2, h3 {
-        font-family: 'Roboto', sans-serif;
-        color: #61dafb; /* Soft blue for headers */
-        margin-top: 20px;
-        margin-bottom: 15px;
-    }
-
+    /* Style for headers */
     h2 {
-        font-size: 2em;
+        color: #F1C40F;  /* Golden yellow */
+        font-family: 'Arial', sans-serif;
         font-weight: 600;
+        margin-top: 30px;
     }
-
+    
+    /* Style for subheaders */
     h3 {
-        font-size: 1.6em;
+        color: #58D68D;  /* Light green */
+        font-family: 'Arial', sans-serif;
         font-weight: 500;
+        margin-top: 20px;
+    }
+    .custom-subheader {
+        color: #3498DB;  /* Bright blue */
+        font-family: 'Arial', sans-serif;
+        font-weight: 600;
+        margin-bottom: 15px;
     }
-
     /* Paragraph styling */
     p {
         font-family: 'Georgia', serif;
         line-height: 1.8;
-        font-size: 1.1em;
-        color: #e6e6fa; /* Soft lavender for readability */
+        color: #EAEAEA;  /* Light gray for text */
         margin-bottom: 20px;
     }
-
-    /* List styling */
-    ul.icon-bullet {
+    /* List styling with checkmark bullets */
+    .icon-bullet {
         list-style-type: none;
         padding-left: 20px;
     }
-
-    ul.icon-bullet li {
+    .icon-bullet li {
+        font-family: 'Georgia', serif;
         font-size: 1.1em;
         margin-bottom: 10px;
-        color: #dcdcdc; /* Neutral gray for subtlety */
+        color: #D5DBDB;  /* Light gray */
     }
-
-    ul.icon-bullet li::before {
-        content: "\2714"; /* Checkmark */
+    .icon-bullet li::before {
+        content: "✔️";
         padding-right: 10px;
-        color: #32cd32; /* Bright green for positivity */
+        color: #FF5733;  /* Bright orange */
     }
-
     /* Sidebar styling */
     .sidebar .sidebar-content {
-        background-color: #282c34; /* Dark slate for sidebar */
+        background-color: #2C3E50;  /* Dark blue-gray */
         border-radius: 10px;
         padding: 15px;
-        color: #ffffff; /* Light text for contrast */
     }
-
     .sidebar h2 {
-        color: #ffa500; /* Warm orange for headings */
-        font-family: 'Roboto', sans-serif;
-    }
-
-    /* Button styling */
-    button {
-        background-color: #ff6f61; /* Vibrant coral */
-        color: #ffffff; /* White text */
-        font-size: 1em;
-        border: none;
-        padding: 10px 20px;
-        border-radius: 5px;
-        cursor: pointer;
-        transition: background-color 0.3s;
+        color: #ECF0F1;  /* Light gray */
     }
-
-    button:hover {
-        background-color: #ff4500; /* Slightly darker coral */
-    }
-
-    /* Mobile responsive styling */
+    /* Mobile specific styles */
     @media only screen and (max-width: 600px) {
-        h1 {
-            font-size: 1.8em;
-        }
-
-        h2, h3 {
-            font-size: 1.5em;
+        .stApp {
+            background-color: #1e1e1e;  /* Dark gray background for mobile */
         }
-
-        p {
-            font-size: 1em;
+        h1, h2 {
+            font-size: 18px;  /* Adjust font size for mobile devices */
         }
     }
     </style>
-""", unsafe_allow_html=True)
+    """, unsafe_allow_html=True)
+
 
 st.title("DATA")
 st.subheader("What is data?...")