Fade Slider<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/spsbbk.edu.in\/Home_Slider.css\">\r\n<\/head>\r\n<body>\r\n<div class=\"sliderBox\">\r\n <div id=\"slider1\">\r\n <div class=\"slides\">\r\n <div class=\"active\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Campus-scaled.png\" alt=\"Slide 1\"><\/div>\r\n <div><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Untitled-design-8-scaled.png\" alt=\"Slide 2\"><\/div>\r\n <div><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Library-scaled.png\" alt=\"Slide 3\"><\/div>\r\n <div><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Untitled-design-2.png\" alt=\"Slide 4\"><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Outdoor-Sports-scaled.png' alt='Outdoor Sports'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Vollyball-team-scaled.png' alt='Vollyball Team'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/DNA-Extraction-from-Vegetables-scaled.png' alt='DNA Exctraction'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Kids-Play-Area-scaled.png' alt='Kida Play Area'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Independence-Day-Parade-scaled.png' alt='Independence-Day-Parade'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/75th-indepen-scaled.png' alt='75th-independence-Day'><\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"prevBtn\" class=\"nav-button\"><\/div>\r\n <div id=\"nextBtn\" class=\"nav-button\"><\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/spsbbk.edu.in\/Home_Slider.js\"><\/script>\r\n<\/body>\r\n<\/html>\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<div class=\"elementor-element elementor-element-c2bb0ec e-flex e-con-boxed e-con e-parent\" data-id=\"c2bb0ec\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ffad3f elementor-widget elementor-widget-html\" data-id=\"9ffad3f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div style=\"background-image:url('https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2020\/12\/covid19-hero-green-circle-bg.svg')\">\r\n<link href=\"https:\/\/spsbbk.edu.in\/stylesheet1.css\" rel=\"stylesheet\" \/>\r\n\r\n<style>\r\n .container {\r\n display: flex;\r\n gap: 20px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .section {\r\n flex: 1 1 45%;\r\n background: white;\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\r\n position: relative;\r\n box-sizing: border-box;\r\n }\r\n\r\n .item {\r\n display: none;\r\n }\r\n\r\n .item.active {\r\n display: block;\r\n }\r\n\r\n .nav-buttons {\r\n margin-top: 15px;\r\n text-align: center;\r\n }\r\n\r\n .nav-buttons button {\r\n padding: 10px 15px;\r\n margin: 0 5px;\r\n background-color: #007BFF;\r\n color: white;\r\n border: none;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n }\r\n\r\n .nav-buttons button:hover {\r\n background-color: #0056b3;\r\n }\r\n\r\n .centerl{\r\n margin:auto;\r\n width:300px;\r\n }\r\n .centerr {\r\n margin: auto;\r\n margin-left:120px;\r\n width: 100%;}\r\n\r\n .centerl img{\r\n width: 60%;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n margin-top: 10px;\r\n }\r\n .centerr img {\r\n width: 70%;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n margin-top: 10px;\r\n }\r\n\r\n \/* \ud83d\udd3d Responsive for mobile devices *\/\r\n @media (max-width: 768px) {\r\n .container {\r\n flex-direction: column;\r\n }\r\n\r\n .section {\r\n width: 100%;\r\n }\r\n\r\n \r\n .centerr {\r\n margin-left:1px;\r\n }\r\n .centerl img, {\r\n width: 80%; \r\n }\r\n .centerr img{width:100%;}\r\n }\r\n .motto{\r\n flex: 1 1 45%;\r\n background: #048726;\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n gap: 10px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n color:white;\r\n}\r\n\r\n<\/style>\r\n<div class=\"motto\" ><br>\r\n<h1 style=\"text-align:center;color:white\">\u0936\u0940\u0932\u092e\u094d \u092a\u0930\u092e\u094d \u092d\u0942\u0937\u0923\u092e\u094d<\/h1>\r\n<p style=\"text-align:center;font-size:18px\">Welcome to SPS, where excellence meets education. Discover a dynamic learning environment, fostering creativity, curiosity and academic success.<\/p>\r\n<\/div>\r\n<br>\r\n<div class=\"container\">\r\n\r\n \r\n <div class=\"section\" id=\"left-section\">\r\n <h2 style=\"text-align:center\">From the Desk of<\/h2>\r\n <div class=\"item active\">\r\n\t<h3>Director's Message<\/h3>\r\n\t<div class=\"centerl\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-16-092548-e1750046683903.png\" alt=\"Left 1\"><\/div>\r\n <br><p><b>Dear Students, Parents, Teachers, and Staff Members,<\/b><br>I extend my warmest greetings and best wishes to all of you!<br>\r\n\r\nThe establishment of Sainik Public School, Oberi, Barabanki, was driven by our vision to provide quality education to the children of Barabanki city. Our mission is to empower our students not only academically but also to develop them into good human <b style=\"color:red\"><a href=\"https:\/\/spsbbk.edu.in\/index.php\/directors_message\/\"> Read more...<\/a><\/b><\/p>\r\n <\/div>\r\n <div class=\"item\">\r\n\t<h3>Principal's Message<\/h3>\r\n<div class=\"centerl\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/file-1.jpg\" alt=\"Left 1\"> <\/div>\r\n\r\n <br><p><b>Dear Parents and Students,<\/b><br>\r\nI warmly welcome you to SPS, where we embark on a journey to shape the minds of future leaders. Our school's motto, 'Sheelam Param Bhushnam'(Character is the highest ornament), serves as the foundation of our educational philosophy.<br>\r\nAt SPS, we strongly believe in inculcating Indian values in each individual, fostering academic excellence, and nurturing<b style=\"color:red\"><a href=\"https:\/\/spsbbk.edu.in\/index.php\/principals-message\/\"> Read more...<\/a><\/b><\/p>\r\n <\/div><br><br>\r\n <div class=\"nav-buttons\">\r\n <button onclick=\"prev('left-section')\">Previous<\/button>\r\n <button onclick=\"next('left-section')\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\" id=\"right-section\">\r\n <h2 style=\"text-align:center\">Infrastructure<\/h2>\r\n <div class=\"item active\">\r\n <h3>Sports Facilities<\/h3>\r\n <div class=\"centerr\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/kids-play-scaled.jpeg\" alt=\"Left 1\"> <\/div>\r\n <p>Our school boasts an extensive and well-planned sports infrastructure that supports the physical and mental well-being of every student. Designed to promote an active and healthy lifestyle, our campus includes multiple playgrounds and specialized sports zones for <b><a href=\"https:\/\/spsbbk.edu.in\/index.php\/infrastructure\/\">Read more...<\/a><\/b><\/p><br><br><br>\r\n <\/div>\r\n <div class=\"item\">\r\n <h3>Auditorium<\/h3>\r\n <div class=\"centerr\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Copy-of-Copy-of-SPS-Prospectus-A4-2.png\" alt=\"Left 1\"> <\/div>\r\n <p>The school proudly features a state-of-the-art indoor auditorium that spans an impressive 4000 sq. ft., serving as a dynamic center for cultural, creative, and academic expression. Designed to the highest standards, the auditorium is equipped with a cutting-edge JBL surround sound system, professional-grade lighting, <b><a href=\"https:\/\/spsbbk.edu.in\/index.php\/infrastructure\/\">Read more...<\/a><\/b><\/p>\r\n <\/div>\r\n <div class=\"item\">\r\n <h3>Library<\/h3>\r\n <div class=\"centerr\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Copy-of-Copy-of-SPS-Prospectus-A4-4-1-e1750310708908.png\" alt=\"Left 1\"> <\/div>\r\n <p>The school library is a spacious, serene, and resource-rich environment that inspires a lifelong love for reading and learning. Stocked with a wide range of books, journals, magazines, reference materials, and digital resources, the library serves as an intellectual hub for students and teachers alike. It offers separate reading areas for primary and senior students, ensuring an age-appropriate learning space <b><a href=\"https:\/\/spsbbk.edu.in\/index.php\/infrastructure\/\">Read more...<\/a><\/b><\/p>\r\n <\/div>\r\n \r\n <div class=\"nav-buttons\">\r\n <button onclick=\"prev('right-section')\">Previous<\/button>\r\n <button onclick=\"next('right-section')\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n function showSlide(sectionId, index) {\r\n const section = document.getElementById(sectionId);\r\n const items = section.querySelectorAll('.item');\r\n items.forEach((item, i) => {\r\n item.classList.toggle('active', i === index);\r\n });\r\n }\r\n\r\n const state = {\r\n 'left-section': 0,\r\n 'right-section': 0\r\n };\r\n\r\n function next(sectionId) {\r\n const items = document.getElementById(sectionId).querySelectorAll('.item');\r\n state[sectionId] = (state[sectionId] + 1) % items.length;\r\n showSlide(sectionId, state[sectionId]);\r\n }\r\n\r\n function prev(sectionId) {\r\n const items = document.getElementById(sectionId).querySelectorAll('.item');\r\n state[sectionId] = (state[sectionId] - 1 + items.length) % items.length;\r\n showSlide(sectionId, state[sectionId]);\r\n }\r\n\r\n \/\/ Auto Slide Every 5 Seconds\r\n setInterval(() => {\r\n next('left-section');\r\n next('right-section');\r\n }, 5000);\r\n <\/script>\r\n<\/div>\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<div class=\"elementor-element elementor-element-98486d8 e-flex e-con-boxed e-con e-parent\" data-id=\"98486d8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b3215d6 elementor-widget elementor-widget-html\" data-id=\"b3215d6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<head>\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: Arial, sans-serif;\r\n background: #f4f4f4;\r\n }\r\n\r\n .topcon-main-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: space-between;\r\n gap: 20px;\r\n padding: 20px;\r\n }\r\n\r\n .topcon-left-section1 {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: space-between;\r\n gap: 5px;\r\n width: 50%;\r\n background:white;\r\n border-radius:10px;\r\n }\r\n\r\n .topcon-slider-wrapper {\r\n width: 48%;\r\n background: white;\r\n border-radius: 10px;\r\n padding: 5px;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .topcon-slider-track {\r\n display: flex;\r\n transition: transform 0.5s ease-in-out;\r\n }\r\n\r\n .topcon-slide {\r\n flex: 0 0 100%;\r\n padding: 8px;\r\n }\r\n\r\n .topcon-slide-content {\r\n text-align: center;\r\n border: 1px solid #ccc;\r\n padding: 8px;\r\n border-radius: 8px;\r\n background: #fff;\r\n }\r\n\r\n .topcon-slide-content img {\r\n width: 150px;\r\n height: 150px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n }\r\n\r\n .topcon-nav-buttons {\r\n position: absolute;\r\n top: 35%;\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n pointer-events: none;\r\n }\r\n\r\n .topcon-nav-buttons button {\r\n background-color: #007BFF;\r\n border: none;\r\n color: white;\r\n padding: 8px 12px;\r\n font-size: 16px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n pointer-events: all;\r\n }\r\n\r\n .topcon-right-section {\r\n flex: 1 1 40%;\r\n min-width: 300px;\r\n background: #fff;\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n }\r\n.flip-card {\r\n background-color: transparent;\r\n width: 150px;\r\n height: 150px;\r\n perspective: 1000px;\r\n margin-left:14px;\r\n border-radius:10px;\r\n}\r\n\r\n.flip-card-inner {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n border-radius:10px;\r\n text-align: center;\r\n transition: transform 0.6s;\r\n transform-style: preserve-3d;\r\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\r\n}\r\n\r\n.flip-card:hover .flip-card-inner {\r\n transform: rotateY(180deg);\r\n border-radius:10px;\r\n}\r\n\r\n.flip-card-front, .flip-card-back {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n border-radius:10px;\r\n}\r\n\r\n.flip-card-front {\r\n background-color: #bbb;\r\n color: black;\r\n border-radius:10px;\r\n}\r\n.flip-card-front img {\r\n border-radius:10px;\r\n width:150px;\r\n height: 150px;\r\n}\r\n\r\n.flip-card-back {\r\n background-color: #2980b9;\r\n color: white;\r\n border-radius:10px;\r\n transform: rotateY(180deg);\r\n}\r\n.flip-card-back h3 {\r\n font-size:27px;\r\n color:white;\r\n}\r\n @media (max-width: 768px) {\r\n .topcon-main-container {\r\n flex-direction: column;\r\n }\r\n\r\n .topcon-left-section1,\r\n .topcon-right-section {\r\n width: 100%;\r\n }\r\n\r\n .topcon-left-section1 {\r\n flex-direction: column;\r\n }\r\n\r\n .topcon-slider-wrapper {\r\n width: 100%;\r\n }\r\n .flip-card {\r\n background-color: transparent;\r\n width: 130px;\r\n height: 130px;\r\n perspective: 1000px;\r\n margin-left:14px;\r\n border-radius:10px;\r\n}\r\n.flip-card-front img {\r\n border-radius:10px;\r\n width:130px;\r\n height: 130px;\r\n}\r\n.flip-card-back h3 {\r\n font-size:20px;\r\n color:white;\r\n}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n <div class=\"topcon-main-container\">\r\n\r\n \r\n <div class=\"topcon-left-section1\">\r\n<h2 style=\"width:100%; text-align:center;\">Our Toppers<\/h2>\r\n \r\n <div class=\"topcon-slider-wrapper\">\r\n <div class=\"topcon-slider-track\" id=\"topcon-slider-x\">\r\n \r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Soham-Singh.png\" alt=\"Topper1-X\">\r\n <p><strong>Name:<\/strong> SOHAM SINGH<\/p>\r\n <p><strong>Percentage:<\/strong> 97.40%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Vivek-Yadav.png\" alt=\"Topper2-X\">\r\n <p><strong>Name:<\/strong> VIVEK YADAV<\/p>\r\n <p><strong>Percentage:<\/strong> 97.60%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Shivanshu-SIngh.png\" alt=\"Topper3-X\">\r\n <p><strong>Name:<\/strong> SHIVANSHU SINGH<\/p>\r\n <p><strong>Percentage:<\/strong> 98.80%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Saumya-Verma.png\" alt=\"Topper4-X\">\r\n <p><strong>Name:<\/strong> SAUMYA VERMA<\/p>\r\n <p><strong>Percentage:<\/strong> 96.40%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Sakshi-Chauhan.png\" alt=\"Topper5-X\">\r\n <p><strong>Name:<\/strong> SHAKSHI CHAUHAN<\/p>\r\n <p><strong>Percentage:<\/strong> 93%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Divya.png\" alt=\"Topper6-X\">\r\n <p><strong>Name:<\/strong> DIVYA<\/p>\r\n <p><strong>Percentage:<\/strong> 89.60%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Jatin-Verma.png\" alt=\"Topper7-X\">\r\n <p><strong>Name:<\/strong> JATIN VERMA<\/p>\r\n <p><strong>Percentage:<\/strong> 98%<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <div class=\"topcon-nav-buttons\">\r\n <button onclick=\"topconPrevSlide('x')\">\u276e<\/button>\r\n <button onclick=\"topconNextSlide('x')\">\u276f<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"topcon-slider-wrapper\">\r\n <div class=\"topcon-slider-track\" id=\"topcon-slider-xii\">\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Soham-Singh.png\" alt=\"Topper1-XII\">\r\n <p><strong>Name:<\/strong> SOHAM SINGH<\/p>\r\n <p><strong>Percentage:<\/strong> 98.20%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Atul-Verma.png\" alt=\"Topper2-XII\">\r\n <p><strong>Name:<\/strong> ATUL VERMA<\/p>\r\n <p><strong>Percentage:<\/strong> 96.20%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Ayush-Kumar.png\" alt=\"Topper3-XII\">\r\n <p><strong>Name:<\/strong> AYUSH KUMAR<\/p>\r\n <p><strong>Percentage:<\/strong> 97.60%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Kajal.png\" alt=\"Topper4-XII\">\r\n <p><strong>Name:<\/strong> KAJAL<\/p>\r\n <p><strong>Percentage:<\/strong> 94%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Akshat-Gupta.png\" alt=\"Topper5-XII\">\r\n <p><strong>Name:<\/strong> AKSHAT GUPTA<\/p>\r\n <p><strong>Percentage:<\/strong> 90%<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <div class=\"topcon-nav-buttons\">\r\n <button onclick=\"topconPrevSlide('xii')\">\u276e<\/button>\r\n <button onclick=\"topconNextSlide('xii')\">\u276f<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"topcon-right-section\">\r\n <h2 style=\"text-align:center\">Houses of the School<\/h2> \r\n<div class=\"flip-card\" style=\"display: inline-block;\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <img decoding=\"async\" src=\"https:\/\/udaipurwebdesigner.com\/wp-content\/uploads\/2022\/06\/maharana-pratap-image-hd-png.png\" alt=\"Avatar\" >\r\n <\/div>\r\n <div class=\"flip-card-back\" style=\"background:#FFC300;\">\r\n <h3>Maharana Pratap House<\/h3> \r\n <p>(Yellow House)<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"flip-card\" style=\"display: inline-block\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/originals\/e7\/0a\/76\/e70a76d99c1fca4c54d18f78358f1de8.jpg\" alt=\"Avatar\" >\r\n <\/div>\r\n <div class=\"flip-card-back\" style=\"background:red\">\r\n <h3>Chhatrapati Shivaji House<\/h3> \r\n <p>(Red House)<\/p> \r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"flip-card\" style=\"display: inline-block\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/564x\/23\/c1\/46\/23c146f1a587358e355c0e793fe0295f.jpg\" alt=\"Avatar\">\r\n <\/div>\r\n <div class=\"flip-card-back\" style=\"background:green\">\r\n <h3>Maharani Lakshmibai House<\/h3> \r\n <p>(Green House)<\/p> \r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"flip-card\" style=\"display: inline-block\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <img decoding=\"async\" src=\"https:\/\/pbs.twimg.com\/media\/E3QOHj0UYAIR5Ki.jpg\" alt=\"Avatar\">\r\n <\/div>\r\n <div class=\"flip-card-back\" style=\"background:#062176\">\r\n <h3>Prithviraj Chauhan House<\/h3> \r\n <p>(Blue House)<\/p> \r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n let topconIndexX = 0;\r\n let topconIndexXII = 0;\r\n\r\n function topconUpdateSlide(id, index) {\r\n const slider = document.getElementById(`topcon-slider-${id}`);\r\n const slides = slider.querySelectorAll('.topcon-slide');\r\n const offset = -(index * 100);\r\n slider.style.transform = `translateX(${offset}%)`;\r\n }\r\n\r\n function topconNextSlide(id) {\r\n const slider = document.getElementById(`topcon-slider-${id}`);\r\n const slides = slider.querySelectorAll('.topcon-slide');\r\n if (id === 'x') {\r\n topconIndexX = (topconIndexX + 1) % slides.length;\r\n topconUpdateSlide('x', topconIndexX);\r\n } else if (id === 'xii') {\r\n topconIndexXII = (topconIndexXII + 1) % slides.length;\r\n topconUpdateSlide('xii', topconIndexXII);\r\n }\r\n }\r\n\r\n function topconPrevSlide(id) {\r\n const slider = document.getElementById(`topcon-slider-${id}`);\r\n const slides = slider.querySelectorAll('.topcon-slide');\r\n if (id === 'x') {\r\n topconIndexX = (topconIndexX - 1 + slides.length) % slides.length;\r\n topconUpdateSlide('x', topconIndexX);\r\n } else if (id === 'xii') {\r\n topconIndexXII = (topconIndexXII - 1 + slides.length) % slides.length;\r\n topconUpdateSlide('xii', topconIndexXII);\r\n }\r\n }\r\n\r\n \/\/ Auto Slide\r\n setInterval(() => topconNextSlide('x'), 3000);\r\n setInterval(() => topconNextSlide('xii'), 3000);\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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<div class=\"elementor-element elementor-element-461eaed e-flex e-con-boxed e-con e-parent\" data-id=\"461eaed\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97d2b8c elementor-widget elementor-widget-html\" data-id=\"97d2b8c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\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>Photo Gallery Slider<\/title>\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n .imgcon-gallery-title {\r\n font-size: 2em;\r\n margin-top: 20px;\r\n color: red;\r\n letter-spacing: 2px;\r\n text-align: center;\r\n }\r\n\r\n .imgcon-slider-container {\r\n position: relative;\r\n overflow: hidden;\r\n width: 90%;\r\n margin: 20px auto;\r\n }\r\n\r\n .imgcon-slider-track {\r\n display: flex;\r\n transition: transform 1s ease-in-out;\r\n }\r\n\r\n .imgcon-slide {\r\n flex: 0 0 25%;\r\n padding: 10px;\r\n }\r\n\r\n .imgcon-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 10px;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .imgcon-slide {\r\n flex: 0 0 50%;\r\n }\r\n .imgcon-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 10px;\r\n }\r\n }\r\n\r\n .imgcon-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background-color: rgba(255, 255, 255, 0.2);\r\n border: none;\r\n color: white;\r\n font-size: 2rem;\r\n cursor: pointer;\r\n padding: 5px 10px;\r\n z-index: 2;\r\n }\r\n\r\n .imgcon-btn:hover {\r\n background-color: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .imgcon-btn-left {\r\n left: 0;\r\n }\r\n\r\n .imgcon-btn-right {\r\n right: 0;\r\n }\r\n\r\n .imgcon-view-all {\r\n display: inline-block;\r\n padding: 10px 20px;\r\n margin: 20px auto;\r\n border: 2px solid white;\r\n color: white;\r\n text-decoration: none;\r\n border-radius: 5px;\r\n transition: 0.3s;\r\n }\r\n\r\n .imgcon-view-all:hover {\r\n background-color: white;\r\n color: black;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div style=\"background:#050b5a;border-radius:10px;text-align:center\">\r\n <h2 class=\"imgcon-gallery-title\" style=\"color:white\">PHOTO GALLERY<\/h2>\r\n\r\n <div class=\"imgcon-slider-container\">\r\n \r\n <button class=\"imgcon-btn imgcon-btn-left\" onclick=\"imgconSlideManual(-1)\">\u276e<\/button>\r\n\r\n <div class=\"imgcon-slider-track\" id=\"imgcon-slider-track\">\r\n \r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-03-at-1.18.06-PM-5-scaled.jpeg\" alt=\"1\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-03-at-12.59.36-PM-12-scaled.jpeg\" alt=\"2\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-03-at-12.44.35-PM-2-scaled.jpeg\" alt=\"3\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-03-at-12.04.34-PM-2-scaled.jpeg\" alt=\"4\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/01\/18-1-scaled.jpeg\" alt=\"5\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/01\/20-scaled.jpeg\" alt=\"6\"><\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <button class=\"imgcon-btn imgcon-btn-right\" onclick=\"imgconSlideManual(1)\">\u276f<\/button>\r\n <\/div>\r\n\r\n <a class=\"imgcon-view-all\" href=\"https:\/\/spsbbk.edu.in\/index.php\/gallery\/\">View All<\/a>\r\n<\/div>\r\n <script>\r\n const imgconTrack = document.getElementById(\"imgcon-slider-track\");\r\n let imgconIndex = 0;\r\n let imgconInterval;\r\n\r\n \/\/ Clone original slides to make seamless loop\r\n const originalSlides = Array.from(imgconTrack.children);\r\n originalSlides.forEach(slide => {\r\n const clone = slide.cloneNode(true);\r\n imgconTrack.appendChild(clone);\r\n });\r\n\r\n function imgconGetVisibleSlides() {\r\n return window.innerWidth <= 768 ? 2 : 4;\r\n }\r\n\r\n function imgconSlideNext() {\r\n const visible = imgconGetVisibleSlides();\r\n const slideWidth = 100 \/ visible;\r\n const totalSlides = imgconTrack.children.length;\r\n const maxIndex = totalSlides - visible;\r\n\r\n imgconIndex++;\r\n imgconTrack.style.transition = \"transform 1s ease-in-out\";\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n\r\n if (imgconIndex >= maxIndex) {\r\n setTimeout(() => {\r\n imgconTrack.style.transition = \"none\";\r\n imgconIndex = 0;\r\n imgconTrack.style.transform = `translateX(0)`;\r\n }, 1000);\r\n }\r\n }\r\n\r\n function imgconSlideManual(direction) {\r\n clearInterval(imgconInterval);\r\n imgconIndex += direction;\r\n const visible = imgconGetVisibleSlides();\r\n const slideWidth = 100 \/ visible;\r\n const totalSlides = imgconTrack.children.length;\r\n const maxIndex = totalSlides - visible;\r\n\r\n if (imgconIndex < 0) {\r\n imgconIndex = maxIndex - 1;\r\n imgconTrack.style.transition = \"none\";\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n setTimeout(() => {\r\n imgconTrack.style.transition = \"transform 1s ease-in-out\";\r\n imgconIndex++;\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n }, 20);\r\n } else if (imgconIndex >= maxIndex) {\r\n imgconTrack.style.transition = \"none\";\r\n imgconIndex = 0;\r\n imgconTrack.style.transform = `translateX(0)`;\r\n setTimeout(() => {\r\n imgconTrack.style.transition = \"transform 1s ease-in-out\";\r\n imgconIndex++;\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n }, 20);\r\n } else {\r\n imgconTrack.style.transition = \"transform 1s ease-in-out\";\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n }\r\n\r\n imgconStartAutoSlide();\r\n }\r\n\r\n function imgconStartAutoSlide() {\r\n imgconInterval = setInterval(imgconSlideNext, 3000);\r\n }\r\n\r\n imgconStartAutoSlide();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Fade Slider \u0936\u0940\u0932\u092e\u094d \u092a\u0930\u092e\u094d \u092d\u0942\u0937\u0923\u092e\u094d Welcome to SPS, where excellence meets education. Discover a dynamic learning environment, fostering creativity, curiosity and academic success. From the Desk of Director’s Message Dear Students, Parents, Teachers, and Staff Members,I extend my warmest greetings and best wishes to all of you! The establishment of Sainik Public School, Oberi, Barabanki, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":238,"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":5244,"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/pages\/15\/revisions\/5244"}],"wp:attachment":[{"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t

\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Fade Slider<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/spsbbk.edu.in\/Home_Slider.css\">\r\n<\/head>\r\n<body>\r\n<div class=\"sliderBox\">\r\n <div id=\"slider1\">\r\n <div class=\"slides\">\r\n <div class=\"active\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Campus-scaled.png\" alt=\"Slide 1\"><\/div>\r\n <div><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Untitled-design-8-scaled.png\" alt=\"Slide 2\"><\/div>\r\n <div><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Library-scaled.png\" alt=\"Slide 3\"><\/div>\r\n <div><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Untitled-design-2.png\" alt=\"Slide 4\"><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Outdoor-Sports-scaled.png' alt='Outdoor Sports'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Vollyball-team-scaled.png' alt='Vollyball Team'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/DNA-Extraction-from-Vegetables-scaled.png' alt='DNA Exctraction'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Kids-Play-Area-scaled.png' alt='Kida Play Area'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Independence-Day-Parade-scaled.png' alt='Independence-Day-Parade'><\/div>\r\n <div><img src='https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/75th-indepen-scaled.png' alt='75th-independence-Day'><\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"prevBtn\" class=\"nav-button\"><\/div>\r\n <div id=\"nextBtn\" class=\"nav-button\"><\/div>\r\n<\/div>\r\n\r\n<script src=\"https:\/\/spsbbk.edu.in\/Home_Slider.js\"><\/script>\r\n<\/body>\r\n<\/html>\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<div class=\"elementor-element elementor-element-c2bb0ec e-flex e-con-boxed e-con e-parent\" data-id=\"c2bb0ec\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ffad3f elementor-widget elementor-widget-html\" data-id=\"9ffad3f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div style=\"background-image:url('https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2020\/12\/covid19-hero-green-circle-bg.svg')\">\r\n<link href=\"https:\/\/spsbbk.edu.in\/stylesheet1.css\" rel=\"stylesheet\" \/>\r\n\r\n<style>\r\n .container {\r\n display: flex;\r\n gap: 20px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .section {\r\n flex: 1 1 45%;\r\n background: white;\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\r\n position: relative;\r\n box-sizing: border-box;\r\n }\r\n\r\n .item {\r\n display: none;\r\n }\r\n\r\n .item.active {\r\n display: block;\r\n }\r\n\r\n .nav-buttons {\r\n margin-top: 15px;\r\n text-align: center;\r\n }\r\n\r\n .nav-buttons button {\r\n padding: 10px 15px;\r\n margin: 0 5px;\r\n background-color: #007BFF;\r\n color: white;\r\n border: none;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n }\r\n\r\n .nav-buttons button:hover {\r\n background-color: #0056b3;\r\n }\r\n\r\n .centerl{\r\n margin:auto;\r\n width:300px;\r\n }\r\n .centerr {\r\n margin: auto;\r\n margin-left:120px;\r\n width: 100%;}\r\n\r\n .centerl img{\r\n width: 60%;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n margin-top: 10px;\r\n }\r\n .centerr img {\r\n width: 70%;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n margin-top: 10px;\r\n }\r\n\r\n \/* \ud83d\udd3d Responsive for mobile devices *\/\r\n @media (max-width: 768px) {\r\n .container {\r\n flex-direction: column;\r\n }\r\n\r\n .section {\r\n width: 100%;\r\n }\r\n\r\n \r\n .centerr {\r\n margin-left:1px;\r\n }\r\n .centerl img, {\r\n width: 80%; \r\n }\r\n .centerr img{width:100%;}\r\n }\r\n .motto{\r\n flex: 1 1 45%;\r\n background: #048726;\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0,0,0,0.1);\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n gap: 10px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n color:white;\r\n}\r\n\r\n<\/style>\r\n<div class=\"motto\" ><br>\r\n<h1 style=\"text-align:center;color:white\">\u0936\u0940\u0932\u092e\u094d \u092a\u0930\u092e\u094d \u092d\u0942\u0937\u0923\u092e\u094d<\/h1>\r\n<p style=\"text-align:center;font-size:18px\">Welcome to SPS, where excellence meets education. Discover a dynamic learning environment, fostering creativity, curiosity and academic success.<\/p>\r\n<\/div>\r\n<br>\r\n<div class=\"container\">\r\n\r\n \r\n <div class=\"section\" id=\"left-section\">\r\n <h2 style=\"text-align:center\">From the Desk of<\/h2>\r\n <div class=\"item active\">\r\n\t<h3>Director's Message<\/h3>\r\n\t<div class=\"centerl\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-16-092548-e1750046683903.png\" alt=\"Left 1\"><\/div>\r\n <br><p><b>Dear Students, Parents, Teachers, and Staff Members,<\/b><br>I extend my warmest greetings and best wishes to all of you!<br>\r\n\r\nThe establishment of Sainik Public School, Oberi, Barabanki, was driven by our vision to provide quality education to the children of Barabanki city. Our mission is to empower our students not only academically but also to develop them into good human <b style=\"color:red\"><a href=\"https:\/\/spsbbk.edu.in\/index.php\/directors_message\/\"> Read more...<\/a><\/b><\/p>\r\n <\/div>\r\n <div class=\"item\">\r\n\t<h3>Principal's Message<\/h3>\r\n<div class=\"centerl\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/file-1.jpg\" alt=\"Left 1\"> <\/div>\r\n\r\n <br><p><b>Dear Parents and Students,<\/b><br>\r\nI warmly welcome you to SPS, where we embark on a journey to shape the minds of future leaders. Our school's motto, 'Sheelam Param Bhushnam'(Character is the highest ornament), serves as the foundation of our educational philosophy.<br>\r\nAt SPS, we strongly believe in inculcating Indian values in each individual, fostering academic excellence, and nurturing<b style=\"color:red\"><a href=\"https:\/\/spsbbk.edu.in\/index.php\/principals-message\/\"> Read more...<\/a><\/b><\/p>\r\n <\/div><br><br>\r\n <div class=\"nav-buttons\">\r\n <button onclick=\"prev('left-section')\">Previous<\/button>\r\n <button onclick=\"next('left-section')\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\" id=\"right-section\">\r\n <h2 style=\"text-align:center\">Infrastructure<\/h2>\r\n <div class=\"item active\">\r\n <h3>Sports Facilities<\/h3>\r\n <div class=\"centerr\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/kids-play-scaled.jpeg\" alt=\"Left 1\"> <\/div>\r\n <p>Our school boasts an extensive and well-planned sports infrastructure that supports the physical and mental well-being of every student. Designed to promote an active and healthy lifestyle, our campus includes multiple playgrounds and specialized sports zones for <b><a href=\"https:\/\/spsbbk.edu.in\/index.php\/infrastructure\/\">Read more...<\/a><\/b><\/p><br><br><br>\r\n <\/div>\r\n <div class=\"item\">\r\n <h3>Auditorium<\/h3>\r\n <div class=\"centerr\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Copy-of-Copy-of-SPS-Prospectus-A4-2.png\" alt=\"Left 1\"> <\/div>\r\n <p>The school proudly features a state-of-the-art indoor auditorium that spans an impressive 4000 sq. ft., serving as a dynamic center for cultural, creative, and academic expression. Designed to the highest standards, the auditorium is equipped with a cutting-edge JBL surround sound system, professional-grade lighting, <b><a href=\"https:\/\/spsbbk.edu.in\/index.php\/infrastructure\/\">Read more...<\/a><\/b><\/p>\r\n <\/div>\r\n <div class=\"item\">\r\n <h3>Library<\/h3>\r\n <div class=\"centerr\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Copy-of-Copy-of-SPS-Prospectus-A4-4-1-e1750310708908.png\" alt=\"Left 1\"> <\/div>\r\n <p>The school library is a spacious, serene, and resource-rich environment that inspires a lifelong love for reading and learning. Stocked with a wide range of books, journals, magazines, reference materials, and digital resources, the library serves as an intellectual hub for students and teachers alike. It offers separate reading areas for primary and senior students, ensuring an age-appropriate learning space <b><a href=\"https:\/\/spsbbk.edu.in\/index.php\/infrastructure\/\">Read more...<\/a><\/b><\/p>\r\n <\/div>\r\n \r\n <div class=\"nav-buttons\">\r\n <button onclick=\"prev('right-section')\">Previous<\/button>\r\n <button onclick=\"next('right-section')\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n function showSlide(sectionId, index) {\r\n const section = document.getElementById(sectionId);\r\n const items = section.querySelectorAll('.item');\r\n items.forEach((item, i) => {\r\n item.classList.toggle('active', i === index);\r\n });\r\n }\r\n\r\n const state = {\r\n 'left-section': 0,\r\n 'right-section': 0\r\n };\r\n\r\n function next(sectionId) {\r\n const items = document.getElementById(sectionId).querySelectorAll('.item');\r\n state[sectionId] = (state[sectionId] + 1) % items.length;\r\n showSlide(sectionId, state[sectionId]);\r\n }\r\n\r\n function prev(sectionId) {\r\n const items = document.getElementById(sectionId).querySelectorAll('.item');\r\n state[sectionId] = (state[sectionId] - 1 + items.length) % items.length;\r\n showSlide(sectionId, state[sectionId]);\r\n }\r\n\r\n \/\/ Auto Slide Every 5 Seconds\r\n setInterval(() => {\r\n next('left-section');\r\n next('right-section');\r\n }, 5000);\r\n <\/script>\r\n<\/div>\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<div class=\"elementor-element elementor-element-98486d8 e-flex e-con-boxed e-con e-parent\" data-id=\"98486d8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b3215d6 elementor-widget elementor-widget-html\" data-id=\"b3215d6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<head>\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: Arial, sans-serif;\r\n background: #f4f4f4;\r\n }\r\n\r\n .topcon-main-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: space-between;\r\n gap: 20px;\r\n padding: 20px;\r\n }\r\n\r\n .topcon-left-section1 {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: space-between;\r\n gap: 5px;\r\n width: 50%;\r\n background:white;\r\n border-radius:10px;\r\n }\r\n\r\n .topcon-slider-wrapper {\r\n width: 48%;\r\n background: white;\r\n border-radius: 10px;\r\n padding: 5px;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .topcon-slider-track {\r\n display: flex;\r\n transition: transform 0.5s ease-in-out;\r\n }\r\n\r\n .topcon-slide {\r\n flex: 0 0 100%;\r\n padding: 8px;\r\n }\r\n\r\n .topcon-slide-content {\r\n text-align: center;\r\n border: 1px solid #ccc;\r\n padding: 8px;\r\n border-radius: 8px;\r\n background: #fff;\r\n }\r\n\r\n .topcon-slide-content img {\r\n width: 150px;\r\n height: 150px;\r\n object-fit: cover;\r\n border-radius: 8px;\r\n }\r\n\r\n .topcon-nav-buttons {\r\n position: absolute;\r\n top: 35%;\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n pointer-events: none;\r\n }\r\n\r\n .topcon-nav-buttons button {\r\n background-color: #007BFF;\r\n border: none;\r\n color: white;\r\n padding: 8px 12px;\r\n font-size: 16px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n pointer-events: all;\r\n }\r\n\r\n .topcon-right-section {\r\n flex: 1 1 40%;\r\n min-width: 300px;\r\n background: #fff;\r\n padding: 20px;\r\n border-radius: 10px;\r\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\r\n }\r\n.flip-card {\r\n background-color: transparent;\r\n width: 150px;\r\n height: 150px;\r\n perspective: 1000px;\r\n margin-left:14px;\r\n border-radius:10px;\r\n}\r\n\r\n.flip-card-inner {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n border-radius:10px;\r\n text-align: center;\r\n transition: transform 0.6s;\r\n transform-style: preserve-3d;\r\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);\r\n}\r\n\r\n.flip-card:hover .flip-card-inner {\r\n transform: rotateY(180deg);\r\n border-radius:10px;\r\n}\r\n\r\n.flip-card-front, .flip-card-back {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n -webkit-backface-visibility: hidden;\r\n backface-visibility: hidden;\r\n border-radius:10px;\r\n}\r\n\r\n.flip-card-front {\r\n background-color: #bbb;\r\n color: black;\r\n border-radius:10px;\r\n}\r\n.flip-card-front img {\r\n border-radius:10px;\r\n width:150px;\r\n height: 150px;\r\n}\r\n\r\n.flip-card-back {\r\n background-color: #2980b9;\r\n color: white;\r\n border-radius:10px;\r\n transform: rotateY(180deg);\r\n}\r\n.flip-card-back h3 {\r\n font-size:27px;\r\n color:white;\r\n}\r\n @media (max-width: 768px) {\r\n .topcon-main-container {\r\n flex-direction: column;\r\n }\r\n\r\n .topcon-left-section1,\r\n .topcon-right-section {\r\n width: 100%;\r\n }\r\n\r\n .topcon-left-section1 {\r\n flex-direction: column;\r\n }\r\n\r\n .topcon-slider-wrapper {\r\n width: 100%;\r\n }\r\n .flip-card {\r\n background-color: transparent;\r\n width: 130px;\r\n height: 130px;\r\n perspective: 1000px;\r\n margin-left:14px;\r\n border-radius:10px;\r\n}\r\n.flip-card-front img {\r\n border-radius:10px;\r\n width:130px;\r\n height: 130px;\r\n}\r\n.flip-card-back h3 {\r\n font-size:20px;\r\n color:white;\r\n}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n <div class=\"topcon-main-container\">\r\n\r\n \r\n <div class=\"topcon-left-section1\">\r\n<h2 style=\"width:100%; text-align:center;\">Our Toppers<\/h2>\r\n \r\n <div class=\"topcon-slider-wrapper\">\r\n <div class=\"topcon-slider-track\" id=\"topcon-slider-x\">\r\n \r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Soham-Singh.png\" alt=\"Topper1-X\">\r\n <p><strong>Name:<\/strong> SOHAM SINGH<\/p>\r\n <p><strong>Percentage:<\/strong> 97.40%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Vivek-Yadav.png\" alt=\"Topper2-X\">\r\n <p><strong>Name:<\/strong> VIVEK YADAV<\/p>\r\n <p><strong>Percentage:<\/strong> 97.60%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Shivanshu-SIngh.png\" alt=\"Topper3-X\">\r\n <p><strong>Name:<\/strong> SHIVANSHU SINGH<\/p>\r\n <p><strong>Percentage:<\/strong> 98.80%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Saumya-Verma.png\" alt=\"Topper4-X\">\r\n <p><strong>Name:<\/strong> SAUMYA VERMA<\/p>\r\n <p><strong>Percentage:<\/strong> 96.40%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Sakshi-Chauhan.png\" alt=\"Topper5-X\">\r\n <p><strong>Name:<\/strong> SHAKSHI CHAUHAN<\/p>\r\n <p><strong>Percentage:<\/strong> 93%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Divya.png\" alt=\"Topper6-X\">\r\n <p><strong>Name:<\/strong> DIVYA<\/p>\r\n <p><strong>Percentage:<\/strong> 89.60%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>X TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Jatin-Verma.png\" alt=\"Topper7-X\">\r\n <p><strong>Name:<\/strong> JATIN VERMA<\/p>\r\n <p><strong>Percentage:<\/strong> 98%<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <div class=\"topcon-nav-buttons\">\r\n <button onclick=\"topconPrevSlide('x')\">\u276e<\/button>\r\n <button onclick=\"topconNextSlide('x')\">\u276f<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"topcon-slider-wrapper\">\r\n <div class=\"topcon-slider-track\" id=\"topcon-slider-xii\">\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Soham-Singh.png\" alt=\"Topper1-XII\">\r\n <p><strong>Name:<\/strong> SOHAM SINGH<\/p>\r\n <p><strong>Percentage:<\/strong> 98.20%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Atul-Verma.png\" alt=\"Topper2-XII\">\r\n <p><strong>Name:<\/strong> ATUL VERMA<\/p>\r\n <p><strong>Percentage:<\/strong> 96.20%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Ayush-Kumar.png\" alt=\"Topper3-XII\">\r\n <p><strong>Name:<\/strong> AYUSH KUMAR<\/p>\r\n <p><strong>Percentage:<\/strong> 97.60%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Kajal.png\" alt=\"Topper4-XII\">\r\n <p><strong>Name:<\/strong> KAJAL<\/p>\r\n <p><strong>Percentage:<\/strong> 94%<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"topcon-slide\">\r\n <div class=\"topcon-slide-content\">\r\n <h3>XII TOPPERS<\/h3>\r\n <img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/Akshat-Gupta.png\" alt=\"Topper5-XII\">\r\n <p><strong>Name:<\/strong> AKSHAT GUPTA<\/p>\r\n <p><strong>Percentage:<\/strong> 90%<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <div class=\"topcon-nav-buttons\">\r\n <button onclick=\"topconPrevSlide('xii')\">\u276e<\/button>\r\n <button onclick=\"topconNextSlide('xii')\">\u276f<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"topcon-right-section\">\r\n <h2 style=\"text-align:center\">Houses of the School<\/h2> \r\n<div class=\"flip-card\" style=\"display: inline-block;\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <img decoding=\"async\" src=\"https:\/\/udaipurwebdesigner.com\/wp-content\/uploads\/2022\/06\/maharana-pratap-image-hd-png.png\" alt=\"Avatar\" >\r\n <\/div>\r\n <div class=\"flip-card-back\" style=\"background:#FFC300;\">\r\n <h3>Maharana Pratap House<\/h3> \r\n <p>(Yellow House)<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"flip-card\" style=\"display: inline-block\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/originals\/e7\/0a\/76\/e70a76d99c1fca4c54d18f78358f1de8.jpg\" alt=\"Avatar\" >\r\n <\/div>\r\n <div class=\"flip-card-back\" style=\"background:red\">\r\n <h3>Chhatrapati Shivaji House<\/h3> \r\n <p>(Red House)<\/p> \r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"flip-card\" style=\"display: inline-block\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/564x\/23\/c1\/46\/23c146f1a587358e355c0e793fe0295f.jpg\" alt=\"Avatar\">\r\n <\/div>\r\n <div class=\"flip-card-back\" style=\"background:green\">\r\n <h3>Maharani Lakshmibai House<\/h3> \r\n <p>(Green House)<\/p> \r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n<div class=\"flip-card\" style=\"display: inline-block\">\r\n <div class=\"flip-card-inner\">\r\n <div class=\"flip-card-front\">\r\n <img decoding=\"async\" src=\"https:\/\/pbs.twimg.com\/media\/E3QOHj0UYAIR5Ki.jpg\" alt=\"Avatar\">\r\n <\/div>\r\n <div class=\"flip-card-back\" style=\"background:#062176\">\r\n <h3>Prithviraj Chauhan House<\/h3> \r\n <p>(Blue House)<\/p> \r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n let topconIndexX = 0;\r\n let topconIndexXII = 0;\r\n\r\n function topconUpdateSlide(id, index) {\r\n const slider = document.getElementById(`topcon-slider-${id}`);\r\n const slides = slider.querySelectorAll('.topcon-slide');\r\n const offset = -(index * 100);\r\n slider.style.transform = `translateX(${offset}%)`;\r\n }\r\n\r\n function topconNextSlide(id) {\r\n const slider = document.getElementById(`topcon-slider-${id}`);\r\n const slides = slider.querySelectorAll('.topcon-slide');\r\n if (id === 'x') {\r\n topconIndexX = (topconIndexX + 1) % slides.length;\r\n topconUpdateSlide('x', topconIndexX);\r\n } else if (id === 'xii') {\r\n topconIndexXII = (topconIndexXII + 1) % slides.length;\r\n topconUpdateSlide('xii', topconIndexXII);\r\n }\r\n }\r\n\r\n function topconPrevSlide(id) {\r\n const slider = document.getElementById(`topcon-slider-${id}`);\r\n const slides = slider.querySelectorAll('.topcon-slide');\r\n if (id === 'x') {\r\n topconIndexX = (topconIndexX - 1 + slides.length) % slides.length;\r\n topconUpdateSlide('x', topconIndexX);\r\n } else if (id === 'xii') {\r\n topconIndexXII = (topconIndexXII - 1 + slides.length) % slides.length;\r\n topconUpdateSlide('xii', topconIndexXII);\r\n }\r\n }\r\n\r\n \/\/ Auto Slide\r\n setInterval(() => topconNextSlide('x'), 3000);\r\n setInterval(() => topconNextSlide('xii'), 3000);\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\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<div class=\"elementor-element elementor-element-461eaed e-flex e-con-boxed e-con e-parent\" data-id=\"461eaed\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97d2b8c elementor-widget elementor-widget-html\" data-id=\"97d2b8c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\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>Photo Gallery Slider<\/title>\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n .imgcon-gallery-title {\r\n font-size: 2em;\r\n margin-top: 20px;\r\n color: red;\r\n letter-spacing: 2px;\r\n text-align: center;\r\n }\r\n\r\n .imgcon-slider-container {\r\n position: relative;\r\n overflow: hidden;\r\n width: 90%;\r\n margin: 20px auto;\r\n }\r\n\r\n .imgcon-slider-track {\r\n display: flex;\r\n transition: transform 1s ease-in-out;\r\n }\r\n\r\n .imgcon-slide {\r\n flex: 0 0 25%;\r\n padding: 10px;\r\n }\r\n\r\n .imgcon-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 10px;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .imgcon-slide {\r\n flex: 0 0 50%;\r\n }\r\n .imgcon-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 10px;\r\n }\r\n }\r\n\r\n .imgcon-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background-color: rgba(255, 255, 255, 0.2);\r\n border: none;\r\n color: white;\r\n font-size: 2rem;\r\n cursor: pointer;\r\n padding: 5px 10px;\r\n z-index: 2;\r\n }\r\n\r\n .imgcon-btn:hover {\r\n background-color: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .imgcon-btn-left {\r\n left: 0;\r\n }\r\n\r\n .imgcon-btn-right {\r\n right: 0;\r\n }\r\n\r\n .imgcon-view-all {\r\n display: inline-block;\r\n padding: 10px 20px;\r\n margin: 20px auto;\r\n border: 2px solid white;\r\n color: white;\r\n text-decoration: none;\r\n border-radius: 5px;\r\n transition: 0.3s;\r\n }\r\n\r\n .imgcon-view-all:hover {\r\n background-color: white;\r\n color: black;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div style=\"background:#050b5a;border-radius:10px;text-align:center\">\r\n <h2 class=\"imgcon-gallery-title\" style=\"color:white\">PHOTO GALLERY<\/h2>\r\n\r\n <div class=\"imgcon-slider-container\">\r\n \r\n <button class=\"imgcon-btn imgcon-btn-left\" onclick=\"imgconSlideManual(-1)\">\u276e<\/button>\r\n\r\n <div class=\"imgcon-slider-track\" id=\"imgcon-slider-track\">\r\n \r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-03-at-1.18.06-PM-5-scaled.jpeg\" alt=\"1\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-03-at-12.59.36-PM-12-scaled.jpeg\" alt=\"2\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-03-at-12.44.35-PM-2-scaled.jpeg\" alt=\"3\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/06\/WhatsApp-Image-2025-06-03-at-12.04.34-PM-2-scaled.jpeg\" alt=\"4\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/01\/18-1-scaled.jpeg\" alt=\"5\"><\/div>\r\n <div class=\"imgcon-slide\"><img decoding=\"async\" src=\"https:\/\/spsbbk.edu.in\/wp-content\/uploads\/2025\/01\/20-scaled.jpeg\" alt=\"6\"><\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <button class=\"imgcon-btn imgcon-btn-right\" onclick=\"imgconSlideManual(1)\">\u276f<\/button>\r\n <\/div>\r\n\r\n <a class=\"imgcon-view-all\" href=\"https:\/\/spsbbk.edu.in\/index.php\/gallery\/\">View All<\/a>\r\n<\/div>\r\n <script>\r\n const imgconTrack = document.getElementById(\"imgcon-slider-track\");\r\n let imgconIndex = 0;\r\n let imgconInterval;\r\n\r\n \/\/ Clone original slides to make seamless loop\r\n const originalSlides = Array.from(imgconTrack.children);\r\n originalSlides.forEach(slide => {\r\n const clone = slide.cloneNode(true);\r\n imgconTrack.appendChild(clone);\r\n });\r\n\r\n function imgconGetVisibleSlides() {\r\n return window.innerWidth <= 768 ? 2 : 4;\r\n }\r\n\r\n function imgconSlideNext() {\r\n const visible = imgconGetVisibleSlides();\r\n const slideWidth = 100 \/ visible;\r\n const totalSlides = imgconTrack.children.length;\r\n const maxIndex = totalSlides - visible;\r\n\r\n imgconIndex++;\r\n imgconTrack.style.transition = \"transform 1s ease-in-out\";\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n\r\n if (imgconIndex >= maxIndex) {\r\n setTimeout(() => {\r\n imgconTrack.style.transition = \"none\";\r\n imgconIndex = 0;\r\n imgconTrack.style.transform = `translateX(0)`;\r\n }, 1000);\r\n }\r\n }\r\n\r\n function imgconSlideManual(direction) {\r\n clearInterval(imgconInterval);\r\n imgconIndex += direction;\r\n const visible = imgconGetVisibleSlides();\r\n const slideWidth = 100 \/ visible;\r\n const totalSlides = imgconTrack.children.length;\r\n const maxIndex = totalSlides - visible;\r\n\r\n if (imgconIndex < 0) {\r\n imgconIndex = maxIndex - 1;\r\n imgconTrack.style.transition = \"none\";\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n setTimeout(() => {\r\n imgconTrack.style.transition = \"transform 1s ease-in-out\";\r\n imgconIndex++;\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n }, 20);\r\n } else if (imgconIndex >= maxIndex) {\r\n imgconTrack.style.transition = \"none\";\r\n imgconIndex = 0;\r\n imgconTrack.style.transform = `translateX(0)`;\r\n setTimeout(() => {\r\n imgconTrack.style.transition = \"transform 1s ease-in-out\";\r\n imgconIndex++;\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n }, 20);\r\n } else {\r\n imgconTrack.style.transition = \"transform 1s ease-in-out\";\r\n imgconTrack.style.transform = `translateX(-${imgconIndex * slideWidth}%)`;\r\n }\r\n\r\n imgconStartAutoSlide();\r\n }\r\n\r\n function imgconStartAutoSlide() {\r\n imgconInterval = setInterval(imgconSlideNext, 3000);\r\n }\r\n\r\n imgconStartAutoSlide();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Fade Slider \u0936\u0940\u0932\u092e\u094d \u092a\u0930\u092e\u094d \u092d\u0942\u0937\u0923\u092e\u094d Welcome to SPS, where excellence meets education. Discover a dynamic learning environment, fostering creativity, curiosity and academic success. From the Desk of Director’s Message Dear Students, Parents, Teachers, and Staff Members,I extend my warmest greetings and best wishes to all of you! The establishment of Sainik Public School, Oberi, Barabanki, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":238,"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":5244,"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/pages\/15\/revisions\/5244"}],"wp:attachment":[{"href":"https:\/\/spsbbk.edu.in\/index.php\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}