Create app.py

app.py

@@ -0,0 +1,71 @@
+import streamlit as st
+
+# Set page configuration
+st.set_page_config(page_title="Federal University Lokoja Community", page_icon=":school:", layout="centered")
+
+# Styling for the card
+card_style = """
+    <style>
+    .card {
+        border-radius: 15px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        transition: transform 0.3s;
+        background: linear-gradient(135deg, #ff7b54, #ffb300);
+        padding: 20px;
+        color: white;
+        text-align: center;
+        margin: 20px auto;
+        max-width: 400px;
+    }
+    .card:hover {
+        transform: scale(1.05);
+    }
+    .card-image img {
+        width: 100%;
+        border-radius: 15px 15px 0 0;
+    }
+    .card-title {
+        font-size: 1.8em;
+        margin-top: 15px;
+    }
+    .card-description {
+        margin-top: 10px;
+        font-size: 1em;
+    }
+    .card-button a {
+        display: inline-block;
+        padding: 10px 20px;
+        margin-top: 15px;
+        background-color: #007e8e;
+        color: white;
+        border-radius: 8px;
+        text-decoration: none;
+        transition: background-color 0.3s;
+    }
+    .card-button a:hover {
+        background-color: #005f66;
+    }
+    </style>
+"""
+
+# Inject custom CSS
+st.markdown(card_style, unsafe_allow_html=True)
+
+# Display card
+st.markdown(
+    """
+    <div class="card">
+        <div class="card-image">
+            <img src="https://via.placeholder.com/400x200" alt="Community Image">
+        </div>
+        <div class="card-title">Federal University Lokoja Community</div>
+        <div class="card-description">
+            Join our growing community at Hugging Face where we explore AI, NLP, and machine learning innovations.
+        </div>
+        <div class="card-button">
+            <a href="https://huggingface.co/" target="_blank">Join Now</a>
+        </div>
+    </div>
+    """,
+    unsafe_allow_html=True
+)