{"id":448,"date":"2025-08-21T11:58:59","date_gmt":"2025-08-21T15:58:59","guid":{"rendered":"https:\/\/ps369.org\/?page_id=448"},"modified":"2026-03-06T15:46:17","modified_gmt":"2026-03-06T20:46:17","slug":"home","status":"publish","type":"page","link":"https:\/\/ps369.org\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Young Leaders Elementary | PS369<\/title>\n \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=Inter:wght@400;500;600;700;900&family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap\" rel=\"stylesheet\">\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n yleBlue: '#122449',\n yleGold: '#FFD700',\n yleYellow: '#ffff66',\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n poppins: ['Poppins', 'sans-serif'],\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* ==========================================================================\n GLOBAL & HERO STYLES\n ========================================================================== *\/\n html { scroll-behavior: smooth; }\n \n .hero-container {\n position: relative;\n height: 70vh; \/* Increased from 50vh *\/\n min-height: 550px; \/* Increased from 400px *\/\n overflow: hidden;\n background-color: #122449;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .video-background iframe {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100vw;\n height: 56.25vw; \/* 16:9 Aspect Ratio *\/\n min-height: 100vh;\n min-width: 177.77vh; \/* 16:9 Aspect Ratio *\/\n transform: translate(-50%, -50%);\n pointer-events: none;\n }\n\n \/* ==========================================================================\n 1. PREMIUM NEWS TICKER\n ========================================================================== *\/\n .times-square-ticker {\n width: 100%;\n position: relative;\n z-index: 50;\n overflow: hidden;\n }\n\n .ticker-content {\n display: flex;\n align-items: center;\n white-space: nowrap;\n will-change: transform;\n height: 100%;\n }\n\n .ticker-item {\n display: inline-flex;\n align-items: center;\n font-family: 'Poppins', sans-serif;\n font-size: 1.05rem;\n font-weight: 500;\n color: #f8fafc; \/* Clean, crisp white *\/\n letter-spacing: 0.5px;\n }\n\n \/* Beautiful Gold Starburst Separators *\/\n .ticker-item::after {\n content: '\u2726';\n color: #FFD700;\n font-size: 1.25rem;\n margin: 0 2.5rem;\n opacity: 0.9;\n filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));\n }\n\n \/* ==========================================================================\n 2. QUICK LINKS BAR\n ========================================================================== *\/\n .quick-link-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 1.5rem 0.5rem;\n text-align: center;\n color: white;\n text-decoration: none;\n transition: all 0.2s ease;\n border-right: 1px solid rgba(255, 255, 255, 0.15);\n }\n \n .quick-link-item:hover {\n background-color: rgba(255, 215, 0, 0.1);\n color: #FFD700;\n }\n\n .quick-link-item:last-child {\n border-right: none;\n }\n\n .quick-link-icon {\n fill: currentColor;\n width: 32px;\n height: 32px;\n margin-bottom: 0.75rem;\n }\n\n .quick-link-text {\n font-size: 0.75rem;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n \/* ==========================================================================\n 3. LIONS ACCORDION WIDGET (Protected from WP Theme overrides)\n ========================================================================== *\/\n .lions-widget-container {\n font-family: 'Poppins', sans-serif;\n color: #e6edf3;\n position: relative;\n }\n \n .lions-accordion {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .lions-card {\n background: rgba(26, 31, 41, 0.6);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n cursor: pointer;\n position: relative;\n }\n \n .lions-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n border-radius: 12px;\n border: 2px solid transparent;\n background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), var(--glow-color, transparent) 0%, transparent 40%) border-box;\n -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: destination-out; \n mask-composite: exclude; \n transition: opacity 0.3s ease;\n opacity: 0;\n pointer-events: none;\n }\n\n .lions-card:hover::before { opacity: 1; }\n \n .lions-card[data-letter=\"L\"] { --glow-color: #ffd70066; }\n .lions-card[data-letter=\"I\"] { --glow-color: #ffd70066; }\n .lions-card[data-letter=\"O\"] { --glow-color: #ffd70066; }\n .lions-card[data-letter=\"N\"] { --glow-color: #ffd70066; }\n .lions-card[data-letter=\"S\"] { --glow-color: #c0c0c066; }\n\n \/* Force hide radio buttons against WP theme overrides *\/\n .lions-accordion input[type=\"radio\"] { \n position: absolute !important;\n opacity: 0 !important;\n width: 0 !important;\n height: 0 !important;\n pointer-events: none !important;\n display: none !important; \n }\n \n .lions-accordion label {\n display: flex;\n align-items: center;\n padding: 20px;\n cursor: pointer;\n margin: 0; \/* Reset WP margins *\/\n }\n\n .lions-accordion .lions-letter {\n font-size: 3rem;\n font-weight: 700;\n width: 80px;\n text-align: center;\n transition: all 0.5s ease;\n text-shadow: 0 0 20px currentColor;\n line-height: 1;\n }\n \n .letter-L, .letter-I, .letter-O, .letter-N { color: #FFD700; }\n .letter-S { color: #C0C0C0; }\n\n .lions-value-title {\n font-size: 1.5rem;\n font-weight: 600;\n margin-left: 20px;\n transition: all 0.5s ease;\n flex-grow: 1;\n color: #ffffff;\n }\n \n .lions-accordion .lions-arrow {\n font-size: 1.5rem;\n transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n color: #ffffff;\n }\n \n .lions-accordion .lions-content {\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n transition: max-height 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n transform: translateY(-20px);\n padding: 0 30px;\n }\n\n .lions-accordion .lions-sub-value {\n font-style: italic;\n color: #8b949e;\n margin-bottom: 15px;\n font-size: 0.95rem;\n }\n\n .lions-accordion .lions-commitment {\n font-size: 1.05rem;\n line-height: 1.6;\n padding-bottom: 25px;\n padding-left: 30px;\n border-left: 3px solid rgba(255, 255, 255, 0.1);\n color: #e6edf3;\n }\n \n .lions-accordion input:checked + .lions-card {\n transform: scale(1.02);\n box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n border-color: rgba(255, 215, 0, 0.3);\n }\n\n .lions-accordion input:checked + .lions-card .lions-arrow {\n transform: rotate(90deg);\n }\n\n .lions-accordion input:checked + .lions-card .lions-content {\n max-height: 300px;\n opacity: 1;\n transform: translateY(0);\n }\n \n \/* ==========================================================================\n 4. COMMITMENT CARDS GLOW ANIMATION\n ========================================================================== *\/\n .commitment-card {\n position: relative;\n --glow-color: #ffd70066; \/* Gold glow *\/\n }\n \n .commitment-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n border-radius: 1rem;\n border: 2px solid transparent;\n background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), var(--glow-color, transparent) 0%, transparent 40%) border-box;\n -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: destination-out; \n mask-composite: exclude; \n transition: opacity 0.3s ease;\n opacity: 0;\n pointer-events: none;\n }\n\n .commitment-card:hover::before { opacity: 1; }\n\n @media (min-width: 768px) {\n .lions-accordion input:checked + .lions-card .lions-letter {\n transform: translateX(-10px) scale(0.9);\n opacity: 0.5;\n }\n .lions-accordion input:checked + .lions-card .lions-value-title {\n transform: translateX(-20px);\n }\n }\n <\/style>\n<\/head>\n<body class=\"bg-white text-gray-800 antialiased selection:bg-yleGold selection:text-yleBlue\">\n\n <div class=\"times-square-ticker w-full bg-yleBlue border-b-[3px] border-yleGold h-14 flex items-center shadow-lg\">\n \n <div class=\"absolute left-0 top-0 bottom-0 z-20 flex items-center bg-gradient-to-r from-yleGold to-yellow-400 px-4 md:px-8 rounded-r-2xl shadow-[8px_0_15px_-3px_rgba(0,0,0,0.4)] border-r border-yellow-200\">\n <span class=\"text-yleBlue font-bold font-poppins uppercase tracking-wider text-sm md:text-base flex items-center gap-2 drop-shadow-sm\">\n <span class=\"w-2.5 h-2.5 bg-red-600 rounded-full animate-pulse shadow-[0_0_8px_rgba(220,38,38,0.8)]\"><\/span>\n Latest Updates\n <\/span>\n <\/div>\n\n <div class=\"w-full h-full flex items-center pl-[190px] md:pl-[240px]\">\n <div class=\"ticker-content\">\n <div class=\"ticker-item\">We Empower Our Students To Become Leaders Of Their Own Learning<\/div>\n <div class=\"ticker-item\">YLE is selling patches of our logo! See Ms. Nunez at arrival and dismissal to purchase one for $5<\/div>\n <div class=\"ticker-item\">YLE has been given an afterschool grant, and afterschool will return soon for the 2025-2026 school year! Stay tuned for more information<\/div>\n \n <div class=\"ticker-item\">We Empower Our Students To Become Leaders Of Their Own Learning<\/div>\n <div class=\"ticker-item\">YLE is selling patches of our logo! See Ms. Nunez at arrival and dismissal to purchase one for $5<\/div>\n <div class=\"ticker-item\">YLE has been given an afterschool grant, and afterschool will return soon for the 2025-2026 school year! Stay tuned for more information<\/div>\n <\/div>\n <\/div>\n\n <div class=\"absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-yleBlue to-transparent z-10 pointer-events-none\"><\/div>\n <\/div>\n\n <section class=\"hero-container\">\n <div class=\"video-background\">\n <iframe \n src=\"https:\/\/www.youtube.com\/embed\/L7-XuT_1VPY?autoplay=1&mute=1&loop=1&playlist=L7-XuT_1VPY&controls=0&showinfo=0&modestbranding=1\" \n frameborder=\"0\" \n allow=\"autoplay; encrypted-media\" \n allowfullscreen>\n<\/iframe>\n <\/div>\n <\/section>\n\n <nav class=\"bg-yleBlue w-full\">\n <div class=\"max-w-7xl mx-auto flex flex-wrap md:grid md:grid-cols-7 border-b-4 border-yleGold shadow-md\">\n \n <a href=\"https:\/\/ps369.org\/?page_id=586\" class=\"quick-link-item w-1\/3 md:w-full\">\n <svg class=\"quick-link-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M19 3v18H5V3h14zm-2 2H7v14h10V5zm-2 2h-2v2h2V7zm-4 0H9v2h2V7zm4 4h-2v2h2v-2zm-4 0H9v2h2v-2zm4 4h-2v2h2v-2zm-4 0H9v2h2v-2z\"\/>\n <\/svg>\n <span class=\"quick-link-text\">Who We Are<\/span>\n <\/a>\n \n <a href=\"https:\/\/ps369.org\/?page_id=563\" class=\"quick-link-item w-1\/3 md:w-full\">\n <svg class=\"quick-link-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72l5 2.73 5-2.73v3.72z\"\/>\n <\/svg>\n <span class=\"quick-link-text\">About Us<\/span>\n <\/a>\n \n <a href=\"https:\/\/ps369.org\/?page_id=607\" class=\"quick-link-item w-1\/3 md:w-full\">\n <svg class=\"quick-link-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z\"\/>\n <\/svg>\n <span class=\"quick-link-text\">Principal<\/span>\n <\/a>\n \n <a href=\"https:\/\/ps369.org\/?page_id=788\" class=\"quick-link-item w-1\/3 md:w-full\">\n <svg class=\"quick-link-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M19 3h-4.18C14.4 1.84 13.3 1 12 1S9.6 1.84 9.18 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z\"\/>\n <path d=\"M12 6c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM7 16v1h10v-1c0-1.66-3.33-2.5-5-2.5s-5 .84-5 2.5z\"\/>\n <\/svg>\n <span class=\"quick-link-text\">Classrooms<\/span>\n <\/a>\n \n <a href=\"https:\/\/ps369.org\/?page_id=761\" class=\"quick-link-item w-1\/3 md:w-full\">\n <svg class=\"quick-link-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z\"\/>\n <\/svg>\n <span class=\"quick-link-text\">Staff Directory<\/span>\n <\/a>\n \n <a href=\"https:\/\/ps369.org\/?page_id=580\" class=\"quick-link-item w-1\/3 md:w-full\">\n <svg class=\"quick-link-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\"\/>\n <\/svg>\n <span class=\"quick-link-text\">Calendar<\/span>\n <\/a>\n \n <a href=\"https:\/\/ps369x.nycschooluniforms.com\/ps369x\/shop\/home\" target=\"_blank\" class=\"quick-link-item w-full md:w-full\">\n <svg class=\"quick-link-icon\" viewBox=\"0 0 24 24\">\n <path d=\"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z\"\/>\n <\/svg>\n <span class=\"quick-link-text\">Uniforms<\/span>\n <\/a>\n \n <\/div>\n <\/nav>\n\n <section class=\"py-20 bg-slate-50 relative overflow-hidden z-0\">\n <div class=\"absolute top-0 left-0 w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply filter blur-[80px] opacity-30 -translate-x-1\/2 -translate-y-1\/2 -z-10\"><\/div>\n <div class=\"absolute bottom-0 right-0 w-96 h-96 bg-yellow-300 rounded-full mix-blend-multiply filter blur-[80px] opacity-20 translate-x-1\/3 translate-y-1\/3 -z-10\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-10\">\n \n <div class=\"lg:col-span-4 flex flex-col gap-10\">\n \n <div class=\"bg-white rounded-[2rem] shadow-xl overflow-hidden border-2 border-yleGold relative transform hover:-translate-y-2 transition-transform duration-300 group\">\n <div class=\"bg-gradient-to-r from-yellow-100 via-yleGold\/30 to-yellow-100 py-5 text-center border-b-2 border-yleGold relative\">\n <div class=\"absolute inset-0 bg-white\/20 group-hover:bg-white\/0 transition-colors\"><\/div>\n <h2 class=\"text-3xl font-bold text-yleBlue font-poppins relative z-10 flex items-center justify-center gap-2 m-0 drop-shadow-sm\">\n <span class=\"text-3xl animate-bounce\" style=\"animation-delay: 0.1s\">\ud83c\udf1f<\/span> \n Top Attendance \n <span class=\"text-3xl animate-bounce\" style=\"animation-delay: 0.2s\">\ud83c\udf1f<\/span>\n <\/h2>\n <\/div>\n \n <div class=\"p-6 text-center bg-white relative\">\n <div class=\"absolute top-0 left-[-100%] w-1\/2 h-full bg-gradient-to-r from-transparent via-white\/80 to-transparent skew-x-[-20deg] group-hover:animate-[shimmer_1.5s_ease-in-out]\"><\/div>\n \n <div class=\"inline-block bg-yleBlue text-white font-bold px-8 py-2 rounded-full mb-6 text-xl shadow-md border border-yleBlue\">\n February Winners\n <\/div>\n \n <ul class=\"space-y-4 text-left\">\n <li class=\"flex items-center gap-4 p-4 bg-gray-50 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"w-12 h-12 rounded-full bg-blue-100 text-yleBlue flex items-center justify-center text-xl font-black shrink-0\">5th<\/div>\n <div class=\"leading-tight\">\n <span class=\"block font-bold text-yleBlue text-lg\">Fifth Grade<\/span> \n <span class=\"text-sm text-gray-500 font-medium\">Ms. Hamzaraj & Ms. Maiga<\/span>\n <\/div>\n <\/li>\n <li class=\"flex items-center gap-4 p-4 bg-gray-50 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"w-12 h-12 rounded-full bg-green-100 text-green-700 flex items-center justify-center text-xl font-black shrink-0\">5th<\/div>\n <div class=\"leading-tight\">\n <span class=\"block font-bold text-yleBlue text-lg\">Fifth Grade<\/span> \n <span class=\"text-sm text-gray-500 font-medium\">Ms. Gonzalez<\/span>\n <\/div>\n <\/li>\n <li class=\"flex items-center gap-4 p-4 bg-gray-50 rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow\">\n <div class=\"w-12 h-12 rounded-full bg-purple-100 text-purple-700 flex items-center justify-center text-xl font-black shrink-0\">2nd<\/div>\n <div class=\"leading-tight\">\n <span class=\"block font-bold text-yleBlue text-lg\">Second Grade<\/span> \n <span class=\"text-sm text-gray-500 font-medium\">Ms. Polanco<\/span>\n <\/div>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"bg-white rounded-[2rem] shadow-xl overflow-hidden border-2 border-blue-100 relative transform hover:-translate-y-2 transition-transform duration-300\">\n <div class=\"bg-blue-50 py-4 text-center border-b border-blue-100\">\n <h2 class=\"text-2xl font-bold text-yleBlue font-poppins flex items-center justify-center gap-3 m-0\">\n <span class=\"text-2xl\">\ud83c\udf31<\/span> NYC Kids RISE\n <\/h2>\n <\/div>\n <div class=\"p-5\">\n <div class=\"w-full rounded-xl overflow-hidden shadow-inner bg-gray-900 border-4 border-gray-100 relative group\">\n <div class=\"relative w-full pb-[56.25%]\">\n <iframe \n class=\"absolute top-0 left-0 w-full h-full\"\n src=\"https:\/\/www.youtube.com\/embed\/WLNnY6sRjkI?rel=0\" \n title=\"NYC Kids RISE\" \n frameborder=\"0\" \n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n allowfullscreen>\n <\/iframe>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div class=\"lg:col-span-8\">\n <div class=\"bg-white rounded-[2rem] shadow-xl p-6 md:p-10 border-2 border-gray-100 h-full flex flex-col relative overflow-hidden\">\n \n <div class=\"flex flex-col md:flex-row md:items-center gap-4 mb-8\">\n <div class=\"w-14 h-14 bg-red-100 rounded-full flex items-center justify-center text-red-500 text-3xl shadow-inner shrink-0 relative\">\n \ud83d\udce2\n <div class=\"absolute top-0 right-0 w-3 h-3 bg-red-500 rounded-full animate-ping\"><\/div>\n <\/div>\n <div>\n <h2 class=\"text-4xl md:text-5xl font-bold text-yleBlue font-poppins tracking-tight m-0\">Announcements<\/h2>\n <h3 class=\"text-lg md:text-xl font-semibold text-gray-500 font-sans mt-2\">Middle School Application Information<\/h3>\n <\/div>\n <\/div>\n \n <div class=\"w-full rounded-2xl overflow-hidden shadow-2xl bg-[#111] border-[6px] border-gray-100 flex-grow relative group\">\n <div class=\"relative w-full h-0 pb-[56.25%]\">\n <iframe \n class=\"absolute top-0 left-0 w-full h-full\"\n src=\"https:\/\/www.youtube.com\/embed\/a8w0rli02Mg?rel=0\" \n title=\"YLE Announcements\" \n frameborder=\"0\" \n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n allowfullscreen>\n <\/iframe>\n <\/div>\n <\/div>\n \n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"py-20 bg-yleBlue text-white border-t-8 border-yleGold\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"grid lg:grid-cols-2 gap-12 lg:gap-16 items-start\">\n \n <div>\n <div class=\"text-center lg:text-left mb-10\">\n <h2 class=\"text-3xl font-poppins font-bold text-yleGold drop-shadow-md\">YLE's 3 Big Commitments<\/h2>\n <div class=\"w-16 h-1 bg-white mx-auto lg:mx-0 mt-4 rounded-full opacity-50\"><\/div>\n <\/div>\n \n <div class=\"flex flex-col gap-6\">\n <div class=\"commitment-card bg-white\/10 backdrop-blur-md border border-white\/20 p-6 rounded-2xl shadow-xl hover:-translate-y-1 transition-transform duration-300 flex flex-col sm:flex-row gap-5 items-center sm:items-start text-center sm:text-left\">\n <div class=\"shrink-0 w-16 h-16 bg-yleGold text-yleBlue rounded-full flex items-center justify-center text-3xl shadow-lg\">\ud83d\udcda<\/div>\n <div>\n <h3 class=\"text-xl font-bold font-poppins mb-2 text-white\">Curriculum<\/h3>\n <p class=\"text-gray-200 text-sm leading-relaxed\">\n A Rigorous, Engaging Curriculum that combines academics and social-emotional learning with the arts, performance, and service through social-justice action projects.\n <\/p>\n <\/div>\n <\/div>\n \n <div class=\"commitment-card bg-white\/10 backdrop-blur-md border border-white\/20 p-6 rounded-2xl shadow-xl hover:-translate-y-1 transition-transform duration-300 flex flex-col sm:flex-row gap-5 items-center sm:items-start text-center sm:text-left\">\n <div class=\"shrink-0 w-16 h-16 bg-yleGold text-yleBlue rounded-full flex items-center justify-center text-3xl shadow-lg\">\ud83e\udd81<\/div>\n <div>\n <h3 class=\"text-xl font-bold font-poppins mb-2 text-white\">Leadership<\/h3>\n <p class=\"text-gray-200 text-sm leading-relaxed\">\n Leadership Development that affirms every student as a leader through culturally responsive-sustaining leadership opportunities in our school and community.\n <\/p>\n <\/div>\n <\/div>\n\n <div class=\"commitment-card bg-white\/10 backdrop-blur-md border border-white\/20 p-6 rounded-2xl shadow-xl hover:-translate-y-1 transition-transform duration-300 flex flex-col sm:flex-row gap-5 items-center sm:items-start text-center sm:text-left\">\n <div class=\"shrink-0 w-16 h-16 bg-yleGold text-yleBlue rounded-full flex items-center justify-center text-3xl shadow-lg\">\ud83e\udd1d<\/div>\n <div>\n <h3 class=\"text-xl font-bold font-poppins mb-2 text-white\">Partnerships<\/h3>\n <p class=\"text-gray-200 text-sm leading-relaxed\">\n Strong Partnerships among students, parents, staff and members of our community that are purpose-driven and supports our school in bringing our YLE vision to reality.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"lions-widget-container\">\n <div class=\"text-center lg:text-left mb-10\">\n <h2 class=\"text-3xl font-poppins font-bold text-yleGold drop-shadow-md\">How Will You Show Up As A LION Today?<\/h2>\n <div class=\"w-16 h-1 bg-white mx-auto lg:mx-0 mt-4 rounded-full opacity-50\"><\/div>\n <\/div>\n \n <div class=\"lions-accordion\">\n <div class=\"item\">\n <input type=\"radio\" name=\"accordion\" id=\"l-item\" checked>\n <div class=\"lions-card\" data-letter=\"L\">\n <label for=\"l-item\">\n <div class=\"lions-letter letter-L\">L<\/div>\n <div class=\"lions-value-title\">Leadership<\/div>\n <div class=\"lions-arrow\">\u203a<\/div>\n <\/label>\n <div class=\"lions-content\">\n <p class=\"lions-sub-value\">(Community\/ Citizenship\/ Responsibility)<\/p>\n <p class=\"lions-commitment\">I have a responsibility to lead my own learning.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item\">\n <input type=\"radio\" name=\"accordion\" id=\"i-item\">\n <div class=\"lions-card\" data-letter=\"I\">\n <label for=\"i-item\">\n <div class=\"lions-letter letter-I\">I<\/div>\n <div class=\"lions-value-title\">Integrity<\/div>\n <div class=\"lions-arrow\">\u203a<\/div>\n <\/label>\n <div class=\"lions-content\">\n <p class=\"lions-sub-value\">(Courage\/ Loyalty)<\/p>\n <p class=\"lions-commitment\">I am trusted to show up, do my best, and be my best everyday.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item\">\n <input type=\"radio\" name=\"accordion\" id=\"o-item\">\n <div class=\"lions-card\" data-letter=\"O\">\n <label for=\"o-item\">\n <div class=\"lions-letter letter-O\">O<\/div>\n <div class=\"lions-value-title\">Optimism<\/div>\n <div class=\"lions-arrow\">\u203a<\/div>\n <\/label>\n <div class=\"lions-content\">\n <p class=\"lions-sub-value\">(Hope and Determination)<\/p>\n <p class=\"lions-commitment\">I believe in myself and I have a plan to reach my goals.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item\">\n <input type=\"radio\" name=\"accordion\" id=\"n-item\">\n <div class=\"lions-card\" data-letter=\"N\">\n <label for=\"n-item\">\n <div class=\"lions-letter letter-N\">N<\/div>\n <div class=\"lions-value-title\">Non-Bias<\/div>\n <div class=\"lions-arrow\">\u203a<\/div>\n <\/label>\n <div class=\"lions-content\">\n <p class=\"lions-sub-value\">(Fairness and Diversity)<\/p>\n <p class=\"lions-commitment\">I have a responsibility to help my school feel safe, fair and welcoming to everyone.<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"item\">\n <input type=\"radio\" name=\"accordion\" id=\"s-item\">\n <div class=\"lions-card\" data-letter=\"S\">\n <label for=\"s-item\">\n <div class=\"lions-letter letter-S\">S<\/div>\n <div class=\"lions-value-title\">Service<\/div>\n <div class=\"lions-arrow\">\u203a<\/div>\n <\/label>\n <div class=\"lions-content\">\n <p class=\"lions-sub-value\">(Social Justice Action: Gratitude and Generosity)<\/p>\n <p class=\"lions-commitment\">I can lead a change that will help make my school and community become better.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n <section class=\"bg-gray-50 py-12\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <a href=\"https:\/\/csd7.org\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"block transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl rounded-3xl\">\n <img decoding=\"async\" \n src=\"https:\/\/ps369.org\/wp-content\/uploads\/2025\/08\/juice.jpg\" \n alt=\"Community School District 7\" \n class=\"w-full h-auto rounded-3xl shadow-xl object-cover max-h-[700px] object-center\"\n >\n <\/a>\n <\/div>\n <\/section>\n\n <script>\n \/\/ Wrap everything in a DOMContentLoaded to ensure elements exist\n document.addEventListener('DOMContentLoaded', () => {\n \n \/* ==========================\n 1. TICKER SCRIPT\n ========================== *\/\n const ticker = document.querySelector('.times-square-ticker');\n if (ticker) {\n const content = ticker.querySelector('.ticker-content');\n let isPaused = false;\n let position = 0;\n \n \/\/ Wait briefly for layout to settle to calculate scrollWidth properly\n setTimeout(() => {\n const scrollWidth = content.scrollWidth \/ 2;\n const scrollSpeed = scrollWidth \/ (60 * 50); \/\/ Speed config\n\n function animateTicker() {\n if (!isPaused) {\n position += scrollSpeed;\n if (position > scrollWidth) {\n position -= scrollWidth;\n }\n }\n content.style.transform = `translateX(-${position.toFixed(2)}px)`;\n requestAnimationFrame(animateTicker);\n }\n\n ticker.addEventListener('mouseenter', () => { isPaused = true; });\n ticker.addEventListener('mouseleave', () => { isPaused = false; });\n\n ticker.addEventListener('wheel', (e) => {\n e.preventDefault();\n position += e.deltaY * 0.75; \n \n if (position > scrollWidth) {\n position -= scrollWidth;\n } else if (position < 0) {\n position += scrollWidth;\n }\n content.style.transform = `translateX(-${position.toFixed(2)}px)`;\n });\n\n animateTicker();\n }, 500);\n }\n\n \/* ==========================\n 2. INTERACTIVE GLOW SCRIPT\n ========================== *\/\n const cards = document.querySelectorAll('.lions-card, .commitment-card');\n cards.forEach(card => {\n card.addEventListener('mousemove', (e) => {\n const rect = card.getBoundingClientRect();\n const x = e.clientX - rect.left;\n card.style.setProperty('--x', `${x}px`);\n card.style.setProperty('--y', `${e.clientY - rect.top}px`);\n });\n });\n\n });\n <\/script>\n<\/body>\n<\/html>\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>Young Leaders Elementary | PS369 Latest Updates We Empower Our Students To Become Leaders Of Their Own Learning YLE is selling patches of our logo! See Ms. Nunez at arrival and dismissal to purchase one for $5 YLE has been given an afterschool grant, and afterschool will return soon for the 2025-2026 school year! Stay […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-448","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ps369.org\/index.php?rest_route=\/wp\/v2\/pages\/448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ps369.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ps369.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ps369.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ps369.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=448"}],"version-history":[{"count":166,"href":"https:\/\/ps369.org\/index.php?rest_route=\/wp\/v2\/pages\/448\/revisions"}],"predecessor-version":[{"id":1412,"href":"https:\/\/ps369.org\/index.php?rest_route=\/wp\/v2\/pages\/448\/revisions\/1412"}],"wp:attachment":[{"href":"https:\/\/ps369.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}