Update Home.py

Home.py

@@ -13,24 +13,41 @@ st.markdown("""
         color: white;
     }
     
-    h1, h2 {
-        color: #00FFFF;
+    h1, h2, h3 {
         text-align: center;
         text-shadow: 0px 0px 10px rgba(0, 255, 255, 0.8);
     }
+
+    h1 {
+        color: #00FFFF;
+        font-size: 36px;
+        font-weight: 700;
+    }
+
+    h2 {
+        color: #FFD700;
+        font-size: 28px;
+        font-weight: 600;
+    }
+
+    h3 {
+        color: #FF6347;
+        font-size: 24px;
+        font-weight: 500;
+    }
     
     .section {
         background: rgba(255, 255, 255, 0.1);
         padding: 20px;
         border-radius: 15px;
-        margin-bottom: 20px;
+        margin-bottom: 30px;
         box-shadow: 0px 4px 12px rgba(0, 255, 255, 0.2);
     }
 
     .glow-button {
         background: linear-gradient(90deg, #00FFFF, #00CCFF);
         border: none;
-        padding: 10px 20px;
+        padding: 12px 25px;
         color: black;
         font-weight: bold;
         border-radius: 25px;
@@ -39,6 +56,8 @@ st.markdown("""
         text-decoration: none;
         display: inline-block;
         text-align: center;
+        font-size: 16px;
+        margin: 10px 5px;  /* Added spacing between buttons */
     }
 
     .glow-button:hover {
@@ -46,14 +65,10 @@ st.markdown("""
         box-shadow: 0px 0px 20px rgba(0, 255, 255, 1);
     }
 
-    ul {
-        list-style-type: none;
-        padding: 0;
-    }
-    
-    li::before {
-        content: "⚡ ";
-        color: #00FFFF;
+    .button-container {
+        text-align: center;  /* Centering buttons */
+        margin-top: 15px;  /* Space before buttons */
+        margin-bottom: 20px; /* Space after buttons */
     }
     </style>
 """, unsafe_allow_html=True)
@@ -74,13 +89,13 @@ st_lottie(lottie_animation, height=200, key="cricket")
 
 # About the App
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.markdown("### 🎯 About the App")
+st.header("🎯 About the App")  # Used st.header() for better styling
 st.write("Crick-o-Meter is your ultimate companion for cricket statistics and analytics. Whether you're a fantasy cricket player, a data nerd, or just an ardent fan, our app gives you real-time stats, player comparisons, and predictive insights!")
 st.markdown('</div>', unsafe_allow_html=True)
 
 # Key Features
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.markdown("### 🚀 Key Features")
+st.header("🚀 Key Features")  # Used st.header() to apply styling
 st.markdown("""
 - 📊 **Player Performance Analysis**
 - 📈 **Predictive Insights for Matches**
@@ -91,16 +106,21 @@ st.markdown('</div>', unsafe_allow_html=True)
 
 # About the Creator
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.markdown("### 👨‍💻 About the Creator")
+st.header("👨‍💻 About the Creator")  # Used st.header() for better presentation
 st.write("Hi! I'm a passionate developer blending machine learning with cricket analytics. My goal is to make cricket statistics accessible and insightful for fans worldwide.")
 st.markdown('</div>', unsafe_allow_html=True)
 
-# Connect with Me (Styled Buttons)
+# Contact Section
 st.markdown('<div class="section">', unsafe_allow_html=True)
-st.markdown("### 🌐 Connect with Me")
+st.header("📞 Contact Me")  # Used st.header() instead of markdown
+
+# Button Section (Now Centered with Space)
+st.markdown('<div class="button-container">', unsafe_allow_html=True)
 st.markdown("""
 [<button class="glow-button">LinkedIn</button>](https://www.linkedin.com/in/dommeti-thoran-raj-692769191/)  
 [<button class="glow-button">GitHub</button>](https://github.com/raj2216)  
 [<button class="glow-button">Email</button>](mailto:rajbunny2216@gmail.com)  
 """, unsafe_allow_html=True)
 st.markdown('</div>', unsafe_allow_html=True)
+
+st.markdown('</div>', unsafe_allow_html=True)