Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	The History of KA
ID	6015879993671680
Created	3 years ago, 1652963202359
Updated	3 years ago, 1652963225864
Code	<!DOCTYPE html> <!-- The History of Khan Academy "Potential is everywhere. Access is not." #HTMLForever Credits 1. Blue Bird for Historical Thumbnail Script Colour Scheme Below If you need it :) - #0A2A66 - +2016 KA Blue Colour #FFFFFF - +2016 KA White Colour #14BF96 - +2016 KA Slate Green Colour #606060 - +2008 and -2016 Black Colour #fafafa - +2008 and -2016 White Colour #9EB63A - +2008 and -2016 Green Colour --> <html> <head> <meta charset="utf-8"> <title>The History of KA</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; transition: all 0.35s; box-sizing: border-box; } body { width: 100vw; height: 100vh; overflow-x: hidden; font-family: 'Lato', sans-serif; } button { border: none; padding: 10px; width: 150px; color: white; font-size: 20px; font-weight: 600; background: #BDD239; border:3px solid #BDD239; } button:hover { color: #BDD239; cursor: pointer; background: white; border: 3px solid #BDD239; } </style> <style> #year { color: white; width: 100vw; height: 100vh; display: flex; font-size: 40px; align-items: center; justify-content: center; background-color: #9EB63A; text-shadow: 0px 0px 15px white; } #yearNo { animation: yearlyAnim 0.4s linear; -webkit-animation: yearlyAnim 0.4s linear; animation-fill-mode: forwards; animation-delay: 0.5s; } #continue { width: 100vw; height: 100vh; display: flex; color: white; font-size: 25px; text-align: center; align-items: center; flex-direction: column; justify-content: center; text-shadow: -2px 2px 3px black; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Khan_Academy_Logo_Old_version_2015.jpg/600px-Khan_Academy_Logo_Old_version_2015.jpg?20150703221049"); } </style> <style> .curtain { top: 0; left: 0; z-index: 2; width: 100vw; display: none; background: white; position: absolute; animation: heightE 1s ease; -webkit-animation: heightE 1s ease; animation-fill-mode: forwards; } .slideshow { width: 100vw; height: 100vh; display: none; padding: 50px; color:#606060; background-color: #fafafa; animation: opacer 1s ease; -webkit-animation: opacer 0.6s ease; } .opacA { animation: opacerR 1.4s linear; -webkit-animation: opacerR 1.4s linear; } .textUpA { opacity: 0; animation: upTxtAnim 0.5s ease; -webkit-animation: upTxtAnim 0.5s ease; animation-fill-mode: forwards; animation-delay: 0.25s; } .textLeftA { opacity: 0; animation: upTxtAnim 0.5s ease; -webkit-animation: leftTxtAnim 0.5s ease; animation-fill-mode: forwards; animation-delay: 0.5s; } .yearMoveA { animation: broWhatsThisYear 2s linear infinite alternate; -webkit-animation: broWhatsThisYear 2s linear infinite alternate; } .scalerA { animation: scalerGOBOOM 0.6s linear; -webkit-animation: scalerGOBOOM 0.6s linear; animation-fill-mode: forwards; animation-delay: 0.25s; } .textRightA { opacity: 0; animation: rightTxtAnim 0.5s ease; -webkit-animation: rightTxtAnim 0.5s ease; animation-fill-mode: forwards; animation-delay: 0.5s; } .rotaterLA { opacity: 0; animation: rtTxtAnim 0.4s linear; -webkit-animation: rtTxtAnim 0.4s linear; animation-fill-mode: forwards; animation-delay: 0.35s; } .rotaterRA { opacity: 0; animation: ltTxtAnim 0.4s linear; -webkit-animation: ltTxtAnim 0.4s linear; animation-fill-mode: forwards; animation-delay: 0.35s; } .cursive { font-family: 'Lobster', cursive; } </style> <style> @keyframes yearlyAnim { 0% { opacity: 0.5; transform: translateY(30px) rotate(180deg); } 50% { opacity: 1; transform: translateY(10px); } 100% { opacity: 1; transform: scale(1.2) rotate(-3deg); } } @keyframes heightE { 0% { height: 0%; } 100% { height: 100vh; } } @keyframes opacer { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes opacerR { 0% { opacity: 0; } 50% { opacity: 0.5; transform: rotate(5deg); } 100% { transform: rotate(6deg); } } @keyframes upTxtAnim { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes leftTxtAnim { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes broWhatsThisYear { 0% { transform: translateX(-30px); } 50% { transform: translateX(0px); } 100% { transform: translateX(30px); } } @keyframes scalerGOBOOM { 50% { transform: scale(1) rotate(2deg); } 100% { transform: scale(1) rotate(10deg); } } @keyframes rightTxtAnim { 0% { opacity: 0; transform: translateX(100px); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes rtTxtAnim { 0% { opacity: 0; transform: translateX(-100px) rotate(-30deg); } 50% { opacity: 0.3; transform: translateX(-50px) rotate(-10deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } @keyframes ltTxtAnim { 0% { opacity: 0; transform: translateX(100px) rotate(30deg); } 50% { opacity: 0.3; transform: translateX(50px) rotate(10deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } </style> </head> <body> <div id="continue"> <h1>The History<br> of Khan Academy</h1><br> <button id="cont-btn">Continue</button> </div> <div id="year" style="display: none;"> <div class="curtain"></div> <h1 id="yearNo" >2008</h1> </div> <div class="slideshow"> <div class="curtain"></div> <h1 style="font-size: 45px; text-align: center;color: #9EB63A;" class="yearMoveA">2008</h1><br> <div style="display: flex; justify-content: space-around; align-items: center;"> <img class="opacA" style="box-shadow:0px 2px 4px #121212;animation-fill-mode: forwards;"src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Salman_Khan_TED_2011.jpg/220px-Salman_Khan_TED_2011.jpg" > <div class="textUpA" style="margin-left: 20px; color:#606060"> <h1 style="color: #9EB63A">Sal Khan</h1><br> <h3>Sal Khan became the founder and CEO of the website which you are using currently; Khan Academy.</h3> </div> </div><br><br> <div class="textLeftA"> <div style="flex-direction: column;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Khan_Academy_logo.svg/340px-Khan_Academy_logo.svg.png?20200716180444"><br><br> <h3>Khan Academy, a non-profit website to educate children, was started by Sal to teach his own cousins Math. Now, he teaches millions of cousins across the world.</h3> </div> </div> </div> <div class="slideshow"> <div class="curtain"></div> <h1 style="font-size: 45px; text-align: center;color: #9EB63A;" class="yearMoveA">2010</h1><br> <div style="display: flex;flex-direction: row; height: 200px; align-items: center;"> <img class="textLeftA" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Googleplex_HQ_%28cropped%29.jpg/800px-Googleplex_HQ_%28cropped%29.jpg" width="200" height="180"> <div style="flex-direction: column; margin-left: 20px;"> <h2 style=" color: #9EB63A">Donations</h2><br> <h3 class="textUpA">In 2010, Google contributed a total of $2 million. To aid Khan Academy create new courses and translating content into other languages.</h3> </div> </div><br><br> <div style="display: flex;flex-direction: row-reverse; height: 200px; align-items: center;"> <img class="scalerA" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Bill_and_Melinda_Gates_Foundation_front.JPG/250px-Bill_and_Melinda_Gates_Foundation_front.JPG" width="200" height="180"> <div style="flex-direction: column; margin-left: 20px;"> <h2 style=" color: #9EB63A" class="textUpA">Fund for Organization</h2><br> <h3 class="textUpA">The Bill & Melinda Gates Foundation donated $1.5 million to Khan Academy to<br> build out an organization.</h3> </div> </div> </div> <div class="slideshow"> <div class="curtain"></div> <h1 style="font-size: 45px; text-align: center;color: #9EB63A;" class="yearMoveA">2012</h1><br><br> <h2 style="text-align: center;"><q>$1 Trillion Opportunity.</q></h2><br> <div style="display: flex"> <h3 style="width: 75%;" class="textUpA"><span style="color: #9EB63A;">Khan Academy</span> reached 10 million students. The front page of one the Forbe's magazine had the title <br><span style="color: #9EB63A;">"One Man, One Computer, 10 Million Students"</span> ~ Forbes.</h3> <img class="textRightA" style="box-shadow:0px 2px 4px #121212;animation-fill-mode: forwards; margin-left: 10px"src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Khan_Academy_Metro_app_%28main_screen%29.png?20150507230057" width='200' height="150"> </div><br><br> <div style="display: flex; align-items: center;" class="textUpA"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Sal_khan.jpg/800px-Sal_khan.jpg?20160306001329" width="200" height="150" style="box-shadow:0px 2px 4px #121212;animation-fill-mode: forwards; margin-left: 10px" class="textRightA"> <h3 style="margin-left: 20px"><span style="color: #9EB63A;">Sal Khan</span> noted on the list of, 100 most influential people in the world.</h3> </div><br><br> </div> <div class="slideshow"> <div class="curtain"></div> <h1 style="font-size: 45px; text-align: center;color: #9EB63A;" class="yearMoveA">2013</h1><br><br> <div style="display: flex;"> <div style="width: 50%; text-align: center; display:flex; flex-direction: column;" class="rotaterLA"> <div style="text-align: center;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Carlos_Slim_%2845680472234%29_%28cropped%29.jpg/220px-Carlos_Slim_%2845680472234%29_%28cropped%29.jpg" width="150" height="200"><br><br> </div> <h2 style="color: #9EB63A">Carlos Slim's donation</h2><br> <h3>In 2013, Carlos Slim from the Luis Alcazar Foundation in Mexico, made a donation for creating Spanish versions of videos.</h3> </div> <hr style="margin-left: 10px"> <div style="margin-left: 20px; text-align: center; width:50%;" class="rotaterRA"> <img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/c4/Heinz_Award_Medal.png/220px-Heinz_Award_Medal.png"><br> <h2 style="color: #9EB63A">Heinz Award to Khan</h2><br> <h3>Khan was one of five winners of the 2013 Heinz Award. The Award was in the area of "Human Condition." </h3> </div> </div> </div> <div class="slideshow"> <div class="curtain"></div> <h1 style="font-size: 45px; text-align: center;color: #9EB63A;" class="yearMoveA">2015</h1> <div style="display: flex; align-items: center;" class="rotaterLA"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/AT%26THQDallas.jpg/250px-AT%26THQDallas.jpg" width="250" height="150"> <div style="display: flex; flex-direction: column; margin-left: 20px"> <h2 style="color: #9EB63A;">Mobile version of KA</h2><br> <h3 style="font-size: 16px;">American Telephone and Telegraph Company, donated $2.25 million to Khan Academy for mobile versions of the content accessible through apps.</h3> </div> </div><br> <div style="display: flex;" class="textRightA"> <div stye="flex-direction: column; width: 65%;"> <h2 style="color:#9EB63A">Pixar Collaboration</h2><br> <h3 style="font-size: 16px;">In 2015, Khan Academy teamed up with Pixar to create a new course named Pixar in a Box, which teaches skills of Pixar creators.</h3> </div> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Pixaranimationstudios.jpg/800px-Pixaranimationstudios.jpg" width="150" height="140"> </div> <div style="display: flex;" class="textLeftA"> <div stlye="flex-direction: column;"> <h2 style="color:#9EB63A">Official SAT Preparation</h2><br> <h3 style="font-size: 16px;">Since 2015, Khan Academy has been the official SAT preparation website. According to stats, studying for the SAT for 20 hours at Khan Academy is associated with a 115-point average score increase. Many book exercises select questions from the Khan Academy site to be published.</h3> </div> </div> </div> <div class="slideshow" style="background: #fafafa; color:#0A2A66"> <div class="curtain"></div> <h1 style="font-size: 45px; text-align: center;color: #14BF96;" class="yearMoveA">2016</h1><br> <h3 style="text-align: center;">"The most influential year of Khan Academy."</h3><br> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Khan_Academy_logo_%282018%29.svg/220px-Khan_Academy_logo_%282018%29.svg.png" class="textLeftA"> <div style="display: flex; align-items: center;" class="textUpA"> <div style="width: 65%; flex-direction: column;"> <h3><span style="color: #14BF96;">Khan Academy</span>'s new redesign, colour scheme, new courses, and new logo.</h3> </div> <div> <img src="https://cdn.kastatic.org/images/mastery/UnitTestNotStarted.svg" width="250" height="100" class="scalerA"> </div> </div><br> <div style="display: flex" class="textRightA"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Shorty-badge.svg/149px-Shorty-badge.svg.png" width="150" height="100"> <div style="flex-direction: column; margin-left: 20px"> <h2 style="color:#14BF96">Shorty Award</h2> <h3>In 2016, Khan Academy won a Shorty Award for Best in Education.</h3> </div> </div><br> <div style="display: flex" class="textLeftA" style="animation-delay: 0.45s;"> <div style="flex-direction: column;"> <h2 style="color: #14BF96">KA's Operations in India</h2><br> <h3> Khan Academy started operations in India in 2016. Khan Academy platform has an estimated total 1 million monthly active learners from India</h3> </div> <div style="margin-left: 20px"> <img src="https://cdn.kastatic.org/genfiles/topic-icons/icons/arithmetic.png-af7472-128c.png" width="100" height="100"> </div> </div> </div> <div class="slideshow" style="background: #fafafa; color:#0A2A66"> <div class="curtain"></div> <h1 style="font-size: 45px; text-align: center;color: #14BF96;" class="yearMoveA">2018</h1><br> <div style="width: 100%; align-items: center; display :flex;"> <div style="flex-direction: column;" class="textUpA"> <img src="https://www.khanacademy.org/computer-programming/welcome-to-contests/5745407636209664/5832697994330112.png"> </div> <div style="flex-direction: column;"class="textUpA"> <h2 style="color:#14BF96">Contests are Back!</h2><br> <h3><span style="color:#14BF96">"CONTESTS ARE BACK! YEAH!"</span> After Pamela left. The contests were no longer held but in 2018 a council called KACP started the Contests again!</h3> </div> </div><br> <div style="width: 100%; display: flex; align-items: center;" class="textLeftA"> <img src="https://cdn.kastatic.org/images/avatars/svg/leaf-blue.svg" width="150" height="100"> <div style="flex-direction: column;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Khan_Academy_Kids_logo.svg/512px-Khan_Academy_Kids_logo.svg.png?20180726163149" width="250"><br> <h1 style="color: #14BF96">New Application</h1><br> <h3>In 2018, Khan Academy created an application called Khan Academy Kids. It is used by two to six-year-old children to learn basic skills before progressing to grade school.</h3> </div> </div> </div> <div class="slideshow" style="background: #fafafa; color:#0A2A66"> <div class="curtain"></div> <h1 style="font-size: 45px; text-align: center;color: #14BF96;" class="yearMoveA">2021</h1> <div style="display: flex; align-items: center;"> <img src="https://cdn.kastatic.org/images/avatars/svg/boggle-blue.svg" width="200" height="150" class="rotaterLA"> <div style="flex-direction: column;" class="textLeftA"> <h2 style="color: #14BF96;">I joined Khan Academy</h2><br> <h3>I <i style="color: #14BF96" >(21262)</i> joined Khan Academy.</h3> </div> </div> <div> <div style="display: flex; justify-content: space-around; animation-delay: 1s" class="yearMoveA"> <img src="https://cdn.kastatic.org/images/avatars/svg/sneak-peak-green.svg" style="transform: rotate(10deg)" width="100" height="100"> <img src="https://cdn.kastatic.org/images/avatars/svg/boggle-blue.svg" style="transform: rotate(10deg)" width="100" height="100"> <img src="https://cdn.kastatic.org/images/avatars/svg/scuttlebug-blue.svg" style="transform: rotate(10deg)" width="100" height="100"> <img src="https://cdn.kastatic.org/images/avatars/svg/eggleston-blue.svg" style="transform: rotate(10deg)" width="100" height="100"> <img src="https://cdn.kastatic.org/images/avatars/svg/area-52-yellow.svg" style="transform: rotate(10deg)" width="100" height="100"> </div> <h2 style="color: #14BF96" class="textLeftA">32 new avatars</h2><br> <h3 class="textRightA">Khan Academy added 32 new avatars as possible choices for your profile (8 different characters, each with 4 styles).</h3> </div><br> <div style="display: flex" class="textLeftA"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg/220px-Elon_Musk_Royal_Society_%28crop2%29.jpg" width="100" height="120"> <div style="flex-direction: column; margin-left: 20px;"> <h2 style="color: #14BF96">Elon Musk's Donation (AKA Leaf)</h2><br> <h3>On January 11, 2021, Elon Musk donated $5 million through his Musk foundation.</h3> </div> </div> </div> <div class="slideshow" style="background: #fafafa; color:#0A2A66"> <div class="curtain"></div> <h1 style="font-size: 45px; text-align: center;color: #14BF96;" class="yearMoveA">2022</h1><br> <h2 style="color: #606060; text-align: center;">Currently going on...</h2> <div style="display: flex; justify-content: center; align-items: center; height:60%; flex-direction: column;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Khan_Academy_logo_%282018%29.svg/1920px-Khan_Academy_logo_%282018%29.svg.png" width="150"> <h1 class="cursive" style="text-align: center; font-size: 40px"><span style="color: #14BF96">Thank</span><span style="color: #9EB63A"> you</span>, Khan Academy! :)</h1><br> <h2 style="color: dodgerBlue;">We are grateful for your leadership.</h2><br> <h3 style="position: absolute; bottom: 0; margin-bottom: 20px;">Made by <span style="color:#14BF96">21262</span></h3> </div> </div> <script type="module"> let ear = 2008; const yearPg = document.getElementById("year"); const yearElem = document.getElementById("yearNo"); const curtain = document.querySelectorAll(".curtain"); let slideShows = document.querySelectorAll(".slideshow"); let changePage = (disp,year,time = 15000) => { setTimeout(() => { if (year == 2009) { year = 2010; ear = 2010; } if (year == 2014) { year = 2015; ear = 2015; } if (year === 2017) { year = 2016; ear = 2016; document.getElementById("year").style.backgroundColor = "#0A2A66"; } if (year === 2019) { year = 2021; ear = 2021; } if (year === 2023) { year = 2022; ear = 2022; } curtain[disp].style.display = "block"; setTimeout(() => { yearPg.style.display = "flex"; yearElem.textContent = year; ear += 1; year = ear; setYear(disp,ear); yearPg.style.animation = "opacer 0.5s ease" for (let c = 0; c < curtain.length; c++) { curtain[c].style.display = "none"; } slideShows[disp - 1].style.display = "none" },1050) },time); }; let setYear = (disp,year = 2008) => { setTimeout(() => { curtain[0].style.display = "block"; setTimeout(() => { changePage(disp + 1,ear + 1); yearPg.style.display = "none"; slideShows[disp].style.display = "block"; },1050) },1100) }; document.getElementById("cont-btn").addEventListener("click",() => { document.getElementById("continue").style.display = "none"; document.getElementById("year").style.opacity = 0; window.setTimeout(function(){ document.getElementById("year").style.opacity = 1; },500) document.getElementById("year").style.display = "flex"; setYear(0); }) </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <!-- Save function by BlueBird@BirdWatcher03 --> <script type="application/javascript"> var save = function () { html2canvas(document.body, { allowTaint: false, useCORS: true, width: 579, height: 566, }).then(function (canvas) { b64Img = canvas.toDataURL(); window.top.postMessage(b64Img, "https://www.khanacademy.org/"); }); }; var handleSave = function (e) { if (JSON.parse(e.data).screenshot) { setTimeout(function () { console.log("Saving..."); save(); }, 1000); } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener("message", handleSave); window.parent.savers += 1; for ( window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1 ) { window.parent.removeEventListener("message", handleSave); } </script> </body> </html>
Folds	16,643
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKOwk-3XCgw
Votes	197
Spin-Offs	8
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	21262
Author Name	Dev21262
Author ID	kaid_19721081897200672399859
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739452547798
Updated	10 months ago, 1739452556804
Source Deleted	unknown