Viewing Program

Program Data

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

Title	Team Hackahawks Homepage
ID	4827822049509376
Created	1 years ago, 1688840846471
Updated	1 years ago, 1689348986293
Code	<!DOCTYPE html> <html> <!-- The official homepage of Team HackaHawks. Record holder for highest score ever in TCO history. --> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <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=Cabin:wght@400;600;700&family=Google+Sans&family=Lato:wght@400&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Team Hackahawks Homepage</title> <style> html, body { margin: 0; padding: 0; background: #eaeaea; color: #303030; font-family: 'Cabin'; font-size: 1rem; font-weight: 400; width: 100vw; overflow-x: hidden; } ::selection { background: #ECBC4Faa; } ::-webkit-scrollbar { width: 10px; } i { user-select: none; } ::-webkit-scrollbar-track { background: #eaeaea; } ::-webkit-scrollbar-thumb { background: linear-gradient(120deg, #7EAA2Baa, #CCA623aa); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(140deg, #7EAA2B, #CCA623); } .gradient-text-green { color: #3E6606aa; background: -webkit-linear-gradient(45deg, #3E6606, #6AA419); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .gradient-text-orange { color: #940CFFaa; background: -webkit-linear-gradient(45deg, #8C7218, #CCA623); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .whitespace { width: 100%; height: 100px; } .page { animation: fade-in 0.3s ease-in-out; } section { margin: 0px 25px; } .js-scroll { opacity: 0; transition: opacity 0.5s; } .js-scroll.scrolled { opacity: 1; } .scrolled.fade-in { animation: fade-in 0.5s ease-in-out both; } .scrolled.fade-in-bottom { animation: fade-in-bottom 0.5s ease-in-out both; } .scrolled.slide-left { animation: slide-in-left 0.5s ease-in-out both; } .scrolled.slide-right { animation: slide-in-right 0.5s ease-in-out both; } @keyframes slide-in-left { 0% { -webkit-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slide-in-right { 0% { -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes fade-in-bottom { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .page-header { width: 100%; height: 50vh; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0px 0px 30px #303030AA; text-align: center; } .page-heading { color: #eaeaea; font-family: 'Google Sans'; font-weight: 600; font-size: max(6vw, 40px); border-bottom: 5px double #eaeaeaaa; width: 90%; } .page-quote { color: #eaeaeaaa; margin-top: 10px; font-family: 'Lato'; font-weight: 600; width: 90%; } .link { color: #8C7218; text-decoration: none; -webkit-transition: all 200ms ease; transition: all 200ms ease; cursor: pointer; text-decoration: none; display: inline-block; outline: none; } .link::after { content: " "; width: 100%; height: 2px; margin-top: -1px; display: block; background: #8C7218; transition: inherit; transform: scaleX(0); } .link:focus::after, .link:hover::after { transform: scaleX(1); } </style> <!-- General page styles --> <style> .round-nav { position: fixed; bottom: 1em; right: 1.25em; z-index: 1000; } .round-nav .nav-button { display: block; width: 3.5em; height: 3.5em; border-radius: 50%; background-color: #3E6606; box-shadow: 0 0 30px #303030AA; color: #eaeaea; text-align: center; line-height: 3.7; cursor: pointer; outline: 0; } .round-nav.open .nav-button i { transform: rotate(-45deg); } .round-nav:after { display: block; z-index: -2; background-color: #609B0C77; transition: all .3s ease; backdrop-filter: blur(3px); content: ' '; width: 3.5em; height: 3.5em; border-radius: 50%; position: absolute; top: 0; right: 0; } .round-nav.open:after { transform: scale3d(5.5, 5.5, 1); transition-timing-function: cubic-bezier(0.7, 1.5, 0.27, 1); } .round-nav .nav-container { padding: 0; margin: 0; } .round-nav .open .nav-button { box-shadow: inset 0 0 3px #30303099; } .round-nav .nav-button:active { box-shadow: 0px 4px 8px 0 #30303044; } .round-nav .nav-button i { font-size: 1.3em; transition: transform 0.2s; } .round-nav .nav-item { position: absolute; top: 0.2em; right: 0.2em; width: 3em; height: 3em; z-index: -1; display: block; text-decoration: none; color: #eaeaea; font-size: 1em; border-radius: 50%; text-align: center; line-height: 3; background-color: #30303055; transition: transform .3s ease, background .2s ease; } .round-nav.open .nav-item:nth-child(1) { transform: translate3d(1em, -7em, 0); } .round-nav.open .nav-item:nth-child(2) { transform: translate3d(-3.5em, -6.3em, 0); } .round-nav.open .nav-item:nth-child(3) { transform: translate3d(-6.5em, -3.2em, 0); } .round-nav.open .nav-item:nth-child(4) { transform: translate3d(-7em, 1em, 0); } .round-nav .nav-item:hover { background-color: #303030aa; transition: 0.3s; } .round-nav.open .nav-item { transition-timing-function: cubic-bezier(0.18, 0.9, 0.3, 1.28); } </style> <!-- Navigation --> <style> #home-header { width: 100vw; height: 100vh; background: linear-gradient(#303030AA, #303030BB), url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Buteo_ventralis_39036964_%28cropped%29.jpg/800px-Buteo_ventralis_39036964_%28cropped%29.jpg'); background-attachment: fixed; background-position: center; background-size: cover; box-shadow: 0px 0px 30px #303030aa; } #home-header-text { color: #eaeaea; background: #303030a5; text-align: center; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 50px; backdrop-filter: blur(5px); border: 4px double #eaeaeaaa; width: 100%; } #home-heading { font-family: 'Google Sans'; font-weight: 600; font-size: max(10vw, 50px); margin-bottom: -15px; text-shadow: 0px 0px 10px #eaeaeaaa; } #heading-desc { font-family: 'Lato'; color: #eaeaeaaa; } #header-button { outline: none; font-size: 1.5rem; font-family: 'Cabin'; margin-top: 30px; font-weight: 600; background: #30303055; border: 3px solid #eaeaeaaa; box-shadow: 0px 0px 5px #eaeaea, 0px 0px 3px #eaeaea inset; color: #eaeaea; padding: 10px 30px; border-radius: 15px; cursor: pointer; transition-duration: 0.3s; } #header-button:hover { transform: scale(1.05); box-shadow: 0px 0px 20px #303030aa; } #home-content-container { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; } .home-content-card { margin: 2.5%; } #intro-card { width: 55%; background: #CCA62344; border-radius: 10px; box-shadow: 0px 0px 30px #30303033; } #intro-heading { font-family: 'Google Sans'; font-size: 2.5rem; font-weight: 600; border-bottom: 5px double #3E6606; margin: 20px 10px; text-shadow: 0px 0px 30px #3E6606aa; } .card-desc { margin: 10px; font-weight: 600; color: #303030dd; margin-bottom: 30px; } #about-card { width: 35%; } #about-heading { font-family: 'Google Sans'; font-size: 2.5rem; font-weight: 600; border-bottom: 5px double #8C7218; margin: 20px 10px; text-shadow: 0px 0px 30px #CCA623aa; } #members-card { width: 40%; } #members-heading { font-family: 'Google Sans'; font-size: 2.5rem; font-weight: 600; border-bottom: 5px double #8C7218; margin: 20px 10px; text-shadow: 0px 0px 30px #CCA623aa; } #standings-card { width: 50%; background: #CCA62344; border-radius: 10px; box-shadow: 0px 0px 30px #30303033; } #standings-heading { font-family: 'Google Sans'; font-size: 2.5rem; font-weight: 600; border-bottom: 5px double #3E6606; margin: 20px 10px; text-shadow: 0px 0px 30px #3E6606aa; } #credits-card { width: 100%; } #credits-heading { font-family: 'Google Sans'; font-size: 2.5rem; font-weight: 600; border-bottom: 5px double #8C7218; margin: 20px 10px; text-shadow: 0px 0px 30px #CCA623aa; } #credits-button { width: 90%; margin: 0px 5%; padding: 15px; border-radius: 10px; font-family: 'Google Sans'; font-weight: 600; color: #8C7218; border: 3px solid #CCA623; outline: none; background: none; cursor: pointer; transition-duration: 0.2s; font-size: 1.25rem; } #credits-button:hover { transform: scale(1.05); } #featured-program { margin: 0px 25px; padding: 25px 2.5%; background: #CCA62344; border-radius: 10px; box-shadow: 0px 0px 30px #30303033; display: flex; flex-direction: row; flex-wrap: wrap; } #featured-title { font-family: 'Google Sans'; width: 100%; font-size: 2.5rem; font-weight: 600; border-bottom: 5px double #3E6606; text-shadow: 0px 0px 30px #3E6606aa; margin-bottom: 20px; } #program-thumb-container { width: max(40%, 100px); margin-top: 0; margin-left: 2.5%; } #featured-program-thumb { width: 100%; } #program-content { width: 55%; margin-right: 2.5%; } #featured-program-name { font-family: 'Google Sans'; font-size: 2rem; font-weight: 600; text-shadow: 0px 0px 30px #CCA623aa; text-align: center; margin-bottom: 20px; transition-duration: 0.1s; text-align: center; } #featured-program-name:hover { transform: scale(1.1); } #program-by { font-family: 'Lato'; color: #303030aa; text-align: center; margin-top: -20px; margin-bottom: 30px; font-weight: 600; } #program-desc { font-weight: 600; color: #303030dd; } @media (max-width: 600px) { #program-content, #program-thumb-container { width: 100%; } #program-thumb-container { display: flex; justify-content: center; margin-top: 20px; } #featured-program-thumb { max-width: 300px; } } @media (max-width: 585px) { #intro-card, #standings-card { width: 100%; } #about-card, #members-card { width: 45%; } } @media (max-width: 490px) { .home-content-card { width: 100% !important; } } </style> <!-- Home --> <style> #about-header { background: linear-gradient(#303030aa, #303030bb), url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Epping_Forest_Centenary_Walk_2_-_Sept_2008.jpg/1200px-Epping_Forest_Centenary_Walk_2_-_Sept_2008.jpg'); background-attachment: fixed; background-size: cover; background-position: center; } #about-team-container { margin: 0px 25px; font-family: 'Cabin'; font-weight: 600; padding-bottom: 25px; border-bottom: 5px double #8C7218; } #team-logo { float: right; margin: 10px; } #about-tco-container { margin: 0px 25px; padding-bottom: 25px; } #about-tco-heading { font-family: 'Google Sans'; font-size: max(6vw, 40px); font-weight: 600; margin-bottom: 10px; width: 100%; } #about-tco-content { display: flex; flex-direction: row; flex-wrap: wrap; } #about-tco-text { margin: 0 2.5%; margin-left: 0%; width: 60%; font-family: 'Cabin'; font-weight: 600; } #tco-card { margin: 0 2.5%; margin-right: 0%; width: 35%; background: #6AA41955; border-radius: 10px; text-align: center; transition-duration: 0.2s; } #tco-thumb { width: 80%; margin: 10%; margin-bottom: 5%; } #tco-title { font-family: 'Google Sans'; font-size: 1.25rem; width: 100%; font-weight: 600; } #tco-by { font-weight: 600; color: #303030aa; width: 100%; margin: 0 auto; margin-bottom: 10%; } #about-voldy-container { margin: 0px 25px; font-family: 'Cabin'; font-weight: 600; padding-bottom: 25px; border-bottom: 5px double #8C7218; } #about-voldy-title { font-family: 'Google Sans'; font-size: max(6vw, 40px); font-weight: 600; margin-bottom: 10px; width: 100%; } #voldy-logo { float: right; margin: 10px; transition-duration: 0.2s; } #voldy-logo:hover { transform: scale(1.05); } @media (max-width: 550px) { #team-logo, #voldy-logo, #tco-card { float: none; width: 100%; } #about-tco-text { width: 100%; margin-bottom: 20px; } } </style> <!-- About --> <style> #members-header { background: linear-gradient(#303030bb, #303030cc), url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Central_Park_Greenery.jpg/1200px-Central_Park_Greenery.jpg'); background-attachment: fixed; background-size: cover; background-position: center; } #members-praise { font-family: 'Lato'; font-weight: 600; margin: 0 10%; color: #303030dd; text-align: center; } #members-container { margin: 0 5%; display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: 5px double #8C7218; } .member-card { margin: 2.5%; width: 45%; display: flex; flex-direction: row; flex-wrap: wrap; text-align: center; border-radius: 15px; justify-content: center; } .member-avatar { width: 100%; } .member-title { font-family: 'Google Sans'; font-size: 2rem; font-weight: 600; margin: 5px 0px; text-align: center; width: fit-content; transition-duration: 0.3s; } .member-title:hover { transform: scale(1.1); } .member-skill { font-family: 'Lato'; font-weight: 600; color: #303030aa; margin: 0 auto; margin-bottom: 7.5%; } @media (max-width: 530px) { .member-card { width: 95%; } .member-avatar { max-width: 200px; } .member-title, .member-skill { width: 100%; } } </style> <!-- Members --> <style> #standings-header { background: linear-gradient(#303030bb, #303030cc), url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Turbulent_skies.jpg/800px-Turbulent_skies.jpg'); background-attachment: fixed; background-size: cover; background-position: center; } #teams-container { margin: 0px 25px; display: flex; flex-direction: row; flex-wrap: wrap; text-align: center; align-items: center; } .team-card { margin: 2.5%; width: 45%; border-radius: 10px; box-shadow: 0px 0px 30px #30303055, 0px 0px 0px 5px #30303011 inset; } .team-logo { margin: 25px auto; margin-bottom: 0px; } .team-name { font-family: 'Google Sans'; font-weight: 600; font-size: 2rem; width: 100%; text-align: center; transition-duration: 0.2s; } .team-name:hover { transform: scale(1.1); } .team-points { font-family: 'Lato'; font-weight: 600; color: #303030cc; margin-bottom: 20px; } #first { box-shadow: 0px 0px 30px #303030aa, 0px 0px 0px 5px #DFA300 inset; transform: scale(1.1); } #second { box-shadow: 0px 0px 30px #30303055, 0px 0px 0px 5px #959595 inset; } #third { box-shadow: 0px 0px 30px #30303055, 0px 0px 0px 5px #AD642E inset; } #standings-disclaimer { font-weight: 600; color: #303030aa; margin: 0px 50px; text-align: center; } @media (max-width: 550px) { .team-card { width: 100%; } } </style> <!-- Standings --> <style> #credits-header { background: linear-gradient(#303030bb, #303030cc), url('https://upload.wikimedia.org/wikipedia/commons/e/e4/Aguila_Imperial_Entrando_Al_Posadero_%28125891767%29.jpeg'); background-attachment: fixed; background-size: cover; background-position: center; } #credits-title { font-family: 'Google Sans'; font-size: 1.5rem; text-align: center; } #credits-container { margin: 0px 25px; display: flex; flex-direction: row; flex-wrap: wrap; text-align: center; align-items: center; } .credit-card { margin: 2.5%; width: 28%; border-radius: 10px; box-shadow: 0px 0px 30px #30303055, 0px 0px 0px 5px #30303011 inset; } .credit-img { margin: 25px auto; margin-bottom: 0px; width: 90%; max-width: 200px; } .credit-title { font-family: 'Google Sans'; font-weight: 600; font-size: 2.5rem; width: 100%; text-align: center; transition-duration: 0.2s; } .credit-title:hover { transform: scale(1.1); } .credit-desc { font-family: 'Lato'; font-weight: 600; color: #303030cc; margin: 0px 15px; margin-bottom: 20px; } #me { background: #6AA41955; width: 62%; box-shadow: 0px 0px 30px #303030aa, 0px 0px 0px 5px #30303011 inset; transform: rotate(-5deg); } #me .credit-title { text-shadow: 0px 0px 30px #CCA623; } #judges-lol { width: 62%; } @media (max-width: 600px) { .credit-card { width: 100% !important; } } </style> <!-- Credits --> <style> .footer { background: linear-gradient(#303030cc, #303030dd), url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Mountain_Hawk_Eagle_Mahananda_WLS_West_Bengal_India_07.12.2015.jpg/640px-Mountain_Hawk_Eagle_Mahananda_WLS_West_Bengal_India_07.12.2015.jpg'); box-shadow: 0px 0px 30px #303030aa; box-sizing: border-box; width: 100%; text-align: left; font-size: 1rem; font-family: 'Cabin'; padding: 60px 50px; } .footer .footer-left, .footer .footer-center, .footer .footer-right { display: inline-block; vertical-align: top; } .footer .footer-left { width: 40%; } .footer-heading { color: #CCA623; font-family: 'Google Sans'; font-size: 2.5rem; font-weight: 600; margin: 0; } .footer-heading span { color: #6AA419; } .footer .footer-nav-links { color: #eaeaeaaa; margin: 0px 0 12px 0; padding: 0; font-family: 'Lato'; } .footer .footer-nav-links a { display: inline-block; line-height: 1.8; font-weight: 400; text-decoration: none; color: inherit; } .footer .footer-creator-name { color: #eaeaea; font-size: 1rem; font-family: 'Google Sans'; font-weight: 600; margin: 0; } .footer .footer-center { width: 35%; } .footer .footer-center i { color: #eaeaea; font-size: 2rem; text-align: center; margin: 10px 15px; vertical-align: middle; } .footer .footer-center p { display: inline-block; color: #eaeaea; font-weight: 400; vertical-align: middle; margin: 0; } .footer .footer-center p span { display: block; font-weight: normal; font-size: 0.8rem; line-height: 2; } .footer .footer-nav-links a:before { content: "\|"; font-weight: 600; font-size: 1rem; left: 0; color: #eaeaea; display: inline-block; padding-right: 5px; } .footer .footer-nav-links .link-1:before { content: none; } .footer .footer-right { width: 20%; } .footer .footer-creator-about { line-height: 20px; color: #eaeaea55; font-size: 0.9rem; font-weight: normal; margin: 0; } .footer .footer-creator-about span { display: block; color: #eaeaea; font-family: 'Google Sans'; font-size: 1rem; font-weight: 600; margin-bottom: 20px; } .footer .footer-icons { margin-top: 25px; } .footer .footer-icons a { display: inline-block; width: 35px; cursor: pointer; font-size: 2rem; color: #ffffff; text-align: center; line-height: 35px; margin-right: 3px; margin-bottom: 5px; } @media (max-width: 880px) { .footer { font: bold 1rem 'Cabin'; } .footer .footer-left, .footer .footer-center, .footer .footer-right { display: block; width: 100%; margin-bottom: 40px; text-align: center; } .footer .footer-center i { margin-left: 0; } } </style> <!-- Footer --> </head> <body> <div id="nav" class="round-nav"> <a class="nav-button" onclick="document.getElementById('nav').classList.toggle('open');"> <i class="fa fa-bars"></i> </a> <menu class="nav-container"> <a onclick="javascript:showPage('home')" class="nav-item fa fa-home" title="Home"></a> <a onclick="javascript:showPage('about')" class="nav-item fa fa-question-circle" title="About"></a> <a onclick="javascript:showPage('members')" class="nav-item fa fa-user-circle-o" title="Members"></a> <a onclick="javascript:showPage('standings')" class="nav-item fa fa-star" title="Standings"></a> </menu> </div> <!-- Nav --> <div class="page" id="home-page"> <div id="home-header"> <div id="home-header-text"> <div id="home-heading">HackaHawks</div> <div id="heading-desc">Where mastery meets mystery</div> <button id="header-button" onclick="slightScroll()">Explore</button> </div> </div> <div class="whitespace"></div> <section> <div id="home-content-container"> <div class="home-content-card js-scroll fade-in-bottom" id="intro-card"> <div class="gradient-text-green" id="intro-heading"> HackaHawks</div> <div class="card-desc"> In the vast digital realm, where lines of code weave intricate webs of information, a whispered legend circulates among the tech-savvy. They are known as the Hackahawks, a shadowy coding team that defies the boundaries of conventional understanding. Cloaked in mystery, their origins remain a closely guarded secret, their identities hidden beneath layers of encrypted data. <br><br> The Hackahawks' motivations are a riddle, their objectives hidden in the depths of the digital abyss. Some believe they are technological vigilantes, champions of justice, fighting against corruption and oppression. Others whisper that their intentions are far more enigmatic, driven by a thirst for knowledge and the pursuit of digital transcendence. </div> </div> <div class="home-content-card" id="about-card"> <div class="gradient-text-orange" id="about-heading">About </div> <div class="card-desc"> The Hackahawks are said to possess an unparalleled mastery of code, effortlessly breathing life into virtual domains. It is rumored that their designs possess an ethereal quality, captivating visitors with mesmerizing visuals and intuitive user experiences. <br><br> Interesting lore aside, the Hackahawks are a team of diverse programmers participating in the annual competition TCO (The Coding Olympics). They hope to give our best, code the greatest, and most importantly, enjoy to the fullest. </div> </div> <div class="home-content-card" id="members-card"> <div class="gradient-text-orange" id="members-heading"> Members</div> <div class="card-desc"> The members of the Hackahawks, shrouded in secrecy and concealed beneath digital veils, are an elite collective of brilliant minds. Each member brings a unique set of skills to the table, forming a symbiotic alliance that fuels their enigmatic operations. They are the epitome of expertise in their respective fields, ranging from programming prodigies to design virtuosos, 3D specialists, and web dev pros. </div> </div> <div class="home-content-card js-scroll fade-in-bottom" id="standings-card"> <div class="gradient-text-green" id="standings-heading"> Standings</div> <div class="card-desc"> Within the realm of coding and digital mastery, the Hackahawks stand tall, distinguished by their mysterious aura and unmatched expertise. In comparison to their peers, the CodeNinjas, ByteBots, and ProgramPanthers, the Hackahawks exude an enigmatic allure that sets them apart. While each group possesses their own formidable talents, the Hackahawks captivate with a blend of artistry and functionality, leaving a lasting impact on the digital landscape. </div> </div> <div class="home-content-card js-scroll fade-in" id="credits-card"> <div class="gradient-text-orange" id="credits-heading"> Credits and References</div> <div class="card-desc"> The enigmatic Hackahawks, veiled in secrecy and skilled in the art of coding, hold deep gratitude towards those who have aided them along their elusive journey. Despite their mysterious nature, they recognize the value of collaboration and the power of shared knowledge. They acknowledge the mentors, guides, and fellow coding enthusiasts who have selflessly imparted their wisdom, providing the stepping stones that have elevated them to new heights. <br><br> With humble appreciation, they express their thanks to the individuals who have challenged their skills, expanded their horizons, and inspired them to push the boundaries of their craft. In the shadows, the Hackahawks silently honor those who have paved the way, recognizing that their success is a testament to the strength of their connections and the collective brilliance of the coding community. </div> <button id="credits-button" onclick="showPage('credits')">Go to Credits</button> </div> </div> <div class="whitespace"></div> <div class="js-scroll fade-in-bottom" id="featured-program"> <div class="gradient-text-green" id="featured-title"> Featured Program</div> <div id="program-content"> <div class="gradient-text-orange" id="featured-program-name"><a href="https://www.khanacademy.org/computer-programming/guide-to-color-schemes-voldemort-pt-lvp/5089217069662208/">Guide to Color Schemes</a> </div> <div id="program-by">— By <a class="link" href="https://www.khanacademy.org/profile/kaid_109088529962766375028969/">Voldemort</a> </div> <div id="program-desc"> <span style="color: #30303055;font-size: 0.9rem;">This program will be changed regularly. Until then, here's a tutorial to choose better colors than you're doing currently.</span><br> The "Guide to Color Schemes" website is a masterpiece that transcends the boundaries of traditional web design. Voldemort's artistry is evident in every pixel, as a seamless fusion of captivating visuals and intuitive functionality guides users through a mesmerizing exploration of color theory. <br><br> The site's layout is a harmonious composition of humorous lines and enchanting typography, perfectly complemented by a color palette that evokes a sense of intrigue and allure. </div> </div> <div id="program-thumb-container"> <img class="js-scroll fade-in-bottom" id="featured-program-thumb" src="https://www.khanacademy.org/computer-programming/guide-to-color-schemes-voldemort-pt-lvp/5089217069662208/6492627996196864.png"> </div> </div> <div class="whitespace"></div> </section> </div> <!-- Home --> <div class="page" id="about-page"> <div class="page-header" id="about-header"> <div class="page-heading">About Team HackaHawks</div> <div class="page-quote">"Birds are the indicators of the environment. If they're in trouble, we know we'll soon be in trouble."</div> </div> <section> <div class="whitespace"></div> <div id="about-team-container"> <img class='js-scroll fade-in' src="https://www.khanacademy.org/computer-programming/hh-logo-for-webbie/4919038363615232/4561429152448512.png" id="team-logo"> In the vast and ever-expanding digital realm, where lines of code shape the world we inhabit, a legend whispers of a coding team that operates in the shadows, known only as the Hackahawks. Veiled in mystery and secrecy, this enigmatic group has captured the imagination of web developing enthusiasts and processing.js enthusiasts alike. With unparalleled skills, a thirst for knowledge, and an unwavering commitment to their craft, the Hackahawks have emerged as a symbol of digital prowess and innovation. <br><br> The Hackahawks' impact reverberates throughout the digital landscape. Their collaborations with planets, galaxies, and <a class="link" href="https://www.khanacademy.org/profile/kaid_109088529962766375028969">Voldemort</a> have yielded transformative outcomes, fortifying systems against cyber threats, empowering digital innovation, and safeguarding critical information. Their exploits have become the stuff of legends, with tales of seemingly impenetrable fortresses crumbling before their advanced techniques. Their influence extends beyond technical accomplishments, inspiring awe and admiration among fellow coders. The Hackahawks' enduring legacy lies in the advancement of digital programming, the continual push for innovation, and their role as torchbearers of ethical coding practices. <br><br> Read more about the Hackahawks on <a href="https://openai.com/blog/chatgpt/" class="link">their blog</a>. But beware, should you dare break the vow of secrecy. </div> <div class="whitespace"></div> <div id="about-tco-container"> <div class="gradient-text-green" id="about-tco-heading"> About TCO 2023</div> <div id="about-tco-content"> <div id="about-tco-text"> The Coding Olympics, an annual competition that ignites the passion and showcases the exceptional skills of coding enthusiasts from around the world, stands as the pinnacle event in the realm of programming excellence. As the digital equivalent of a grand sporting spectacle, the Coding Olympics brings together the brightest minds and the most talented coders to compete in a series of challenging coding tasks and algorithmic puzzles. <br><br> Teams battle against the clock and each other, demonstrating their problem-solving abilities, innovation, and efficiency in crafting elegant and functional code. The atmosphere is electric, with an intense camaraderie driving the competitors to push their limits and showcase their ingenuity. The Coding Olympics serves as a celebration of the remarkable potential and boundless creativity that coding has to offer, while also fostering a sense of community, collaboration, and healthy competition among programming enthusiasts worldwide. </div> <div class="js-scroll fade-in-bottom" id="tco-card"> <img src="https://www.khanacademy.org/computer-programming/welcome-to-tco-2023/6082023522091008/5935418684784640.png" id="tco-thumb"> <div id="tco-title"><a href="https://khanacademy.org/cs/i/6082023522091008" class="link">Welcome to TCO 2023!</a></div> <div id="tco-by">By <a href="https://www.khanacademy.org/profile/kaid_103000698141866290580261/" class="link">Jake K.</a> </div> </div> </div> </div> <div class="whitespace"></div> <div id="about-voldy-container"> <div class="gradient-text-orange" id="about-voldy-title"> About The Creator</div> <a class="js-scroll fade-in" href="https://www.khanacademy.org/profile/kaid_109088529962766375028969"><img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leaf-red.png" id="voldy-logo"></a> Voldemort, the paradoxical figure in the web development world, brings a unique blend of humor and elegance to the digital realm. With a mischievous smile and a mischievous sense of humor, Voldemort weaves her magic into every line of code, leaving a trail of whimsical surprises. Her websites, while sleek and visually stunning, oftentimes carry an unexpected twist. <br><br> From clever pop-up animations to witty error messages, Voldemort infuses her creations with a touch of comedic charm, adding an element of delight to the user experience. Beneath the surface of her humor lies a masterful understanding of web design and development, allowing her to craft seamless and efficient websites that captivate and entertain. In the world of web development, where seriousness often reigns, Voldemort's ability to infuse her work with both elegance and humor makes her a truly exceptional and unforgettable figure. </div> <div class="whitespace"></div> </section> </div> <!-- About --> <div class="page" id="members-page"> <div class="page-header" id="members-header"> <div class="page-heading">Our Team</div> <div class="page-quote">"People say nothing is impossible. But I do nothing every day."</div> </div> <section> <div class="whitespace"></div> <div id="members-praise"> Hackahawks' members possess a relentless drive for excellence, constantly honing their craft and pushing the boundaries of their respective domains. Their collaboration is marked by a deep sense of camaraderie, mutual respect, and a shared dedication to unraveling the complexities of the digital realm. Together, they form an unstoppable force, weaving their individual brilliance into a tapestry of collective mastery that defines the legendary prowess of the Hackahawks. </div> <div class="whitespace"></div> <div class=" js-scroll fade-in-bottom" id="members-container"> </div> <div class="whitespace"></div> </section> </div> <!-- Members --> <div class="page" id="standings-page"> <div class="page-header" id="standings-header"> <div class="page-heading">Where we Stand</div> <div class="page-quote">"Sometimes I wonder if all this is happening because I didn't forward that email to ten people." </div> </div> <section> <div class="whitespace"></div> <div id="teams-container"> <div class="team-card js-scroll fade-in" id="first"> <img class="team-logo" src="https://www.khanacademy.org/computer-programming/hh-logo-for-webbie/4919038363615232/4561429152448512.png"> <div class="gradient-text-orange team-name"><a href="https://www.khanacademy.org/computer-programming/hackahawks-homepage-tco-entry/4827822049509376">HackaHawks</a></div> <div class="team-points">13 points</div> </div> <div class="team-card js-scroll fade-in" id="second"> <img class="team-logo" src="https://www.khanacademy.org/computer-programming/bb-logo-for-webbie/5627821448544256/4913167545974784.png"> <div class="gradient-text-green team-name"><a href="https://www.khanacademy.org/computer-programming/bytebots-homepage-tco-entry/5091593506570240">ByteBots</a></div> <div class="team-points">5 points</div> </div> <div class="team-card js-scroll fade-in" id="third"> <img class="team-logo" src="https://www.khanacademy.org/computer-programming/cn-logo-for-webbie/5790923636916224/4984465211047936.png"> <div class="gradient-text-orange team-name"><a href="https://www.khanacademy.org/computer-programming/codeninjas-homepage-entry/5660200653340672">CodeNinjas</a></div> <div class="team-points">2 points</div> </div> <div class="team-card js-scroll fade-in"> <img class="team-logo" src="https://www.khanacademy.org/computer-programming/pp-logo-for-webbie/5573730429091840/6514423225958400.png"> <div class="gradient-text-orange team-name"><a href="https://www.khanacademy.org/computer-programming/programming-panthers-homepage-tco/4827780442013696">Program Panthers</a></div> <div class="team-points">0 points</div> </div> </div> <div class="whitespace"></div> <div id="standings-disclaimer"> The teams are no longer arranged in alphabetical order, only in skill order. (lol) <br> Except slytherin, that I like. </div> <div class="whitespace"></div> </section> </div> <!-- Standings --> <div class="page" id="credits-page"> <div class="page-header" id="credits-header"> <div class="page-heading">Credits and References</div> <div class="page-quote">"I feel a very unusual sensation — if its not indigestion, I think it must be gratitude."</div> </div> <section> <div class="whitespace"></div> <div class="gradient-text-green" id="credits-title"> The creator of this webpage is thankful to the following: </div> <div class="whitespace"></div> <div id="credits-container"> <div class="credit-card"> <img src="https://www.khanacademy.org/computer-programming/welcome-to-tco-2023/6082023522091008/5935418684784640.png" class="credit-img"> <div class="credit-title gradient-text-orange"><a class="link" href="https://www.khanacademy.org/computer-programming/welcome-to-tco-2023/6082023522091008/">TCO</a> </div> <div class="credit-desc"> for existing, so that I could enter into the contest and thus not go dead. </div> </div> <div class="credit-card js-scroll fade-in" id="me"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/leaf-red.png" class="credit-img"> <div class="credit-title gradient-text-orange"><a class="link" href="https://www.khanacademy.org/profile/kaid_109088529962766375028969/">Me</a> </div> <div class="credit-desc"> i made this. so why not </div> </div> <div class="credit-card js-scroll fade-in-bottom" id="judges-lol"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/avatar-team.png" class="credit-img"> <div class="credit-title gradient-text-orange"><a class="link" href="#">The Judges</a></div> <div class="credit-desc"> lol if theres any chance I get extra points for this, I'd be glad xD </div> </div> <div class="credit-card"> <img src="https://www.khanacademy.org/computer-programming/hh-logo-for-webbie/4919038363615232/4561429152448512.png" class="credit-img"> <div class="credit-title gradient-text-orange"><a class="link" href="#">The Team</a></div> <div class="credit-desc"> for giving me all the support for this program. thanks uwu </div> </div> </div> <div class="whitespace"></div> </section> </div> <!-- Credits --> <div class="footer"> <div class="footer-left"> <div class="footer-heading js-scroll fade-in">Hacka<span>Hawks</span></div> <p class="footer-nav-links"> <a href="javascript:showPage('home')" class="link-1">Home</a> <a href="javascript:showPage('members')">Members</a> <a href="javascript:showPage('standings')">Standings</a> <a href="javascript:showPage('about')">About</a> </p> <p class="footer-creator-name">Voldemort ©2023</p> </div> <div class="footer-center"> <div> <i class="fa fa-map-marker"></i> <p><span>A fresh veggie shop</span> Olympus Mons, Mars</p> </div> <div> <i class="fa fa-phone"></i> <p>3.14159265359</p> </div> <div> <i class="fa fa-envelope"></i> <p>this@doesnt.work</p> </div> </div> <div class="footer-right"> <p class="footer-creator-about"> <span>About the creator</span> i literally have no more creativity left in me to fill this smh i spent it all on the site content </p> <div class="footer-icons"> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-github"></i></a> </div> </div> </div> <!-- Footer --> <script type> function slightScroll() { window.scrollTo({ top: 500, behavior: "smooth" }); }; function backToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); }; (function() { const pgs = document.getElementsByClassName('page'); window.showPage = function(name) { for (let i = 0; i < pgs.length; i++) { pgs[i].style.display = 'none'; } document.getElementById(name + "-page").style.display = 'block'; backToTop(); }; showPage("home"); })(); </script> <!-- Page switching and scrolling --> <script type> (function() { const scrollElements = document.querySelectorAll( ".js-scroll"); function elementIsInView(el, divisor = 1) { const elementTop = el.getBoundingClientRect().top; return elementTop <= window.innerHeight / divisor; } function handleScrollAnimation() { scrollElements.forEach((el) => { if (elementIsInView(el, 1.25)) { el.classList.add("scrolled"); } else if (!elementIsInView(el)) { el.classList.remove("scrolled"); } }); } window.addEventListener("scroll", handleScrollAnimation); })(); </script> <!-- On-scroll animations --> <script type> var users = [{ name: "Bearkirb314", kaid: "kaid_375460112550893828689953", avatar: "cs-hopper-cool", skill: "Advanced" }, { name: "Voldemort", kaid: "kaid_109088529962766375028969", avatar: "leaf-red", skill: "Advanced (smh)" }, { name: "CH", kaid: "kaid_139401608167450474654053", avatar: "piceratops-ultimate", skill: "Advanced (smh)" }, { name: "Chick Coder", kaid: "kaid_792051107275272696342973", avatar: "leaf-orange", skill: "Advanced" }, { name: "AGKM Coder", kaid: "kaid_9033829293805621369025816", avatar: "leaf-red", skill: "Intermediate" }, { name: "F4stB01", kaid: "kaid_114585470331020100763556", avatar: "cs-hopper-cool", skill: "Intermediate" }, { name: "Zenghao", kaid: "kaid_833091817117822871793323", avatar: "stelly-orange", skill: "Intermediate" }, { name: "cloudy skies", kaid: "kaid_880912573786397212785584", avatar: "sneak-peak-blue", skill: "Intermediate" }, { name: "KBraptureReady", kaid: "kaid_499237362224374923964379", avatar: "blobby-blue", skill: "Intermediate" }, { name: "Animator101", kaid: "kaid_457601383838709034574070", avatar: "piceratops-ultimate", skill: "Intermediate" }, { name: "Lavender", kaid: "kaid_811177991334006852288", avatar: "starky-tree", skill: "Beginner" }, { name: "Daniel Olamoyegun", kaid: "kaid_9926207988169672810314626", avatar: "robot_male_3", skill: "Beginner" }, { name: "TheBlueWyvern", kaid: "kaid_4837281888887525813234462", avatar: "aqualine-ultimate", skill: "Beginner" }, { name: "Pickleprincess", kaid: "kaid_532697917562210154344506", avatar: "robot_female_1", skill: "Beginner" }, ] for (var i = 0; i < users.length; i++) { var element = document.createElement("div"); element.classList.add("member-card"); element.innerHTML = '<div class="member-card">' + '<img src="https://cdn.kastatic.org/images/avatars/svg/' + users[i].avatar + '.svg" class="member-avatar">' + '<div class="member-title">' + '<a class="gradient-text-green" target="_blank" href="https://www.khanacademy.org/profile/' + users[i].kaid + '">' + users[i].name + '</a>' + '</div>' + '<div class="member-skill">' + users[i].skill + '</div>' + '</div>'; document.getElementById("members-container").appendChild( element); } </script> <!-- Members page --> </body> </html>
Folds	15,216,217,324,325,595,596,717,718,794,795,870,871,950,951,1106,1110,1122,1124,1233,1234,1311,1312,1334,1335,1374,1375,1425,1427,1463,1465,1494,1495,1519,1520,1626
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLPSjtzJCAw
Votes	56
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Voldemort
Author Name	Voldemort271
Author ID	kaid_109088529962766375028969
Author Profile Access	PUBLIC

Archive Data

Added	3 months ago, 1727881308143
Updated	3 months ago, 1727881308143
Source Deleted	unknown