Update pages/4_Data and types of data.py

pages/4_Data and types of data.py

@@ -0,0 +1,154 @@
+import streamlit as st
+import pandas as pd
+
+st.markdown("""
+    <style>
+    /* General body styling */
+    body {
+        background-color: #1e1e2f; /* Soft dark background */
+        color: #d4d4dc; /* Light gray text for readability */
+        font-family: 'Arial', sans-serif;
+    }
+
+    /* Main title styling */
+    h1 {
+        color: #ff6f61; /* Vibrant coral for attention */
+        font-family: 'Roboto', sans-serif;
+        font-size: 2.5em;
+        font-weight: bold;
+        text-align: center;
+        margin: 20px 0;
+    }
+
+    /* Subheading styling */
+    h2, h3 {
+        font-family: 'Roboto', sans-serif;
+        color: #61dafb; /* Soft blue for headers */
+        margin-top: 20px;
+        margin-bottom: 15px;
+    }
+
+    h2 {
+        font-size: 2em;
+        font-weight: 600;
+    }
+
+    h3 {
+        font-size: 1.6em;
+        font-weight: 500;
+    }
+
+    /* Paragraph styling */
+    p {
+        font-family: 'Georgia', serif;
+        line-height: 1.8;
+        font-size: 1.1em;
+        color: #e6e6fa; /* Soft lavender for readability */
+        margin-bottom: 20px;
+    }
+
+    /* List styling */
+    ul.icon-bullet {
+        list-style-type: none;
+        padding-left: 20px;
+    }
+
+    ul.icon-bullet li {
+        font-size: 1.1em;
+        margin-bottom: 10px;
+        color: #dcdcdc; /* Neutral gray for subtlety */
+    }
+
+    ul.icon-bullet li::before {
+        content: "\2714"; /* Checkmark */
+        padding-right: 10px;
+        color: #32cd32; /* Bright green for positivity */
+    }
+
+    /* Sidebar styling */
+    .sidebar .sidebar-content {
+        background-color: #282c34; /* Dark slate for sidebar */
+        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;
+    }
+
+    button:hover {
+        background-color: #ff4500; /* Slightly darker coral */
+    }
+
+    /* Mobile responsive styling */
+    @media only screen and (max-width: 600px) {
+        h1 {
+            font-size: 1.8em;
+        }
+
+        h2, h3 {
+            font-size: 1.5em;
+        }
+
+        p {
+            font-size: 1em;
+        }
+    }
+    </style>
+""", unsafe_allow_html=True)
+
+st.title("DATA")
+st.subheader("What is data?...")
+st.markdown("""
+    Data refers to a collection of information gathered from various sources
+""", unsafe_allow_html=True)
+
+st.header("Data Classification")
+st.subheader("Structured Data")
+st.markdown("""
+    Structured data is organized and formatted data stored in a defined schema, such as rows and columns in tables, making it easily searchable and analyzable.Examples:
+    <ul class="icon-bullet">
+        <li>Excel</li>
+        <li>SQL</li>
+    </ul>
+""", unsafe_allow_html=True)
+st.image("https://cdn-uploads.huggingface.co/production/uploads/66bde9bf3c885d04498227a0/uZB2ExnzTIiWGNSL8Eiro.png",width=300)
+
+st.subheader("Unstructured Data")
+st.markdown("""
+    Unstructured data is information that lacks a predefined format or organization. Examples :
+    <ul class="icon-bullet">
+        <li>Images</li>
+        <li>Videos</li>
+        <li>Text</li>
+        <li>Audio</li>
+    </ul>
+""", unsafe_allow_html=True)
+st.image("https://cdn-uploads.huggingface.co/production/uploads/66bde9bf3c885d04498227a0/xzk_q2DIqS3Bgy6PoUrpU.png",width=300)
+
+st.subheader("Semi-Structured Data")
+st.markdown("""
+    Semi-structured data is a type of data that doesn't conform to a strict schema but has organizational properties, such as tags or markers, to separate elements. Examples :
+    <ul class="icon-bullet">
+        <li>CSV /li>
+        <li>JSON </li>
+        <li>HTML </li>
+        <li>XML</li>
+    </ul>
+""", unsafe_allow_html=True)
+st.image("https://cdn-uploads.huggingface.co/production/uploads/66bde9bf3c885d04498227a0/qtBtX6rKojcNx8Z_h9SRS.png",width=300)
+