Viewing Program

Program Data

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

Title	ByteBots Homepage \| TCO Entry
ID	5091593506570240
Created	1 years ago, 1689019909561
Updated	1 years ago, 1689252132839
Code	<!DOCTYPE html> <!-- HOW TO DO THUMBNAIL!!!!!!!!??????? Believe it or not, the CSS term `rotate: deg;` is actually standard and existant Go margins! My code is neater than yours #readme You can sub if you wish: https://www.khanacademy.org/computer-programming/subpage/5694044653273088 The member card hovering has a glitch Let's just say it's a problem with your computer? --> <html> <!--Styling and title--> <head> <!--Encoding and viewport--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Import Google icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..300,0..1,-50..200" /> <!--Import google font: Exo --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Exo"> <!--title--> <title>ByteBots Homepage \| TCO Entry</title> <!--Main styling--> <style> * { margin: 0px; margin: none; padding: 0px; padding: none; transition: 1s; overflow-x: hidden; box-sizing: border-box; } body { font-family: 'Exo', sans-serif; } a { color: rgb(56, 56, 56); } a:hover { color: rgb(253, 255, 135); } ::-webkit-scrollbar { width: 5px; background-color: rgb(66, 66, 66,0.1); } ::-webkit-scrollbar-thumb { background-color: gray; } ::-webkit-scrollbar-thumb:hover{ background-color: rgb(181, 181, 181, 0.5); } .crop-container { width: 275px; height: 300px; overflow: hidden; } .crop-container img { margin-top: 14px; margin-left: 107px; } </style> <!--Title page--> <style> .context { width: 100%; position: absolute; top: 50vh; } .context h1 { text-align: center; color: #fff; font-size: 50px; } .context h2 { text-align: center; color: #fff; font-size: 18px; } .context a { background-color: rgb(191, 107, 191); } .context a:hover { background-color: rgb(0, 0, 0); } .home-first { background: #4e54c8; background: linear-gradient(to left, rgb(240, 240, 240), rgb(89, 89, 89)); width: 100%; height: 100vh; } .gears { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .gears li { position: absolute; display: block; list-style: none; width: 20px; height: 20px; background: rgba(255, 255, 255, 0); animation: animate 25s linear infinite; bottom: -150px; } .gears li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; } .gears li:nth-child(2) { left: 10%; width: 30px; height: 30px; animation-delay: 2s; animation-duration: 12s; } .gears li:nth-child(3) { left: 70%; width: 30px; height: 30px; animation-delay: 4s; } .gears li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; } .gears li:nth-child(5) { left: 65%; width: 30px; height: 30px; animation-delay: 0s; } .gears li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; } .gears li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; } .gears li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; } .gears li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; } .gears li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; } @keyframes animate { 0% { transform: translateY(0) rotate(0deg); opacity: 1; border-radius: 0; } 100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; } } </style> <!--Nav bar and page content--> <style> .navbar { overflow: hidden; background-color: white; opacity: 0.9999999; box-shadow: 0px -9px 87px 0px rgba(0, 0, 0, 0.5); } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: rgb(89, 89, 89); } .dropdown-content { display: none; position: absolute; background-color: rgb(89, 89, 89); min-width: 148px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: rgb(89, 89, 89); } .dropdown:hover .dropdown-content { display: block; background-color: rgb(199, 199, 199); } .tablink { background-color: white; color: black; float: left; border: none; outline: none; cursor: pointer; padding: 14px 64.35px; font-size: 17px; } .tablink:hover { background-color: rgb(89, 89, 89); } .tabcontent { background-color: linear-gradient(to left, #8f94fb, #4e54c8); color: black; display: none; padding: 47%; height: auto; } #Home { background-color: rgb(255, 255, 255); } #Join { background-color: rgb(255, 255, 255); } #Members { background-color: rgb(255, 255, 255); } #About { background-color: rgb(255, 255, 255); } #Standings { background-color: rgb(255, 255, 255); } </style> <!--Text parent and styling--> <style> .text-parent{ overflow: hidden; background-color: rgb(156, 156, 156, 0.92); border-radius: 39px; position: absolute; top: 113%; left: 3%; margin-right: 28px; color: gray; padding: 93px; text-align: center; } .text-parent h1{ position: absolute; color: black; text-align: center; top: 18%; left: 45%; } .text-parent p{ color: black; font-size: 19px; } </style> <!--backdrop--> <style> .backdrop-parent { position: absolute; top: 108%; left: 0%; padding: 994px; overflow: hidden; } .backdrop-one { position: absolute; top: -13%; left: -20%; padding: 50px; } .backdrop-two { position: absolute; rotate: 76deg; top: 32%; left: 23.4%; padding: 50px; } .backdrop-three { position: absolute; rotate: 31deg; top: 11%; left: -7%; padding: 50px; } .backdrop-four { position: absolute; rotate: 31deg; top: -11%; left: 22%; padding: 50px; } .backdrop-five { position: absolute; rotate: 31deg; top: 40%; left: -14%; padding: 4px; } .backdrop-six { position: absolute; rotate: 327deg; top: 14%; left: 26%; padding: 50px; } </style> <!--Standings--> <style> .text-parent-standings { background-color: rgb(80,80,80, 0.1); position: relative; border-radius: 68px; top: 115%; left: 733%; color: gray; padding: 247%; text-align: center; margin-left: -730%; margin-top: -730%; } </style> <!--Incorrect-width--> <style> #incorrect-width { position: fixed; margin: auto; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 0px; background: linear-gradient(rgb(99, 99, 99), rgb(255, 255, 255)); text-align: left; border-style: solid; border-color: rgb(161, 161, 161); display: none; overflow-y: hidden; overflow: hidden; } #incorrect-width h1 { position: fixed; color: white; margin-left: 5%; margin-top: 34%; } #incorrect-width p { position: fixed; color: white; margin-left: 5%; margin-top: 44%; } #incorrect-width a { color: yellow; } #incorrect-width a:hover { color: white; } #incorrect-width .material-symbols-outlined { position: absolute; color: rgb(255, 237, 79, 0.5); overflow: hidden; } #incorrect-width-two { position: fixed; margin: auto; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 0px; background: linear-gradient(rgb(99, 99, 99), rgb(255, 255, 255)); text-align: left; border-style: solid; border-color: rgb(161, 161, 161); display: none; overflow-y: hidden; overflow: hidden; } #incorrect-width-two h1 { position: fixed; color: white; margin-left: 5%; margin-top: 27%; } #incorrect-width-two p { position: fixed; color: white; margin-left: 5%; margin-top: 34%; } #incorrect-width-two a { color: yellow; } #incorrect-width-two a:hover { color: white; } #incorrect-width-two .material-symbols-outlined { position: absolute; color: rgb(255, 237, 79, 0.5); overflow: hidden; } </style> <!--Member card--> <style> .mem-card-parent{ position: absolute; margin-top: -46%; margin-left: -30%; margin-bottom: -51%; overflow: hidden; } .mem-card{ background-color: rgb(255, 252, 204); width: 585px; height: 107px; margin-top: 2%; border-radius: 10px; } .mem-card .img-parent{ width: 355px; height: 148px; margin-top: -7%; margin-left: -7%; background-color: rgb(194, 93, 194, 0); } .mem-card img{ width: 83px; margin-left: -8%; margin-top: 8%; border-radius: 10px; overflow: hidden; position: absolute; } .mem-card h1{ width: 83px; margin-left: 17%; margin-top: 1%; overflow: hidden; position: absolute; } .mem-card .p-parent{ padding: 83px; width: 74%; margin-left: 31%; margin-top: -16%; background-color: rgb(242, 242, 242, 0); position: absolute; } .mem-card p{ margin-left: -30%; margin-top: 16%; font-size: 13px; } .mem-card:hover{ background-color: rgb(255, 255, 255, 0.5); } </style> <!--Footer--> <style> .footer { position: absolute; background: rgb(150, 150, 150, 1); padding: 100px; width: 100%; height: 100%; top: 369%; } .footer h1 { margin-top: -12%; margin-left: -12%; color: rgb(255, 255, 255); } .footer h3 { margin-left: -12%; color: rgb(255, 255, 255); } .footer h4 { margin-left: -12%; color: rgb(255, 255, 255); } .footer h5 { margin-left: -12%; color: rgb(255, 255, 255); } .footer p { margin-top: 62%; margin-left: -12%; color: rgb(255, 255, 255); } </style> <!--Yellow lines--> <style> .yellow-line { background: rgb(255, 216, 76); width: 48%; height: 13%; padding: 2px; } </style> <!--Explore button--> <style> .btn-parent { position: absolute; background: rgb(255, 216, 76, 0); padding: 12px; } .btn { background: rgb(255, 255, 255); border-radius: 18px; width: 175px; height: 47px; } .btn h1{ position: absolute; left: 72.0%; top: 88.2%; } .btn:hover{ background: rgb(79, 79, 79); padding: 70px; } </style> <!--Bar charts--> <style> .graph { margin-top: -431%; margin-left: -226%; width: 279px; height: 198px; overflow: hidden; } .bar { width: 64px; margin: 1px; display: inline-block; position: relative; background-color: #aeaeae; vertical-align: baseline; overflow: hidden; } .graph h1{ position: absolute; rotate: -59deg; margin-top: 27%; } </style> <!--Standing cards--> <style> .stat-card-parent{ position: absolute; margin-top: -46%; margin-left: -30%; margin-bottom: -51%; overflow: hidden; } .stat-card{ background-color: rgb(255, 252, 204); width: 585px; height: 139px; margin-top: 2%; border-radius: 22px; } .stat-card h1{ margin-left: 4%; margin-top: 3%; font-size: 29px; position: absolute; } .stat-card p{ margin-left: 4%; margin-top: 11%; font-size: 15px; position: absolute; } .stat-card:hover{ background-color: rgb(255, 255, 255, 0.5); } </style> </head> <!--Content--> <body> <!--Title--> <div class="context"> <h1>Bytebots</h1> <h2>Putting the 'byte' in 'byte my dust since 2023'</h2> </div> <!--Explore button--> <div class = "btn-parent"> <!-- <a href = "https://www.khanacademy.org"> <div class = "btn" id = "theFixed" style = "margin-left: 355px; margin-top: 410px;"> <h1>Explore</h1> </div> </a> --> </div> <!--Awesome CSS gears--> <div class="home-first"> <ul class="gears"> <li><i class="material-icons" style="font-size:75px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:19px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:19px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:55px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:19px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:100px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:145px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:20px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li></li> <li><i class="material-icons" style="font-size:145px;color: rgb(255, 255, 255, 0.8);">settings</i></li> </ul> </div> <!--Backdrop--> <div class = "backdrop-parent"> <div class = "backdrop-one"> <span class="material-symbols-outlined" style="font-size:673px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> </div> <div class = "backdrop-two"> <i class="material-icons" style="font-size:550px;color: rgb(0, 0, 0, 0.8);">settings</i> </div> <div class = "backdrop-three"> <span class="material-symbols-outlined" style="font-size:673px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> </div> <div class = "backdrop-four"> <span class="material-symbols-outlined" style="font-size:464px; color: rgb(255, 235, 181); overflow: hidden;">warning</span> </div> <div class = "backdrop-five"> <span class="material-symbols-outlined" style="font-size:673px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> </div> <div class = "backdrop-six"> <span class="material-symbols-outlined" style="font-size:316px; color: rgb(255, 235, 181); overflow: hidden;">warning</span> </div> </div> <!--Buttons and scene changes--> <div class="home-second"> <!--Navigation--> <div class="navbar" class="dropdown"> <button class="tablink" onclick="openPage('Home', this, 'rgb(209, 209, 209)')" id="defaultOpen">Home</button> <button class="tablink" onclick="openPage('About', this, 'rgb(209, 209, 209)')">About</button> <button class="tablink" onclick="openPage('Join', this, 'rgb(209, 209, 209)')">Join</button> <button class="tablink" onclick="openPage('Members', this, 'rgb(209, 209, 209)')">Members</button> <button class="tablink" onclick="openPage('Standings', this, 'rgb(209, 209, 209)')">Standings</button> <!-- Screw the dropdown <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> --> </div> <!--Home--> <div id="Home" class="tabcontent"> <div class = "text-parent"> <span class="material-symbols-outlined" style="font-size:338px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -63%; margin-top: 0%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:147px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -33%; margin-top: -19%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 40%; margin-top: 0%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 20%; margin-top: 13%; overflow: hidden; position: absolute;">settings</span> <h1>Bytebots</h1> <p>A famous, legendary coding group, we are the Bytebots! Known for our awesome skills and famous weapons (Computers), we make up an elite force dedicated to three things, and three things only: To have fun, to learn, and to win. And that's what we are going to do.</p> </div> <div class = "text-parent" style = "margin-top: 35%"> <span class="material-symbols-outlined" style="font-size:338px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -63%; margin-top: 0%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:147px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -33%; margin-top: -19%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 40%; margin-top: 0%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 20%; margin-top: 13%; overflow: hidden; position: absolute;">settings</span> <h1 style = "margin-top: -4%; margin-left: -8.9%;"><a href = "https://www.khanacademy.org/computer-programming/africa/6106021119705088">Featured Project</a></h1> <p>This year our team is spporting Africa! An amazing country and home of the giraffes. This project features Africa on an amazing gradient background with a giraffe and tree at the top. </p> <div class = "img-img-parent"> <img style = "" src="https://www.khanacademy.org/computer-programming/africa/6106021119705088/latest.png" /> </div> <p><i>We'll probably change this later but for now it serves as a filler; lol</i></p> </div> <div class = "text-parent" style = "margin-top: 92%"> <span class="material-symbols-outlined" style="font-size:338px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -63%; margin-top: 22%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:147px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -33%; margin-top: -19%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 40%; margin-top: 0%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 20%; margin-top: 32%; overflow: hidden; position: absolute;">settings</span> <h1 style = "margin-top: -6%; margin-left: -8.9%;"><a href = "https://www.khanacademy.org/computer-programming/welcome-to-tco-2023/6082023522091008">Note to Judges</a></h1> <p>I orignially hadn't planned to make this website, but I had a burst of Inspiration and decided that it wouldn't hurt to try and make a webpage, so here is the result. Since it was made last-minute some things are lacking which I would have liked to include. I am quite proud of the title animation and member page, and I hope you like it as well. Due to the fact that this was rushed, I was not able to make it width-responsive. So I created width pages to address this issue. (You can view these by changin the page width to anything but 916) I also ran into some problems with a scrollbar glitch which I ingeniously fixed. (I don't know how you would be able to view that).</p> <div class = "img-img-parent"> </div> <br> <p><i>I also would like to apologize for the excessive (in my opinion) inline styling that may make it hard to read </i></p> <br> <p><i>Thank you for reading this</i></p> </div> </div> <!--Join--> <div id="Join" class="tabcontent"> <div class = "text-parent" style = "margin-top: 0%"> <span class="material-symbols-outlined" style="font-size:338px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 10%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:147px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -33%; margin-top: -19%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 40%; margin-top: 3%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 20%; margin-top: 21%; overflow: hidden; position: absolute;">settings</span> <h1 style = "margin-top: -2%; margin-left: 0.8%;">Join!</h1> <p>It's never to late to join! Join our team today, go to this page for more information: <a href = "https://www.khanacademy.org/computer-programming/welcome-to-tco-2023/6082023522091008">TCO 2023</a> </p> </div> <div class = "text-parent" style = "margin-top: 32%"> <span class="material-symbols-outlined" style="font-size:338px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 10%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:147px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -33%; margin-top: -19%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 40%; margin-top: 3%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 20%; margin-top: 21%; overflow: hidden; position: absolute;">settings</span> <h1 style = "margin-top: -2%; margin-left: -6.0%;">Team Work!</h1> <p>This year is all about teamwork! Teamwork is the combined action of a group of people, especially when effective and efficient: A good example of this is a well oiled machine with thousands of gears working together. If one fails the whole machine fails. Our team hopes to not fail and stick together like one giant machine. <br> <i>Hence the gear theme</i> </p> </div> <div class = "text-parent" style = "margin-top: 74%"> <span class="material-symbols-outlined" style="font-size:338px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 21%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:147px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -33%; margin-top: -19%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 40%; margin-top: 6%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 20%; margin-top: 29%; overflow: hidden; position: absolute;">settings</span> <h1 style = "margin-top: -6%; margin-left: -1.4%;">Hello!</h1> <p>Umm... Hi... Unfortunately, I have nothing else to add here... So... Uh... Let's talk about the theroy of popcorn! Popcorn is the only grain in the corn family that pops open when exposed to temperatures above 180° C. <br> Each kernel of popcorn is an “individual pressure cooker” <br> When popcorn is heated, the water inside the kernel tries to expand into steam, but it cannot escape through the seed coat.The hot oil and steam gelatinizes the starch inside the popcorn kernel, making it softer and more pliable.When the pressure inside the kernel is great enough, the kernel explodes, shattering its pericarp like a shrapnel grenade. <br><br> <b>awkward silence<br><br> <i>you can leave now.</i></b> </p> </div> </div> <!--Members--> <div id="Members" class="tabcontent"> <div id="members-container"> <div class = "mem-card-parent"> <!--Lore--> <a href = "https://www.khanacademy.org/profile/kaid_66098262377513172559095"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 22px; margin-top: 3%;" >Lore</h1> <div class = "p-parent"> <p>- A master historian; as the name suggests; now our team has the best historian out there to keep track of all our achivements</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/area-52-yellow.svg" alt="Avatar"> </div> </div> </a> <!--Fireball my dear sir--> <a href = "https://www.khanacademy.org/profile/kaid_177726149233524242461853"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 22px; margin-left: 16%; margin-top: 3%;">Fireball</h1> <div class = "p-parent"> <p>- Full name: "Fireball my dear sir", this polite fireball is more than polite, <i>fireball</i> also has created some very neat projects including: <i>Universe</i>, and <i>An avatars journey</i></p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/piceratops-ultimate.svg" alt="Avatar"> </div> </div> </a> <!--The Goo--> <a href = "https://www.khanacademy.org/profile/kaid_1610361323295529834960993"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 22px; margin-left: 16%; margin-top: 3%;">The Goo</h1> <div class = "p-parent"> <p>- This nice person will make friends with you instantly, <i> The Goo</i> is a very valuable team member as he keeps our team together like... well... Goo (or glue I guess)</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/sneak-peak-blue.svg" alt="Avatar"> </div> </div> </a> <!--Arrow.programming--> <a href = "https://www.khanacademy.org/profile/kaid_5229809678324099512179597"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 22px; margin-left: 18%; margin-top: 3%;">Arrow</h1> <div class = "p-parent"> <p>- Full name: Arrow.programming, creator of this amazing homepage and still trying to figure out links in CSS</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/sneak-peak-green.svg" alt="Avatar"> </div> </div> </a> <!--TDJ--> <a href = "https://www.khanacademy.org/profile/kaid_682972421482671044758972"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 22px; margin-left: 18%; margin-top: 3%;">TDJ</h1> <div class = "p-parent"> <p>- Nobody actually knows what the name stands for, however this amazing person has over one million KA points!</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/boggle-green.svg" alt="Avatar"> </div> </div> </a> <!--Lightning Driver--> <a href = "https://www.khanacademy.org/profile/kaid_1999891435780512582269782"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 18px; margin-left: 18%; margin-top: 3%;">Lightning Driver</h1> <div class = "p-parent"> <p>- A cool name, but can this person actually drive lightning? Either way we need this valuable team member who works like lightning to get the job done.</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/primosaur-tree.svg" alt="Avatar"> </div> </div> </a> <!--Invisible Bob --> <a href = "https://www.khanacademy.org/profile/kaid_4357452902529547972393951"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 18px; margin-left: 20%; margin-top: 3%;">Invisible Bob </h1> <div class = "p-parent"> <p>- We all are questioning this persons existance in the physical world. Bob is our primary stalker who slips into enemy lines with Invisibility</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/cs-winston.svg" alt="Avatar"> </div> </div> </a> <!--Winter Falcon--> <a href = "https://www.khanacademy.org/profile/kaid_701855056246665520276831"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 18px; margin-left: 18%; margin-top: 3%;">Winter Falcon</h1> <div class = "p-parent"> <p>- A <b>Cool</b> name haha, we all like falcons too, but we are all asking ourselves if this person is secretly a <i>hackaHawk</i></p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/leaf-blue.svg" alt="Avatar"> </div> </div> </a> <!--Tuba <3--> <a href = "https://www.khanacademy.org/profile/kaid_1013407408635137829868294"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 21px; margin-left: 18%; margin-top: 3%;">Tuba <3</h1> <div class = "p-parent"> <p>- Yay! Tubas! This person apparently plans to play the other teams like an instrument</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/duskpin-seedling.svg" alt="Avatar"> </div> </div> </a> <!--Samwise--> <a href = "https://www.khanacademy.org/profile/kaid_659800661397715681487277"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 20px; margin-left: 16%; margin-top: 3%;">Samwise</h1> <div class = "p-parent"> <p>- Another fan of LOTR; hopefully Samwise will use wisdom and help out our team, just don't forget rope!</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/leafers-tree.svg" alt="Avatar"> </div> </div> </a> <!--The Dalek Overlord--> <a href = "https://www.khanacademy.org/profile/kaid_477656744587544472395627"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 20px; margin-left: 16%; margin-top: 1%;">Dalek Overlord</h1> <div class = "p-parent"> <p>- An interesting name; apparently a fan of <i>The Legend of Zelda</i>; also has over a million KA points!</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/duskpin-ultimate.svg" alt="Avatar"> </div> </div> </a> <!--VVhiteTiger--> <a href = "https://www.khanacademy.org/profile/kaid_154605635905555420140323/"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 15px; margin-left: 13%; margin-top: 4%;">VVhiteTiger</h1> <div class = "p-parent"> <p>- Is that a "W" or two "V"s? Looks the same to me :P <br> Creater of: <i>A Link To The Past</i></p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/sneak-peak-green.svg" alt="Avatar"> </div> </div> </a> <!--Captain Longtreader--> <a href = "https://www.khanacademy.org/profile/kaid_460330406411328152379375"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 22px; margin-left: 17%; margin-top: 2%;">Captain</h1> <div class = "p-parent"> <p>- Ohh a late joiner :P This one's priceless, Captain Longtreader wishes to be a begginer again, unfortunately that is not possible xD</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/starky-ultimate.svg" alt="Avatar"> </div> </div> </a> <!--Crystal Coding--> <a href = "https://www.khanacademy.org/profile/kaid_351465532815782433620675"> <div class = "mem-card"> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 11%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:108px; color: rgb(115, 115, 115); overflow: hidden; margin-left: 87%; margin-top: 7%; overflow: hidden; position: absolute;">settings</span> <h1 style = "font-size: 23px; margin-left: 17%; margin-top: 2%;">Crystal Coding</h1> <div class = "p-parent"> <p>- Last but certainly not least is: "Crystal Coding" Fan of chess and cats</p> </div> <div class = "img-parent"> <span class="material-symbols-outlined" style="font-size:113px; color: rgb(115, 115, 115); overflow: hidden;">settings</span> <img src="https://cdn.kastatic.org/images/avatars/svg/cacteye-blue.svg" alt="Avatar"> </div> </div> </a> </div> </div> </div> <!--About--> <div id="About" class="tabcontent"> <div class = "text-parent"> <span class="material-symbols-outlined" style="font-size:338px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 10%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:147px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -33%; margin-top: -19%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 40%; margin-top: 3%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 20%; margin-top: 21%; overflow: hidden; position: absolute;">settings</span> <h1 style = "margin-top: -2%; margin-left: -4.1%;">Who we are</h1> <p>On July 7, 2023 <a href = "https://www.khanacademy.org/profile/kaid_103000698141866290580261/">Jake K.</a> Posted a page titled <a href = "https://www.khanacademy.org/computer-programming/welcome-to-tco-2023/6082023522091008">TCO 2023</a>. TCO is a challenge founded by <a href = "https://www.khanacademy.org/profile/kaid_580436051254509721948310">Timothy</a> that divides coders into competing teams. One of those teams happened to be called: "Bytebots" <br><i>And that's the story of how we were created.</i><br><br><i>Let's not forget about the legend: <a href = "https://www.khanacademy.org/profile/kaid_160653079463992085090428">Liam K.</a> Who is hosting this contest</i></p> </div> <div class = "text-parent" style = "margin-top: 40%"> <span class="material-symbols-outlined" style="font-size:338px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 10%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:147px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -33%; margin-top: -19%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 40%; margin-top: 3%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 20%; margin-top: 21%; overflow: hidden; position: absolute;">settings</span> <h1 style = "margin-top: -2%; margin-left: -4.1%;">Our Goals</h1> <p>Our goals as a team are simple: we plan to: Learn, Have fun, and Win                  </p> </div> <div class = "text-parent" style = "margin-top: 73%"> <span class="material-symbols-outlined" style="font-size:338px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 10%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:147px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -33%; margin-top: -19%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 40%; margin-top: 3%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:159px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 20%; margin-top: 21%; overflow: hidden; position: absolute;">settings</span> <h1 style = "margin-top: -7%; margin-left: -8.9%;">Our team masot</h1> <p>This happens to be our team mascot, a cute little robot that represents our team. It's one byte of bot!                  </p> <div class = "crop-container" style = "margin-left: 156px;"> <img class = 'pic' src = "https://www.khanacademy.org/computer-programming/new-program/4900638627250176/4871312624107520.png"> </div> </div> </div> <!--Standings--> <div id="Standings" class="tabcontent"> <div class="graph"> <h1 style = "margin-left: -7%; margin-top: 20%;">Bytebots</h1> <h1 style = "margin-left: -2%; margin-top: 22%;">CodeNinjas</h1> <h1 style = "margin-left: -3%;">ProgramPanthers</h1> <h1 style = "margin-left: 11%; margin-top: 23%;">HackaHawks</h1> <div style="height: 127px; background-color: rgb(255, 226, 122);" class="bar"> <span class="material-symbols-outlined" style="font-size:78px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 10%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:67px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 44%; margin-top: 93%; overflow: hidden; position: absolute;">settings</span> </div> <div style="height: 90px;" class="bar"> <span class="material-symbols-outlined" style="font-size:78px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 10%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:67px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 44%; margin-top: 93%; overflow: hidden; position: absolute;">settings</span> </div> <div style="height: 73px; background-color: rgb(255, 226, 122);" class="bar"> <span class="material-symbols-outlined" style="font-size:78px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 10%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:67px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 44%; margin-top: 93%; overflow: hidden; position: absolute;">settings</span> </div> <div style="height: 98px;" class="bar"> <span class="material-symbols-outlined" style="font-size:78px; color: rgb(230, 230, 230); overflow: hidden; margin-left: -60%; margin-top: 10%; overflow: hidden; position: absolute;">settings</span> <span class="material-symbols-outlined" style="font-size:67px; color: rgb(230, 230, 230); overflow: hidden; margin-left: 44%; margin-top: 93%; overflow: hidden; position: absolute;">settings</span> </div> </div> <div class = "stat-card-parent" style = "margin-top: 23%;"> <a href = "https://www.khanacademy.org/profile/me/"> <div class = "stat-card"> <h1 style = "">ByteBots</h1> <p>Hi! It's us again! the best team on TCO and by far going to win this thing</p> </div> </a> <a href = "https://www.khanacademy.org/profile/me/"> <div class = "stat-card"> <h1 style = "">HackaHawks</h1> <p>Probably our biggest competitor - They might even hack us to win</p> </div> </a> <a href = "https://www.khanacademy.org/profile/me/"> <div class = "stat-card"> <h1 style = "">ProgramPanthers</h1> <p>Is that even a thing?</p> </div> </a> <a href = "https://www.khanacademy.org/profile/me/"> <div class = "stat-card"> <h1 style = "">CodeNinjas</h1> <p>Ninjas? Seriously?</p> </div> </a> </div> </div> </div> <!--Footer--> <div class = "footer" style = "margin-top: 23%;"> <!--More gears!--> <ul class="gears"> <li><i class="material-icons" style="font-size:75px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:19px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:19px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:55px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:19px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:100px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:145px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li><i class="material-icons" style="font-size:20px;color: rgb(255, 255, 255, 0.8);">settings</i></li> <li></li> <li><i class="material-icons" style="font-size:145px;color: rgb(255, 255, 255, 0.8);">settings</i></li> </ul> <!-- The rest of the junk--> <h1>Bytebots 2023</h1> <h3>Putting the 'byte' in 'byte my dust since 2023'</h3> <br> <h4>The Author would like to thank:</h4> <h5>My team, <br> Bearkirb314, <br> Crystal Coding, <br> Cooke's_Ghost, <br> cloudy skies, <br> And,<br> The Goo <br> <h4>For feedback during the making of this website :)</h4> </h5> <p style = "margin-top: 20%;">All code is owned by its respective author and made available under the following license: <a href = "http://opensource.org/licenses/mit-license.php">MIT license</a> <br> All non-code (such as writing, drawings, images, etc.) are also owned by their respective author and made available under the following license: <a href = "https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution License</a><br> For more information please see: <a href = "https://www.khanacademy.org/about/tos#5">Terms of Service</a></p> </div> <!--Incorrect width--> <div id = "incorrect-width"> <span class="material-symbols-outlined" style = "font-size: 227px; rotate: 28deg; margin-top: 66%; margin-left: 10%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 168px; rotate: -20deg; margin-top: 13%; margin-left: 10%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 227px; rotate: 43deg; margin-top: -21%; margin-left: 47%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 128px; rotate: 35deg; margin-top: 57%; margin-left: 69%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 87px; rotate: 60deg; margin-top: 7%; margin-left: 40%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 41px; rotate: 39deg; margin-top: 35%; margin-left: 58%;">warning</span> <h1 style = 'font-size: 40px;'><strong>Oh noes!</strong></h1> <p> It seems that the width is not correct. <br> This can be resolved by <a id = 'hi' href = 'https://www.khanacademy.org/computer-programming/bytebots-homepage-tco-entry/5091593506570240?width=916&editor=no' style = 'width: 100%;'>touching these letters</a> </p> </div> <!--Second Incorrect width (addresses scrollbar issue)--> <div id = "incorrect-width-two"> <span class="material-symbols-outlined" style = "font-size: 227px; rotate: 28deg; margin-top: 66%; margin-left: 10%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 168px; rotate: -20deg; margin-top: 13%; margin-left: 10%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 227px; rotate: 43deg; margin-top: -21%; margin-left: 47%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 128px; rotate: 35deg; margin-top: 57%; margin-left: 69%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 87px; rotate: 60deg; margin-top: 7%; margin-left: 40%;">warning</span> <span class="material-symbols-outlined" style = "font-size: 41px; rotate: 39deg; margin-top: 35%; margin-left: 58%;">warning</span> <h1 style = 'font-size: 40px;'><strong>Oh noes!</strong></h1> <p> A scrollbar error... lovely <br> Please <a id = 'hi' href = 'https://www.khanacademy.org/computer-programming/bytebots-homepage-tco-entry/5091593506570240?width=931&editor=no' style = 'width: 100%;'>touch these letters</a> </p> </div> </body> <!--Script for nav-buttons--> <script> function openPage(pageName, elmnt, color) { // Hide all elements with class="tabcontent" by default */ var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Remove the background color of all tablinks/buttons tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } // Show the specific tab content document.getElementById(pageName).style.display = "block"; // Add the specific color to the button used to open the tab content elmnt.style.backgroundColor = color; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script> <!--Script for page width and height--> <script> if (window.innerWidth !== 916) { document.getElementById('incorrect-width').style.display = 'block'; } if (window.innerWidth === 901) { document.getElementById('incorrect-width-two').style.display = 'block'; } </script> </html>
Folds	54,98,100,234,236,344,346,371,373,422,424,437,439,520,522,577,579,614,616,623,625,646,648,670,672,702,707,710,712,720,722,735,737,756,758,1159,1161,1187,1189,1205,1207,1223,1226,1249,1251,1263
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLPy79iFCQw
Votes	29
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	Arrow
Author Name	Arrow.programming
Author ID	kaid_5229809678324099512179597
Author Profile Access	PUBLIC

Archive Data

Added	2 months ago, 1730602404352
Updated	2 months ago, 1730602404352
Source Deleted	unknown