54 lines
1.9 KiB
CSS
54 lines
1.9 KiB
CSS
:root {
|
|
--black: #000;
|
|
--white: #fff;
|
|
--gray-bg: #f4f4f4;
|
|
--border: 1px solid #000;
|
|
}
|
|
|
|
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
|
|
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
|
|
|
|
/* Navbar & Filter */
|
|
.navbar { display: flex; justify-content: space-between; padding: 20px 5%; border-bottom: var(--border); }
|
|
.category-group { display: flex; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }
|
|
.category-item { cursor: pointer; text-align: center; font-size: 11px; font-weight: bold; }
|
|
.square { width: 50px; height: 50px; border: var(--border); margin-bottom: 5px; }
|
|
.category-item.active .square { background: var(--black); }
|
|
|
|
/* Event Cards */
|
|
.event-list { display: flex; flex-direction: column; gap: 20px; }
|
|
.event-card {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr 150px 150px 50px;
|
|
border: var(--border);
|
|
align-items: center;
|
|
}
|
|
.event-image { height: 150px; background-size: cover; background-position: center; border-right: var(--border); }
|
|
.event-content, .event-info, .event-cta { padding: 15px; }
|
|
.tag { border: var(--border); padding: 3px 10px; border-radius: 15px; font-size: 10px; margin-right: 5px; }
|
|
.btn-primary { background: var(--black); color: var(--white); border: none; padding: 10px; width: 100%; cursor: pointer; font-weight: bold; }
|
|
|
|
/* Empty State Style */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 50px 20px;
|
|
border: 2px dashed #ccc;
|
|
background: var(--gray-bg);
|
|
margin-top: 20px;
|
|
}
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 2px solid var(--black);
|
|
padding: 12px 25px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
margin-top: 15px;
|
|
transition: 0.3s;
|
|
}
|
|
.btn-outline:hover { background: var(--black); color: var(--white); }
|
|
|
|
/* Responsive */
|
|
@media (max-width: 850px) {
|
|
.event-card { grid-template-columns: 1fr; }
|
|
.event-image { border-right: none; border-bottom: var(--border); width: 100%; }
|
|
} |