Update app.py

app.py

@@ -1,27 +1,80 @@
 import streamlit as st
 
-# Title with HTML styling
+# Custom CSS for styling and animations
 st.markdown(
-    "<h1 style='text-align: center; color: black;'>Natural Language Processing</h1>",
-    unsafe_allow_html=True)
-st.caption("***Unlock the Power of Language: Bridging Communication Between Humans and Machines with NLP!...***")
-st.markdown("""
-    <div style="text-align: center;">
-        <img src="" width = 400>
+    """
+    <style>
+        @keyframes fadeIn {
+            0% { opacity: 0; transform: translateY(-20px); }
+            100% { opacity: 1; transform: translateY(0); }
+        }
+        .title {
+            text-align: center;
+            color: #2c3e50;
+            font-size: 3rem;
+            font-weight: bold;
+            animation: fadeIn 1s ease-in-out;
+        }
+        .caption {
+            text-align: center;
+            font-style: italic;
+            font-size: 1.2rem;
+            color: #7f8c8d;
+            animation: fadeIn 1.5s ease-in-out;
+        }
+        .about {
+            font-size: 1.1rem;
+            text-align: justify;
+            line-height: 1.8;
+            color: #34495e;
+            animation: fadeIn 2s ease-in-out;
+        }
+        .image-container {
+            text-align: center;
+            margin-top: 20px;
+            animation: fadeIn 2.5s ease-in-out;
+        }
+        .image-container img {
+            border-radius: 15px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+    </style>
+    """,
+    unsafe_allow_html=True,
+)
+
+# Title with CSS animation
+st.markdown("<div class='title'>Natural Language Processing</div>", unsafe_allow_html=True)
+
+# Caption with animation
+st.markdown(
+    "<div class='caption'>***Unlock the Power of Language: Bridging Communication Between Humans and Machines with NLP!***</div>",
+    unsafe_allow_html=True,
+)
+
+# Centered Image with styling
+st.markdown(
+    """
+    <div class='image-container'>
+        <img src="https://cdn-uploads.huggingface.co/production/uploads/66bde9bf3c885d04498227a0/REaH0rQy3lM6fCF0vEBtt.jpeg" alt="NLP Image" width="400">
     </div>
     """,
-    unsafe_allow_html=True)
+    unsafe_allow_html=True,
+)
 
-st.subheader(":violet[About the app]")
-st.markdown('''
-    <p style="font-size:16px; text-align:justify; line-height:1.6">
-        <b> From Words to Wonders: Mastering NLP</b>. 
-        Natural Language Processing (NLP) is where technology meets human language, turning words into powerful tools for innovation. 
-        Whether you're a curious beginner or a seasoned pro, this journey will take you from decoding basics to building smart systems like chatbots, translators, and sentiment analyzers.
-        NLP is not just about algorithms—it's about understanding, creating, and transforming how we connect with the world.
+# About the app section with CSS styling
+st.subheader(":violet[About the App]")
+st.markdown(
+    '''
+    <div class='about'>
+        <b>From Words to Wonders: Mastering NLP</b><br>
+        Natural Language Processing (NLP) is where technology meets human language, 
+        turning words into powerful tools for innovation. 
+        Whether you're a curious beginner or a seasoned pro, this journey will take you 
+        from decoding basics to building smart systems like chatbots, translators, and sentiment analyzers. 
+        NLP is not just about algorithms—it's about understanding, creating, and transforming how we connect with the world. 
         Step into the future of communication and let language lead the way!
-        
-    </p>
-''', unsafe_allow_html=True)
-
-st.markdown("<br>", unsafe_allow_html=True)
+    </div>
+    ''',
+    unsafe_allow_html=True,
+)