{"id":39,"date":"2026-04-18T16:33:01","date_gmt":"2026-04-18T16:33:01","guid":{"rendered":"https:\/\/lab.rwb.my.id\/paud\/?page_id=39"},"modified":"2026-04-19T09:00:30","modified_gmt":"2026-04-19T09:00:30","slug":"galeri","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/paud\/galeri\/","title":{"rendered":"Galeri"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Galeri Kegiatan - PAUD Nurul Fikri<\/title>\n\n <!-- SEO & Meta Tags -->\n <meta name=\"description\" content=\"Lihat galeri foto-foto kegiatan, fasilitas, dan momen berharga anak-anak di PAUD Nurul Fikri. Abadikan tawa dan belajar mereka bersama kami.\">\n <meta property=\"og:title\" content=\"Galeri Kegiatan - PAUD Nurul Fikri\">\n <meta property=\"og:description\" content=\"Lihat galeri foto-foto kegiatan, fasilitas, dan momen berharga anak-anak di PAUD Nurul Fikri.\">\n <meta property=\"og:url\" content=\"https:\/\/paud-nurulfikri.com\/galeri\/\">\n <meta property=\"og:type\" content=\"website\">\n \n <!-- Poppins Font -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n \n <!-- Font Awesome Icons -->\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- GLOBAL STYLES & VARIABLES --- *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n :root {\n --primary-color: #FF9AA2;\n --secondary-color: #B4E7CE;\n --accent-color: #FFF3B0;\n --dark-bg: #0a192f;\n --glass-bg: rgba(255, 255, 255, 0.1);\n --glass-border: rgba(255, 255, 255, 0.2);\n --text-light: #ffffff;\n --text-gray: #a8b2d1;\n }\n\n body {\n font-family: 'Poppins', sans-serif;\n background: linear-gradient(135deg, #0a192f 0%, #172a45 50%, #0a192f 100%);\n color: var(--text-light);\n overflow-x: hidden;\n position: relative;\n padding-top: 80px;\n }\n\n \/* --- ANIMATED BACKGROUND --- *\/\n .animated-bg {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n }\n\n .particles {\n position: absolute;\n width: 100%;\n height: 100%;\n overflow: hidden;\n z-index: 0;\n }\n\n .floating-element {\n position: absolute;\n font-size: 2rem;\n opacity: 0.7;\n animation: float-up 20s infinite linear;\n pointer-events: none;\n }\n\n .balloon-red { filter: hue-rotate(-50deg) saturate(1.5); }\n .balloon-yellow { filter: hue-rotate(20deg) saturate(2) brightness(1.2); }\n .balloon-green { filter: hue-rotate(90deg) saturate(1.5); }\n .balloon-blue { filter: hue-rotate(180deg) saturate(1.5); }\n\n @keyframes float-up {\n 0% { transform: translateY(100vh) rotate(-5deg); opacity: 0; }\n 10% { opacity: 0.7; }\n 90% { opacity: 0.7; }\n 100% { transform: translateY(-100vh) rotate(5deg); opacity: 0; }\n }\n \n \/* --- HEADER --- *\/\n header {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n padding: 1rem 2rem;\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-bottom: 1px solid var(--glass-border);\n z-index: 1000;\n transition: all 0.3s ease;\n }\n\n header.scrolled {\n padding: 0.7rem 2rem;\n background: rgba(10, 25, 47, 0.95);\n }\n\n .header-container {\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .logo-section {\n display: flex;\n align-items: center;\n gap: 1rem;\n }\n\n .logo-section a {\n display: flex;\n align-items: center;\n gap: 1rem;\n text-decoration: none;\n color: inherit;\n }\n\n .logo {\n width: 50px;\n height: 50px;\n background: linear-gradient(135deg, var(--primary-color), var(--accent-color));\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 1.5rem;\n animation: pulse 2s infinite;\n overflow: hidden;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n .site-title {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n \/* --- NAVIGATION (SAMA DENGAN BERANDA) --- *\/\n nav {\n display: flex;\n align-items: center;\n gap: 2rem;\n }\n\n .nav-list {\n display: flex;\n list-style: none;\n gap: 2rem;\n }\n\n .nav-link,\n .dropdown-toggle {\n color: var(--text-gray);\n text-decoration: none;\n transition: all 0.3s ease;\n position: relative;\n padding: 0.5rem 0;\n font-weight: 500;\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n cursor: pointer;\n background: none;\n border: none;\n font-family: 'Poppins', sans-serif;\n font-size: 1rem;\n }\n\n .nav-link::after,\n .dropdown-toggle::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--primary-color);\n transition: width 0.3s ease;\n }\n\n .nav-link:hover,\n .dropdown-toggle:hover {\n color: var(--text-light);\n }\n\n .nav-link:hover::after,\n .dropdown-toggle:hover::after {\n width: 100%;\n }\n\n .nav-link.active-nav { color: var(--text-light); }\n .nav-link.active-nav::after { width: 100%; }\n .dropdown-toggle.active-nav { color: var(--text-light); }\n .dropdown-toggle.active-nav::after { width: 100%; }\n\n .dropdown-toggle .fa-chevron-down {\n font-size: 0.6rem;\n transition: transform 0.3s ease;\n }\n\n \/* --- DROPDOWN MENU (DESKTOP) --- *\/\n .dropdown { position: relative; }\n\n .dropdown-menu {\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(10px);\n background: rgba(10, 25, 47, 0.95);\n backdrop-filter: blur(15px);\n -webkit-backdrop-filter: blur(15px);\n border: 1px solid var(--glass-border);\n border-radius: 15px;\n padding: 0.6rem 0;\n min-width: 230px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n list-style: none;\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);\n z-index: 100;\n }\n\n .dropdown-menu::before {\n content: '';\n position: absolute;\n top: -6px;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n width: 12px;\n height: 12px;\n background: rgba(10, 25, 47, 0.95);\n border-top: 1px solid var(--glass-border);\n border-left: 1px solid var(--glass-border);\n }\n\n .dropdown:hover .dropdown-menu {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n .dropdown:hover .dropdown-toggle .fa-chevron-down {\n transform: rotate(180deg);\n }\n\n .dropdown-menu li a {\n display: flex;\n align-items: center;\n gap: 0.7rem;\n padding: 0.7rem 1.4rem;\n color: var(--text-gray);\n text-decoration: none;\n transition: all 0.3s ease;\n font-size: 0.9rem;\n font-weight: 400;\n white-space: nowrap;\n }\n\n .dropdown-menu li a i {\n width: 18px;\n text-align: center;\n font-size: 0.85rem;\n color: var(--primary-color);\n transition: all 0.3s ease;\n }\n\n .dropdown-menu li a:hover {\n color: var(--text-light);\n background: rgba(255, 154, 162, 0.08);\n }\n\n .dropdown-menu li a:hover i {\n color: var(--secondary-color);\n transform: scale(1.15);\n }\n\n .dropdown-menu li a.active-sub {\n color: var(--primary-color);\n font-weight: 500;\n }\n\n .new-badge {\n background: linear-gradient(135deg, var(--primary-color), #ff6b6b);\n color: var(--dark-bg);\n font-size: 0.6rem;\n padding: 0.15rem 0.5rem;\n border-radius: 50px;\n font-weight: 700;\n margin-left: auto;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n animation: badge-pulse 2s infinite;\n }\n\n @keyframes badge-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n\n .dropdown-menu .menu-separator {\n height: 1px;\n background: var(--glass-border);\n margin: 0.3rem 1rem;\n }\n\n \/* --- HAMBURGER --- *\/\n .hamburger {\n display: none;\n flex-direction: column;\n cursor: pointer;\n gap: 4px;\n }\n\n .hamburger span {\n width: 25px;\n height: 3px;\n background: var(--primary-color);\n transition: all 0.3s ease;\n }\n\n .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }\n .hamburger.active span:nth-child(2) { opacity: 0; }\n .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }\n\n \/* --- MAIN CONTENT --- *\/\n main {\n padding: 4rem 2rem;\n position: relative;\n z-index: 2;\n }\n .gallery-container {\n max-width: 1200px;\n margin: 0 auto;\n }\n .page-title {\n text-align: center;\n font-size: 3rem;\n margin-bottom: 1rem;\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .page-subtitle {\n text-align: center;\n font-size: 1.2rem;\n color: var(--text-gray);\n margin-bottom: 3rem;\n }\n\n \/* --- GALLERY FILTERS --- *\/\n .gallery-filters {\n display: flex;\n justify-content: center;\n margin-bottom: 3rem;\n flex-wrap: wrap;\n gap: 1rem;\n }\n .gallery-filter {\n padding: 0.8rem 1.5rem;\n background: var(--glass-bg);\n border: 1px solid var(--glass-border);\n border-radius: 50px;\n color: var(--text-gray);\n cursor: pointer;\n transition: all 0.3s ease;\n font-family: 'Poppins', sans-serif;\n font-weight: 500;\n }\n .gallery-filter.active {\n background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));\n color: var(--dark-bg);\n border-color: transparent;\n }\n\n \/* --- GALLERY GRID --- *\/\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n }\n .gallery-item {\n opacity: 0;\n transform: scale(0.8);\n animation: fade-in-scale 0.5s ease forwards;\n }\n .gallery-item:nth-child(1) { animation-delay: 0.1s; }\n .gallery-item:nth-child(2) { animation-delay: 0.2s; }\n .gallery-item:nth-child(3) { animation-delay: 0.3s; }\n .gallery-item:nth-child(4) { animation-delay: 0.4s; }\n .gallery-item:nth-child(5) { animation-delay: 0.5s; }\n .gallery-item:nth-child(6) { animation-delay: 0.6s; }\n .gallery-item:nth-child(7) { animation-delay: 0.7s; }\n .gallery-item:nth-child(8) { animation-delay: 0.8s; }\n .gallery-item:nth-child(9) { animation-delay: 0.9s; }\n\n @keyframes fade-in-scale {\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n \/* --- GALLERY CARD STYLES --- *\/\n .gallery-card {\n background: var(--glass-bg);\n backdrop-filter: blur(10px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n overflow: hidden;\n transition: all 0.3s ease;\n position: relative;\n }\n .gallery-card:hover {\n transform: translateY(-10px);\n border-color: var(--primary-color);\n }\n .gallery-image {\n width: 100%;\n height: 250px;\n object-fit: cover;\n display: block;\n }\n .gallery-details {\n padding: 1.5rem;\n }\n .gallery-details h3 {\n font-size: 1.3rem;\n margin-bottom: 0.5rem;\n color: var(--primary-color);\n }\n .gallery-details p {\n color: var(--text-gray);\n font-size: 0.9rem;\n }\n\n \/* --- FLIP CARD FOR 'KEGIATAN ANAK' --- *\/\n .gallery-card.flip-card {\n background-color: transparent;\n perspective: 1000px;\n }\n .gallery-card.flip-card .gallery-inner {\n position: relative;\n width: 100%;\n height: 100%;\n text-align: center;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n }\n .gallery-card.flip-card:hover .gallery-inner {\n transform: rotateY(180deg);\n }\n .gallery-card.flip-card .gallery-front, .gallery-card.flip-card .gallery-back {\n position: absolute;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n border-radius: 20px;\n overflow: hidden;\n }\n .gallery-card.flip-card .gallery-front {\n background: var(--glass-bg);\n color: var(--dark-bg);\n }\n .gallery-card.flip-card .gallery-back {\n background: var(--glass-bg);\n color: var(--text-light);\n transform: rotateY(180deg);\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n padding: 2rem;\n }\n .gallery-card.flip-card .gallery-back img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .gallery-card.flip-card .gallery-details {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(10, 25, 47, 0.9), transparent);\n padding: 2rem 1.5rem 1.5rem;\n }\n\n \/* --- FOOTER --- *\/\n footer { padding: 3rem 2rem 1.5rem; background: rgba(10, 25, 47, 0.9); border-top: 1px solid var(--glass-border); position: relative; z-index: 2; }\n .footer-content { max-width: 1200px; margin: 0 auto; text-align: center; }\n .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }\n .social-links a { width: 40px; height: 40px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-gray); transition: all 0.3s ease; }\n .social-links a:hover { background: var(--primary-color); color: var(--dark-bg); transform: translateY(-3px); }\n .footer-text { color: var(--text-gray); margin-bottom: 1rem; }\n .credit { font-size: 0.9rem; color: var(--text-gray); text-decoration: none; display: inline-block; }\n \n .neon-text {\n color: rgba(255, 255, 255, 0.8);\n text-decoration: none;\n animation: neon-blink 2s infinite;\n }\n @keyframes neon-blink { \n 0%, 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4); opacity: 1; } \n 50% { text-shadow: 0 0 2px rgba(255, 255, 255, 0.4), 0 0 4px rgba(255, 255, 255, 0.3), 0 0 6px rgba(255, 255, 255, 0.2); opacity: 0.8; } \n }\n\n \/* --- HIDDEN CLASS --- *\/\n .mobile-hidden {\n display: none !important;\n }\n\n \/* --- MOBILE RESPONSIVE --- *\/\n @media (max-width: 768px) {\n nav { \n position: fixed; \n top: 70px; \n left: -100%; \n width: 100%; \n height: auto;\n max-height: calc(100vh - 70px); \n overflow-y: auto; \n background: #0a192f;\n flex-direction: column; \n padding: 0; \n gap: 0;\n transition: left 0.3s ease; \n justify-content: flex-start;\n align-items: stretch;\n }\n nav.active { left: 0; }\n\n .nav-list {\n flex-direction: column;\n gap: 0;\n width: 100%;\n }\n\n .nav-list > li {\n width: 100%;\n }\n\n .nav-link,\n .dropdown-toggle {\n padding: 1rem 1.2rem;\n width: 100%;\n justify-content: space-between;\n font-size: 0.95rem;\n border-bottom: 1px solid rgba(255,255,255,0.06);\n }\n\n .nav-link::after,\n .dropdown-toggle::after {\n display: none;\n }\n\n .dropdown-menu {\n position: static !important;\n transform: none !important;\n left: auto !important;\n right: auto !important;\n top: auto !important;\n background: #071428 !important;\n backdrop-filter: none !important;\n -webkit-backdrop-filter: none !important;\n border: none !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n padding: 0 !important;\n min-width: 100% !important;\n width: 100% !important;\n opacity: 1 !important;\n visibility: visible !important;\n display: none !important;\n }\n\n .dropdown-menu::before {\n display: none !important;\n }\n\n .dropdown.open .dropdown-menu {\n display: block !important;\n }\n\n .dropdown.open .dropdown-toggle {\n color: var(--primary-color) !important;\n }\n\n .dropdown.open .dropdown-toggle .fa-chevron-down {\n transform: rotate(180deg);\n }\n\n .dropdown-menu li a {\n display: flex !important;\n align-items: center !important;\n padding: 0.9rem 1.2rem 0.9rem 2.5rem !important;\n font-size: 0.9rem !important;\n color: #d0d8eb !important;\n background: none !important;\n border-left: 3px solid rgba(255,255,255,0.08) !important;\n border-bottom: 1px solid rgba(255,255,255,0.04) !important;\n margin: 0 !important;\n width: 100% !important;\n white-space: normal !important;\n text-decoration: none !important;\n gap: 0.7rem !important;\n transition: all 0.2s ease !important;\n }\n\n .dropdown-menu li a:hover,\n .dropdown-menu li a:active {\n color: #ffffff !important;\n background: rgba(255, 154, 162, 0.08) !important;\n border-left-color: var(--primary-color) !important;\n }\n\n .dropdown-menu li a.active-sub {\n color: var(--primary-color) !important;\n font-weight: 500 !important;\n }\n\n .dropdown-menu li a i {\n color: var(--primary-color) !important;\n width: 18px !important;\n min-width: 18px !important;\n text-align: center !important;\n font-size: 0.85rem !important;\n transform: none !important;\n }\n\n .dropdown-menu .menu-separator {\n height: 1px !important;\n background: rgba(255,255,255,0.06) !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n\n .new-badge {\n font-size: 0.55rem !important;\n padding: 0.12rem 0.45rem !important;\n margin-left: auto !important;\n }\n\n .mobile-menu-credit {\n display: block !important;\n font-size: 0.7rem;\n padding: 1rem 1.2rem;\n width: 100%;\n text-align: center;\n border-top: 1px solid rgba(255,255,255,0.06);\n }\n\n .hamburger { display: flex; }\n .site-title { font-size: 1.2rem; }\n body { padding-top: 70px; }\n main { padding: 2rem 1rem; }\n .page-title { font-size: 1.8rem; margin-bottom: 0.5rem; }\n .page-subtitle { font-size: 1rem; margin-bottom: 2rem; }\n .gallery-filters { gap: 0.5rem; margin-bottom: 2rem; }\n .gallery-filter { font-size: 0.85rem; padding: 0.6rem 1.1rem; }\n .gallery-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n .gallery-details h3 { font-size: 1.1rem; }\n .gallery-details p { font-size: 0.8rem; }\n footer { padding: 2rem 1rem 1rem; }\n .footer-text { font-size: 0.85rem; }\n .credit { font-size: 0.75rem; }\n }\n <\/style>\n<\/head>\n<body>\n\n <!-- Animated Background -->\n <div class=\"animated-bg\">\n <div class=\"particles\" id=\"particles\"><\/div>\n <\/div>\n\n <!-- Header -->\n <header id=\"header\">\n <div class=\"header-container\">\n <div class=\"logo-section\">\n <a href=\"..\/\">\n <div class=\"logo\">\n <i class=\"fa-solid fa-graduation-cap\" style=\"color: white;\"><\/i>\n <\/div>\n <div class=\"site-title\">PAUD Nurul Fikri<\/div>\n <\/a>\n <\/div>\n <nav id=\"nav\">\n <ul class=\"nav-list\">\n <li>\n <a href=\"..\/\" class=\"nav-link\">Beranda<\/a>\n <\/li>\n <li class=\"dropdown\">\n <button class=\"dropdown-toggle\" type=\"button\">\n Tentang Kami\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/button>\n <ul class=\"dropdown-menu\">\n <li>\n <a href=\"..\/profile\/\">\n <i class=\"fas fa-user-graduate\"><\/i>\n Profile\n <\/a>\n <\/li>\n <li>\n <a href=\"..\/fasilitas\/\">\n <i class=\"fas fa-school\"><\/i>\n Fasilitas\n <\/a>\n <\/li>\n <\/ul>\n <\/li>\n <li class=\"dropdown\">\n <button class=\"dropdown-toggle active-nav\" type=\"button\">\n Kegiatan\n <i class=\"fas fa-chevron-down\"><\/i>\n <\/button>\n <ul class=\"dropdown-menu\">\n <li>\n <a href=\"..\/program-kami\/\">\n <i class=\"fas fa-book-open\"><\/i>\n Program Kami\n <\/a>\n <\/li>\n <li>\n <a href=\".\/\" class=\"active-sub\">\n <i class=\"fas fa-images\"><\/i>\n Galeri\n <\/a>\n <\/li>\n <li class=\"menu-separator\"><\/li>\n <li>\n <a href=\"https:\/\/lab.rwb.my.id\/paud\/game-edukasi\/\" target=\"_blank\">\n <i class=\"fas fa-gamepad\"><\/i>\n Game Edukasi\n <span class=\"new-badge\">Baru!<\/span>\n <\/a>\n <\/li>\n <\/ul>\n <\/li>\n <li>\n <a href=\"..\/kontak-pendaftaran\/\" class=\"nav-link\">Kontak & Pendaftaran<\/a>\n <\/li>\n <\/ul>\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"mobile-menu-credit mobile-hidden neon-text\">\ud83d\udca1Proudly\ud83d\udc23by Rudi Web Builder<\/a>\n <\/nav>\n <div class=\"hamburger\" id=\"hamburger\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/div>\n <\/div>\n <\/header>\n\n <!-- Main Content -->\n <main>\n <div class=\"gallery-container\">\n <h1 class=\"page-title\">Galeri Kegiatan<\/h1>\n <p class=\"page-subtitle\">Abadikan setiap tawa, senyuman, dan momen berharga anak-anak bersama kami.<\/p>\n \n <div class=\"gallery-filters\">\n <button class=\"gallery-filter active\" data-filter=\"all\">Semua Kategori<\/button>\n <button class=\"gallery-filter\" data-filter=\"kelas\">Dalam Ruang Kelas<\/button>\n <button class=\"gallery-filter\" data-filter=\"perpustakaan\">Perpustakaan Mini<\/button>\n <button class=\"gallery-filter\" data-filter=\"ape\">Alat Permainan Edukatif<\/button>\n <button class=\"gallery-filter\" data-filter=\"outdoor\">Permainan Outdoor<\/button>\n <button class=\"gallery-filter\" data-filter=\"kegiatan\">Kegiatan Anak<\/button>\n <\/div>\n\n <div class=\"gallery-grid\">\n <!-- Kategori: Kelas -->\n <div class=\"gallery-item\" data-category=\"kelas\">\n <div class=\"gallery-card\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-kelas1\/400\/250.jpg\" alt=\"Sesi Belajar Interaktif\" class=\"gallery-image\">\n <div class=\"gallery-details\">\n <h3>Sesi Belajar Interaktif<\/h3>\n <p>Anak-anak fokus mengikuti kegiatan menggambar bersama di kelas.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"gallery-item\" data-category=\"kelas\">\n <div class=\"gallery-card\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-kelas2\/400\/250.jpg\" alt=\"Kelas Ber-AC Nyaman\" class=\"gallery-image\">\n <div class=\"gallery-details\">\n <h3>Kelas Ber-AC Nyaman<\/h3>\n <p>Suasana ruang kelas yang sejuk mendukung proses belajar yang optimal.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Kategori: Perpustakaan -->\n <div class=\"gallery-item\" data-category=\"perpustakaan\">\n <div class=\"gallery-card\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-perpus1\/400\/250.jpg\" alt=\"Sesi Membaca Cerita\" class=\"gallery-image\">\n <div class=\"gallery-details\">\n <h3>Sesi Membaca Cerita<\/h3>\n <p>Menumbuhkan minat baca sejak dini di sudut baca yang nyaman.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Kategori: APE -->\n <div class=\"gallery-item\" data-category=\"ape\">\n <div class=\"gallery-card\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-ape1\/400\/250.jpg\" alt=\"Bermain Balok dan Konstruksi\" class=\"gallery-image\">\n <div class=\"gallery-details\">\n <h3>Bermain Balok dan Konstruksi<\/h3>\n <p>Melatih kreativitas dan motorik halus melalui permainan konstruktif.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"gallery-item\" data-category=\"ape\">\n <div class=\"gallery-card\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-ape2\/400\/250.jpg\" alt=\"Bermain Puzzle\" class=\"gallery-image\">\n <div class=\"gallery-details\">\n <h3>Asyik dengan Puzzle<\/h3>\n <p>Menyelesaikan puzzle bersama untuk melatih ketelitian dan kerjasama.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Kategori: Outdoor -->\n <div class=\"gallery-item\" data-category=\"outdoor\">\n <div class=\"gallery-card\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-outdoor1\/400\/250.jpg\" alt=\"Bermain di Perosotan\" class=\"gallery-image\">\n <div class=\"gallery-details\">\n <h3>Serunya Bermain Perosotan<\/h3>\n <p>Anak-anak bermain dengan gembira di area outdoor yang aman.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"gallery-item\" data-category=\"outdoor\">\n <div class=\"gallery-card\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-outdoor2\/400\/250.jpg\" alt=\"Ayunan dan Tawa\" class=\"gallery-image\">\n <div class=\"gallery-details\">\n <h3>Ayunan dan Tawa<\/h3>\n <p>Momen bahagia saat anak-anak menikmati ayunan di taman bermain.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Kategori: Kegiatan Anak (Dengan Animasi Flip) -->\n <div class=\"gallery-item\" data-category=\"kegiatan\">\n <div class=\"gallery-card flip-card\">\n <div class=\"gallery-inner\">\n <div class=\"gallery-front\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-kegiatan1-front\/400\/250.jpg\" alt=\"Kesenian - Mewarnai\" class=\"gallery-image\">\n <div class=\"gallery-details\">\n <h3>Kreativitas Tanpa Batas<\/h3>\n <p>Hover untuk melihat hasil karyanya!<\/p>\n <\/div>\n <\/div>\n <div class=\"gallery-back\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-kegiatan1-back\/400\/250.jpg\" alt=\"Hasil Karya Mewarnai\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"gallery-item\" data-category=\"kegiatan\">\n <div class=\"gallery-card flip-card\">\n <div class=\"gallery-inner\">\n <div class=\"gallery-front\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-kegiatan2-front\/400\/250.jpg\" alt=\"Memasak Mini - Donat\" class=\"gallery-image\">\n <div class=\"gallery-details\">\n <h3>Jagoan Dapur Kecil<\/h3>\n <p>Hover untuk lihat hasil masakannya!<\/p>\n <\/div>\n <\/div>\n <div class=\"gallery-back\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/paudnurulfikri-kegiatan2-back\/400\/250.jpg\" alt=\"Hasil Masakan Donat\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <!-- Footer -->\n <footer>\n <div class=\"footer-content\">\n <div class=\"social-links\">\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-tiktok\"><\/i><\/a>\n <a href=\"#\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <\/div>\n <p class=\"footer-text\">\u00a9 <span id=\"year\"><\/span> PAUD Nurul Fikri. All rights reserved.<\/p>\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"credit neon-text\">\ud83d\udca1Proudly\ud83d\udc23By Rudi Web Builder<\/a>\n <\/div>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Fungsi untuk membuat animasi balon\n function createBalloons() {\n const particlesContainer = document.getElementById('particles');\n const balloonCount = 20;\n const balloonSymbol = '\ud83c\udf88';\n const balloonColors = ['balloon-red', 'balloon-yellow', 'balloon-green', 'balloon-blue'];\n particlesContainer.innerHTML = '';\n for (let i = 0; i < balloonCount; i++) {\n const balloon = document.createElement('div');\n balloon.className = 'floating-element';\n const randomColorClass = balloonColors[Math.floor(Math.random() * balloonColors.length)];\n balloon.classList.add(randomColorClass);\n \n balloon.textContent = balloonSymbol;\n balloon.style.left = Math.random() * 100 + '%';\n const size = 1.5 + Math.random() * 1.5 + 'rem';\n balloon.style.fontSize = size;\n const duration = 15 + Math.random() * 10;\n const delay = Math.random() * 15;\n balloon.style.animationDuration = duration + 's';\n balloon.style.animationDelay = delay + 's';\n balloon.style.opacity = 0.3 + Math.random() * 0.5;\n particlesContainer.appendChild(balloon);\n }\n }\n\n \/\/ Header scroll effect\n const header = document.getElementById('header');\n window.addEventListener('scroll', () => {\n if (window.scrollY > 50) {\n header.classList.add('scrolled');\n } else {\n header.classList.remove('scrolled');\n }\n });\n\n \/\/ Mobile menu toggle\n const hamburger = document.getElementById('hamburger');\n const nav = document.getElementById('nav');\n hamburger.addEventListener('click', () => {\n const isClosing = hamburger.classList.contains('active');\n hamburger.classList.toggle('active');\n nav.classList.toggle('active');\n if (isClosing) {\n document.querySelectorAll('.dropdown.open').forEach(d => d.classList.remove('open'));\n }\n });\n\n \/\/ Tutup menu mobile saat klik nav-link biasa\n document.querySelectorAll('.nav-link').forEach(link => {\n link.addEventListener('click', () => {\n if (window.innerWidth <= 768) {\n hamburger.classList.remove('active');\n nav.classList.remove('active');\n document.querySelectorAll('.dropdown.open').forEach(d => d.classList.remove('open'));\n }\n });\n });\n\n \/\/ Dropdown toggle (mobile: klik buka\/tutup accordion)\n const dropdownToggles = document.querySelectorAll('.dropdown-toggle');\n dropdownToggles.forEach(toggle => {\n toggle.addEventListener('click', (e) => {\n e.preventDefault();\n if (window.innerWidth <= 768) {\n const dropdown = toggle.closest('.dropdown');\n document.querySelectorAll('.dropdown.open').forEach(d => {\n if (d !== dropdown) d.classList.remove('open');\n });\n dropdown.classList.toggle('open');\n }\n });\n });\n\n \/\/ Tutup menu mobile saat klik item di dalam dropdown\n document.querySelectorAll('.dropdown-menu a').forEach(link => {\n link.addEventListener('click', () => {\n if (window.innerWidth <= 768) {\n hamburger.classList.remove('active');\n nav.classList.remove('active');\n document.querySelectorAll('.dropdown.open').forEach(d => d.classList.remove('open'));\n }\n });\n });\n\n \/\/ --- GALLERY FILTER FUNCTIONALITY ---\n const galleryFilters = document.querySelectorAll('.gallery-filter');\n const galleryItems = document.querySelectorAll('.gallery-item');\n\n function filterGallery(category) {\n galleryItems.forEach((item, index) => {\n item.style.animation = 'none';\n item.style.opacity = '0';\n item.style.transform = 'scale(0.8)';\n item.offsetHeight;\n\n if (category === 'all' || item.getAttribute('data-category') === category) {\n item.style.display = 'block';\n setTimeout(() => {\n item.style.animation = `fade-in-scale 0.5s ease ${index * 0.1}s forwards`;\n }, 10);\n } else {\n item.style.display = 'none';\n }\n });\n }\n\n galleryFilters.forEach(filter => {\n filter.addEventListener('click', () => {\n galleryFilters.forEach(f => f.classList.remove('active'));\n filter.classList.add('active');\n\n const filterValue = filter.getAttribute('data-filter');\n filterGallery(filterValue);\n });\n });\n\n \/\/ Set current year\n document.getElementById('year').textContent = new Date().getFullYear();\n\n \/\/ Initialize floating balloons\n createBalloons();\n setInterval(createBalloons, 30000);\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Galeri Kegiatan – PAUD Nurul Fikri PAUD Nurul Fikri Beranda Tentang Kami Profile Fasilitas Kegiatan Program Kami Galeri Game Edukasi Baru! Kontak & Pendaftaran \ud83d\udca1Proudly\ud83d\udc23by Rudi Web Builder Galeri Kegiatan Abadikan setiap tawa, senyuman, dan momen berharga anak-anak bersama kami. Semua Kategori Dalam Ruang Kelas Perpustakaan Mini Alat Permainan Edukatif Permainan Outdoor Kegiatan Anak Sesi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-39","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":12,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":149,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/39\/revisions\/149"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}