Newsletter
Activities Filter Menu
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Fix for dotted outline on menu items */
.newsletter-menu-link:focus {
outline: none;
}
/* Add a different focus indicator for accessibility */
.newsletter-menu-link:focus-visible {
box-shadow: 0 0 0 2px rgba(73, 160, 16, 0.5);
outline: none;
}
/* Same fix for dropdown items */
.dropdown-item:focus {
outline: none;
}
.dropdown-item:focus-visible {
box-shadow: 0 0 0 2px rgba(73, 160, 16, 0.5);
outline: none;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #F0F0F0;
padding: 20px;
margin: 0 auto;
}
/* Menu Navigation */
.menu-container {
display: flex;
justify-content: flex-start;
margin-bottom: 30px;
overflow-x: auto;
padding-bottom: 10px;
}
.menu-item {
list-style: none;
margin-right: 10px;
}
.newsletter-menu-link {
display: inline-block;
padding: 10px 25px;
background-color: #F0F0F0;
color: #333;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
font-size: 22px;
}
.newsletter-menu-link:hover {
background-color: #DEDCDC;
color: #2A2A2A;
}
.newsletter-menu-link.active {
background-color: #DEDCDC;
color: #2A2A2A;
}
/* Dropdown for Mobile */
.dropdown-container {
display: none;
position: relative;
margin-bottom: 30px;
width: 100%;
}
.nl-dropdown-button {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 12px 20px;
background-color: #e5e5e5;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
text-align: left;
}
.nl-dropdown-button::after {
content: “▼”;
font-size: 12px;
margin-left: 10px;
transition: transform 0.3s ease;
}
.nl-dropdown-button.active::after {
transform: rotate(180deg);
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 100;
margin-top: 5px;
overflow: hidden;
}
.dropdown-content.show {
display: block;
}
.dropdown-item {
padding: 12px 20px;
display: block;
text-decoration: none;
color: #333;
border-bottom: 1px solid #eee;
font-weight: 500;
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-item.active {
background-color: #f8f8f8;
color: #49a010;
font-weight: 600;
}
.dropdown-item:hover {
background-color: #f5f5f5;
}
/* Content Grid */
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
}
/* Card Styles */
.card {
background-color: #F0F0F0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
height: 100%;
}
.card:hover{
background-color: white;
}
.card-image {
height: 200px;
background-size: cover;
background-position: center;
position: relative;
}
.category-label {
position: absolute;
top: 16px;
left: 18px;
color: white;
padding: 5px 12px;
border-radius: 8px;
font-size: 18px;
padding: 5px 19px 5px 19px;
font-weight: 500;
border: #F8F9F8 1px solid;
background-color: rgba(0, 0, 0, 0.5);
}
/* Card Content */
.card-content {
padding: 15px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
color: #333;
}
.card-text {
font-size: 16px;
color: #666;
margin-bottom: 15px;
flex-grow: 1;
}
.read-more {
display: flex;
align-items: center;
color: #49a010;
text-decoration: none;
font-size: 18px;
font-weight: 600;
margin-top: auto;
}
.read-more::after {
content: “↗”;
margin-left: 15px;
font-size: 30px;
position: relative;
margin-top: -10px;
}
/* Detail View */
.detail-view {
background-color: #F0F0F0;
border-radius: 8px;
overflow: hidden;
/* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
margin-bottom: 30px;
}
.detail-image {
width: 100%;
max-height: 400px;
object-fit: cover;
}
.detail-content {
padding: 20px;
}
.detail-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
}
.detail-text {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
.back-to-grid {
display: inline-block;
margin-top: 15px;
color: #49a010;
text-decoration: none;
font-weight: 600;
font-size: 16px;
}
.back-to-grid::before {
content: “← “;
}
/* Tab Content Display Control */
.tab-content {
display: none;
}
/* Add this to your existing style section with higher specificity */
.elementor-widget-html a,
.elementor-widget-html a:link,
.elementor-widget-html a:visited {
text-decoration: none !important;
}
/* And make your existing link styles stronger */
.newsletter-menu-link, .dropdown-item, .read-more {
text-decoration: none !important;
}
/* By default, show the All tab content */
.tab-content.active {
display: block;
}
/* Responsive styles */
@media (max-width: 768px) {
.content-grid {
grid-template-columns: 1fr;
}
.menu-container {
display: none;
}
.dropdown-container {
display: block;
}
.card-title {
font-size: 22px;
}
.detail-title {
font-size: 24px;
}
}
All
Education
Sport
Skills & Development
Healthcare
Education
Inter-School Sports Meet Unites Students to Promote Teamwork and Leadership!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Sports
Outdoor Sports Activities
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sus…
Skills & Development
Communication skill
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sus…
Education
Essay writing Competition
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Sports
Inter-School Football Tournament
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Sports
Quiz Activities
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros…
Education
Inter-School Sports Meet Unites Students to Promote Teamwork and Leadership!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Education
Essay writing Competition
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Sports
Outdoor Sports Activities
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sus…
Sports
Inter-School Football Tournament
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
Sports
Quiz Activities
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros…
Skills & Development
Communication skill
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sus…
No healthcare content available at the moment
Please check back later for healthcare related activities.