Viewing Program

Program Data

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

Title	My lame HTML/CSS Skillz
ID	5310446503378944
Created	24 days ago, 1734404355239
Updated	24 days ago, 1734419631429
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My lame HTML/CSS Skillz</title> <style> /* Body / body::-webkit-scrollbar { display: none; } body { background: linear-gradient(135deg, rgb(250, 171, 87), orange, rgb(186, 112, 0)); background-attachment: fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; user-select: none; } / Nav Bar / #nav { position: absolute; top: 0; left: 0; width: 100vw; height: 10vw; border-bottom: 2px solid; border-image: linear-gradient(to right, rgb(255, 136, 0), brown); border-image-slice:1; } #name { font-family: "Jaro"; font-size: 8vw; text-align: center; font-weight: bold; text-transform: uppercase; color: transparent; background-image: linear-gradient(45deg, orange, black); background-size: cover; -webkit-background-clip: text; background-clip: text; margin: 0; margin-top: -10.3vh; } / Remove underline from a tags / a { text-decoration: none; } .page { margin-top: 11vw; } .icons { color: rgb(250, 250, 250); font-size: 23vw; margin: 3.1vw; transition: transform 1s; user-select: none; color: transparent; background-image: linear-gradient(45deg, brown, black); background-size: cover; -webkit-background-clip: text; background-clip: text; } .icons:hover { cursor: pointer; transform: rotate(360deg); } @keyframes openControl { 0% {left: -100vw; opacity: 0;} 100% {left: 0vw; opacity: 1;} } @keyframes closeControl { from {left: 0vw; opacity: 1;} to {left: -100vw; opacity: 0;} } table { width: 100%; border-radius: 12px; overflow: hidden; background-color: #fff8f0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition-duration: 0.3s; border-collapse: collapse; font-family: "Nunito"; } table:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); transform: translateY(-5px); } thead { background-color: #6e4b3a; color: #fff; text-transform: uppercase; font-weight: bold; } th, td { padding: 15px; text-align: center; border-bottom: 1px solid #d1b09b; transition-duration: 0.3s; } th { background-color: #6e4b3a; color: #fff; } tbody tr { transition-duration: 0.3s; } tbody tr:nth-child(odd) { background-color: rgb(237, 206, 112); } tbody tr:nth-child(even) { background-color: rgb(240, 226, 183); } tbody tr:hover { background-color: rgb(232, 205, 157); color: #5c3c2e; transform: scale(1.02); } a { color: #6e4b3a; transition-duration: 0.3s; } a:hover { color: #4a3020; text-decoration: underline; } h2 { text-align: center; font-family: "Jaro"; color: transparent; background-image: linear-gradient(to top, black, brown); background-size: cover; -webkit-background-clip: text; background-clip: text; } footer { border-top: 2px solid; border-image: linear-gradient(to right, rgb(255, 136, 0), brown); border-image-slice:1; width: 100vw; height: 75px; margin-bottom: -2vh; margin-top: 5vh; font-family: "Nunito"; text-align: center; } #ft { margin-top: 4.4vh; text-shadow: 0 0 6px white; } #control { background: linear-gradient(135deg, rgb(250, 171, 87), orange, rgb(186, 112, 0)); width: 100vw; height: 100vw; position: absolute; top: 0; left: 0; display: none; z-index: 2; text-align: center; overflow: hidden; } .btns { display: flex; align-items: center; justify-content: center; text-align: center; width: 95%; left: 0; overflow: hidden; position: relative; margin: 13.5% 0; } .text { transition: 0.3s; font-family: "Fira Sans"; font-size: 40px; } .icon { font-size: 24px; left: 10px; opacity: 0; / Initially hidden / transition: 0.3s ease; color: white; transform: translateY(10px); } .btns:hover .text { transform: translate(50px, 0); color: white; cursor: pointer; } .btns:hover .icon { opacity: 1; left: 10px; transform: translateY(0); } .siema { width: 50vw; margin: auto; justify-content: center; position: relative; } .btn { display: flex; justify-content: center; align-items: center; width: 5vw; height: 5vw; border-radius: 150px; border: 1px solid grey; background: white; opacity: 0.7; position: absolute; text-align: center; transition-duration: 0.3s; } .btn:hover { opacity: 0.9; transform: rotate(360deg); } .btn-right { top: 50%; left: -14%; } .btn-left { top: 50%; left: 104%; } img { width: 100%; height: auto; } .dots { display: flex; justify-content: center; gap: 10px; margin-top: 10px; } .dot { width: 15px; height: 15px; border-radius: 100px; background: #ccc; border: none; cursor: pointer; transition: background 0.3s; } #active_dot { background: #007bff; } #art_siema { height: 50vw; background: red; border-radius: 30px; } .credit-box { display: flex; width: 80vw; height: 30vw; background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a4/JavaScript_code.png); background-size: 79% auto; background-attachment: fixed; background-position: bottom; transition: 0.5s; position: relative; margin: 30px; align-items: center; border-radius: 40px 0 40px 0; } .credit-box:hover { border-radius: 0px 40px 0px 40px; } .credit-box:hover .blur { border-radius: 0px 40px 0px 40px; } .credit-avatar { margin-left: 6%; width: 60px; height: auto; z-index: 1; } .blur { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 0; border-radius: 40px 0 40px 0; transition: 0.5s; } .credit-box a { color: white; z-index: 1; font-family: "Titillium Web"; margin-left: 20px; margin-top: -40px; text-decoration: underline; } .credit-description { color: white; font-family: "Nunito"; z-index: 1; margin-left: -25vw; margin-top: 11%; } / Scroll Animation / / Credit to Polar(@notpolar) / .scroll-element{ opacity: 0; transition-duration: 0.5s; } .scrolled { opacity: 1; } .scrolled.left { animation: slideIn-Left 0.5s ease-in-out; } .scrolled.right { animation: slideIn-Right 0.5s ease-in-out; } .scrolled.up { animation: slideIn-Up 0.5s ease-in-out; } @keyframes slideIn-Up { 0% {transform: translateY(200px);} 100%{transform: translateY(0);} } @keyframes slideIn-Right { 0% {transform: translateX(200px);} 100%{transform: translateX(0);} } @keyframes slideIn-Left { 0% {transform: translateX(-200px);} 100%{transform: translateX(0);} } #special { margin: 0; } </style> <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=Jaro:opsz@6..72&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Jaro:opsz@6..72&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet"> </head> <body> <!-- Control Page --> <div id="control"> <div class="btns" onclick="changePage(0); handleNav();"><span style="font-size: 30px;" class="icon material-symbols-outlined">group</span><span class="text">Famous Fans</span></div> <div class="btns" onclick="changePage(1); handleNav();"><span style="font-size: 30px;" class="icon material-symbols-outlined">palette</span><span class="text">True Art</span></div> <div class="btns" onclick="changePage(2); handleNav();"><span style="font-size: 30px;" class="icon material-symbols-outlined">account_circle</span><span class="text">Credits</span></div> <div class="btns" onclick="handleNav();"><span style="font-size: 30px;" class="icon material-symbols-outlined">close</span><span class="text">Close</span></div> </div> <!-- Nav Bar --> <div id="nav"> <div id="bar-btn" onclick="handleNav()"><span class="material-symbols-outlined icons">menu</span></div> <p id="name"><a style="color: transparent;" target="_blank" href="https://www.khanacademy.org/profile/kaid_831993479561352012904348/projects">weal R.</a></p> </div> <!-- FF page --> <div class='page'> <h3 style="font-family: Nunito; text-align: center;">Relatively Famous People Who Have At Least 2 <br>Programs With 100 Votes Who Have Commented<br>On One Of My Programs.</h3> <h2>On this account:</h2> <table> <thead> <th>NAME</th> <th>#Programs w/ at least 100 votes</th> </thead> <tbody id="a1"> </tbody> </table> <h2 class="scroll-element right">On another account:</h2> <table class="scroll-element left"> <thead> <th>NAME</th> <th>#Programs w/100or more votes</th> </thead> <tbody id="a2"> </tbody> </table> <h2 class="scroll-element right">On another account:</h2> <table class="scroll-element up"> <thead> <th>NAME</th> <th>#Programs w/100or more votes</th> </thead> <tbody id="a3"> </tbody> </table> <p class="scroll-element left" style="text-align: center; font-family: Nunito; font-style: italic;">Note: This is silly as comments are easy to give.</p> <script> var a1 = ["21262", "19721081897200672399859", 4, "Paperwad", "1161636173501911064328685", 20, "August Berning", "47542012989358012242668", 5, "GalaxyRanger", "574576985099042639713735", 12, "Ibraheem Ahmed", "42165633374795610935956", 19, "LeaferStudios", "553656479258879622339276", 19, "Boazon", "73656865894951272751214", 2]; var a2 = ["Lucy van Pelt", "1169532513213949517241167", 3, "SpencerKuan", "266759593901575482747326", 9, "No Name", "1122358641061010013832844", 43, "Schuck", "182089607744462391348494", 3]; var a3 = ["Ibraheem Ahmed", "42165633374795610935956", 19, "Liam K.", "160653079463992085090428", 42, "SP", "1154433418082391458150393", 11, "Timothy", "580436051254509721948310", 5, "Eprony", "733000745482584737122376", 4, "F4stB01", "114585470331020100763556", 4, "CZS", "676584471536152741627316", 7, "TDJ", "682972421482671044758972", 4, "bravo bravo", "3550040499775075061747637", 2, "Washington", "701855056246665520276831", 3, "Johnathan Wintres", "226616569303588979232618", 11, "The No-Sock Guy", "533978982937476630790970", 3, "Thompson, Mark", "573124469913378349804263", 6, "Vortex", "1191832568232610683566773", 8, "Promise", "879429862105799252962492", 3, "Polar", "80710011086149831327935", 2, "21262", "19721081897200672399859", 4, "𝙕𝙚 𝙍𝙚𝙙 𝘽𝙖𝙧𝙧𝙤𝙣", "313232624660631773604189", 4, "ThriftyPiano", "612170788949678741616671", 10, "Gray Wolf", "639291037700385781852565", 120, "ice to meet you", "862703415184077457346988", 6, "is plant", "2257721934505649027116158", 3, "bronte", "757923585508538158300054", 9, "CowboysFan232", "838836130659786741993223", 5, "Levi F.", "1152620490185361154142770", 38, "Someone", "893074355850138340245999", 3, "Alan", "778187702965680607319729", 3, "Lazerwolf", "979231835959986117146697", 2, "Bearkirb314", "375460112550893828689953", 9, "ƬHƎ CHICKƎӤ LOƦD", "6137073592662588829612688", 2, "Link(Sax Man)", "1072768329285718915349513", 2, "Light Runner", "486291797225131982323911", 7, "Electric Dolphin", "1188776231699286995947997", 9]; function populateTable(data, tableId) { let rows = ""; for (let i = 0; i < data.length; i += 3) { rows += "<tr><td><a target='_blank' href='https://www.khanacademy.org/profile/kaid_" + data[i + 1] + "/projects'>" + data[i] + "</a></td><td>" + data[i + 2] + "</td></tr>"; } document.getElementById(tableId).innerHTML += rows; } populateTable(a1, "a1"); populateTable(a2, "a2"); populateTable(a3, "a3"); </script> </div> <!-- Art page --> <script src="https://cdn.jsdelivr.net/npm/siema@1.5.1/dist/siema.min.js"></script> <div class="page"> <h2>True Art is Pixel Art</h2> <div class="siema"> <h2 id="title">Lame Program 1</h2> <div id="art_siema"> <img src="https://www.khanacademy.org/computer-programming/lame-program/6545783227596800/latest.png"> <img src="https://www.khanacademy.org/computer-programming/i/6346502726139904/latest.png"> <img src="https://www.khanacademy.org/computer-programming/i/5664793839976448/latest.png"> <img src="https://www.khanacademy.org/computer-programming/i/4960917084094464/latest.png"> <img src="https://www.khanacademy.org/computer-programming/i/4739926407954432/latest.png"> <img src="https://www.khanacademy.org/computer-programming/i/5153591726620672/latest.png"> <img src="https://www.khanacademy.org/computer-programming/i/5221234642960384/latest.png"> <img src="https://www.khanacademy.org/computer-programming/i/5687139776774144/latest.png"> <img src="https://www.khanacademy.org/computer-programming/i/6181334929031168/latest.png"> </div> <div onclick="moveRight()" class="btn btn-right">❮</div> <div onclick="moveLeft()" class="btn btn-left">❯</div> </div> <div class="dots"></div> <h2>Irony Abounds</h2> <script> var artSiema = new Siema({ selector: "#art_siema", draggable: false, loop: true, }); var dotsContainer = document.querySelector(".dots"); var titles = ["Lame Program 1", "Lame Program 2", "Lame Program 3", "Lame Program 4", "Lame Program 5", "Lame Program 6", "Lame Program 7", "Lame Program 8", "Mona Lisa"]; function handleDots (index) { var dots = document.getElementsByClassName("dot"); for (var i = 0; i < dots.length; i++) { dots[i].id = ""; } dots[index].id = "active_dot"; document.getElementById("title").innerHTML = titles[index]; } for (var i = 0; i < artSiema.innerElements.length; i++) { (function (index) { var dot = document.createElement("button"); dot.className = "dot"; if (index === 0) { dot.id = "active_dot" } dot.addEventListener("click", function () { artSiema.goTo(index); handleDots(index); }); dotsContainer.appendChild(dot); })(i); } function moveRight() { artSiema.prev(); handleDots(artSiema.currentSlide); }; function moveLeft() { artSiema.next(); handleDots(artSiema.currentSlide); }; </script> </div> <!-- Credit Page --> <div class="page"> <h2>CREDITS:</h2> <div class="credit-box"> <div class="blur"></div> <img class="credit-avatar" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/W3Schools_logo.svg"> <a target="_blank" href="https://www.w3schools.com/"><h1>w3Schools</h1></a> <p class="credit-description"><span style="color: yellow;">w3schools</span>. What can I say.</p> </div> <div class="credit-box" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg); background-position: 67px 50px"> <div class="blur"></div> <img class="credit-avatar" src="https://cdn.kastatic.org/images/avatars/svg/boggle-blue.svg"> <a target="_blank" href="https://www.khanacademy.org/profile/kaid_19721081897200672399859/projects"><h1>21262</h1></a> <p class="credit-description" style="margin-left: -15vw;"><span style="color: yellow;">21262</span>'s amazing programs were inspiration.</p> </div> <div class="credit-box" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/f4/Blue_jay_in_PP_%2830960%29.jpg); background-size: 100%; background-position: 0 60px"> <div class="blur"></div> <img class="credit-avatar" src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/spunky-sam.png"> <a target="_blank" href="https://www.khanacademy.org/profile/kaid_157624541333313939750668/projects"><h1>𝘉𝘭𝘶𝘦𝘣𝘪𝘳𝘥</h1></a> <p class="credit-description" style="margin-left: -18vw;">I used <span style="color: yellow;">Bluebird</span>'s thumbnail script. I'm so unique.</p> </div> <div class="credit-box" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/cf/Noaa3-2006-0602-1206_%28cropped%29.jpg); background-size: 100%; background-position: 0 0px"> <div class="blur"></div> <img class="credit-avatar" src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Jumping.png"> <a target="_blank" href="https://www.khanacademy.org/profile/notpolar/"><h1>Polar</h1></a> <p class="credit-description" style="margin-left: -12vw;"><span style="color: yellow;">Polar</span>'s scroll animation tutorial was helpful.</p> </div> <div class="credit-box" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6f/011_The_lion_king_Tryggve_in_the_Serengeti_National_Park_Photo_by_Giles_Laurent.jpg); background-size: 100%; background-position: 0 50px"> <div class="blur"></div> <img class="credit-avatar" src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leaf-grey.png"> <a target="_blank" href="https://www.khanacademy.org/profile/kaid_481697903688181525808339/projects"><h1>Leaf</h1></a> <p class="credit-description" style="margin-left: -10vw;">I used <span style="color: yellow;">Leaf</span>'s <a id="special" target="_blank" href="https://www.khanacademy.org/computer-programming/i/4626826748018688">tutorial</a> on how to create awesome thumbnails.</p> </div> </div> <!-- Footer --> <footer id="footer"> <p id="ft">This website is <span style="color: brown;">ridiculous</span> and it was made by <a target="_blank" href="https://www.khanacademy.org/profile/kaid_831993479561352012904348/projects">wealR</a> in 2024</p> </footer> <!-- Change Page Function --> <script> var pages = document.getElementsByClassName("page") function changePage(page) { for (var i = 0; i < pages.length; i++) { pages[i].style.display = 'none'; } pages[page].style.display = 'block'; } changePage(0); </script> <!-- Handle Nav Function --> <script> var control = document.getElementById("control"); var inAnim = false; function handleNav() { if (!inAnim) { inAnim = true; function turnFalse() { inAnim = false; } if (control.style.display === 'block') { control.style.animation = "closeControl 1s ease-out"; document.getElementById("footer").style.display = 'block'; document.body.style.overflow = 'auto'; function disappear(){ control.style.display = 'none'; } setTimeout(disappear, 990); } else { control.style.display = "block"; control.style.animation = "openControl 1s ease-out"; document.body.style.overflow = 'hidden'; document.getElementById("footer").style.display = 'none'; } setTimeout(turnFalse, 1000); } } </script> <!-- Scrolling Animation --> <!-- Credit to Polar(@notpolar) --> <!-- https://www.khanacademy.org/computer-programming/i/6162500700651520 --> <script type="application/javascript"> var scrolls = document.getElementsByClassName("scroll-element"); function checkScroll () { for (var i = scrolls.length - 1; i >= 0; i--) { if (scrolls[i].getBoundingClientRect().top 1.25 < window.innerHeight) { scrolls[i].classList.add("scrolled"); } else if (scrolls[i].getBoundingClientRect().top > window.innerHeight) { scrolls[i].classList.remove("scrolled"); } } }; checkScroll(); document.addEventListener("scroll", checkScroll); </script> <!-- credit to leaf(https://www.khanacademy.org/computer-programming/i/4626826748018688) --> <!-- CREDIT TO BlueBird@BirdWatcher03 FOR THE AMAZING SAVE FUNCTION --> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <script> 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> <script type="application/javascript"> document.body.addEventListener("keydown", function(e) { if (e.code === "Escape") { document.body.innerHTML = ` <div style='position:absolute;top:0;left:0;width:100%;height:100%; background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3d/CSS_code_on_a_screen_%28Unsplash%29.jpg); background-size: 155%; background-position: -80px -20px; align-items: center; justify-content: center; display: flex; z-index: 0;'> <p style="margin: 35vw 25vw; width: 50vw; height: 30vw; background-color: rgba(100, 100, 100, 0.8); border: 5px solid rgba(255, 255, 255, 0.7); border-radius: 20px; font-family: 'Jaro'; text-align: center; font-size: 40px; color: white; justify-content: center; align-items: center; display: flex; z-index: 1;">My HTML/CSS Skillz<br><br><br><br><br><br>My HTML/CSS Skillz</p> `; } if (e.code === "Enter") { e.preventDefault(); } }); </script> <!--The Thumbnail Script 2.1.0 12/18/2023 by Bluebird@kaid_157624541333313939750668--><script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script><script type>var r=600,s=document.documentElement.clientWidth;window.parent.html2canvas=t=>{try{html2canvas(document.body,{width:s,height:s,useCORS:!0,onclone:t=>t.getAnimations().forEach((t=>{try{t.finish()}catch{}}))}).then((t=>{var e=document.createElement("canvas");e.width=r,e.height=r,e.getContext("2d").drawImage(t,0,0,t.width,t.height,0,0,r,r),window.top.postMessage(e.toDataURL(),"")})).catch((t=>{alert("Thumbnail Script Error: "+t)}))}catch{window.top.postMessage(document.createElement("canvas").toDataURL(),"")}};</script> </body> </html> <!-- If the pixel art isn't showing up restart Also i just beginner not responsive no hat pls :( i saw people doing the famous people comment on my programs so i did the same no hat pls Sub for more redikewlessness pls: https://www.khanacademy.org/computer-programming/lame-idk-fr/5681493063155712 -->
Folds	1,638
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLvrqrq3CQw
Votes	15
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	wealR
Author Name	wealR
Author ID	kaid_831993479561352012904348
Author Profile Access	COACH

Archive Data

Added	23 days ago, 1734457554459
Updated	23 days ago, 1734457554459
Source Deleted	unknown