Spaces:
Sleeping
Sleeping
| 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 = """ | |
| <style> | |
| .card-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .card { | |
| 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, #001f3f, #004080); | |
| color: white; | |
| text-align: center; | |
| } | |
| .card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); | |
| } | |
| .card-image img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .card-title { | |
| font-size: 1.8em; | |
| margin: 15px 0; | |
| } | |
| .card-description { | |
| font-size: 1em; | |
| padding: 10px 15px; | |
| } | |
| .card-button a { | |
| display: inline-block; | |
| padding: 12px 20px; | |
| margin: 15px 0; | |
| background-color: #ffcc00; | |
| color: #1f1f1f; | |
| font-weight: bold; | |
| text-decoration: none; | |
| border-radius: 5px; | |
| transition: background-color 0.3s; | |
| } | |
| .card-button a:hover { | |
| background-color: #ffaa00; | |
| } | |
| </style> | |
| """ | |
| # Inject the custom CSS | |
| st.markdown(custom_css, unsafe_allow_html=True) | |
| # 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/400x200" alt="AI Innovation Image"> | |
| </div> | |
| <div class="card-title">Federal University Lokoja AI Community</div> | |
| <div class="card-description"> | |
| Connect, collaborate, and innovate with fellow AI enthusiasts, researchers, and experts. Explore the latest in machine learning and AI developments! | |
| </div> | |
| <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/400x200" alt="Community Events Image"> | |
| </div> | |
| <div class="card-title">AI Workshops & Events</div> | |
| <div class="card-description"> | |
| Participate in hands-on workshops, hackathons, and seminars led by experts. Network and learn new AI skills together! | |
| </div> | |
| <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/400x200" alt="Resources Image"> | |
| </div> | |
| <div class="card-title">Resources & Tools</div> | |
| <div class="card-description"> | |
| Access curated datasets, state-of-the-art models, and tutorials to help you excel in your AI journey. | |
| </div> | |
| <div class="card-button"> | |
| <a href="https://resources.example.com" target="_blank">View Resources</a> | |
| </div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |