Spaces:
Sleeping
Sleeping
File size: 3,475 Bytes
af6cc7d 842e83b af6cc7d 3a46b78 842e83b af6cc7d 842e83b 3a46b78 842e83b 3a46b78 842e83b af6cc7d 3a46b78 842e83b 3a46b78 af6cc7d 842e83b af6cc7d 842e83b af6cc7d 982a557 842e83b af6cc7d 842e83b af6cc7d 3a46b78 842e83b 3a46b78 842e83b af6cc7d 842e83b af6cc7d 3a46b78 af6cc7d 842e83b af6cc7d 3a46b78 842e83b 3a46b78 842e83b 982a557 842e83b 3a46b78 842e83b 982a557 842e83b 3a46b78 842e83b af6cc7d 19cade7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
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 with navy/dark-night blue theme
custom_css = """
<style>
.card-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.card {
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, #1b2a49, #27476e);
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: 10px 18px;
margin: 15px 0;
background-color: #ffa500;
color: #1f1f1f;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.card-button a:hover {
background-color: #e69500;
}
</style>
"""
# Inject the custom CSS
st.markdown(custom_css, unsafe_allow_html=True)
# 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/350x150" 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/350x150" 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/350x150" 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) |