:root { --primary-color: var(--primary-color); --secondary-color: #0055a5; --bg-color: #f4f6fa; --card-bg: #ffffff; --text-color: #333333; --shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } body { font-family: 'Segoe UI', sans-serif; margin: 0; background-color: #f4f6fa; } header { background-color: var(--primary-color); color: white; padding: 20px; text-align: center; } header img { height: 50px; vertical-align: middle; margin-right: 10px; } .container { max-width: 1200px; margin: 40px auto; padding: 0 20px; } h1 { text-align: center; color: var(--primary-color); } .filter-bar { margin: 30px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .filter-bar select { padding: 10px; font-size: 16px; border-radius: 6px; border: 1px solid #ccc; } .bulletin-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; } .bulletin-item { background-color: var(--card-bg); padding: 40px 30px; border-radius: 10px; box-shadow: var(--shadow); text-align: center; } .bulletin-item img { width: 70px; height: 70px; margin-bottom: 15px; } .bulletin-item h3 { font-size: 20px; color: var(--primary-color); margin-bottom: 10px; } .bulletin-item p { font-size: 15px; color: #555; } .bulletin-item a { display: inline-block; margin-top: 15px; padding: 10px 16px; background-color: var(--primary-color); color: white; text-decoration: none; border-radius: 6px; font-size: 15px; } footer { background-color: var(--primary-color); color: white; text-align: center; padding: 20px 0; margin-top: 60px; }

NIEBC Monthly Bulletin

const monthFilter = document.getElementById("monthFilter"); const yearFilter = document.getElementById("yearFilter"); const bulletins = document.querySelectorAll(".bulletin-item"); function applyFilters() { const query = document.getElementById('searchInput').value.toLowerCase(); document.querySelectorAll('.bulletin-item').forEach(item => { const content = item.textContent.toLowerCase(); item.style.display = content.includes(query) ? 'block' : 'none'; }); } ); } monthFilter.addEventListener("change", applyFilters); yearFilter.addEventListener("change", applyFilters);