AnjaliNaina/ML_Digital_Notebook

1import streamlit as st2 3# Apply global style first4st.markdown(5    """6    <style>7    /* Import Google Fonts */8    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Raleway:wght@400;700&display=swap');9 10    /* App Background */11    .stApp {12        background: linear-gradient(135deg, #a8edea, #fed6e3, #ffc3a0);13        background-size: 200% 200%;14        animation: gradientShift 15s ease infinite;15        color: #2e2e2e;16        padding: 20px;17    }18 19    @keyframes gradientShift {20        0% { background-position: 0% 50%; }21        50% { background-position: 100% 50%; }22        100% { background-position: 0% 50%; }23    }24 25    /* Headings - Poppins */26    h1, h2, h3, h4 {27        color: #5D3FD3;28        font-family: 'Poppins', sans-serif;29        font-weight: 700;30        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);31    }32 33    /* Paragraphs and normal text - Raleway */34    p, div, ul, li {35        font-family: 'Raleway', sans-serif;36        color: #333333;37        font-size: 20px;38        line-height: 1.7;39    }40 41    </style>42    """,43    unsafe_allow_html=True44)45 46# ========== Welcome Section ==========47st.markdown(48    """49    <div style="text-align: center; padding: 20px;">50        <h1>Welcome to Zero to Hero ML</h1>51        <p>52            Every expert was once a beginner.<br>53            Here, every small step counts, and every learner matters.<br>54            Let's turn challenges into achievements and dreams into reality.55        </p>56    </div>57    """,58    unsafe_allow_html=True59)60 61# ========== About Zero to Hero ML ==========62st.markdown(63    """64    <div style="text-align: center; padding: 20px;">65        <h1>About Zero to Hero ML</h1>66        <p>67            Zero to Hero ML — where learning meets action!<br><br>68            Explore, practice, and master Machine Learning with hands-on experiences, real-world challenges, and intuitive learning paths.<br><br>69            Your ML journey starts here.70        </p>71    </div>72    """,73    unsafe_allow_html=True74)75 76import streamlit as st77 78# ========== Global Style (must include once at top) ==========79st.markdown(80    """81    <style>82    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Raleway:wght@400;700&display=swap');83 84    /* Background */85    .stApp {86        background: linear-gradient(135deg, #a8edea, #fed6e3, #ffc3a0);87        background-size: 200% 200%;88        animation: gradientShift 15s ease infinite;89        color: #2e2e2e;90        padding: 20px;91    }92 93    @keyframes gradientShift {94        0% { background-position: 0% 50%; }95        50% { background-position: 100% 50%; }96        100% { background-position: 0% 50%; }97    }98 99    /* Heading fonts */100    h1, h2, h3, h4 {101        font-family: 'Poppins', sans-serif;102        color: #5D3FD3;103        font-weight: 700;104        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);105    }106 107    /* Body fonts */108    p, div, ul, li {109        font-family: 'Raleway', sans-serif;110        color: #333333;111        font-size: 20px;112        line-height: 1.7;113    }114    </style>115    """,116    unsafe_allow_html=True117)118 119 120############################################### 121# Skills Section122st.markdown("---")123st.markdown(124    "<h2 style='text-align: center; color: #5D3FD3;'>🔹 Skills and Tools</h2>",125    unsafe_allow_html=True126)127 128# Programming languages129st.markdown(130    """131    <div style='font-size:18px; color: #333333; font-family: "Raleway", sans-serif;'>132    <b>Programming Languages:</b><br>133    - Python: Data analysis, machine learning, automation<br>134    - SQL: Efficient data extraction and database management<br><br>135 136    <b>Visualization Tools:</b><br>137    - Power BI: Interactive dashboards and business intelligence reporting<br>138    - Matplotlib & Seaborn: In-depth data exploration and statistical visualizations139    </div>140    """,141    unsafe_allow_html=True142)