Spaces:
Sleeping
Sleeping
| 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 | |
| ) | |