Update app.py

app.py

@@ -1,53 +1,96 @@
 import streamlit as st
 
 st.set_page_config(
-    page_title="HomePage",
+    page_title="AutoML: ML for Everyone",
     page_icon="🧭",
     layout="wide"
 )
 
 st.markdown("""
-        <div style="text-align: center; margin-bottom: 20px;">
-            <h1 style="color: #880085; font-size: 36px;">AutoML: Machine Learning for Everyone!📊 </h1>
-            <h2 style="color: #000080; font-size: 24px;">Upload, Analyze, and Build ML Models Effortlessly!</h2>
-        </div>""", unsafe_allow_html=True)
+    <style>
+        .main-container {
+            text-align: center;
+            padding: 20px;
+            font-family: Arial, sans-serif;
+        }
+        .title {
+            color: #880085;
+            font-size: 42px;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+        }
+        .subtitle {
+            color: #000080;
+            font-size: 24px;
+            font-weight: bold;
+        }
+        .section {
+            background-color: #F8F9FA;
+            border-radius: 12px;
+            padding: 30px;
+            margin: 20px auto;
+            width: 80%;
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .section h2 {
+            color: #c71585;
+            font-size: 28px;
+            font-weight: bold;
+        }
+        .section p, .section ul {
+            font-size: 18px;
+            line-height: 1.6;
+            color: #4F4F4F;
+        }
+        .section ul {
+            text-align: left;
+            display: inline-block;
+            margin: auto;
+        }
+    </style>
+""", unsafe_allow_html=True)
 
+st.markdown("""
+    <div class="main-container">
+        <h1 class="title">AutoML: Machine Learning for Everyone! 📊</h1>
+        <h2 class="subtitle">Upload, Analyze, and Build ML Models Effortlessly!</h2>
+    </div>
+""", unsafe_allow_html=True)
 
 st.markdown("""
-    <div style="text-align: center; margin-top: 40px; padding: 20px; border-radius: 8px; font-family: Arial, sans-serif;">
-        <h2 style="color: #c71585; font-size: 28px;">🚀What You'll Explore</h2>
-        <p style="font-size: 18px; line-height: 1.6; color: #4F4F4F;">
-            Transform your data into powerful insights with ease! This platform is designed to help you explore, analyze, 
+    <div class="section">
+        <h2>🚀 What You'll Explore</h2>
+        <p>
+            Transform your data into powerful insights with ease! This platform helps you explore, analyze, 
             and build ML models without complexity. Whether you're experimenting with datasets or training models, 
             everything you need is right here. Start now and see the magic of ML in action! 🎯
         </p>
-        <ul style="text-align: left; font-size: 18px; line-height: 1.8; color: #4F4F4F; display: inline-block;">
-            <li><strong> Upload Data:</strong> Start with your dataset in any format.</li>
-            <li><strong> Explore & Preprocess:</strong> Clean, transform, and understand your data.</li>
-            <li><strong> Build Models:</strong> Train and optimize based on your data.</li>
-            <li><strong> Assess Performance:</strong> Evaluate results and gain insights.</li>
-            <li><strong> Apply & Integrate:</strong> Use models for real-world applications.</li>
+        <ul>
+            <li><strong>Upload Data:</strong> Start with your dataset in any format.</li>
+            <li><strong>Explore & Preprocess:</strong> Clean, transform, and understand your data.</li>
+            <li><strong>Build Models:</strong> Train and optimize based on your data.</li>
+            <li><strong>Assess Performance:</strong> Evaluate results and gain insights.</li>
+            <li><strong>Apply & Integrate:</strong> Use models for real-world applications.</li>
         </ul>
     </div>
 """, unsafe_allow_html=True)
 
-
 st.markdown("""
-    <div style="text-align: center; margin-top: 40px; padding: 20px; border-radius: 8px; font-family: Arial, sans-serif;">
-        <h2 style="color: #c71585; font-size: 28px;">About the Creator 🌏</h2>
-        <p style="font-size: 18px; line-height: 1.8; color: #4F4F4F;">
-            Hello! 👋 I’m **Harika Padyala** a passionate DataScience student dedicated to simplifying complex concepts and empowering others to excel in the field of machine learning
+    <div class="section">
+        <h2>About the Creator 🌏</h2>
+        <p>
+            Hello! 👋 I’m <strong>Harika Padyala</strong>, a passionate Data Science student dedicated to simplifying complex concepts 
+            and empowering others to excel in the field of machine learning.
         </p>
     </div>
 """, unsafe_allow_html=True)
 
-
 st.markdown("""
-        <div style="text-align: center; margin-top: 40px; padding: 20px; border-radius: 8px; font-family: Arial, sans-serif;">
-            <h2 style="color: #c71585; font-size: 28px;">Ready to Automate Your ML Workflow?...</h2>
-            <p style="font-size: 18px; line-height: 1.8; color: #4F4F4F;">
-                Start your Machine Learning journey with ease! From data exploration to model deployment,  
-                everything you need is just a few clicks away. Get started now and transform your data into insights! 📊
-            </p>
-        </div>
-    """, unsafe_allow_html=True)
+    <div class="section">
+        <h2>Ready to Automate Your ML Workflow?...</h2>
+        <p>
+            Start your Machine Learning journey with ease! From data exploration to model deployment,  
+            everything you need is just a few clicks away. Get started now and transform your data into insights! 📊
+        </p>
+    </div>
+""", unsafe_allow_html=True)