Little Coders
Helps children build logical thinking and digital literacy with stories, games, and creative ScratchJr projects—all while having fun!
Little Brain Builders
A fun and hands-on way for children to explore big ideas and build critical thinking that sparks curiosity and logical problem-solving.
Little Playmakers
Fuel your child’s imagination through outdoor play, movement, and hands-on creative activities that builds confidence and coordination.
Little Communicators
From shy to expressive! This programme is a joyful way to help your child find their voice through storytelling, movement, songs, and drama.
Little Entrepreneurs
A fun child-led programme to financial literacy, confidence, and leadership with hands-on, real-life inspired activities and role-playing.
Little Master Chefs
A deliciously fun way for your child to explore food, nutrition, culture, and other practical skills through the joy of cooking!
Little S.D.G. Warriors
A hands-on programme based on the UN Sustainable Development Goals (SDGs) to nurture eco-awareness, care for the planet, and responsible thinking in young minds.
Little Digital Citizens
Let your child explore technology and the digital world safely while building critical thinking to become more confident, respectful digital explorers!
HTML
<div class="facilities-body" data-active="1">
<div class="facilities-item" data-facilities="1" data-move="left">
<div class="facilities-icon">
<img class="scale-with-grid" src="/wp-content/uploads/2026/01/Little_coders.png" alt="Coder">
</div>
<div class="facilities-desc text-white">
<h3 class="weight-600 font-24">
Little Coders </h3>
<p>Helps children build logical thinking and digital literacy with stories, games, and creative ScratchJr projects—all while having fun!</p>
</div>
</div>
<div class="facilities-item" data-facilities="2" data-move="left">
<div class="facilities-icon">
<img class="scale-with-grid" src="/wp-content/uploads/2026/01/Little_brain_builders.png" alt="Brain Builders">
</div>
<div class="facilities-desc text-white">
<h3 class="weight-600 font-24">
Little Brain Builders </h3>
<p>A fun and hands-on way for children to explore big ideas and build critical thinking that sparks curiosity and logical problem-solving.</p>
</div>
</div>
<div class="facilities-item" data-facilities="3" data-move="right">
<div class="facilities-icon">
<img class="scale-with-grid" src="/wp-content/uploads/2026/01/Little_playmakers.png" alt="Playmaker">
</div>
<div class="facilities-desc text-white">
<h3 class="weight-600 font-24">
Little Playmakers </h3>
<p>Fuel your child’s imagination through outdoor play, movement, and hands-on creative activities that builds confidence and coordination.</p>
</div>
</div>
<div class="facilities-item" data-facilities="4" data-move="right">
<div class="facilities-icon">
<img class="scale-with-grid" src="/wp-content/uploads/2026/01/Little_Communicaters.png" alt="Communicator">
</div>
<div class="facilities-desc text-white">
<h3 class="weight-600 font-24">
Little Communicators </h3>
<p>From shy to expressive! This programme is a joyful way to help your child find their voice through storytelling, movement, songs, and drama.</p>
</div>
</div>
<div class="facilities-item active" data-facilities="5" data-move="left">
<div class="facilities-icon">
<img class="scale-with-grid" src="/wp-content/uploads/2026/01/Little_entreprenuew.png" alt="Entrepreneurs">
</div>
<div class="facilities-desc text-white">
<h3 class="weight-600 font-24">
Little Entrepreneurs </h3>
<p>A fun child-led programme to financial literacy, confidence, and leadership with hands-on, real-life inspired activities and role-playing.</p>
</div>
</div>
<div class="facilities-item" data-facilities="6" data-move="left">
<div class="facilities-icon">
<img class="scale-with-grid" src="/wp-content/uploads/2026/01/little_chef_masters.png" alt="Master Chef">
</div>
<div class="facilities-desc text-white">
<h3 class="weight-600 font-24">
Little Master Chefs </h3>
<p>A deliciously fun way for your child to explore food, nutrition, culture, and other practical skills through the joy of cooking!</p>
</div>
</div>
<div class="facilities-item" data-facilities="7" data-move="right">
<div class="facilities-icon">
<img class="scale-with-grid" src="/wp-content/uploads/2026/01/Little_S.D.G_Warriors.png" alt="Warrior">
</div>
<div class="facilities-desc text-white">
<h3 class="weight-600 font-24">
Little S.D.G. Warriors </h3>
<p>A hands-on programme based on the UN Sustainable Development Goals (SDGs) to nurture eco-awareness, care for the planet, and responsible thinking in young minds.</p>
</div>
</div>
<div class="facilities-item" data-facilities="8" data-move="right">
<div class="facilities-icon">
<img class="scale-with-grid" src="/wp-content/uploads/2026/01/Little_Digital_citizen.png" alt="Digital Citizen">
</div>
<div class="facilities-desc text-white">
<h3 class="weight-600 font-24">
Little Digital Citizens </h3>
<p>Let your child explore technology and the digital world safely while building critical thinking to become more confident, respectful digital explorers!</p>
</div>
</div>
</div>
CSS
.test {
padding: 0;
}
.not-fac .facilities-desc.text-white {
text-align: center;
}
.not-fac {
max-width: 80%;
margin: 0 auto;
padding-top: 50px;
}
.facilities-container {
text-align: center;
padding: 10vw 16vw 14vw;
}
.facilities-icon img {
width: 40%;
display: block;
margin: auto;
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
.facilities-icon {
margin: 1.5vw 0 2.5vw;
}
.facilities-desc > :nth-last-child(1) {
margin-bottom: 0;
}
.facilities-body {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.facilities-item.active {
transform: rotate(-10.614deg);
}
.facilities-item {
width: calc(99.99% / 4);
background-color: #FF6F20;
border-radius: 3vw;
padding: 2vw 1.9vw 2.5vw;
transition: .3s ease-in-out all;
transform-origin: 20% 74%;
}
.facilities-item.active[data-move="right"] {
transform: rotate(10.614deg);
}
.facilities-item[data-move="right"] {
transform-origin: 80% 74%;
}
.facilities-item:nth-child(4n-2) {
background-color: #FFAF01;
}
.facilities-item:nth-child(4n-1) {
background-color: #A445A1;
}
.facilities-item:nth-child(4n) {
background-color: #01AB52;
}
.facilities-item:nth-child(8n-3) {
background-color: #01AB52;
}
.facilities-item:nth-child(8n-2) {
background-color: #A445A1;
}
.facilities-item:nth-child(8n-1) {
background-color: #FF6F20;
}
.facilities-item:nth-child(8n) {
background-color: #FFAF01;
}
JS
<script>
jQuery(document).ready(function( $ ){
function generateFacilitiesStyles() {
const items = $('.facilities-item');
if (!items.length) return;
const total = items.length;
let css = '';
for (let n = 1; n <= total; n++) {
let target, translate;
// pattern based on your example:
// data-active = 2,6,10,... → target previous → -10%
// data-active = 3,7,11,... → target next → 10%
if ((n - 2) % 4 === 0) { // 2,6,10,...
target = n - 1;
translate = '-10%';
} else if ((n - 3) % 4 === 0) { // 3,7,11,...
target = n + 1;
translate = '10%';
if (target > total) continue;
} else {
continue; // skip all other n
}
css += `[data-active="${n}"] [data-facilities="${target}"] { transform: translateX(${translate}); }\n`;
}
$('<style>').text(css).appendTo('head');
}
generateFacilitiesStyles();
$('.facilities-item').each(function (i) {
const n = i + 1;
// assign data-facilities
$(this).attr('data-facilities', n);
// determine left or right
const move = ((n - 1) % 4 < 2) ? 'left' : 'right';
// assign data-move
$(this).attr('data-move', move);
});
$('.facilities-item').hover(function () {
// remove active from all siblings
$(this).siblings('.facilities-item').removeClass('active');
// add active to hovered item
$(this).addClass('active');
const val = $(this).attr('data-facilities');
// set parent data-active = this item's data-facilities
$(this).parent().attr('data-active', val);
});
});
</script>