1<!DOCTYPE html> 2<!--saved from url = (0038)https : //sssvv-landing-page.webflow.io/ --> 3<html class="w-mod-js wf-montserrat-n9-active wf-montserrat-n1-active wf-montserrat-n3-active wf-montserrat-n5-active wf-montserrat-n7-active wf-montserrat-n4-active wf-montserrat-n6-active wf-montserrat-n8-active wf-montserrat-n2-active wf-montserrat-i4-active wf-montserrat-i8-active wf-montserrat-i5-active wf-montserrat-i6-active wf-montserrat-i3-active wf-montserrat-i2-active wf-montserrat-i9-active wf-montserrat-i1-active wf-montserrat-i7-active wf-active"> 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <style> 7 .wf-force-outline-none[tabindex = "-1"]:focus { 8 outline: none; 9 } 10 /* The Mandala Modal (background) */ 11 .modal { 12 display: none; /* Hidden by default */ 13 position: fixed; /* Stay in place */ 14 z-index: 2; /* Sit on top */ 15 padding-top: 100px; /* Location of the box */ 16 left: 0; 17 top: 0; 18 width: 100%; /* Full width */ 19 height: 100%; /* Full height */ 20 overflow: auto; /* Enable scroll if needed */ 21 background-color: rgb(255,255,255); /* Fallback color */ 22 background-color: rgba(255,255,255,0.4); /* White w/ opacity */ 23 } 24 25 /* Modal Content */
26 .modal-content { 27 position: relative; 28 background-color: #fefefe; 29 margin: auto; 30 padding: 0; 31 border: 1px solid #888; 32 width: 4096px; 33 /* height: 4096px; */ 34 transform: translate(-1%, -1%); 35 cursor: grab; /* for drag to scroll */ 36 overflow: auto; 37 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 38 -webkit-animation-name: animatetop; 39 -webkit-animation-duration: 0.4s; 40 animation-name: animatetop; 41 animation-duration: 0.4s 42 } 43 44 45 46 .modal-body { 47 max-height: calc(100vh - 200px); 48 overflow-x: auto; 49 overflow-y: auto; 50 background: transparent url(/index_files/please-wait.gif) left top no-repeat; 51 52 } 53 54 /* Add Animation */ 55 @-webkit-keyframes animatetop { 56 from { 57 top: -300px; 58 opacity: 0 59 } 60 61 to { 62 top: 0; 63 opacity: 1 64 } 65 } 66 67 @keyframes animatetop { 68 from { 69 top: -300px; 70 opacity: 0 71 } 72 73 to { 74 top: 0; 75 opacity: 1 76 } 77 } 78 79 /* The Close Button */ 80 .close { 81 z-index: 2; /* Sit on top */ 82 color: white; 83 float: left; 84 font-size: 28px; 85 font-weight: bold; 86 } 87 88 .close:hover, 89 .close:focus { 90 color: #000; 91 text-decoration: none; 92 cursor: pointer; 93 } 94
95 .modal-header { 96 padding: 2px 16px; 97 background-color: #5cb85c; 98 color: white; 99 } 100 101 .modal-body { 102 padding: 2px 16px; 103 } 104 105 .modal-footer { 106 padding: 2px 16px; 107 background-color: #5cb85c; 108 color: white; 109 } 110 111 .mnavbar { 112 z-index: 2; /* Sit on top */ 113 overflow: hidden; 114 background-color: #333; 115 position: fixed; 116 top: 0; 117 width: 100%; 118 } 119 120 .mnavbar a { 121 float: left; 122 display: block; 123 color: #f2f2f2; 124 text-align: center; 125 padding: 14px 16px; 126 text-decoration: none; 127 font-size: 17px; 128 } 129 130 .mnavbar a:hover { 131 background: #ddd; 132 color: black; 133 } 134 135 136 #vms-banner { 137 /* Default spacing for Desktop */ 138 margin-top: 100px; 139 } 140 141 @media (max-width: 768px) { 142 #vms-banner { 143 /* Adjusted spacing for Mobile */ 144 margin-top: 80px; 145 } 146 } 147 148 149 </style> 150 <title>Sri Sathya Sai Vidya Vahini</title> 151 <meta content="width=device-width, initial-scale=1" name="viewport"> 152 <meta content="Webflow" name="generator"> 153 <link href="https://www.srisathyasaividyavahini.org/index_files/sssvv-landing-page2.css" rel="stylesheet" type="text/css"> 154
154<script src="https://www.srisathyasaividyavahini.org/index_files/webfont.js.download" type="text/javascript"></script>
154 155 <link rel="stylesheet" href="https://www.srisathyasaividyavahini.org/index_files/css" media="all"> 156
156<script type="text/javascript">WebFont.load({ google: { families: ["Montserrat : 100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic"] } });</script>
156<!--[if lt IE 9]>
156<script src="https : //cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
156<![endif]--> 157
157<script type="text/javascript">!function (o, c) { var n = c.documentElement, t = " w-mod-"; n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch") }(window, document);</script>
157 158 159 160 <link href="https://www.srisathyasaividyavahini.org/favicon/favicon.ico" rel="shortcut icon" type="image/x-icon"> 161 <link href="https://www.srisathyasaividyavahini.org/favicon/apple-touch-icon.png" rel="apple-touch-icon"> 162<!-- Youtube grid section --> 163 <link rel="preconnect" href="https://fonts.googleapis.com"> 164 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 165 <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> 166 167<style> 168 169 170 *{ box-sizing:border-box; } 171 172 173 174 /* ---------- Marquee header ---------- */ 175 .marquee{ 176 background:var(--ink); 177 color:var(--cream); 178 padding: 28px 24px 18px; 179 text-align:center; 180 position:relative; 181 } 182 .sprockets{ 183 display:flex; 184 justify-content:center; 185 gap:14px; 186 padding: 0 0 14px; 187 } 188 .sprockets span{ 189 width:9px; height:9px; 190 border-radius:50%; 191 background:var(--cream); 192 opacity:0.85; 193 } 194 .marquee h1{ 195 font-family:'Bebas Neue', sans-serif; 196 font-size: clamp(2.2rem, 6vw, 3.4rem); 197 letter-spacing: 0.08em; 198 margin: 0 0 4px; 199 } 200 .marquee h1 em{ 201 font-style:normal; 202 color:var(--marquee-red); 203 text-shadow: 0 0 18px rgba(193,39,45,0.55); 204 } 205 .marquee p{ 206 margin:0; 207 color: #C9C4BA; 208 font-size:0.92rem; 209 letter-spacing:0.02em; 210 } 211 .marquee .sprockets.bottom{ padding: 14px 0 0; } 212 213 /* ---------- Controls bar ---------- */ 214 .controls{ 215 max-width:1200px; 216 margin: 22px auto 0; 217 padding: 0 24px; 218 display:flex; 219 align-items:center; 220 justify-content:space-between; 221 gap:12px; 222 flex-wrap:wrap; 223 } 224 .status-line{ 225 font-size:0.82rem; 226 color:var(--grey); 227 } 228 .status-line strong{ color:var(--ink); } 229 .refresh-btn{ 230 font-family:'Inter', sans-serif; 231 font-weight:600; 232 font-size:0.82rem; 233 letter-spacing:0.03em; 234 background:var(--card-bg); 235 border:1px solid var(--ink); 236 color:var(--ink); 237 padding:8px 16px; 238 border-radius:999px; 239 cursor:pointer; 240 transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; 241 } 242 .refresh-btn:hover{ background:var(--ink); color:var(--cream); } 243 .refresh-btn:focus-visible, a:focus-visible, .ticket:focus-visible{ 244 outline: 3px solid var(--gold); 245 outline-offset: 2px; 246 } 247 248 /* ---------- New-upload toast ---------- */ 249 .toast{ 250 position:fixed; 251 left:50%; 252 bottom:24px; 253 transform: translate(-50%, 120%); 254 background:var(--ink); 255 color:var(--cream); 256 padding:12px 20px; 257 border-radius:10px; 258 font-size:0.88rem; 259 max-width:90vw; 260 box-shadow: 0 10px 30px rgba(0,0,0,0.3); 261 transition: transform 0.35s ease; 262 z-index:60; 263 } 264 .toast.show{ transform: translate(-50%, 0); } 265 .toast strong{ color:#F3C94A; } 266 267 /* ---------- Masonry grid ---------- */ 268 .grid-wrap{ 269 max-width:1200px; 270 margin: 20px auto 0; 271 padding: 0 24px; 272 } 273 .grid{ 274 column-count:1; 275 column-gap:20px; 276 } 277 @media (min-width:640px){ .grid{ column-count:2; } } 278 @media (min-width:960px){ .grid{ column-count:3; } } 279 @media (min-width:1280px){ .grid{ column-count:4; } } 280 281 .ticket{ 282 break-inside: avoid; 283 margin: 0 0 20px; 284 background:var(--card-bg); 285 border-radius:10px; 286 box-shadow: 0 6px 18px var(--shadow); 287 overflow:hidden; 288 display:block; 289 text-decoration:none; 290 color:inherit; 291 cursor:pointer; 292 border:none; 293 width:100%; 294 text-align:left; 295 padding:0; 296 position:relative; 297 transition: transform 0.2s ease, box-shadow 0.2s ease; 298 } 299 .ticket:nth-child(3n){ transform: rotate(-0.6deg); } 300 .ticket:nth-child(3n+1){ transform: rotate(0.5deg); } 301 .ticket:hover{ 302 transform: translateY(-4px) rotate(0deg); 303 box-shadow: 0 14px 30px var(--shadow); 304 } 305 306 .ticket .new-flag{ 307 position:absolute; 308 top:10px; right:-30px; 309 background:var(--marquee-red); 310 color:#fff; 311 font-size:0.65rem; 312 font-weight:700; 313 letter-spacing:0.08em; 314 padding:4px 34px; 315 transform: rotate(35deg); 316 box-shadow: 0 2px 6px rgba(0,0,0,0.25); 317 } 318 319 .thumb-wrap{ 320 position:relative; 321 width:100%; 322 aspect-ratio: 16 / 9; 323 background:#e4ddce; 324 overflow:hidden; 325 } 326 .thumb-wrap img{ 327 width:100%; height:100%; 328 object-fit:cover; 329 display:block; 330 } 331 .play-badge{ 332 position:absolute; 333 inset:0; 334 display:flex; 335 align-items:center; 336 justify-content:center; 337 background: rgba(26,24,23,0); 338 transition: background 0.2s ease; 339 } 340 .ticket:hover .play-badge{ background: rgba(26,24,23,0.18); } 341 .play-badge svg{ 342 width:46px; height:46px; 343 opacity:0; 344 transform: scale(0.8); 345 transition: opacity 0.2s ease, transform 0.2s ease; 346 filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); 347 } 348 .ticket:hover .play-badge svg{ opacity:1; transform:scale(1); } 349 350 .perforation{ 351 height:0; 352 border-top: 2px dashed #D9D2C2; 353 position:relative; 354 margin: 0 14px; 355 } 356 .perforation::before, .perforation::after{ 357 content:''; 358 position:absolute; 359 top:-8px; 360 width:16px; height:16px; 361 border-radius:50%; 362 background:var(--cream); 363 }
364 .perforation::before{ left:-22px; } 365 .perforation::after{ right:-22px; } 366 367 .ticket-body{ padding: 14px 16px 16px; } 368 .ticket-body h3{ 369 margin:0 0 6px; 370 font-size:0.98rem; 371 line-height:1.35; 372 font-weight:600; 373 display:-webkit-box; 374 -webkit-line-clamp:2; 375 -webkit-box-orient:vertical; 376 overflow:hidden; 377 } 378 .meta{ 379 display:flex; 380 align-items:center; 381 gap:6px; 382 font-size:0.78rem; 383 color:var(--grey); 384 } 385 .meta .dot{ 386 width:6px; height:6px; 387 border-radius:50%; 388 background:var(--marquee-red); 389 flex-shrink:0; 390 } 391 392 /* ---------- Empty / error / loading states ---------- */ 393 .state-card{ 394 max-width:560px; 395 margin: 60px auto; 396 background:var(--card-bg); 397 border-radius:12px; 398 padding:28px 26px; 399 text-align:center; 400 box-shadow: 0 6px 18px var(--shadow); 401 } 402 .state-card h2{ 403 font-family:'Bebas Neue', sans-serif; 404 letter-spacing:0.05em; 405 font-size:1.6rem; 406 margin:0 0 8px; 407 color:var(--marquee-red); 408 } 409 .state-card p{ font-size:0.9rem; color:#444; line-height:1.5; } 410 .state-card code{ 411 background:#F0EAD9; 412 padding:2px 6px; 413 border-radius:4px; 414 font-size:0.82rem; 415 } 416 417 .skeleton{ 418 break-inside: avoid; 419 margin:0 0 20px; 420 border-radius:10px; 421 background:linear-gradient(100deg, #ece6d8 30%, #f5f0e4 45%, #ece6d8 60%); 422 background-size: 250% 100%; 423 animation: shimmer 1.4s ease infinite; 424 aspect-ratio: 16/12; 425 } 426 @keyframes shimmer{ 0%{background-position:120% 0;} 100%{background-position:-20% 0;} } 427 428 /* ---------- Modal ---------- */ 429 .modal-overlay{ 430 position:fixed; inset:0; 431 background:rgba(10,10,10,0.82); 432 display:none; 433 align-items:center; 434 justify-content:center; 435 z-index:100; 436 padding:24px; 437 } 438 .modal-overlay.open{ display:flex; } 439 .modal-box{ 440 width:100%; 441 max-width:920px; 442 background:#000; 443 border-radius:10px; 444 overflow:hidden; 445 box-shadow: 0 20px 60px rgba(0,0,0,0.5); 446 } 447 .modal-frame-wrap{ position:relative; width:100%; aspect-ratio:16/9; } 448 .modal-frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } 449 .modal-close{ 450 position:fixed; 451 top:24px; right:24px; 452 background:var(--cream); 453 color:var(--ink); 454 border:none; 455 width:40px; height:40px; 456 border-radius:50%; 457 font-size:1.2rem; 458 cursor:pointer; 459 z-index:101; 460 } 461 462 footer.credits{ 463 text-align:center; 464 font-size:0.75rem; 465 color:var(--grey); 466 margin-top:36px; 467 } 468 469 @media (prefers-reduced-motion: reduce){ 470 .ticket, .toast, .play-badge, .play-badge svg{ transition:none; } 471 .ticket:nth-child(3n), .ticket:nth-child(3n+1){ transform:none; } 472 .skeleton{ animation:none; } 473 } 474</style> 475 476 477<!-- Youtube grid section --> 478</head> 479<body class="body"> 480 <!-- 1) Facebook SDK root + script (place once, right after <body>) --> 481 <div id="fb-root"></div> 482
482<script async defer crossorigin="anonymous" 483 src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v25.0"> 484 </script>
484 485 486 <div data-collapse="medium" data-animation="default" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navigation w-nav"> 487 <div class="navigation-wrap"> 488 <a href="/" aria-current="page" class="logo-link w-nav-brand w--current" aria-label="home"><img src="/index_files/2026-SSSVV-logo.png" width="250" alt="" class="logo-image"></a> 489 <div class="menu"> 490 <nav role="navigation" class="navigation-items w-nav-menu"> 491 <div class="div-block-21 sp"> 492 <a href="/" aria-current="page" class="navigation-item w-nav-link w--current">Home</a> 493 <div data-hover="false" data-delay="0" class="dropdown w-dropdown"> 494 <div class="dropdown-toggle w-dropdown-toggle" id="w-dropdown-toggle-0" aria-controls="w-dropdown-list-0" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0"> 495 <div class="icon-2 w-icon-dropdown-toggle" aria-hidden="true"></div> 496 <div class="text-block-12 no-caps">SSSVV Activities</div> 497 </div> 498 <nav class="dropdown-list w-dropdown-list" id="w-dropdown-list-0" aria-labelledby="w-dropdown-toggle-0"><a href="/activities/content-dissemination-and-training" class="dropdown-link w-dropdown-link" tabindex="0">Content Dissemination and Training</a><a href="/activities/mission-english" class="dropdown-link w-dropdown-link" tabindex="0">Mission English</a><a href="/activities/inclusive-education" class="dropdown-link w-dropdown-link" tabindex="0">Inclusive Education</a><a href="/activities/content-creation" class="dropdown-link w-dropdown-link" tabindex="0">Content Creation</a><a href="/activities/multimedia" class="dropdown-link w-dropdown-link" tabindex="0">Multimedia</a><a href="/activities/sopaan" class="dropdown-link w-dropdown-link" tabindex="0">SOPAAN</a></nav> 499 </div> 500 501 <div data-hover="false" data-delay="0" class="dropdown w-dropdown"> 502 <div class="dropdown-toggle w-dropdown-toggle" id="w-dropdown-toggle-0" aria-controls="w-dropdown-list-0" aria-haspopup="menu" aria-expanded="false" role="button" tabindex="0"> 503 <div class="icon-2 w-icon-dropdown-toggle" aria-hidden="true"></div> 504 <div class="text-block-12 no-caps">About</div> 505 </div> 506 <nav class="dropdown-list w-dropdown-list" id="w-dropdown-list-0" aria-labelledby="w-dropdown-toggle-0"><a href="/about" class="dropdown-link w-dropdown-link" tabindex="0">About us</a><a href="/testimonials" class="dropdown-link w-dropdown-link" tabindex="0">Testimonials</a><a href="/lastq" class="dropdown-link w-dropdown-link" tabindex="0">Quarterly Milestones</a></nav> 507 </div> 508 509 </div> 510 <div><a href="https://volunteer.srisathyasaividyavahini.org/" target="_blank" class="navigation-item w-nav-link"><img border="0" alt="VMS" title="VMS" src="/index_files/VMS.png" width="125" height="125"></a><a href="https://contentmanagement.srisathyasaividyavahini.org/" target="_blank" class="navigation-item w-nav-link"><img border="0" alt="CMS" title="CMS" src="/index_files/CMS.png" width="125" height="125"></a><a href="https://learning.srisathyasaividyavahini.org/" target="_blank" class="navigation-item w-nav-link"><img border="0" alt="LMS" title="LMS" src="/index_files/LMS.png" width="125" height="125"></a></div> 511 </nav> 512 <div class="menu-button w-nav-button" style="-webkit-user-select: text;" aria-label="menu" role="button" tabindex="0" aria-controls="w-nav-overlay-0" aria-haspopup="menu" aria-expanded="false"><img src="./index_files/61bfb478d143ca4acf03cdf3_menu-icon.png" width="22" alt="" class="menu-icon"></div> 513 </div> 514 </div> 515 <div class="w-nav-overlay" data-wf-ignore="" id="w-nav-overlay-0"></div> 516 </div> 517 <div class="section cc-store-home-wrap"> 518 519<!-- START CC2026 Banner --> 520<div id="vms-banner" style="background-color: #f0f7ff; border-bottom: 2px solid #0056b3; padding: 20px; text-align: center; font-family: 'Open Sans', Arial, sans-serif; color: #333;"> 521 522 <a href="./SSSVV-Collaborators-Conference-2026.html" ><img border="0" alt="CC2026" title="CC2026" src="/index_files/CC2026Banner.jpg" style="display: block; margin: 0 auto; width: 100%; max-width: 900px; height: auto;" ></a> 523 524</div> 525<!-- END CC2026 Banner --> 526 527 <!-- <div class="intro-header homepage-banner-edusummit2025" style="cursor: pointer" onclick="window.open('https://forms.gle/BsrAXpo3mEiE3UuEA', '_blank');"> --> 528 <div class="intro-content cc-homepage"> 529 <div class="intro-text"> 530 531 <div class="heading-jumbo">Integral Education<br>For all, By all</div> 532 <div class="paragraph-bigger cc-bigger-white-light">
532Built by Sri Sathya Sai Vidya Vahini <br>with the Blessings of Sri Sathya Sai Baba<br></div> 533 </div> 534 </div> 535 <!-- </div> --> 536 <div class="container clear"> 537 <div class="w-layout-grid about-grid"> 538 <div> 539 <img src="https://www.srisathyasaividyavahini.org/index_files/Mandala-1-4-2023-964.jpg" loading="lazy" width="400" sizes="25vw" alt="Mandala illustration" class="image-11"> 540 <button id="MandalaBtn">Click here to view full size</button> 541 <!-- The Mandala Modal --> 542 <div id="mandalaModal" class="modal"> 543 544 <!-- Modal content --> 545 <div id="mandalaModalContent" class="modal-content"> 546 547 <div class="mnavbar"> 548 <a href="#"> </a><br> 549 <span class="close">×</span> 550 <!-- <a href="#" >Close</a> --> 551 <a href="#" onclick="closemodal()">Close On a computer, Scrollwheel for vertical scroll, 552 Shift+scrollwheel for horizontal scroll, ESC or click here to close. 553 Click here to close. 554 Click here to close. 555 Click here to close. 556 Click here to close. 557 Click here to close. 558 Click here to close. 559 Click here to close. 560 Click here to close. 561 Click here to close. 562 Click here to close. 563 Click here to close. 564 Click here to close. 565 </a> 566 567 </div> 568 <!-- 569 <div class="modal-header"> 570 <span class="close">×</span> 571 <h6><a href="#" onclick="closemodal()">Close</a></h6> 572 573 </div> --> 574 <div class="modal-body"> 575 <img src="/index_files/Mandala-1-4-2023-4096.jpg" loading="lazy" height="4096" width="4096" alt="Mandala illustration large size"> 576 577 </div> 578 579 </div> 580 581 </div> 582 </div> 583 <div class="heading-jumbo-small"><strong class="bold-text">Welcome to Sri Sathya Sai Vidya Vahini <br></strong>A unique ed-tech platform that provides values-based teaching resources for teachers and students<br></div> 584 </div> 585 586 <p class="paragraph-16">This project is a global collaboration between educators, trainers and technologists inspired by Bhagawan Sri Sathya Sai Babaâs teachings. It combines the latest in pedagogy, teacher training, teaching aids and technology. The shared values that unite humanity drive this project. Apart from academic excellence which is inclusive, it focuses on universality while celebrating diversity, and promoting social justice, environmental sensitivity and responsible citizenship. This platform offers you free access to content in the form of master lesson plans and supporting digital teaching aids, mapped to learning outcomes, as per the <a href="https://www.education.gov.in/sites/upload_files/mhrd/files/NEP_Final_English_0.pdf" target="_blank">National Education Policy.</a><br><br>We encourage you to contact us (details given below) should you want yourself and your school
586community to be a supported school of Sri Sathya Sai Vidya Vahini. Supported schools that are registered with us can access content, and benefit from free access to a hybrid training program which offers a mix of virtual training and self-paced learning. Please join us in our efforts to open the ed-tech advantage to every teacher and every future citizen of the nation.<br><br>Sai Ram</p> 587 <div class="divider"></div> 588 <div class="home-content-wrap"> 589 <div class="w-layout-grid about-grid"> 590 <div id="w-node-_86e64837-0616-515b-4568-76c147234d34-12f1ba88"> 591 <div class="home-section-wrap"> 592 <div class="label cc-light">About</div> 593 <h2 class="section-heading">What is Sri Sathya Sai Vidya Vahini?</h2> 594 <p class="paragraph-light">Sri Sathya Sai Vidya Vahini (SSSVV) is a volunteer driven digital initiative of the Sri Sathya Sai Central Trust focusing on providing Integral Education to rural schools. Using its unique IIEPx4C Framework, it creates and offers content, teaching/learning aids and training to the schools. All of these are offered free to strengthen the hands of the teachers.</p> 595 </div> 596 </div> 597 <div style="padding-top:56.17021276595745%" class="w-video w-embed"><iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F6Aq64OIBm0E%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D6Aq64OIBm0E&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F6Aq64OIBm0E%2Fhqdefault.jpg&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=youtube" scrolling="no" allowfullscreen="" title="Introduction to SSSVV"></iframe></div> 598 </div> 599 <div class="w-layout-grid about-grid cc-about-2"> 600 <img src="./index_files/iiep.png" loading="lazy" id="w-node-_19aeea12-be04-7863-39a5-8bc2296cb2d9-12f1ba88" sizes="(max-width: 479px) 100vw, (max-width: 767px) 68vw, 69vw" alt="" class="image-5"> 601 <div id="w-node-_86e64837-0616-515b-4568-76c147234d41-12f1ba88"> 602 <div class="home-section-wrap"> 603 <div class="label cc-light">Team</div> 604 <h2 class="section-heading">What we do</h2> 605 <p class="paragraph-light"> 606 • Provide inspiring, inclusive content for teaching and learning to reduce the educational inequities that exist in India. 607 608 <br> 609 610 • Empower teachers with appropriate knowledge and skills to enthuse learners with insightful ideas. 611 612 <br> 613 614 • Help learners become active participants while enjoying the learning process. 615 616 <br> 617 618 • Develop digital content, tools and teaching aids with the latest pedagogy using holistic frameworks. 619 620 <br> 621 622 • Forge partnerships with technologists and other organisations 623 to develop digital technologies and aids for bringing better efficiencies in the teaching-learning process. 624 <br> 625 626 627 </p> 628 </div> 629 </div> 630 </div> 631 </div> 632 </div> 633 </div> 634 <div class="container-4 w-container"> 635 <div class="columns-5 rv w-row"> 636 <div class="column-25 w-col w-col-6 w-col-tiny-tiny-stack"> 637 <p class="paragraph-light">The SSSVV learning process is extended across 4 domains (4Cs), viz., Classroom, Corridor, Campus and Community. This forms the IIEP x 4C matrix of 16 cells. SSSVV creates content, samples, process documents and standard operating processes for each of these 16 cells. And to enable the teachers and the school ecosystem to effectively and efficie
637ntly deliver, SSSVV provides required training, both in person and virtually.</p> 638 <a href="/about" class="styleguide-button-wrap w-button">Learn More</a> 639 </div> 640 <div class="w-col w-col-6 w-col-tiny-tiny-stack"><img src="./index_files/62c6358f1c97ea310a3b4c36_Asset 3IIEP graphic fan SSSVV.png" loading="lazy" srcset="/index_files/62c6358f1c97ea310a3b4c36_Asset%203IIEP%20graphic%20fan%20SSSVV-p-500.png 500w, /index_files/62c6358f1c97ea310a3b4c36_Asset%203IIEP%20graphic%20fan%20SSSVV-p-800.png 800w, /index_files/62c6358f1c97ea310a3b4c36_Asset%203IIEP%20graphic%20fan%20SSSVV-p-1080.png 1080w, /index_files/62c6358f1c97ea310a3b4c36_Asset%203IIEP%20graphic%20fan%20SSSVV.png 1115w" sizes="(max-width: 479px) 100vw, (max-width: 767px) 46vw, (max-width: 991px) 354px, 1125px" alt="" class="image-6"></div> 641 </div> 642 </div> 643 <div class="section"> 644 <div class="container padded-beige"> 645 <div class="blog-heading"> 646 <div class="label cc-light">About Us</div> 647 648 <div class="home-content-wrap"> 649 <div class="w-layout-grid about-grid"> 650 <div id="w-node-_86e64837-0616-515b-4568"> 651 <div class="home-section-wrap"> 652 <div class="label cc-light"> </div> 653 <h2 class="section-heading">Inclusive Education</h2> 654 <p class="paragraph-light" style="text-align: left"> 655 <b>Enabling Holistic Inclusion </b><br> 656The <b>National Education Policy (NEP) 2020</b> envisions every school in India becoming inclusive by 2030, aligning with the <b>UNESCO Sustainable Development Goals 2030</b>. NEP 2020 offers a transformative framework - shifting from mere physical inclusion to true <b>holistic inclusion</b>, where every learner thrives. At <b>Sri Sathya Sai Vidya Vahini (SSSVV)</b>, we are deeply committed to this vision. With the immense grace and blessings of <b>Bhagawan Sri Sathya Sai Baba</b>, we are privileged to support and implement inclusive practices that address the diverse needs of all learners within the same classroom without compromising on quality or learning outcomes. 657 <br /><br /> 658 Every child, regardless of ability, deserves to learn, grow and succeed in a supportive and inclusive environment. Through our initiatives aligned with NEP 2020, SSSVV strives to make a lasting difference in the lives of children with special needs and all learners by fostering <b>equity, empathy and excellence</b> in education. 659 </p> 660 </div> 661 </div> 662 <div style="padding-top:56.17021276595745%" class="w-video w-embed"><iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FvGuyal4BtNg%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DvGuyal4BtNg&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FvGuyal4BtNg%2Fhqdefault.jpg&key=96f1f04c5f4143bcb0f2e68c87d65feb&type=text%2Fhtml&schema=youtube" scrolling="no" allowfullscreen="" title="Introduction to SSSVV"></iframe></div> 663 </div> 664 </div> 665 666 <h2 class="work-heading">Activities</h2> 667 </div> 668 <div data-current="Tab 2" data-easing="ease" data-duration-in="300" data-duration-out="100" class="w-tabs"> 669 <div class="w-tab-menu" role="tablist"> 670 <a data-w-tab="Tab 1" class="tab-link-tab-1 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-0" href="/#w-tabs-0-data-w-pane-0" role="tab" aria-controls="w-tabs-0-data-w-pane-0" aria-selected="false"> 671 <div>Content Creation</div> 672 </a> 673 <a data-w-tab="Tab 5" class="tab-link-tab-5 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-1" href="/#w-tabs-0-data-w-pane-1" role="tab" aria-controls="w-tabs-0-data-w-pane-1" aria-selected="false"> 674 <div>Multimedia</div> 675 </a> 676 <a data-w-tab="Tab 2" class="tab-link-tab-2 w-inline-block w-tab-link w--current" id="w-tabs-0-data-w-tab-2" href="/#w-tabs-0-data-w-pane-2" role="tab" aria-controls="w-tabs-0-data-w-pane-2" aria-selected="true"> 677 <div>Content Dissemination</div> 678 </a> 679 <a data-w-tab="Tab 3" class="tab-link-tab-3 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-3" href="/#w-tabs-0-data-w-pane-3" role="tab" aria-controls="w-tabs-0-data-w-pane-3" aria-selected="false"> 680 <div>Mission English</div> 681 </a> 682 <a data-w-tab="Tab 4" class="tab-link-tab-4 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-4" href="/#w-tabs-0-data-w-pane-4" role="tab" aria-controls="w-tabs-0-data-w-pane-4" aria-selected="false"> 683 <div>Inclusive Education</div> 684 </a> 685 <a data-w-tab="Tab 6" class="tab-link-tab-6 w-inline-block w-tab-link" tabindex="-1" id="w-tabs-0-data-w-tab-6" href="/#w-tabs-0-data-w-pane-6" role="tab" aria-controls="w-tabs-0-data-w-pane-6" aria-selected="false"> 686 <div>SOPAAN</div> 687 </a> 688 </div> 689 <div class="w-tab-content"> 690 <div data-w-tab="Tab 1" class="w-tab-pane" id="w-tabs-0-data-w-pane-0" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-0"> 691 <p class="paragraph">SSSVV creates content as 'teaching learning resources' for Classroom usage, along with visually appealing multimedia teaching aids. Ideas and suggestions are provided to create immersive spaces within the school for the Corri
691dor domain. 'Process documents' are developed to nurture culture in the school for the 'Campus' domain. SOPs are generated for outreach programs with the 'Community'. Volunteers collaboratively create; Teacher Resource Materials that align with the National Curriculum Framework [NCF]. <br><br><a href="/activities/content-creation">To know more about the process, click here.</a></p> 692 </div> 693 <div data-w-tab="Tab 5" class="w-tab-pane" id="w-tabs-0-data-w-pane-1" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-1"> 694 <p class="paragraph">The purpose of the MM team is to enrich content using effective original audio-visuals that creates a transformative experience for the stakeholders of SSSVV. <br><a href="/activities/multimedia">To know more about our Multimedia activities, click here.</a><br></p> 695 </div> 696 <div data-w-tab="Tab 2" class="w-tab-pane w--tab-active" id="w-tabs-0-data-w-pane-2" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-2"> 697 <p class="paragraph">SSSVV content needs to be distributed to the supported schools, especially rural schools, to enable teachers to access and navigate through the content easily based on the CBSE or state boards. School teachers also need to be provided training on how to use this content in the classroom. This is done through the Learning Management System (LMS). <br><a href="/activities/content-dissemination-and-training">For more details click here.</a></p> 698 </div> 699 <div data-w-tab="Tab 3" class="w-tab-pane" id="w-tabs-0-data-w-pane-3" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-3"> 700 <p class="paragraph">The PYF (Phone Your Friend) program is an SSSVV initiative to teach English to a large number of School teachers and youth who have studied in vernacular languages and are unable to communicate fluently in English. The program is a volunteer driven initiative wherein a PYF volunteer mentors a teacher over the phone for a one-hour English immersion class. <br>You can be a part of this delightful journey for English teaching. <a href="/activities/mission-english">To know more about the process, click here.</a><br></p> 701 </div> 702 <div data-w-tab="Tab 4" class="w-tab-pane" id="w-tabs-0-data-w-pane-4" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-4"> 703 <p class="paragraph">The SSSVV Inclusive Education Project provides an inclusive vision of National Education Policy 2020 (NEP 2020) that provides an education system that contributes to an equitable and vibrant knowledge society, by providing high-quality education to all. It also develops awareness of one's role and responsibility and instills skills, values and disposition. <br>â<br><a href="/activities/inclusive-education">To know more about the SSSVV Inclusive Education Project, click here</a>.<br></p> 704 </div> 705 <div data-w-tab="Tab 6" class="w-tab-pane" id="w-tabs-0-data-w-pane-6" role="tabpanel" aria-labelledby="w-tabs-0-data-w-tab-6"> 706 <p class="paragraph">SOPAAN, which means a ladder in Sanskrit, is a bilingual, foundational learning program that aims to help children ascend the learning ladder through structured and enjoyable activities, blossoming into lifelong learners. <br>â<br><a href="/activities/sopaan">To know more about SSSVV's SOPAAN, click here</a>.<br></p> 707 </div> 708 </div> 709 </div> 710 <div class="div-block-11"> 711 <div id="w-node-_25c03127-3716-25f0-b64d-f9c6ea27fb15-12f1ba88"> 712 <h1 class="heading-17">1 Million+</h1> 713 <div class="text-block">Beneficiary students and teachers</div> 714 </div> 715 716 717 <div id="w-node-_4ba4b86f-d41b-812b-bd0a-6618ba3925e8-12f1ba88"> 718 <h1 class="heading-17">3,000+</h1> 719 <div class="text-block">Master Lesson Plans</div> 720 </div> 721 <div id="w-node-_10b410c9-c717-cbe0-aad1-97b536e753e7-12f1ba88"> 722 <h1 class="heading-17">33,000+</h1> 723 <div class="text-block">Digital assets</div> 724 </div> 725 726 <div id="w-node-_72db628e-f630-8eea-d941-c7bbd545bd76-12f1ba88"> 727 <h1 class="heading-17">5,00,000+</h1> 728 <div class="text-block">Number of learning sessions of SSSVV digital content on DIKSHA</div> 729 </div> 730 731 </div> 732 </div> 733 </div> 734 <div class="section cc-cta pink"> 735 <div class="container"> 736 <div class="cta-wrap"> 737 <div class="heading-jumbo-small">National Footprint:<br>SSSVV's Govt Collaborations <br></div> 738 <div class="columns-15 w-row"> 739 <div class="w-col w-col-3"> 740 <div class="div-block-6"> 741 <h5 class="heading-9 center">NITI Aayog</h5> 742 </div> 743 </div> 744 <div class="w-col w-col-9"> 745 <p class="paragraph-10">Under the Hon. Prime Minister's Aspirational District program, SSSVV is serving two districts, Virudhunagar in Tamil Nadu and Vidisha in Madhya Pradesh. We provide effective interventions to government teachers for improving teaching-learning outcomes in foundational Literacy as per <a href="https://www.education.gov.in/sites/upload_files/mhrd/files/nipun_bharat_eng1.pdf" target="_blank"> NIPUN Bharat Guidelines</a>.</p> 746 </div> 747 </div> 748 <div class="columns-15 w-row"> 749 <div class="w-col w-col-3"> 750 <div class="div-block-6"> 751 <h5 class="heading-9 center">NCERT - CIET</h5> 752 </div> 753 </div> 754 <div class="w-col w-col-9"> 755 <p class="paragraph-11">SSSVV is the single largest contributor of digital content under Teacher Resources on the open-source platform. So far, SSSVV has contributed 7,243+ digital assets to empower teachers across the country with world-class teaching resources. These cover the entire CBSE syllabus for Classes 1-9 for EVS, Science, Maths & Social Studies through the Hon. PM's <a href="https://diksha.gov.in/" target="_blank" style="display:inline-block">VidyaDaan initiative</a>. The SSSVV content is based on its unique 7 assets methodology, ideation method and enriched with multimedia, activity based learning and human values. Apart from CBSE content, we are now uploading Karnataka State Board content on <a href="https://diksha.gov.in/" target="_blank" style="display:inline-block">diksha.gov.in</a> to enable teachers across the state of Karnataka to have free access to SSSVV's high quality content. 756 Several other State Boards' syllabi are in the process of being uploaded. These include AP and Gujarat and others.</p> 757 </div> 758 </div> 759 <div class="columns-15 w-row"> 760 <div class="w-col w-col-3"> 761 <div class="div-block-6"> 762 <h5 class="heading-9 center">Adi Dravidar and Tribal Welfare, Tamil Nadu</h5> 763 </div> 764 </div> 765 <div class="w-col w-col-9"> 766 <p class="paragraph-12">SSSVV's team for the Mission English program is teaching English to the teachers of the ADW Board of Tamil Nadu government. The pilot project involves one-on-one teaching of English through phone interaction between the selected teachers and their mentors from SSSVV.</p> 767 </div> 768 </div> 769 <div class="columns-15 w-row"> 770 <div class="w-col w-col-3"> 771 <div class="div-block-6"> 772 <h5 class="heading-9 center">IIT - Chennai</h5> 773 </div> 774 </div> 775 <div class="w-col w-col-9"> 776 <p class="paragraph-12">IIT-M has been designated by the Ministry of Education ("MoE") and SWAYAM BOARD 777to oversee and execute the implementation of the SWAYAM Plus Initiative. SWAYAM Plus portal, an enhanced initiative of the SWAYAM platform is focused on expanding the existing offerings to incorporate industry aligned courses, thereby improving learners' skills and employability. SWAYAM Plus aims to establish itself as a premier digital platform, providing high-quality micro-credentials and certifications to a diverse range of learners. SSSVV is collaborating with IIT Madras to create certificate courses for teachers in the education domain. So far, SSSVV has already contributed 5 Courses.</p> 778 </div> 779 </div> 780 781 </div> 782 </div> 783 </div> 784 <section id="gallery" class="gallery wf-section"> 785 <div class="centered-container w-container"> 786 <div data-delay="8000" data-animation="slide" class="slider w-slider" data-autoplay="true" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="2000" data-infinite="true" role="region" aria-label="carousel" style="width:100%"> 787 788 <div class="w-slider-mask" id="w-slider-mask-0"> 789 790 <!-- Slide 1 --> 791 <div class="slide-2 w-slide" aria-label="1 of 10" role="group"> 792 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-1.jpg" loading="lazy" alt="Swayam Plus Course 1" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;"> 793 </div> 794 795 <!-- Slide 2 --> 796 <div class="slide-2 w-slide" aria-label="2 of 10" role="group" aria-hidden="true"> 797 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-2.jpg" loading="lazy" alt="Swayam Plus Course 2" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true"> 798 </div> 799 800 <!-- Slide 3 --> 801 <div class="slide-2 w-slide" aria-label="3 of 10" role="group" aria-hidden="true"> 802 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-3.jpg" loading="lazy" alt="Swayam Plus Course 3" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true"> 803 </div> 804 805 <!-- Slide 4 --> 806 <div class="slide-2 w-slide" aria-label="4 of 10" role="group" aria-hidden="true"> 807 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-4.jpg" loading="lazy" alt="Swayam Plus Course 4" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true"> 808 </div> 809 810 <!-- Slide 5 --> 811 <div class="slide-2 w-slide" aria-label="5 of 10" role="group" aria-hidden="true"> 812 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-5.jpg" loading="lazy" alt="Swayam Plus Course 5" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true"> 813 </div> 814 815 <!-- Slide 6 --> 816 <div class="slide-2 w-slide" aria-label="6 of 10" role="group" aria-hidden="true"> 817 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-6.jpg" loading="lazy" alt="Swayam Plus Course 6" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true"> 818 </div> 819 820 <!-- Slide 7 --> 821 <div class="slide-2 w-slide" aria-label="7 of 10" role="group" aria-hidden="true"> 822 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-7.jpg" loading="lazy" alt="Swayam Plus Course 7" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true"> 823 </div> 824 825 <!-- Slide 8 --> 826 <div class="slide-2 w-slide" aria-label="8 of 10" role="group" aria-hidden="true"> 827 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-8.jpg" loading="lazy" alt="Swayam Plus Course 8" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true"> 828 </div> 829 830 <!-- Slide 9 --> 831 <div class="slide-2 w-slide" aria-label="9 of 10" role="group" aria-hidden="true"> 832 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-9.jpg" loading="lazy" alt="Swayam Plus Course 9" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true"> 833 </div> 834 835 <!-- Slide 10 --> 836 <div class="slide-2 w-slide" aria-label="10 of 10" role="group" aria-hidden="true"> 837 <img src="index_files/LMS-sliders-_Swayam-Plus-courses-10.jpg" loading="lazy" alt="Swayam Plus Course 10" style="width: 100%; height: 100%; object-fit: contain; display: block; margin: 0 auto;" aria-hidden="true"> 838 </div> 839 840 <div aria-live="off" aria-atomic="true" class="w-slider-aria-label" data-wf-ignore="">Slide 1 of 10.</div> 841 842 </div> 843 844 <div class="w-slider-arrow-left" role="button" tabindex="0" aria-controls="w-slider-mask-0" aria-label="previous slide"> 845 <div class="icon w-icon-slider-left"></div> 846 </div> 847 <div class="w-slider-arrow-right" role="button" tabindex="0" aria-controls="w-slider-mask-0" aria-label="next slide"> 848 <div class="icon-3 w-icon-slider-right"></div> 849 </div> 850 851 <div class="padded-paragraph w-slider-nav w-round"> 852 <div class="w-slider-dot w-active" data-wf-ignore="" aria-label="Show slide 1 of 10" aria-pressed="true" role="button" tabindex="0" style="margin-left: 3px; margin-right: 3px;"></div> 853 <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 2 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div> 854 <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 3 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div> 855 <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 4 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div> 856 <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 5 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div> 857 <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 6 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div> 858 <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 7 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div> 859 <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 8 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div> 860 <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 9 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div> 861 <div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 10 of 10" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div> 862 </div> 863</div> 864 865 </div> 866 </div> 867 </div> 868 <div> 869 <!-- 870 FACEBOOK PAGE PLUGIN â pure client-side embed, no API key / no server needed. 871 Shows your Page's latest posts. Facebook renders this as an iframe, so you 872 can't restyle the posts themselves, but you CAN control the container size, 873 spacing, and placement on your homepage like any other widget. 874 875 HOW TO USE:
876 1. Paste the <div id="fb-root"></div> and the SDK
876<script> block once, 877 right after the opening <body> tag of your page (only once per page, 878 even if you have multiple FB widgets on it). 879 2. Paste the .fb-feed-wrapper block wherever on the homepage you want 880 the feed to appear. 881 3. That's it â no build step, no npm packages, no backend. 882--> 883 884 885<!-- 2) The feed itself (place wherever you want it on the homepage) --> 886<!-- 887 Facebook hard-caps the Page Plugin at 500px wide. To visually match 888 our 940px dev boxes, we render the plugin at its native 500x450 889 size, then scale it up 1.88x with a CSS transform (500 * 1.88 = 940). 890 Height is set to 450 pre-scale (25% smaller than the original 600), 891 which becomes 846px once scaled â a 25% reduction either way you 892 calculate it, since scaling is linear. 893 894 The outer .fb-scale-outer div is sized to the FINAL scaled dimensions 895 (940x846) so it reserves the correct space in the page layout â a 896 transform alone doesn't do that, since it only affects how the 897 element is painted, not the space it occupies in flow. 898 --> 899<section class="fb-feed-wrapper"> 900 <h2 class="fb-feed-title">Latest Facebook updates</h2> 901 <div class="fb-feed-inner"> 902 <div class="fb-scale-outer" style="width: 940px; height: 846px; overflow: hidden;"> 903 <div class="fb-scale-wrapper" style="transform: scale(1.88); transform-origin: top left; width: 500px; height: 450px;"> 904 <div class="fb-page" 905 data-href="https://www.facebook.com/profile.php?id=61587747644525" 906 data-tabs="timeline" 907 data-width="500" 908 data-height="450" 909 data-small-header="true" 910 data-adapt-container-width="false" 911 data-hide-cover="false" 912 data-show-facepile="false"> 913 <blockquote cite="https://www.facebook.com/profile.php?id=61587747644525" 914 class="fb-xfbml-parse-ignore"> 915 <a href="https://www.facebook.com/profile.php?id=61587747644525"> 916 Our Facebook Page 917 </a> 918 </blockquote> 919 </div> 920 </div> 921 </div> 922 </div> 923</section> 924 925<style> 926 /* Basic responsive container â matches the 940px max-width used by 927 other dev boxes on this site. NOTE: Facebook hard-caps the Page 928 Plugin itself at 500px wide (their iframe, their limit â this 929 can't be overridden via CSS or data-width). The widget will sit 930 inside this wider box rather than stretching to fill it. */ 931 .fb-feed-wrapper { 932 max-width: 940px; 933 margin: 2rem auto; 934 padding: 1rem; 935 box-sizing: border-box; 936 } 937 938 .fb-feed-title { 939 text-align: center; 940 font-size: 1.8rem; 941 margin-bottom: 1rem; 942 color: #1877F2; 943 } 944 .yt-feed-title { 945 text-align: center; 946 font-size: 1.8rem; 947 margin-bottom: 1rem; 948 color: #FF0000; 949 } 950 951 .fb-feed-inner { 952 display: flex; 953 justify-content: center; /* centers the 500px-capped widget within the 940px box */ 954 width: 100%; 955 overflow: hidden; /* keeps the iframe from overflowing on small screens */ 956 } 957 958 /* On small screens, let the plugin shrink with the container. 959 data-adapt-container-width="true" (set above) handles the resizing, 960 this just makes sure the wrapper itself doesn't force horizontal scroll. */ 961 @media (max-width: 540px) { 962 .fb-feed-wrapper { 963 padding: 0.5rem; 964 } 965 } 966</style> 967
968<script> 969 // Since we turned off data-adapt-container-width (needed for the fixed 970 // scale math above), we handle responsiveness manually: recalculate the 971 // scale factor whenever the wrapper is narrower than 940px, so the plugin 972 // shrinks to fit instead of overflowing on smaller dev boxes / mobile. 973 (function () { 974 var BASE_WIDTH = 500; 975 var BASE_HEIGHT = 450; 976 var MAX_WIDTH = 940; 977 978 function rescaleFbPlugin() { 979 var outer = document.querySelector('.fb-scale-outer'); 980 var wrapper = document.querySelector('.fb-scale-wrapper'); 981 if (!outer || !wrapper) return; 982 983 var containerWidth = outer.parentElement.clientWidth; 984 var targetWidth = Math.min(containerWidth, MAX_WIDTH); 985 var scale = targetWidth / BASE_WIDTH; 986 987 wrapper.style.transform = 'scale(' + scale + ')'; 988 outer.style.width = targetWidth + 'px'; 989 outer.style.height = (BASE_HEIGHT * scale) + 'px'; 990 } 991 992 window.addEventListener('load', rescaleFbPlugin); 993 window.addEventListener('resize', rescaleFbPlugin); 994 })(); 995</script>
995 996<!-- Youtube grid section --> 997 998<section class="fb-feed-wrapper" id=videos> 999 <h2 class="yt-feed-title">Latest videos</h2> 1000 1001 1002<div class="controls"> 1003 <div class="status-line" id="statusLine">Loadingâ¦</div> 1004 <button class="refresh-btn" id="refreshBtn"> </button> 1005 </div> 1006 1007 <div class="grid-wrap"> 1008 <div class="grid" id="grid"> 1009 <div class="skeleton"></div> 1010 <div class="skeleton"></div> 1011 <div class="skeleton"></div> 1012 <div class="skeleton"></div> 1013 </div> 1014 </div> 1015 1016 <footer class="credits"> </footer> 1017 1018 <div class="modal-overlay" id="modalOverlay"> 1019 <button class="modal-close" id="modalClose" aria-label="Close video">â</button> 1020 <div class="modal-box"> 1021 <div class="modal-frame-wrap" id="modalFrameWrap"></div> 1022 </div> 1023 </div> 1024 1025 <div class="toast" id="toast"></div> 1026
1027<script> 1028/* ========================================================================= 1029 CONFIGURE ME 1030 ========================================================================= */ 1031const CONFIG = { 1032 // Your channel ID (starts with "UCâ¦") â found in YouTube Studio > Settings 1033 // > Channel > Advanced. You can also pass a handle like "@yourchannel" and 1034 // it will be resolved automatically. 1035 CHANNEL_ID: 'UChZyM9rpHrRytHO6zd8Gxwg', // <-- replace with your channel ID 1036 1037 // A YouTube Data API v3 key, restricted to your domain via HTTP referrer 1038 // restrictions in Google Cloud Console (APIs & Services > Credentials). 1039 API_KEY: 'AIzaSyCzb2CjmkEa6O0ffGQIoTB3Zvsbia9xGt0', // <-- replace with your key 1040 1041 MAX_RESULTS: 20, // how many videos to show 1042 POLL_INTERVAL_MINUTES: 10 // how often to check for new uploads 1043}; 1044/* ========================================================================= */ 1045 1046const API_BASE = 'https://www.googleapis.com/youtube/v3'; 1047const grid = document.getElementById('grid'); 1048const statusLine = document.getElementById('statusLine'); 1049const refreshBtn = document.getElementById('refreshBtn'); 1050const toast = document.getElementById('toast'); 1051const modalOverlay = document.getElementById('modalOverlay'); 1052const modalFrameWrap = document.getElementById('modalFrameWrap'); 1053const modalClose = document.getElementById('modalClose'); 1054 1055let knownIds = new Set(); 1056let uploadsPlaylistId = null; 1057let isFirstLoad = true; 1058 1059function timeAgo(iso){ 1060 const diffMs = Date.now() - new Date(iso).getTime(); 1061 const mins = Math.floor(diffMs / 60000); 1062 if (mins < 60) return `${mins}m ago`; 1063 const hrs = Math.floor(mins / 60); 1064 if (hrs < 24) return `${hrs}h ago`; 1065 const days = Math.floor(hrs / 24); 1066 if (days < 30) return `${days}d ago`; 1067 const months = Math.floor(days / 30); 1068 if (months < 12) return `${months}mo ago`; 1069 return `${Math.floor(months / 12)}y ago`; 1070} 1071 1072function showState(title, message){ 1073 grid.innerHTML = ` 1074 <div class="state-card" style="column-span: all;"> 1075 <h2>${title}</h2> 1076 <p>${message}</p> 1077 </div>`; 1078} 1079 1080// Resolve "@handle" style channel identifiers to a real channel ID. 1081async function resolveChannelId(idOrHandle){ 1082 if (idOrHandle.startsWith('UC')) return idOrHandle; 1083 const handle = idOrHandle.replace(/^@/, ''); 1084 const url = `${API_BASE}/channels?part=id&forHandle=${encodeURIComponent(handle)}&key=${CONFIG.API_KEY}`; 1085 const res = await fetch(url); 1086 const data = await res.json(); 1087 if (data.error) throw new Error(data.error.message); 1088 if (!data.items || !data.items.length) throw new Error('Could not resolve channel handle.'); 1089 return data.items[0].id; 1090} 1091 1092// The uploads playlist ID is always the channel ID with "UC" swapped for "UU" â 1093// this avoids an extra API call (and extra quota) vs. calling channels.list. 1094function deriveUploadsPlaylistId(channelId){ 1095 return channelId.startsWith('UC') ? 'UU' + channelId.slice(2) : null; 1096} 1097 1098async function fetchLatestVideos(){ 1099 const url = `${API_BASE}/playlistItems?part=snippet&playlistId=${uploadsPlaylistId}&maxResults=${CONFIG.MAX_RESULTS}&key=${CONFIG.API_KEY}`; 1100 const res = await fetch(url); 1101 const data = await res.json(); 1102 if (data.error) throw new Error(data.error.message); 1103 return (data.items || []) 1104 .filter(item => item.snippet && item.snippet.resourceId) 1105 .map(item => ({ 1106 id: item.snippet.resourceId.videoId, 1107 title: item.snippet.title, 1108 publishedAt: item.snippet.publishedAt, 1109 thumbnail: 1110 item.snippet.thumbnails?.high?.url || 1111 item.snippet.thumbnails?.medium?.url || 1112 item.snippet.thumbnails?.default?.url 1113 })); 1114} 1115 1116function renderCard(video, isNew){ 1117 const el = document.createElement('button'); 1118 el.className = 'ticket'; 1119 el.type = 'button'; 1120 el.setAttribute('aria-label', `Play video: ${video.title}`); 1121 el.innerHTML = ` 1122 ${isNew ? '<div class="new-flag">NEW</div>' : ''} 1123 <div class="thumb-wrap"> 1124 <img src="${video.thumbnail}" alt="" loading="lazy"> 1125 <div class="play-badge"> 1126 <svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="32" fill="rgba(255,255,255,0.92)"/><path d="M26 20L46 32L26 44V20Z" fill="#1A1817"/></svg> 1127 </div> 1128 </div> 1129 <div class="perforation"></div> 1130 <div class="ticket-body"> 1131 <h3>${video.title}</h3> 1132 <div class="meta"><span class="dot"></span>
1132 ${timeAgo(video.publishedAt)}</div> 1133 </div> 1134 `; 1135 el.addEventListener('click', () => openModal(video.id, video.title)); 1136 return el; 1137} 1138 1139function openModal(videoId, title){ 1140 modalFrameWrap.innerHTML = `<iframe src="https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0" title="${title}" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`; 1141 modalOverlay.classList.add('open'); 1142} 1143function closeModal(){ 1144 modalOverlay.classList.remove('open'); 1145 modalFrameWrap.innerHTML = ''; 1146} 1147modalClose.addEventListener('click', closeModal); 1148modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) closeModal(); }); 1149document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); }); 1150 1151function showToast(msg){ 1152 toast.innerHTML = msg; 1153 toast.classList.add('show'); 1154 setTimeout(() => toast.classList.remove('show'), 4200); 1155} 1156 1157async function loadVideos({ silent } = {}){ 1158 try{ 1159 if (!silent){ 1160 statusLine.textContent = 'Loadingâ¦'; 1161 } 1162 1163 if (!uploadsPlaylistId){ 1164 const resolvedChannelId = await resolveChannelId(CONFIG.CHANNEL_ID); 1165 uploadsPlaylistId = deriveUploadsPlaylistId(resolvedChannelId); 1166 } 1167 1168 const videos = await fetchLatestVideos(); 1169 1170 if (!videos.length){ 1171 showState('No uploads yet', 'This channel doesn\'t have any public videos to show.'); 1172 return; 1173 } 1174 1175 const newOnes = videos.filter(v => !knownIds.has(v.id)); 1176 1177 if (isFirstLoad){ 1178 grid.innerHTML = ''; 1179 videos.forEach(v => grid.appendChild(renderCard(v, false))); 1180 videos.forEach(v => knownIds.add(v.id)); 1181 isFirstLoad = false; 1182 } else if (newOnes.length){ 1183 newOnes.reverse().forEach(v => { 1184 grid.prepend(renderCard(v, true)); 1185 knownIds.add(v.id); 1186 }); 1187 showToast(`ð¬ New upload: <strong>${newOnes[0].title}</strong>`); 1188 } 1189 1190 const now = new Date(); 1191 // statusLine.innerHTML = `<strong>${videos.length}</strong> videos shown · checked at ${now.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}`; 1192 statusLine.innerHTML = ` `; 1193 1194 } catch(err){ 1195 console.error(err); 1196 showState( 1197 'Setup needed', 1198 `Couldn't load videos (${err.message}). Double-check <code>CHANNEL_ID</code> and <code>API_KEY</code> at the top of the script, and make sure the YouTube Data API v3 is enabled for your key in Google Cloud Console.` 1199 ); 1200 statusLine.textContent = 'Not connected'; 1201 } 1202} 1203 1204loadVideos(); 1205setInterval(() => loadVideos({ silent: true }), CONFIG.POLL_INTERVAL_MINUTES * 60 * 1000); 1206</script>
1206 1207 1208</section> 1209 1210<!-- Youtube grid section --> 1211 1212 <section id="contact-form" class="contact-form-2 wf-section"> 1213 <div class="w-container"> 1214 <h2 class="heading-13">We would love to have your help!</h2> 1215 <div id="formInstructions" class="small-text"> 1216 <div class="w-row"> 1217 <div class="w-col w-col-6"> 1218 <h4 class="heading-14"><a href="/cdn-cgi/l/email-protection#4e2a273c2b2d3a213c0e3d3d3d383860213c29" class="link-5"><span class="__cf_email__" data-cfemail="1f7b766d7a7c6b706d5f6c6c6c696931706d78">[email protected]</span></a> +91 9177890308</h4> 1219 </div> 1220 <div class="w-col w-col-6"> 1221 <h4><a href="/cdn-cgi/l/email-protection#ceaaa7bcabadbaa1bc8ebdbdbdb8b8e0a1bca9" class="link-4"><span class="__cf_email__" data-cfemail="3b4b575a555552555c7b4848484d4d1554495c">[email protected]</span> <br>+91 8105658625</a>â</h4> 1222 </div> 1223 </div> 1224 </div> 1225 </div> 1226 </section> 1227 <footer id="footer" class="footer wf-section"> 1228 <div class="w-container"> 1229 <div class="footer-flex-container grid"> 1230 <a href="/#" class="footer-logo-link"><img src="/index_files/2026-SSSVV-logo.png" alt="" class="footer-image"></a> 1231 <div class="div-block-8"> 1232 <h2 class="footer-heading">Sitemap</h2> 1233 <ul role="list" class="list w-list-unstyled"> 1234 <li><a href="/" target="_blank" aria-current="page" class="footer-link w--current">Home</a></li> 1235 <li><a href="/about" target="_blank" class="footer-link">About us</a></li> 1236 <li><a href="/testimonials" target="_blank" class="footer-link">Testimonials</a></li> 1237 <li><a href="/lastq" target="_blank" aria-current="page" class="footer-link w--current">Quarterly Milestones</a></li> 1238 <li><a href="/activities/content-creation" target="_blank" class="footer-link">Content Creation</a></li> 1239 <li><a href="/activities/multimedia" target="_blank" class="footer-link">Multimedia</a></li> 1240 <li><a href="/activities/content-dissemination-and-training" target="_blank" class="footer-link">Content Dissemination & Training</a></li> 1241 </ul> 1242 <a href="/activities/mission-english" target="_blank" class="footer-link">Mission English</a><a href="/activities/inclusive-education" target="_blank" class="footer-link">Inclusive Education</a><a href="/activities/sopaan" target="_blank" class="footer-link">SOPAAN</a> 1243 </div> 1244 <div class="div-block-9"> 1245 <h2 class="footer-heading">Important</h2> 1246 <ul role="list" class="w-list-unstyled"> 1247 <li><a href="https://www.srisathyasai.org/" target="_blank" class="footer-link">Sri Sathya Sai Central Trust</a></li> 1248 <li><a href="https://www.sssmediacentre.org/" target="_blank" class="footer-link">Sri Sathya Sai Media Centre</a><a href="https://www.sssihl.edu.in/" target="_blank" class="footer-link">Sri Sathya Sai Institute of Higher Learning</a><a href="https://www.ssshss.edu.in/" target="_blank" class="footer-link">Sri Sathya Sai Higher Secondary School</a><a href="https://www.ssssoindia.org/" target="_blank" class="footer-link">Sri Sathya Sai Seva Organization</a><a href="https://www.srisathyasaiglobalcouncil.org/" target="_blank" class="footer-link">Sri Sathya Sai Global Council</a><a href="https://ssschv.srisathyasai.org/" target="_blank" class="footer-link">Sri Sathya Sai Centre for Human Values</a><a href="https://sssihms.org/" target="_blank" class="footer-link">Sri Sathya Sai Institute of Higher Medical Sciences</a></li> 1249 </ul> 1250 </div> 1251 <div class="div-block-10"> 1252 <h2 class="footer-heading">Social</h2> 1253 <ul role="list" class="list-2 w-list-unstyled"> 1254 <li class="list-item-2"><a href="https://www.facebook.com/profile.php?id=61587747644525" target="_blank" class="w-inline-block"><img src="./index_files/626d6e83910685814921ecdd_Asset 21FB icon.png" loading="lazy" width="60" alt="" class="image-2"></a></li> 1255 <li class="list-item"><a href="https://www.instagram.com/srisathyasaividyavahini/" target="_blank" class="w-inline-block"><img src="/index_files/insta-icon.png" loading="lazy" width="60" alt="" class="image-3"></a></li><li class="list-item"><a href="https://youtube.com/@sssvv?si=O4cZT9K5AyyDVX0c" target="_blank" class="w-inline-block"><img src="./index_files/626d6e8304af2a45e9df9174_Asset 23YT icon.png" loading="lazy" width="60" alt="" class="image-3"></a></li> 1256 <li><a href="https://www.linkedin.com/company/sri-sathya-sai-vidya-vahini/" target="_blank" class="w-inline-block"><img src="./index_files/626d6e83795d94f79ab52ec1_Asset 22LinkedIn icon.png" loading="lazy" width="60" alt="" class="image-3"></a></li> 1257 </ul> 1258 </div> 1259 </div> 1260 <div class="text-block-2">
1260Copyright © 2026 Sri Sathya Sai Central Trust. All rights reserved.</div> 1261 </div> 1262 </footer>
vendor: 114 bytes, lines 1262-1264
1262 1263 1264 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1264<script src="./index_files/jquery-3.5.1.min.dc5e7f18c8.js.download" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
1264 1265
1265<script src="/index_files/modwebflow.js" type="text/javascript"></script>
1265 1266 1267 <!--[if lte IE 9]>
1267<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
1267<![endif]--> 1268 <!-- Modal script --> 1269
1269<script> 1270 // Get the modal 1271 var modal = document.getElementById("mandalaModal"); 1272 var modalcont = document.getElementById("mandalaModalContent"); 1273 1274 // Get the button that opens the modal 1275 var btn = document.getElementById("MandalaBtn"); 1276 1277 // Get the <span> element that closes the modal 1278 var span = document.getElementsByClassName("close")[0]; 1279 1280 // When the user clicks the button, open the modal 1281 btn.onclick = function () { 1282 modal.style.display = "block"; 1283 //window.scrollTo(1000,1000); 1284 modalcont.scrollLeft = 2000; 1285 modalcont.scrollTop = 1500; 1286 } 1287 1288 // When the user clicks on <span> (x), close the modal 1289 span.onclick = function () { 1290 modal.style.display = "none"; 1291 1292 } 1293 1294 function closemodal() { 1295 modal.style.display = "none"; 1296 } 1297 1298 // When the user clicks anywhere outside of the modal, close it 1299 window.onclick = function (event) { 1300 if (event.target == modal) { 1301 modal.style.display = "none"; 1302 } 1303 } 1304 window.addEventListener('keydown', function (event) { 1305 if (event.key === 'Escape') { 1306 modal.style.display = "none"; 1307 } 1308 }); 1309 1310 1311 1312 1313 </script>
1313 1314
1315<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"68eade3ca0be4e52ae025f7297aa3a10","r":1,"spa":2}' crossorigin="anonymous"></script>
1315 1316</body> 1317</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.