Update app.py

app.py

@@ -3,24 +3,23 @@ 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 with a navy blue theme and vertical column layout
+# Custom CSS for styling the cards with navy/dark-night blue theme
 custom_css = """
     <style>
     .card-container {
         display: flex;
-        flex-direction: column;
-        align-items: center;
+        justify-content: center;
         gap: 20px;
         margin-top: 20px;
+        flex-wrap: wrap;
     }
     .card {
-        width: 100%;
-        max-width: 400px;
-        border-radius: 15px;
-        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
+        width: 350px;
+        border-radius: 12px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
         transition: transform 0.3s, box-shadow 0.3s;
         overflow: hidden;
-        background: linear-gradient(135deg, #001f3f, #004080);
+        background: linear-gradient(135deg, #1b2a49, #27476e);
         color: white;
         text-align: center;
     }
@@ -42,9 +41,9 @@ custom_css = """
     }
     .card-button a {
         display: inline-block;
-        padding: 12px 20px;
+        padding: 10px 18px;
         margin: 15px 0;
-        background-color: #ffcc00;
+        background-color: #ffa500;
         color: #1f1f1f;
         font-weight: bold;
         text-decoration: none;
@@ -52,7 +51,7 @@ custom_css = """
         transition: background-color 0.3s;
     }
     .card-button a:hover {
-        background-color: #ffaa00;
+        background-color: #e69500;
     }
     </style>
 """
@@ -60,12 +59,12 @@ custom_css = """
 # Inject the custom CSS
 st.markdown(custom_css, unsafe_allow_html=True)
 
-# Display the enhanced card layout in a vertical column structure
+# Display the card layout in a row
 st.markdown("""
     <div class="card-container">
         <div class="card">
             <div class="card-image">
-                <img src="https://via.placeholder.com/400x200" alt="AI Innovation Image">
+                <img src="https://via.placeholder.com/350x150" alt="AI Innovation Image">
             </div>
             <div class="card-title">Federal University Lokoja AI Community</div>
             <div class="card-description">
@@ -75,10 +74,10 @@ st.markdown("""
                 <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/400x200" alt="Community Events Image">
+                <img src="https://via.placeholder.com/350x150" alt="Community Events Image">
             </div>
             <div class="card-title">AI Workshops & Events</div>
             <div class="card-description">
@@ -88,10 +87,10 @@ st.markdown("""
                 <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/400x200" alt="Resources Image">
+                <img src="https://via.placeholder.com/350x150" alt="Resources Image">
             </div>
             <div class="card-title">Resources & Tools</div>
             <div class="card-description">