Update app.py

app.py

@@ -3,23 +3,24 @@ import streamlit as st
 # Set page configuration
 st.set_page_config(page_title="Federal University Lokoja AI Community", page_icon=":sparkles:", layout="centered")
 
-# Custom CSS for styling the cards
+# Custom CSS for styling with a navy blue theme and vertical column layout
 custom_css = """
     <style>
     .card-container {
         display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
+        flex-direction: column;
+        align-items: center;
         gap: 20px;
         margin-top: 20px;
     }
     .card {
-        width: 350px;
+        width: 100%;
+        max-width: 400px;
         border-radius: 15px;
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
         transition: transform 0.3s, box-shadow 0.3s;
         overflow: hidden;
-        background: linear-gradient(135deg, #2a9df4, #1f8baf);
+        background: linear-gradient(135deg, #001f3f, #004080);
         color: white;
         text-align: center;
     }
@@ -32,7 +33,7 @@ custom_css = """
         height: auto;
     }
     .card-title {
-        font-size: 2em;
+        font-size: 1.8em;
         margin: 15px 0;
     }
     .card-description {
@@ -59,12 +60,12 @@ custom_css = """
 # Inject the custom CSS
 st.markdown(custom_css, unsafe_allow_html=True)
 
-# Display the enhanced card layout
+# Display the enhanced card layout in a vertical column structure
 st.markdown("""
     <div class="card-container">
         <div class="card">
             <div class="card-image">
-                <img src="https://via.placeholder.com/350x150" alt="AI Innovation Image">
+                <img src="https://via.placeholder.com/400x200" alt="AI Innovation Image">
             </div>
             <div class="card-title">Federal University Lokoja AI Community</div>
             <div class="card-description">
@@ -73,9 +74,11 @@ st.markdown("""
             <div class="card-button">
                 <a href="https://huggingface.co/Federal-University-Lokoja" target="_blank">Join Us Now</a>
             </div>
-            <!-- -->
+        </div>
+        
+        <div class="card">
             <div class="card-image">
-                <img src="https://via.placeholder.com/350x150" alt="Community Events Image">
+                <img src="https://via.placeholder.com/400x200" alt="Community Events Image">
             </div>
             <div class="card-title">AI Workshops & Events</div>
             <div class="card-description">
@@ -84,9 +87,11 @@ st.markdown("""
             <div class="card-button">
                 <a href="https://events.example.com" target="_blank">Discover Events</a>
             </div>
-            #
+        </div>
+
+        <div class="card">
             <div class="card-image">
-                <img src="https://via.placeholder.com/350x150" alt="Resources Image">
+                <img src="https://via.placeholder.com/400x200" alt="Resources Image">
             </div>
             <div class="card-title">Resources & Tools</div>
             <div class="card-description">