{"id":988370,"date":"2026-03-18T04:17:59","date_gmt":"2026-03-18T04:17:59","guid":{"rendered":"https:\/\/pearlsacademy.co.in\/?page_id=988370"},"modified":"2026-03-18T04:19:00","modified_gmt":"2026-03-18T04:19:00","slug":"gallery","status":"publish","type":"page","link":"https:\/\/pearlsacademy.co.in\/index.php\/gallery\/","title":{"rendered":"GAllery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"988370\" class=\"elementor elementor-988370\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7af663d e-flex e-con-boxed e-con e-parent\" data-id=\"7af663d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-cd587ca e-con-full e-flex e-con e-child\" data-id=\"cd587ca\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9646ca8 elementor-widget elementor-widget-spacer\" data-id=\"9646ca8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-589ec49 e-con-full e-flex e-con e-child\" data-id=\"589ec49\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c829b5f elementor-invisible elementor-widget__width-auto animated-fast elementor-widget elementor-widget-heading\" data-id=\"c829b5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:50}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\">BOARD RESULT<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2ca10b6 e-con-full e-flex e-con e-child\" data-id=\"2ca10b6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-562b85e e-con-full e-flex e-con e-child\" data-id=\"562b85e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da4a686 elementor-invisible animated-fast elementor-widget elementor-widget-heading\" data-id=\"da4a686\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Welcome to <br> <span class=\"color-accent-4\">Pearls Academy <\/span> <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d8a8269 e-con-full e-flex e-con e-child\" data-id=\"d8a8269\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-daf16ba elementor-invisible animated-fast elementor-widget elementor-widget-text-editor\" data-id=\"daf16ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"923\" data-end=\"1214\">Pearls Academy is an Islamic cultured CBSE school committed to providing quality education from Grades 1 to 12. Our goal is to nurture young minds in a supportive and culturally enriched environment where students develop a love for learning, strong character, and a sense of responsibility.<\/p>\n<p data-start=\"1216\" data-end=\"1373\">We believe in a holistic approach that balances academic excellence with Islamic values, preparing students for success in both this world and the hereafter.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a7079e elementor-widget elementor-widget-spacer\" data-id=\"7a7079e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e12598 elementor-widget elementor-widget-html\" data-id=\"7e12598\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Media Gallery | Manava Bharati<\/title>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Work+Sans:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n    <style>\r\n        * { box-sizing: border-box; margin: 0; padding: 0; }\r\n        :root {\r\n            --brand-navy: #002147;\r\n            --accent-gold: #c5a059;\r\n            --white: #ffffff;\r\n            --border: #e2e8f0;\r\n            --bg-soft: #f8fafc;\r\n        }\r\n\r\n        body { font-family: 'Work Sans', sans-serif; background: transparent; padding: 40px 0; color: #1e293b; }\r\n\r\n        \/* MAIN WRAPPER *\/\r\n        .gallery-wrapper {\r\n            width: 95%;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            background: var(--white) !important;\r\n            border-radius: 40px;\r\n            border: 1px solid var(--border);\r\n            overflow: hidden;\r\n            box-shadow: 0 40px 100px rgba(0, 33, 71, 0.08);\r\n        }\r\n\r\n        \/* 1. HEADER SECTION *\/\r\n        .gallery-header {\r\n            background: var(--brand-navy) !important;\r\n            padding: 60px 40px;\r\n            text-align: center;\r\n            color: white;\r\n            border-bottom: 6px solid var(--accent-gold);\r\n        }\r\n\r\n        .gallery-header h1 { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }\r\n        .gallery-header p { opacity: 0.8; font-size: 0.9rem; letter-spacing: 4px; margin-top: 10px; text-transform: uppercase; }\r\n\r\n        \/* 2. FILTER TABS SYSTEM *\/\r\n        .filter-container {\r\n            padding: 40px 40px 20px;\r\n            background: #ffffff !important;\r\n            text-align: center;\r\n        }\r\n\r\n        .filter-group-label {\r\n            font-size: 0.75rem;\r\n            font-weight: 800;\r\n            color: var(--brand-navy);\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            margin-bottom: 15px;\r\n            display: block;\r\n        }\r\n\r\n        .filter-tabs {\r\n            display: flex;\r\n            justify-content: center;\r\n            flex-wrap: wrap;\r\n            gap: 12px;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        .tab-btn {\r\n            padding: 10px 25px;\r\n            border-radius: 50px;\r\n            border: 1px solid var(--border);\r\n            background: var(--bg-soft);\r\n            color: var(--brand-navy);\r\n            font-weight: 700;\r\n            font-size: 0.85rem;\r\n            cursor: pointer;\r\n            transition: 0.3s;\r\n        }\r\n\r\n        .tab-btn.active {\r\n            background: var(--brand-navy);\r\n            color: white;\r\n            border-color: var(--brand-navy);\r\n            box-shadow: 0 10px 20px rgba(0,33,71,0.2);\r\n        }\r\n\r\n        .tab-btn:hover:not(.active) {\r\n            border-color: var(--accent-gold);\r\n            color: var(--accent-gold);\r\n        }\r\n\r\n        \/* 3. MASONRY IMAGE GRID *\/\r\n        .gallery-grid {\r\n            padding: 20px 40px 60px;\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n            gap: 25px;\r\n            background: #ffffff !important;\r\n        }\r\n\r\n        .gallery-item {\r\n            position: relative;\r\n            border-radius: 25px;\r\n            overflow: hidden;\r\n            aspect-ratio: 4\/3;\r\n            border: 1px solid var(--border);\r\n            transition: 0.4s ease;\r\n        }\r\n\r\n        .gallery-item img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            transition: 0.5s;\r\n        }\r\n\r\n        .gallery-item:hover img { transform: scale(1.1); }\r\n\r\n        \/* Overlay Effect *\/\r\n        .img-overlay {\r\n            position: absolute;\r\n            inset: 0;\r\n            background: linear-gradient(to top, rgba(0,33,71,0.8) 0%, transparent 70%);\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: flex-end;\r\n            padding: 25px;\r\n            opacity: 0;\r\n            transition: 0.4s;\r\n        }\r\n\r\n        .gallery-item:hover .img-overlay { opacity: 1; }\r\n\r\n        .img-overlay h4 { color: white; font-size: 1.1rem; font-weight: 700; }\r\n        .img-overlay span { color: var(--accent-gold); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }\r\n\r\n        \/* RESPONSIVE *\/\r\n        @media (max-width: 768px) {\r\n            .gallery-grid { grid-template-columns: 1fr; padding: 20px; }\r\n            .filter-tabs { gap: 8px; }\r\n            .tab-btn { padding: 8px 18px; font-size: 0.75rem; }\r\n            .gallery-header h1 { font-size: 1.8rem; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"gallery-wrapper\">\r\n    <header class=\"gallery-header\">\r\n        <h1>Campus Gallery<\/h1>\r\n        <p>Capturing Moments of Learning & Joy<\/p>\r\n    <\/header>\r\n\r\n    <div class=\"filter-container\">\r\n        <span class=\"filter-group-label\">Select Event or Category<\/span>\r\n        <div class=\"filter-tabs\">\r\n            <button class=\"tab-btn active\" onclick=\"filterGallery('all', this)\">All Media<\/button>\r\n            <button class=\"tab-btn\" onclick=\"filterGallery('campus', this)\">Campus<\/button>\r\n            <button class=\"tab-btn\" onclick=\"filterGallery('annual-day', this)\">Annual Day<\/button>\r\n            <button class=\"tab-btn\" onclick=\"filterGallery('sports', this)\">Sports<\/button>\r\n            <button class=\"tab-btn\" onclick=\"filterGallery('academics', this)\">Academics<\/button>\r\n            <button class=\"tab-btn\" onclick=\"filterGallery('labs', this)\">Labs & Science<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"gallery-grid\" id=\"mainGallery\">\r\n        \r\n        <div class=\"gallery-item campus\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541339907198-e08756ebafe3?auto=format&fit=crop&w=800\" alt=\"Campus\">\r\n            <div class=\"img-overlay\">\r\n                <span>Category: Campus<\/span>\r\n                <h4>Main Academic Block<\/h4>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gallery-item annual-day\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1514525253344-f814d0743b1a?auto=format&fit=crop&w=800\" alt=\"Event\">\r\n            <div class=\"img-overlay\">\r\n                <span>Event: Annual Day 2025<\/span>\r\n                <h4>Cultural Dance Performance<\/h4>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gallery-item labs\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1532094349884-543bc11b234d?auto=format&fit=crop&w=800\" alt=\"Science\">\r\n            <div class=\"img-overlay\">\r\n                <span>Category: Labs<\/span>\r\n                <h4>Physics Lab Experiment<\/h4>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gallery-item sports\">\r\n            <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1526676037777-05a232554f77?auto=format&fit=crop&w=800\" alt=\"Sports\">\r\n            <div class=\"img-overlay\">\r\n                <span>Event: Sports Meet<\/span>\r\n                <h4>Inter-House Athletic Final<\/h4>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    function filterGallery(category, btn) {\r\n        \/\/ Update Active Tab\r\n        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));\r\n        btn.classList.add('active');\r\n\r\n        \/\/ Filter Logic\r\n        const items = document.querySelectorAll('.gallery-item');\r\n        items.forEach(item => {\r\n            if (category === 'all' || item.classList.contains(category)) {\r\n                item.style.display = 'block';\r\n                \/\/ Trigger animation\r\n                item.style.opacity = '0';\r\n                setTimeout(() => { item.style.opacity = '1'; }, 10);\r\n            } else {\r\n                item.style.display = 'none';\r\n            }\r\n        });\r\n    }\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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>BOARD RESULT Welcome to Pearls Academy Pearls Academy is an Islamic cultured CBSE school committed to providing quality education from Grades 1 to 12. Our goal is to nurture young minds in a supportive and culturally enriched environment where students develop a love for learning, strong character, and a sense of responsibility. We believe in&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-988370","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pearlsacademy.co.in\/index.php\/wp-json\/wp\/v2\/pages\/988370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pearlsacademy.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pearlsacademy.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pearlsacademy.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pearlsacademy.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=988370"}],"version-history":[{"count":4,"href":"https:\/\/pearlsacademy.co.in\/index.php\/wp-json\/wp\/v2\/pages\/988370\/revisions"}],"predecessor-version":[{"id":988374,"href":"https:\/\/pearlsacademy.co.in\/index.php\/wp-json\/wp\/v2\/pages\/988370\/revisions\/988374"}],"wp:attachment":[{"href":"https:\/\/pearlsacademy.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=988370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}