Spaces:
Sleeping
Sleeping
File size: 3,886 Bytes
af6cc7d b802651 af6cc7d b802651 af6cc7d b802651 842e83b 3a46b78 b802651 842e83b b802651 842e83b 3a46b78 842e83b af6cc7d b802651 3a46b78 842e83b 3a46b78 af6cc7d b802651 af6cc7d b802651 842e83b af6cc7d 842e83b af6cc7d b802651 af6cc7d 842e83b b802651 af6cc7d 3a46b78 842e83b 3a46b78 842e83b af6cc7d 842e83b af6cc7d 3a46b78 af6cc7d 842e83b b802651 af6cc7d b802651 842e83b b802651 842e83b 2c4947e 842e83b b802651 842e83b 982a557 842e83b e524582 842e83b b802651 842e83b b802651 842e83b e524582 842e83b 982a557 842e83b e524582 842e83b b802651 842e83b e524582 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 103 104 105 106 |
import streamlit as st
# Set page configuration for a wide layout
st.set_page_config(page_title="Federal University Lokoja AI Community", page_icon=":sparkles:", layout="wide")
# Custom CSS for styling the cards with a navy/dark-night blue theme
row_css = """
<style>
.row-container {
display: flex;
justify-content: center;
align-items: stretch;
gap: 20px;
padding: 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.card {
flex: 1;
max-width: 300px;
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;
margin: 10px;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}
.card-image img {
width: 100%;
height: auto;
}
.card-title {
font-size: 1.6em;
margin-top: 15px;
}
.card-description {
padding: 10px 15px;
font-size: 1em;
}
.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(row_css, unsafe_allow_html=True)
# Display the three cards in a single row
st.markdown("""
<div class="row-container">
<div class="card">
<div class="card-image">
<img src="https://media.istockphoto.com/id/1452604857/photo/businessman-touching-the-brain-working-of-artificial-intelligence-automation-predictive.jpg?b=1&s=612x612&w=0&k=20&c=5LyslY4gssQ99CVUrUB2K75Mx2TFgnkxboAqB38OPUQ=" alt="AI Innovation Image">
</div>
<div class="card-title">Federal University Lokoja AI Community</div>
<div class="card-description">
Join our vibrant AI community to connect with researchers and enthusiasts in machine learning and AI.
</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://images.pexels.com/photos/8348468/pexels-photo-8348468.jpeg?auto=compress&cs=tinysrgb&w=600" alt="Workshops and Events">
</div>
<div class="card-title">Workshops & Events</div>
<div class="card-description">
Participate in AI workshops, hackathons, and networking events to hone your skills and connect with others.
</div>
<div class="card-button">
<a href="https://huggingface.co/Federal-University-Lokoja" target="_blank">Learn More</a>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://media.istockphoto.com/id/1143911080/photo/binary-wall.jpg?b=1&s=612x612&w=0&k=20&c=DoUO9RCwpespaVl7nqBgd8Yxehcz8Lqxr51xyWL2Jkk=" alt="Resources">
</div>
<div class="card-title">Resources & Tools</div>
<div class="card-description">
Access state-of-the-art AI tools, datasets, and resources curated for your learning and projects.
</div>
<div class="card-button">
<a href="https://huggingface.co/Federal-University-Lokoja" target="_blank">View Resources</a>
</div>
</div>
</div>
""", unsafe_allow_html=True) |