Viewing Program

Program Data

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

Title	The Coding Olympics 2024
ID	6446070763012096
Created	6 months ago, 1718636310191
Updated	4 months ago, 1725075462317
Code	<!DOCTYPE html> <!----------------------------------------------+ \| ABOUT \| \| \| \| Hello and welcome to the fifth annual Coding \| \| Olympics. Timothy and I are excited to host \| \| another incredible summer of fun! Sign up now \| \| and join one of three amazing teams. \| +-----------------------------------------------+ \| SCHEDULE \| \| \| \| Joining and Homepages Contest Jun 17 - Jun 24 \| \| First Challenge Jun 24 - Jul 8 \| \| Second Challenge Jul 8 - Jul 22 \| \| Third Challenge Jul 22 - Aug 5 \| \| Grand Finale Aug 5 - Aug 26 \| +-----------------------------------------------+ \| JUDGMENT \| \| \| \| Our judges review programs based on the \| \| following criteria: Complexity, Creativity, \| \| Design, Cleanliness, and Efficiency. Read our \| \| judging guide for a more in-depth description.\| \| \| \| www.khanacademy.org/cs/i/4541335760060416 \| +-----------------------------------------------+ Contest: Celebrations! I have chosen to revisit "Contest: Computer Science for Good" I have completed 100% of Khan Academy's 'Intro to JS' and have been programming for too many months. I would prefer to be placed in the Advanced bracket I will be making minor edits periodically to update the participants page. No other styling or content will be added. --> <html> <head> <meta charset="utf-8" author="Liam K."> <title>The Coding Olympics 2024</title> <!-- Import Google Fonts --> <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=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Tangerine:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <!-- Setup --> <style> body { overflow: hidden; } body, html { background-color: rgb(240, 220, 240); margin: 0px; padding: 0px; overflow-x: hidden; font-family: Open Sans; } .page { opacity: 1; animation: fade-in 0.5s ease-in; } </style> <!-- Menu styling --> <style> #menu-nav .menu-btn { position: fixed; top: 5vw; left: 5vw; width: 10vw; height: 10vw; background-color: white; border-radius: 10vw; z-index: 3; box-shadow: 0.5vw 0.5vw 2vw rgb(236, 68, 52), -0.5vw 0.5vw 2vw rgb(247, 141, 27), 0.5vw -0.5vw 2vw rgb(78, 66, 166); transition: transform 0.3s, left 0.3s; } #menu-nav .menu-btn:hover { transform: scale(1.05); cursor: pointer; } #menu-nav.open .menu-btn { left: 25vw; } #menu-nav .menu-btn .bar { position: relative; top: 0; left: 0; width: 7vw; height: 1vw; margin: 1vw auto; transition: transform 0.3s; } #menu-nav .menu-btn .bar#top { background-color: rgb(236, 68, 52); margin-top: 2.5vw; } #menu-nav.open .menu-btn .bar#top { transform: translate(0vw, 2vw) rotate(45deg); } #menu-nav .menu-btn .bar#middle { background-color: rgb(247, 141, 27); } #menu-nav.open .menu-btn .bar#middle { transform: scaleX(0); } #menu-nav .menu-btn .bar#bottom { background-color: rgb(78, 66, 166); } #menu-nav.open .menu-btn .bar#bottom { transform: translate(0vw, -2vw) rotate(-45deg); } #menu-nav .menu-cont { position: fixed; top: 0; left: -25vw; z-index: 3; transition: left 0.3s; width: 20vw; height: 100vh; background-color: rgb(78, 66, 166); display: flex; justify-content: center; flex-direction: column; } #menu-nav.open .menu-cont { left: 0vw; box-shadow: 1vw 0 3vw rgba(23, 17, 69, 1); } #menu-nav .menu-cont .menu-bar { background-color: rgb(78, 66, 166); margin: 0; vertical-alignment: bottom; text-align: center; color: rgb(240, 220, 240); font-size: 2.5vw; transition: padding-left 0.3s, color 0.3s; } #menu-nav .menu-cont .menu-bar.active { background-color: rgb(54, 42, 145); } #menu-nav .menu-cont .menu-bar:hover { padding-left: 2vw; color: white; cursor:pointer; } #menu-nav .menu-cont .menu-bar span { vertical-align: bottom; font-size: 3.5vw; } #menu-nav #cover { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; display: none; } #menu-nav.open #cover { display: block; backdrop-filter: blur(3px); } </style> <!-- Homepage Styling --> <style> #home .hero { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; text-align: center; position: relative; width: 100vw; height: 65vw; background-image: linear-gradient(to bottom right, rgb(249, 175, 81, 1), rgba(236, 68, 52, 1) 15%, rgba(236, 68, 52, 0.5) 30%, rgba(36, 28, 92, 1) 70%), url("https://upload.wikimedia.org/wikipedia/commons/0/01/Rockaway_Beach_-_DPLA_-_d6fed534a7c3e82792791f485506cd34.jpg"); clip-path: polygon(100% 100%, 100% 0%, 0% 0%, 0% 100%, 5% 90%, 10% 96%, 20% 100%, 25% 93%, 35% 96%, 40% 90%, 50% 96%, 55% 100%, 65% 100%, 75% 95%, 80% 100%, 85% 94%, 90% 93%); } #home .hero div { position: absolute; top: 0; left: 0; width: 100vw; } #home .hero div h1 { color: rgb(255, 200, 255); font-size: 20vw; font-family: Neuton; text-align: center; display: block; margin: auto; margin-top: 15vw; user-select: none; } #home .hero div img { height: 50vw; margin: auto; padding: 0; display: block; padding-top: 7.5vw; opacity: 0.8; user-select: none; } #home .outline-text { color: rgba(255, 200, 255, 0); -webkit-text-stroke: 2px rgb(255, 200, 255); user-select: none; } #home .hero div .outline-text { font-size: 20vw; font-family: Neuton; text-align: center; display: block; margin: 0; margin-top: 15vw; } #home .hero #highlight { background-color: rgba(236, 68, 52, 0.42); box-shadow: 0 0 50px rgba(236, 68, 52, 1); border-radius: 5vw; top: 26vw; left: 10vw; width: 80vw; height: 10vw; } #home #coding-made-fun { color: rgb(249, 175, 81, 1); text-align: center; font-size: 5vw; margin-top: 10vw; } #home .about { display: flex; justify-content: center; margin: auto; margin-bottom: -2vw; flex-direction: row; clip-path: inset(0 0 0 0); } #home .about .left { margin-top: 0.5vw; height: 40vw; width: 30vw; margin-right: 5vw; border-radius: 3vw; clip-path: circle(45% at 50% 50%); transition: clip-path 0.4s; } #home .about .left:hover { clip-path: circle(75% at 50% 50%); cursor: pointer; } #home .about .left .about-container { background-image: linear-gradient(to bottom, rgba(236, 68, 52, 0) 30%, rgba(111, 102, 181, 0.9) 90%), url("https://upload.wikimedia.org/wikipedia/commons/7/7e/Akry120x180cm_2011.JPG"); filter: saturate(150%); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; transition: transform 0.3s; border-radius: 3vw; width: 30vw; height: 40vw; border-radius: 3vw; margin-top: -5.75vw; } #home .about .left .about-container:hover { transform: scale(1.05); cursor: pointer; } #home .about .left .about-container h2 { text-align: center; color: white; font-family: Neuton; font-size: 7vw; text-shadow: 4px 4px 5px rgb(249, 175, 81, 1), -4px -4px 5px rgba(36, 28, 92, 0.5), 4px -4px 4px rgb(236, 68, 52); padding-top: 14vw; } #home .about .right { width: 40vw; height: 31vw; margin: 6vw 0vw 1vw 2vw; padding: 1.5vw; } #home .about .right h4 { text-align: left; color: rgb(36, 28, 92); margin: 0; font-size: 2vw; } #home .about .right h3 { text-align: left; font-family: Neuton; color: rgb(36, 28, 92); margin: -1vw 0 1vw 0; font-size: 3.5vw; } #home .about .right p { color: rgb(64, 68, 105); text-align: left; font-size: 2vw; margin: 0; } #home .about .right p strong { color: rgb(236, 68, 52); font-family: Tangerine; text-shadow: 0px 0px 10px rgb(249, 175, 81, 1); font-size: 4vw; font-weight: 700; } #home .about .right div { font-family: Neuton; color: rgb(64, 68, 105); font-size: 3vw; vertical-align: bottom; width: 20vw; transition: transform 0.3s; } #home .about .right div { font-family: Neuton; color: rgb(64, 68, 105); font-size: 3vw; vertical-align: bottom; width: 20vw; margin-top: 1.5vw; transition: transform 0.3s; } #home .about .right div:hover { transform: translate(2vw, 0); cursor: pointer; } #home .about .right div span { vertical-align: bottom; font-size: inherit; } #home .awards { display: flex; justify-content: center; flex-direction: row; margin: 0 0 5vw 0; } #home .awards .award { width: 15vw; margin: 2vw; margin-top: 10vw; transition: transform 0.3s, filter 0.3s; padding-bottom: -200vw; filter: drop-shadow(0 0 1vw rgb(249, 175, 81, 0.8)); } #home .awards .award:hover { cursor: pointer; transform: scale(1.05) translate(0, -1vw); filter: drop-shadow(0 0 1.5vw rgb(249, 175, 81)); cursor: pointer; } #home .awards .award.middle { margin-top: 5vw; padding-bottom: -200vw; } #home .awards .award img { width: 15vw; filter: hue-rotate(296deg) saturate(300%); padding-bottom: -200vw; } #home .awards .award h3 { position: relative; top: -12.5vw; left: 0; text-align: center; color: rgb(61, 44, 186); padding-bottom: -200vw; font-size: 3vw; } #home .awards .award p { position: relative; top: -10vw; left: 0; text-align: center; width: 15vw; color: rgb(64, 68, 105); font-size: 2vw; margin-bottom: -10vw; } #home .teams { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; text-align: center; position: relative; width: 100vw; background-image: linear-gradient(to bottom right, rgb(249, 175, 81, 1) 30%, rgba(236, 68, 52, 0.8) 50%, rgba(236, 68, 52, 0.5) 70%, rgba(36, 28, 92, 1) 90%), url("https://upload.wikimedia.org/wikipedia/commons/0/01/Rockaway_Beach_-_DPLA_-_d6fed534a7c3e82792791f485506cd34.jpg"); justify-content: center; padding-bottom: 5vw; } #home .teams h3 { color: rgb(240, 220, 240); font-family: Neuton; font-weight: 900; font-size: 10vw; margin: 0; } #home .team-holder { display: flex; flex-direction: row; justify-content: center; } #home .teams .team { width: 25vw; margin: 5vw 2vw; border: 1px solid rgb(240, 220, 240); border-radius: 2vw; padding: 0; backdrop-filter: blur(4px); box-shadow: 1px 1px 1vw rgb(236, 68, 52); transition: transform 0.3s; } #home .teams .team:hover { transform: scale(1.05) rotate(3deg); cursor: pointer; } #home .teams .team img { width: 25vw; margin-bottom: -3.75vw; padding: 0; background-image: radial-gradient(rgba(200, 180, 200, 0), rgb(240, 220, 240, 0.05), rgb(240, 220, 240, 0.3)); border-radius: 2vw 2vw 0 0; } #home .teams .team .bottom { background-color: rgb(240, 220, 240); margin: 0; padding: 0; background-image: radial-gradient(rgb(200, 180, 200), rgb(240, 220, 240)); border-radius: 0 0 1.8vw 1.8vw; } #home .teams .team .bottom h4 { margin: 3vw 0vw 1vw 0; padding-top: 2vw; color: rgba(36, 28, 92, 1); font-size: 2.5vw; } #home .teams .team .bottom p { margin: 0; padding: 0 1vw 1vw 1vw; font-size: 2vw; color: rgb(64, 68, 105); } #home .teams #teams-button { background-image: linear-gradient(to bottom right, rgb(249, 175, 81, 1) 30%, rgba(236, 68, 52, 0.8) 50%, rgba(236, 68, 52, 0.5) 70%, rgba(36, 28, 92, 1) 90%), url("https://upload.wikimedia.org/wikipedia/commons/0/01/Rockaway_Beach_-_DPLA_-_d6fed534a7c3e82792791f485506cd34.jpg"); margin: auto; width: 30vw; padding: 1vw; border-radius: 1vw; color: white; transition: transform 0.3s; box-shadow: 0.5vw 0.5vw 1vw rgb(240, 223, 149, 0.5) inset, -0.5vw -0.5vw 1vw rgb(9, 6, 51, 0.5) inset, 0vw 0vw 3vw rgba(173, 164, 242, 0.5); font-size: 2.5vw; } #home .teams #teams-button:hover { transform: scale(1.05); cursor: pointer; } #home .judges { width: 80vw; margin: 10vw auto; background-image: linear-gradient(to right, rgba(36, 28, 92, 0.8) 30%, rgba(36, 28, 92, 0.3) 50%, rgba(36, 28, 92, 0.3) 70%, rgba(36, 28, 92, 0.8) 90%), url("https://upload.wikimedia.org/wikipedia/commons/thumb/0/00/The_tube.jpg/640px-The_tube.jpg"); padding: 2vw; border-radius: 2vw; color: rgb(240, 220, 240); } #home .judges h4 { margin: 0; font-size: 2vw; } #home .judges h3 { margin: 0; font-size: 3.5vw; font-family: Neuton; } #home .judges .about { width: 50vw; font-size: 2vw; padding-bottom: 10vw; margin: 1vw 0; } .judges-container { width: 70vw; margin: auto; margin-top: -20vw; display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; } .judge { margin: 1vw; width: 15vw; display: flex; flex-direction: column; justify-content: center; text-align: center; background-image: radial-gradient(white, $white); box-shadow: 0 0 2vw rgba(163, 183, 201); border-radius: 1.5vw; background-color: rgb(240, 220, 240); transition: transform 0.3s, box-shadow 0.3s; } .judge:hover { box-shadow: 0 0 3vw rgba(163, 183, 201); transform: scale(1.02); cursor: pointer; } .judge .backdrop { height: 4vw; border-radius: 1.5vw 1.5vw 0 0; background-image: linear-gradient(to right, rgba(173, 17, 5, 1), rgba(255, 21, 0, 0.6), rgba(247, 241, 81, 0.6), rgba(247, 241, 81, 0.8)), url('https://upload.wikimedia.org/wikipedia/commons/4/49/Sun_over_Lake_Hawea%2C_New_Zealand.jpg'); background-size: cover; } .judge .pfp { position: relative; top: -2.5vw; margin: auto; width: 4vw; padding: 0.5vw; border: 0.3vw solid rgb(240, 220, 240); border-radius: 100%; background-image: radial-gradient(rgba(240, 220, 240, 0.5), rgba(0, 0, 0, 0)), linear-gradient(to right, rgba(173, 17, 5, 1), rgba(255, 21, 0, 0.6), rgba(247, 241, 81, 0.6), rgba(247, 241, 81, 0.8)), url('https://upload.wikimedia.org/wikipedia/commons/4/49/Sun_over_Lake_Hawea%2C_New_Zealand.jpg'); background-size: cover; } .judge .name { margin: auto; margin-top: -2vw; color: rgba(36, 28, 92); font-size: 1.8vw; } .judge .review { padding: 0 0.5vw; color: rgb(64, 68, 105); font-size: 1.4vw; } #home .reviews { width: 100vw; text-align: center; } #home .reviews h4 { font-family: Open Sans; font-size: 2.5vw; color: rgba(240, 220, 240); text-shadow: 0 0 1vw rgba(36, 28, 92, 1); text-align: left; width: 50vw; margin: 0 auto 0 auto; } #home .reviews h3 { font-family: Neuton; font-size: 4.5vw; color: rgba(240, 220, 240); text-shadow: 0 0 1vw rgba(36, 28, 92, 1); margin: 0 auto auto auto; text-align: left; width: 50vw; } #home .reviews .reviews-cont { display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap; margin-top: 3vw; } #home .reviews .reviews-cont .review { width: 25vw; border-radius: 2vw; margin: 1vw; box-shadow: 0 0 1vw rgba(36, 28, 92, 0.3); transition: transform 0.3s; } #home .reviews .reviews-cont .review:hover { transform: scale(1.05); cursor: pointer; } #home .reviews .reviews-cont .review .top { background-color: rgb(240, 220, 240); background-image: radial-gradient(rgba(240, 220, 240, 0), rgba(255, 255, 255, 0.2)); padding: 0 2vw; border-radius: 2vw 2vw 0 0; } #home .reviews .reviews-cont .review .top .quote { font-family: Neuton; font-size: 10vw; color: rgb(236, 68, 52); text-shadow: none; position: relative; top: -1vw; left: -8vw; height: 5vw; width: 5vw; font-weight: 900; } #home .reviews .reviews-cont .review .top p { margin: 1vw 0 0 0; padding-bottom: 5vw; font-size: 2vw; color: rgb(64, 68, 105); } #home .reviews .reviews-cont .review .bottom { background-color: rgb(236, 68, 52); display: flex; justify-content: center; border-radius: 0 0 2vw 2vw; flex-direction: column; } #home .reviews .reviews-cont .review .bottom img { width: 5vw; height: 5vw; padding: 1vw; position: relative; top: -4vw; left: 16vw; background-color: rgb(240, 220, 240); border-radius: 10vw; border: 0.4vw solid rgb(236, 68, 52); } #home .reviews .reviews-cont .review .bottom h4 { font-size: 2.5vw; font-family: Open Sans; color: rgb(240, 220, 240); text-shadow: none; margin: -7vw 0 0 2vw; } #home .reviews .reviews-cont .review .bottom p { font-size: 2vw; font-family: Open Sans; color: rgb(240, 220, 240); text-align: left; padding-left: 2vw; margin: 0 0 2vw 0; } #home .join-now { margin-top: 10vw; margin-bottom: 16vw; } #home .join-now h3 { font-size: 3vw; width: 41vw; height: 3vw; margin: 0 auto 0 auto; } #home .join-now .join-btn { width: 41vw; margin: 3vw auto 10vw auto; text-align: center; background-image: linear-gradient(to bottom right, rgb(249, 175, 81, 1) 30%, rgba(236, 68, 52, 0.8) 50%, rgba(236, 68, 52, 0.5) 70%, rgba(36, 28, 92, 1) 90%), url("https://upload.wikimedia.org/wikipedia/commons/0/01/Rockaway_Beach_-_DPLA_-_d6fed534a7c3e82792791f485506cd34.jpg"); padding: 1vw; background-size: cover; border-radius: 1vw; color: white; font-weight: 900; transition: transform 0.3s; box-shadow: 0.5vw 0.5vw 1vw rgb(255, 255, 255, 0.5) inset, -0.5vw -0.5vw 1vw rgb(9, 6, 51, 0.5) inset, 0vw 0vw 3vw rgba(41, 31, 130, 0.5); font-size: 2.5vw; } #home .join-now .join-btn:hover { transform: scale(1.03); cursor: pointer; } </style> <!-- Join styling --> <style> #join .join-cont { display: flex; flex-direction: row; justify-content: center; height: 100vh; } #join .form { width: 35vw; vertical-align: center; margin: auto 0; margin-right: 5vw; } #join .form h3 { font-size: 3.5vw; font-family: Neuton; color: rgb(236, 68, 52); margin-bottom: 1vw; } #join .form label { font-family: Open Sans; font-weight: 700; font-size: 2.5vw; color: rgb(78, 66, 166); } #join .form input { font-family: Open Sans; font-size: 2vw; background-color: rgb(240, 220, 240); padding: 1vw 0; border: none; border-bottom: 0.3vw solid rgb(249, 175, 81, 1); transition: width 0.5s; color: rgb(61, 64, 99); width: 35vw; outline:none; } #join option, #join select { padding: 1vw; font-family: Open Sans; font-size: 2vw; background-color: rgb(240, 220, 240); border: none; border-bottom: 0.3vw solid rgb(249, 175, 81, 1); color: rgb(61, 64, 99); width: 35vw; } #join option:hover, #join select:hover { cursor: pointer; } #join .form .submit-btns { display: flex; flex-direction: row; justify-content: center; } #join #sign-up { background-color: rgb(236, 68, 52); width: 15vw; margin: 3vw 1vw; padding: 1vw; text-align: center; color: rgb(240, 220, 240); border-radius: 1vw; transition: transform 0.3s; font-size: 2.2vw; } #join #view-teams { width: 15vw; margin: 3vw 1vw; padding: 1vw; border: 0.3vw solid rgb(236, 68, 52); color: rgb(236, 68, 52); border-radius: 1vw; text-align: center; transition: transform 0.3s; font-size: 2.2vw; } #join #view-teams:hover, #join #sign-up:hover { transform: scale(1.05); cursor: pointer; } #join .checkbox-cont { display: flex; flex-direction: row; justify-content: center; margin-top: 1vw; } #join .checkbox-cont #check { appearance: none; color: rgb(240, 220, 240); width: 3vw; border: 0.3vw solid rgb(236, 68, 52); border-radius: 0.5vw; padding: 0; height: 3vw; } #join .checkbox-cont #check:hover { cursor: pointer; } #join .checkbox-cont #check::before { content: ""; font-size: 0; background-color: rgb(236, 68, 52); color: rgb(236, 68, 52); padding: 0.9vw; margin: 0.35vw 0.30vw; position: absolute; transform: scale(0); transition: transform 0.1s; } #join .checkbox-cont #check:checked::before { transform: scale(1); } #join .checkbox-cont p { width: 30vw; color: rgb(78, 66, 166); margin: -1vw 1vw; font-size: 2.2vw; } #join #error-msg { color: rgb(236, 68, 52); font-size: 2.5vw; height: 2.5vw; } #join .right { width: 30vw; margin: auto 0 auto 10vw; } #join .right #shapes { position: absolute; width: 35vw; height: 35vw; animation: rotateShapes 20s ease-in-out infinite; z-index: 0; margin: -2vw; } #join .right #undraw-svg { position: relative; } #join .join-cont h4 { font-family: Open Sans; margin: 0 0 -4vw 0; color: rgb(236, 68, 52); font-size: 2.5vw; } #join .join-cont p { color: rgb(61, 64, 99); } @keyframes rotateShapes { 0% { transform: rotate(0deg) scale(1.1); } 25% { transform: rotate(5deg) scale(1.3); } 50% { transform: rotate(0deg) scale(1.1); } 75% { transform: rotate(-10deg) scale(1.2); } 100% { transform: rotate(0deg) scale(1.1); } } </style> <!-- Teams Styling --> <style> #teams .team-header { display: flex; flex-direction: row; justify-content: center; width: 100vw; background-size: cover; padding: 3vw 0; } #teams .team-header .text-box { width: 50vw; height: 25vw; margin: auto auto auto 10vw; background-image: radial-gradient(rgba(240, 220, 240, 0.1), rgba(240, 220, 240, 0.5)); backdrop-filter: blur(3px); box-shadow: 0vw 1vw 2vw rgb(240, 220, 240, 0.5); padding: 2vw; border-radius: 1.5vw; } #teams .team-header .text-box h4 { color: rgb(240, 220, 240); font-size: 2.5vw; font-family: Open Sans; margin: 0 auto; } #teams .team-header .text-box h3 { color: rgb(240, 220, 240); font-size: 4vw; font-family: Neuton; margin: 0 auto; margin-top: -1vw; } #teams .team-header .text-box p { color: rgb(240, 220, 240); font-size: 2vw; } #teams .join-now { color: rgb(240, 220, 240); font-family: Neuton; font-size: 3vw; vertical-align: bottom; width: 15vw; transition: color 0.3s, margin-left 0.3s; } #teams .join-now:hover { color: white; margin-left: 2vw; cursor: pointer; } #teams .join-now span { vertical-align: bottom; font-size: 3vw; } #teams .image-cont { z-index: 0; width: 50vw; height: 50vw; background-size: cover; } #teams .image-cont img { width: 40vw; padding: 5vw; } #teams .team-cont { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; width: 100vw; padding: 5vw 0; } #teams .team-cont .participant { display: flex; flex-direction: column; justify-content: center; width: 25vw; border-radius: 1vw; box-shadow: 0 1vw 2vw rgba(36, 28, 92, 0.5); transition: transform 0.3s; margin: 2.5vw; /rgba(36,28,92, 1)/ } #teams .team-cont#penguins .participant { background-image: linear-gradient(170deg, rgb(240, 220, 240), rgb(240, 220, 240) 80%, rgb(78, 66, 166) 80%); } #teams .team-cont#bulldogs .participant { background-image: linear-gradient(170deg, rgb(240, 220, 240), rgb(240, 220, 240) 80%, rgba(236, 68, 52, 1) 80%); } #teams .team-cont#bugs .participant { background-image: linear-gradient(170deg, rgb(240, 220, 240), rgb(240, 220, 240) 80%, rgb(249, 175, 81, 1) 80%); } #teams .team-cont .participant:hover { transform: scale(1.05) rotate(3deg); } #teams .team-cont .participant .img { width: 25vw; height: 10vw; background-size: cover; margin-bottom: -10vw; clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%); border-radius: 1vw 1vw 0 0; } #teams .team-cont#penguins .participant .img { background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/52/001_2008_08_31_Das_Blau_der_Natur.jpg"); } #teams .team-cont#bulldogs .participant .img { background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2b/Raspberries_%28Rubus_idaeus%29.jpg"); } #teams .team-cont#bugs .participant .img { background-image: url("https://upload.wikimedia.org/wikipedia/commons/9/9e/Iceland_Poppy_Papaver_nudicaule_%27Champagne_Bubbles%27_Yellow_Center.jpg"); } #teams .team-cont .participant img { width: 8vw; background-color: rgb(240, 220, 240); border-radius: 10vw; padding: 0.5vw; margin: 2vw auto 0 auto; z-index: 1; } #teams .team-cont .participant .name { color: rgba(36, 28, 92, 1); text-align: center; margin: 2vw 0 0 0; font-size: 3vw; } #teams .team-cont .participant p { color: rgba(36, 28, 92, 1); text-align: center; margin: 0 0 5vw 0; font-size: 2.5vw; } #teams .team-cont .participant .icons { margin: auto; color: rgb(240, 220, 240); } #teams .team-cont .participant .icons span { transition: text-shadow 0.3s, transform 0.3s; margin: 0 0.5vw; font-size: inherit; } #teams .team-cont .participant .icons span:hover { text-shadow: 0 0 1vw rgb(240, 220, 240); transform: translate(0vw, 0.3vw); } </style> <!-- Challenges Styling --> <style> #challenges .challenge-cont { width: 100vw; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; } #challenges .challenge-cont .challenge { width: 40vw; height: 40vw; background-size: 200% 200%; border-radius: 1vw; background-position: 20% 50%; transition: background-position 0.3s; clip-path: inset(0 0 0 0); margin: 2.5vw; } #challenges .challenge-cont .challenge.red { background-image: linear-gradient(rgba(236, 68, 52, 0.2) 65%, rgba(236, 68, 52, 0.85) 65%), url("https://upload.wikimedia.org/wikipedia/commons/e/e1/Strawberries.jpg"); } #challenges .challenge-cont .challenge.blue { background-image: linear-gradient(rgb(78, 66, 166, 0.2) 65%, rgb(78, 66, 166, 0.85) 65%), url("https://upload.wikimedia.org/wikipedia/commons/c/c7/Blue_rose-artificially_coloured.jpg"); } #challenges .challenge-cont .challenge.yellow { background-image: linear-gradient(rgba(249, 175, 81, 0.4) 65%, rgba(249, 175, 81) 65%), url("https://upload.wikimedia.org/wikipedia/commons/2/28/Grouping_of_Yellow_Flowers.jpg"); } #challenges .challenge-cont .challenge:hover { background-position: 20% 100%; } #challenges .challenge-cont .challenge h3 { color: rgba(240, 220, 240); font-size: 4vw; font-family: Neuton; margin: 33vw 0 0 0; padding: 0 1vw; transition: margin-top 0.3s; } #challenges .challenge-cont .challenge:hover h3 { margin: 12vw 0 0 0; } #challenges .challenge-cont .challenge p { opacity: 0; padding: 1vw; color: rgb(240, 220, 240); margin-top: 0; transition: opacity 0.3s; font-size: 2.5vw; } #challenges .challenge-cont .challenge:hover p { opacity: 1; } </style> <!-- Lead Styling --> <style> #lead { background-color: rgba(249, 175, 81); min-height: 100vh; } .leaderboard { width: 100vw; background-image: linear-gradient(to bottom, rgba(240, 220, 240), rgba(240, 220, 240, 0.5) 25%, rgba(214, 183, 145, 0.9) 50%, rgba(249, 175, 81) 90%), linear-gradient(to right, rgba(36, 28, 92, 1), rgba(36, 28, 92, 0.7), rgb(249, 175, 81, 0.6), rgb(249, 175, 81, 1)), url("https://upload.wikimedia.org/wikipedia/commons/f/f3/Yellow_leaves_on_Tree%2C_Auvergne.jpg"); background-size: cover; vertical-align: center; padding: 10vw 0; } .leaderboard h2 { color: rgb(240, 220, 240); text-align: center; margin: auto; padding: 10vw 0 0vw 0; text-shadow: 0 0 1vw rgba(36, 28, 92, 1); font-size: 3vw; } #lead .leaderboard h2 { font-size: 10vw; color: rgba(0, 0, 0, 0); -webkit-text-stroke: 2px rgb(255, 200, 255); text-shadow: none; filter: drop-shadow(0 0 0.5vw rgb(8, 10, 64)); margin-bottom: 10vw; } .leaderboard .lead-cont { display: flex; width: 50vw; justify-content: center; flex-direction: row; margin: auto; border-bottom: 0.3vw solid rgb(240, 220, 240); box-shadow: 0 1vw 1vw -1.1vw rgba(255, 255, 255); } .leaderboard .leader { width: 10vw; margin: 0 3vw; display: flex; justify-content: center; flex-direction: column; text-align: center; align: bottom; } .leaderboard .leader img { width: 10vw; margin: auto; } .leaderboard .leader.first .box { background-image: linear-gradient(to bottom right, rgb(184, 160, 64), rgb(117, 93, 34)); padding-bottom: 6vw; } .leaderboard .leader.second .box { background-image: linear-gradient(to bottom right, rgb(120, 136, 156), rgb(87, 93, 110)); padding-bottom: 3vw; } .leaderboard .leader.third .box { background-image: linear-gradient(to bottom right, rgb(204, 78, 20), rgb(97, 68, 6)); } .leaderboard .leader .box h3 { color: white; border: 0.1vw solid white; width: 3.5vw; margin: 2vw auto 0 auto; border-radius: 10vw; vertical-align: bottom; padding: 1vw; background-color: rgba(0, 0, 0, 0.2); font-size: 2.75vw; font-family: Neuton; } .leaderboard .leader .box p { color: white; margin: 1.5vw; font-size: 2vw; } .leaderboard .to-lead { font-family: Neuton; color: rgba(240, 220, 240); text-shadow: 0 0 1vw rgba(36, 28, 92, 1); font-size: 3vw; vertical-align: bottom; width: 31vw; margin: 0 auto 10vw auto; text-align: center; transition: transform 0.3s; } .to-lead:hover { transform: translate(2vw, 0); cursor: pointer; } .to-lead span { vertical-align: bottom; font-size: inherit; } </style> <!-- On-scroll animations - Stolen from Voldemort--> <style> .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; } } </style> <!-- SVG leaderboard styling - BGjar --> <style> @keyframes float1 { 0% { transform: translate(0, 0) } 50% { transform: translate(-2vw, 0) } 100% { transform: translate(0, 0) } } .triangle-float1 { animation: float1 5s infinite; } @keyframes float2 { 0% { transform: translate(0, 0) } 50% { transform: translate(-1vw, -1vw) } 100% { transform: translate(0, 0) } } .triangle-float2 { animation: float2 4s infinite; } @keyframes float3 { 0% { transform: translate(0, 0) } 50% { transform: translate(0, -2vw) } 100% { transform: translate(0, 0) } } .triangle-float3 { animation: float3 6s infinite; } </style> </head> <body> <!-- Menu --> <div id="menu-nav"> <div class="menu-btn" onClick="javascript:toggleNav();"> <div class="bar" id="top"></div> <div class="bar" id="middle"></div> <div class="bar" id="bottom"></div> </div> <div class="menu-cont"> <div class="menu-bar" onClick="javascript:switchPage(0);toggleNav();"> <h4>Home <span class="material-symbols-outlined">home</span> </h4> </div> <div class="menu-bar" onClick="javascript:switchPage(1);toggleNav();"> <h4>Join <span class="material-symbols-outlined">add_box</span> </h4> </div> <div class="menu-bar" onClick="javascript:switchPage(2);toggleNav();"> <h4>Teams <span class="material-symbols-outlined">groups_3</span> </h4> </div> <div class="menu-bar" onClick="javascript:switchPage(3);toggleNav();"> <h4>Events <span class="material-symbols-outlined">event</span> </h4> </div> <div class="menu-bar" onClick="javascript:switchPage(4);toggleNav();"> <h4>Lead <span class="material-symbols-outlined">social_leaderboard</span> </h4> </div> </div> <div id="cover" onClick="javascript:toggleNav();"></div> </div> <!-- Home Page --> <div class='page' id="home"> <!-- Hero --> <div class="hero" id="img1"> <div> <div id="highlight"></div> </div> <div> <h1>TCO 2024</h1> </div> <div> <img src="https://www.khanacademy.org/computer-programming/new-program/6450530481782784/6028463845064704.png"> </div> <div> <h2 class='outline-text'>TCO 2024</h2> </div> </div> <!-- About --> <h2 id="coding-made-fun"> Coding Made Fun!</h2> <div class="about"> <div class="left js-scroll slide-left"> <div class="about-container"> <h2>About</h2> </div> </div> <div class="right js-scroll slide-right"> <h4>Coding Gains</h4> <h3>Improve your talents</h3> <p>Complete 5 <strong>unique</strong> coding challenges! Interact and <strong>collaborate</strong> with some of the best programmers. Unleash your <strong>creativity</strong> this summer and join TCO!</p> <div onClick="javascript:switchPage(1);">Join TCO now <span class="material-symbols-outlined"> keyboard_double_arrow_right </span></div> </div> </div> <!-- Awards --> <div class="awards"> <div class="award js-scroll fade-in"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Golden_Laurel_Wreath.png/640px-Golden_Laurel_Wreath.png"> <h3>5</h3> <p>Years Running</p> </div> <div class="award middle js-scroll fade-in"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Golden_Laurel_Wreath.png/640px-Golden_Laurel_Wreath.png"> <h3>1st</h3> <p>Best Coding Competition</p> </div> <div class="award js-scroll fade-in"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Golden_Laurel_Wreath.png/640px-Golden_Laurel_Wreath.png"> <h3>750+</h3> <p>Programs Made</p> </div> </div> <!-- Teams --> <div class="teams"> <h3>Teams</h3> <div class="team-holder"> <div class="team js-scroll fade-in"> <img src="https://www.khanacademy.org/computer-programming/new-program/6522737220304896/latest.png"> <div class="bottom"> <h4>Binary Bulldogs</h4> <p> Lorem Ipsum dolor sit ahmet</p> </div> </div> <div class="team js-scroll fade-in"> <img src="https://www.khanacademy.org/computer-programming/new-program/5235102132649984/latest.png"> <div class="bottom"> <h4>Program Penguins</h4> <p> Lorem Ipsum dolor sit ahmet</p> </div> </div> <div class="team js-scroll fade-in"> <img src="https://www.khanacademy.org/computer-programming/new-program/5329725127573504/latest.png"> <div class="bottom"> <h4>Bug Bashers</h4> <p> Lorem Ipsum dolor sit ahmet</p> </div> </div> </div> <div id="teams-button" onClick="javascript:switchPage(2);"> View Participants </div> </div> <!-- Judges --> <div class="judges"> <h4>Judged and Created</h4> <h3>By the Top KA Coders</h3> <p class="about">Get feedback from some of the most seasoned and experienced programmers here on Khan Academy. Build your computer science skills as you learn from some of the best! </p> </div> <div class='judges-container'> <div class="judge"> <div class="backdrop"></div> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/starky-ultimate.png" class="pfp"> <h4 class="name">Duke</h4> <p class="review">Master of PJS and now building his HTML skills</p> </div> <div class="judge"> <div class="backdrop"></div> <img src="https://cdn.kastatic.org/images/avatars/svg/blobby-purple.svg" class="pfp"> <h4 class="name">S. M. V.</h4> <p class="review">Fullstack and AI dev. NCSF scholar and business owner.</p> </div> <div class="judge"> <div class="backdrop"></div> <img src="https://cdn.kastatic.org/images/avatars/svg/cs-hopper-cool.svg" class="pfp"> <h4 class="name">Bearkirb</h4> <p class="review">WebGL goat and a part-time sewer dweller</p> </div> <div class="judge"> <div class="backdrop"></div> <img src="https://cdn.kastatic.org/images/avatars/svg/cs-hopper-cool.svg" class="pfp"> <h4 class="name">Fastboi</h4> <p class="review">Former COC captain and amazing graphic designer</p> </div> <div class="judge"> <div class="backdrop"></div> <img src="https://cdn.kastatic.org/images/avatars/svg/orange-juice-squid.svg" class="pfp"> <h4 class="name">Mushy Avocado</h4> <p class="review">OG programmer and proficient in C#, Node.js, and html/js</p> </div> <div class="judge"> <div class="backdrop"></div> <img src="https://cdn.kastatic.org/images/avatars/svg/aqualine-ultimate.svg" class="pfp"> <h4 class="name">Henry</h4> <p class="review">Former CoC captain and advanced in game design</p> </div> <div class="judge"> <div class="backdrop"></div> <img src="https://cdn.kastatic.org/images/avatars/svg/leaf-blue.svg" class="pfp"> <h4 class="name">Ace Rogers</h4> <p class="review">P.JS master and top Khan Academy game designer </p> </div> </div> <!-- Leaderboard --> <div class="leaderboard"> <h2 class="js-scroll slide-left">Find out which team will prevail. The action starts now!</h2> <div class="to-lead js-scroll fade-in" onClick="javascript:switchPage(3);">To leaderboard <span class="material-symbols-outlined"> keyboard_double_arrow_right </span></div> <div class="lead-cont"> <div class="leader second"> <img id="second-img" class="js-scroll fade-in"> <div class="box"> <h3>2</h3> <p id="second-score"></p> </div> </div> <div class="leader first"> <img id="first-img" class="js-scroll fade-in"> <div class="box"> <h3>1</h3> <p id="first-score"></p> </div> </div> <div class="leader third"> <img id="third-img" class="js-scroll fade-in"> <div class="box"> <h3>3</h3> <p id="third-score"></p> </div> </div> </div> </div> <!-- Reviews --> <div class="reviews"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100vw" height="30vw" style="margin-top:-10vw" preserveAspectRatio="none" viewBox="0 0 1440 560"> <g mask="url("#SvgjsMask1000")" fill="none"> <rect width="1440" height="560" x="0" y="0" fill="rgba(249,175,81)"></rect> <path d="M1464 257L1358 200 1301 306 1408 363z" fill="rgba(230, 151, 55)" class="triangle-float3"></path> <path d="M99 28L101 166 240 164 237 25z" fill="rgba(230, 151, 55)" class="triangle-float3"></path> <path d="M49 228L2 367 140 364 89 225" fill="rgba(230, 151, 55)" class="triangle-float3"></path> <path d="M1499,75C1554,774,1590,726,1615,677C1638,633,1645,583,1621,540C1597.304,495.727,1550.366,470,1499,467C1442,464,1380,475.891,1350,524C1317,575,1325,641,1356,693C1386,744,1440,781,1499,777" fill="rgba(230, 151, 55)" class="triangle-float3"></path> <path d="M1264 148L1281 220 1379 157z" fill="rgba(230, 151, 55)" class="triangle-float2"></path> <path d="M959,414C994,413,1013,378,1030,347C1044,319,1057,287,1041,260C1025,232,991,222,959,223C930,225,905,241,889,266C874,292,870,324,883,351C898,383,924,415,959,414" fill="rgba(230, 151, 55)" class="triangle-float1"></path> <path d="M393 557L395 414 252 411 250 554z" fill="rgba(230, 151, 55)" class="triangle-float2"></path> </g> </svg> <h4 style="margin-top:-25vw">Reviews from</h4> <h3>Past Participants</h3> <div class="reviews-cont"> <div class="review js-scroll fade-in"> <div class="top"> <h3 class="quote">"</h3> <p>TCO really made me make my programs better, so thank you!</p> </div> <div class="bottom"> <img src="https://cdn.kastatic.org/images/avatars/svg/area-52-green.svg"> <h4>Ace</h4> <p>@AceDev</p> </div> </div> <div class="review js-scroll fade-in"> <div class="top"> <h3 class="quote">"</h3> <p>You never lose, you either win, or you learn!</p> </div> <div class="bottom"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/orange-juice-squid.png"> <h4>Doctor137</h4> <p>@Doctor137</p> </div> </div> <div class="review js-scroll fade-in"> <div class="top"> <h3 class="quote">"</h3> <p>It was great to get out there and have some fun with my team.</p> </div> <div class="bottom"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Jumping.png"> <h4>Polar</h4> <p>@notpolar</p> </div> </div> <div class="review js-scroll fade-in"> <div class="top"> <h3 class="quote">"</h3> <p>It was very fun to make some new programs.</p> </div> <div class="bottom"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/aqualine-ultimate.png"> <h4>Henry</h4> <p>@staplecactus764</p> </div> </div> <div class="review js-scroll fade-in"> <div class="top"> <h3 class="quote">"</h3> <p> I had an amazing journey with my teammates!</p> </div> <div class="bottom"> <img src="https://cdn.kastatic.org/images/avatars/svg/duskpin-sapling.svg"> <h4>BirdySC</h4> <p>@BirdySparrowCatcher</p> </div> </div> </div> </div> <!-- Join button --> <div class="join-now"> <h3 style="color:rgb(236,68,52);" class="js-scroll slide-left">The most fun.</h3> <h3 style="color:rgb(247, 141, 27);" class="js-scroll slide-left">The best programmers.</h3> <h3 style="color:rgb(78, 66, 166);" class="js-scroll slide-left">The strongest competition. </h3> <div class="join-btn" onClick="javascript:switchPage(1)">JOIN NOW</div> </div> </div> <!-- Join Page --> <div class="page" id="join"> <div class="join-cont"> <div class="form" id="join-form"> <h3>Let's Get Started</h3> <form> <label for="name">Name</label><br> <input type="text" id="fname" name="firstname" placeholder="Your name.."><br><br> <label for="team">Team</label><br> <select id="team"> <option value="penguins">Program Penguins</option> <option value="bugs">Bug Bashers</option> <option value="bulldogs">Binary Bulldogs</option> </select> <br><br> <label for="level">Level</label><br> <select id="level" name="level"> <option value="0">Beginner</option> <option value="1">Intermediate</option> <option value="2">Advanced</option> </select><br> </form> <div class="submit-btns"> <div id="sign-up" onClick="javascript:authenticateForm();">Sign Up</div> <div id="view-teams" onClick="javascript:switchPage(2);">View Teams</div> </div> <div class="checkbox-cont"> <input type="checkbox" id="check" value="checked"> <p>I agree that Liam K. may move teams around </p> </div> <p id="error-msg"></p> </div> <div class="right"> <!-- Svg credit to Liam K --> <svg viewBox="0 0 100 100" id="shapes"> <rect width="15" height="10" x="20" y="1" fill="#EC4434"></rect> <circle cx="80" cy="60" r="5" fill="#EC4434" /> <rect width="10" height="7" x="25" y="50" fill="#EC4434"></rect> <circle cx="10" cy="70" r="7" fill="#EC4434" /> <rect width="5" height="20" x="60" y="45" fill="#EC4434"></rect> <circle cx="50" cy="10" r="10" fill="#EC4434" /> <path d="M20 28L2 36 20 40" fill="#EC4434"></path> <path d="M80 10L90 20 70 30" fill="#EC4434"></path> <path d="M20 5L10 20 15 0" fill="#EC4434"></path> <path d="M70 70L60 75 80 80" fill="#EC4434"></path> <rect width="10" height="10" x="10" y="70" fill="#EC4434"></rect> <circle cx="40" cy="90" r="5" fill="#EC4434" /> <rect width="15" height="5" x="60" y="90" fill="#EC4434"></rect> <rect width="12" height="12" x="88" y="50" fill="#EC4434"></rect> <circle cx="60" cy="10" r="5" fill="#EC4434" /> </svg> <!-- SVG credit to Undraw.io --> <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 578 578" id="undraw-svg"> <path d="M889,450a287.86052,287.86052,0,0,1-68.09,186.34c-1.6,1.9-3.23,3.77-4.88995,5.63a290.58834,290.58834,0,0,1-67.49,55.99q-8.67,5.205-17.72,9.81c-.61.31-1.23.62-1.84.92-.73.37-1.47.73-2.21,1.09A286.15918,286.15918,0,0,1,679.24,728q-2.55.72-5.11,1.4a288.58782,288.58782,0,0,1-65.84,9.49c-1.16.03-2.3.05-3.4.07-.39.01-.77.02-1.15.02-1.25.01-2.49.02-3.74.02a289.27116,289.27116,0,0,1-69.54-8.43q-3.42-.84-6.81-1.77a285.47262,285.47262,0,0,1-34.97-12.03q-9-3.75-17.68-8.09c-1.31-.66-2.62-1.32-3.91-2-.55-.27-1.09-.56-1.63-.84a290.458,290.458,0,0,1-81.65-64.06c-1.6-1.79-3.17-3.61-4.72-5.44a289.02532,289.02532,0,0,1,49.59-419.1c1.64-1.21,3.29-2.41,4.96-3.58q.49494-.345.99-.69a286.75277,286.75277,0,0,1,97.1-43.85c1.98-.49,3.96-.95,5.96-1.38a291.79785,291.79785,0,0,1,114.68-2.01c1.99.37,3.98.75,5.96,1.16a287.28078,287.28078,0,0,1,97.1,39.43c.66.42,1.32.84,1.98,1.28,1.33.86,2.66,1.74,3.97,2.63A288.68578,288.68578,0,0,1,889,450Z" transform="translate(-311 -161)" fill="rgb(245, 209, 150,1)" /> <path d="M527,599.51l-92.37,8.2-.99.09V213.66q.49494-.345.99-.69a288.32258,288.32258,0,0,1,62.01-32.94l4.72,65.1.43,5.96,4.67,64.56L507.9,335.51l18.93,261.7Z" transform="translate(-311 -161)" fill="rgb(249,175,81,1)" /> <path d="M755.43,206.32c.66.42,1.32.84,1.98,1.28V607.8l-1.98-.18-91.37-8.11.17-2.3L683.16,335.51l1.44-19.86,4.67-64.56.43-5.96,4.95-68.27A287.68677,287.68677,0,0,1,755.43,206.32Z" transform="translate(-311 -161)" fill="rgb(249,175,81,1)" /> <path d="M755.43,206.32V613.26c0,7.81-5.38,14.16-12,14.16H446.63c-5.48,0-10.13-4.36-11.54-10.31a16.10772,16.10772,0,0,1-.46-3.85V212.97q-.495.34506-.99.69c-1.67,1.17-3.32,2.37-4.96,3.58V613.26a22.91864,22.91864,0,0,0,6.18,16,17.05993,17.05993,0,0,0,7.78,4.66,15.11793,15.11793,0,0,0,3.99.53h296.8a15.24855,15.24855,0,0,0,4-.53c7.98-2.15,13.95-10.59,13.95-20.66V210.23c-1.31-.89-2.64-1.77-3.97-2.63C756.75,207.16,756.09,206.74,755.43,206.32Z" transform="translate(-311 -161)" fill="rgb(249,175,81,1)" /> <rect x="120.65518" y="84.13399" width="326.75223" height="5.95901" fill="rgb(249,175,81,1)" /> <path d="M531.73,169.12c1.98-.49,3.96-.95,5.96-1.38V329.55h-5.96Z" transform="translate(-311 -161)" fill="rgb(249,175,81,1)" /> <path d="M652.37,165.73c1.99.37,3.98.75,5.96,1.16V329.55h-5.96Z" transform="translate(-311 -161)" fill="rgb(249,175,81,1)" /> <path d="M795.65,597.21H404.34a26.82,26.82,0,0,0,0,53.64H795.65a26.76039,26.76039,0,0,0,20.12-9.11,27.096,27.096,0,0,0,3.02-4.18,25.54045,25.54045,0,0,0,1.75-3.56,26.80329,26.80329,0,0,0-24.89-36.79Z" transform="translate(-311 -161)" fill="rgb(249,175,81,1)" /> <rect x="122.64151" y="154.6489" width="324.76589" height="19.86336" fill="rgb(249,175,81,1)" /> <path d="M282.04494,148.6899h5.959a10.92484,10.92484,0,0,1,10.92484,10.92484v0a0,0,0,0,1,0,0h-27.8087a0,0,0,0,1,0,0v0a10.92484,10.92484,0,0,1,10.92484-10.92484Z" fill="rgb(249,175,81,1)" /> <path d="M820.91,636.34a289.004,289.004,0,0,1-28.12,28.95H407.21a289.004,289.004,0,0,1-28.12-28.95Z" transform="translate(-311 -161)" fill="#3f3d56" /> <path d="M632.28,536.07H567.36a3.17486,3.17486,0,0,0-1.03.16,3.448,3.448,0,0,0-2.43,3.3V642.09h71.85V539.53A3.46328,3.46328,0,0,0,632.28,536.07Zm-24.57,50.6a7.53127,7.53127,0,0,1-1.56,4.6,7.665,7.665,0,0,1-13.78-4.6v-11.9a7.67033,7.67033,0,0,1,15.34,0Z" transform="translate(-311 -161)" fill="#2f2e41" /> <path d="M563.68,638.81v9.89a1.93971,1.93971,0,0,0,1.93,1.94h68.43a1.94622,1.94622,0,0,0,1.93-1.94v-9.89Z" transform="translate(-311 -161)" fill="#3f3d56" /> <path d="M739.78,376.02H462.28a9.01147,9.01147,0,0,0-9,8.99V572.27a9.0071,9.0071,0,0,0,9,9h277.5a9.00714,9.00714,0,0,0,9-9V385.01A9.01151,9.01151,0,0,0,739.78,376.02Z" transform="translate(-311 -161)" fill="#3f3d56" /> <path d="M737.46,382.52H464.59a4.82046,4.82046,0,0,0-4.81,4.82V569.96a4.81829,4.81829,0,0,0,4.81,4.81H737.46a4.81833,4.81833,0,0,0,4.81-4.81V387.34A4.8205,4.8205,0,0,0,737.46,382.52Z" transform="translate(-311 -161)" fill="#e5e5e5" /> <path d="M687.24,650.48l-2.52-11.97a2.99238,2.99238,0,0,0-1.86-2.17,2.89431,2.89431,0,0,0-1.06-.2H524.49a2.89455,2.89455,0,0,0-1.06.2,2.99262,2.99262,0,0,0-1.86,2.17l-2.52,11.97a2.98724,2.98724,0,0,0,2.92,3.6H684.31a2.94839,2.94839,0,0,0,2.32-1.11A2.98494,2.98494,0,0,0,687.24,650.48Z" transform="translate(-311 -161)" fill="#2f2e41" /> <rect x="214.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="224.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="234.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="244.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="254.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="264.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="274.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="284.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="294.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="304.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="314.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="324.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="334.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="344.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="354.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="364.643" y="477.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="214.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="224.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="234.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="244.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="254.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="264.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="274.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="284.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="294.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="304.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="314.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="324.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3dff" /> <rect x="334.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3dff" /> <rect x="344.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="354.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="364.52484" y="482.29577" width="5" height="3" rx="0.48819" fill="#3f3d56" /> <rect x="262.52484" y="488.29577" width="40" height="3" rx="0.48819" fill="#3fd56" /> <path d="M723.74813,407.67669H468.42477a1.01559,1.01559,0,0,1,0-2.03069H723.74813a1.01559,1.01559,0,0,1,0,2.03069Z" transform="translate(-311 -161)" fill="#3f3d56" /> <ellipse cx="174.80496" cy="233.3788" rx="5.95043" ry="6.08304" fill="#3f3d56" /> <ellipse cx="195.36098" cy="233.3788" rx="5.95043" ry="6.08304" fill="#3f3d56" /> <ellipse cx="215.917" cy="233.3788" rx="5.95043" ry="6.08304" fill="#3f3d56" /> <path d="M711.37,389.8h-14.6a1.1053,1.1053,0,0,0,0,2.21h14.6a1.10511,1.10511,0,0,0,0-2.21Z" transform="translate(-311 -161)" fill="#3f3d56" /> <path d="M711.37,393.95h-14.6a1.10527,1.10527,0,0,0,0,2.21h14.6a1.10508,1.10508,0,0,0,0-2.21Z" transform="translate(-311 -161)" fill="#3f3d56" /> <path d="M711.37,398.1h-14.6a1.1053,1.1053,0,0,0,0,2.21h14.6a1.10511,1.10511,0,0,0,0-2.21Z" transform="translate(-311 -161)" fill="#3f3d56" /> <rect x="171.31411" y="270.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="231.31411" y="270.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="248.31411" y="270.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="187.6343" y="269.79312" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="267.6343" y="269.79312" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="187.31411" y="283.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="247.31411" y="283.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="264.31411" y="283.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="203.6343" y="282.79312" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="283.6343" y="282.79312" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="203.31411" y="296.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="263.31411" y="296.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="280.31411" y="296.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="219.6343" y="295.79312" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="299.6343" y="295.79312" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="219.31411" y="309.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="279.31411" y="309.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="296.31411" y="309.27328" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="235.6343" y="308.79312" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="231.31411" y="360.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="248.31411" y="360.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="267.6343" y="361.44697" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="171.31411" y="360.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="187.6343" y="361.44697" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="187.31411" y="347.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="247.31411" y="347.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="264.31411" y="347.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="203.6343" y="348.44697" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="203.31411" y="334.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="263.31411" y="334.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="280.31411" y="334.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="219.6343" y="335.44697" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="219.31411" y="321.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="279.31411" y="321.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="296.31411" y="321.9668" width="11.00609" height="5.75992" rx="2.87996" fill="#EC4434" /> <rect x="235.6343" y="322.44697" width="38.3657" height="5.75992" rx="2.87996" fill="#EC4434" /> <path d="M726.81,709.77c-.61.31-1.23.62-1.84.92-15.8,7.9-28.43994,12.39-45.73,17.31-1.46-16.3-2.87-44.95-4.24-62.71-.36-4.61-.72-8.48-1.07-11.21a15.1823,15.1823,0,0,0-.88-4.25l.06,4.25.15,11.21.87,64.11a288.58782,288.58782,0,0,1-65.84,9.49c-1.16.03-2.3.05-3.4.07-.39.01-.77.02-1.15.02-1.25.01-2.49.02-3.74.02a289.27116,289.27116,0,0,1-69.54-8.43c.49-16.13.98-44.46,1.45-65.28.1-4.07.19-7.86.29-11.21.19-7.16.39-12.32.58-14.05a4.36108,4.36108,0,0,0-.39.97,97.15388,97.15388,0,0,0-1.89,13.08c-.35,3.35-.7,7.14-1.05,11.21-1.86,21.63-3.8,51.04-5.8,63.51a285.47262,285.47262,0,0,1-34.97-12.03q-9-3.75-17.68-8.09c1.1-7.2,2.25-15.27,3.43-23.64.92-6.49,1.87-13.16,2.84-19.75,1.5-10.18,3.04-20.16,4.6-28.95,2.28-12.84,4.62-23.16,6.94-27.9,2.2-4.5,4.4-8.94,6.53-13.19.74-1.49,1.48-2.96,2.2-4.39.17-.34.34-.67.51-1,1.53-3.01,3.01-5.89,4.42-8.59,1.21-2.31,2.36005-4.49,3.45-6.5,2.64-4.88,4.88-8.77,6.54-11.23a55.25656,55.25656,0,0,1,29.28-22.21l.3-.08.21.09,20.45-6.28,2.99-.92,2.01-.62,7.08-5.39,3.85-2.93,3.61-2.75,7.06-5.37,43.71,2.69,8.51,20.49,19.06,6.97.33-.15.29-.12.3.08a55.306,55.306,0,0,1,29.28,22.21c.93994,1.41,2.08,3.27,3.37,5.52,1.1,1.91,2.3,4.09,3.6,6.5,1.85,3.43005,3.87,7.30005,6.01,11.49.47.92.95,1.86,1.43,2.81q1.335,2.63993,2.71,5.38995c2.13,4.25,4.33,8.69,6.53,13.2,1.91,3.91,3.84,11.95,5.74,22.18,1.57,8.5,3.13,18.52,4.64,28.95,1.98,13.52-.13,29.71,1.66,42.15C726.58,708.23,726.7,709,726.81,709.77Z" transform="translate(-311 -161)" fill="#3f3d56" /> <circle cx="289.61504" cy="288.88825" r="50.83645" fill="#a0616a" /> <path d="M684.45,382.52a26.60846,26.60846,0,0,0-3.97-6.5c-7.72-9.43-21.76-13.58-36.17-2.42a15.27875,15.27875,0,0,0-8.35.48,12.91024,12.91024,0,0,0-3.52,1.94,15.97041,15.97041,0,0,0-4.94,6.5,15.52156,15.52156,0,0,0-1.1,4.23,50.56537,50.56537,0,0,0-11.23-4.23,60.33992,60.33992,0,0,0-29.13,0,36.54359,36.54359,0,0,0-8.78,3.48c-4.68,2.7-7.37,6.11-7.85,9.9-6.75.38-13.77,3.93-19,9.75-.59.65-1.16,1.33-1.69,2.03A32.70853,32.70853,0,0,0,542,427.73V429h1.27a26.87038,26.87038,0,0,1,10.15,1.98,27.58525,27.58525,0,0,1,5.89,3.25,28.764,28.764,0,0,1,3.37,2.8,33.48321,33.48321,0,0,1,6.12,8.05,37.4595,37.4595,0,0,1,4.08,24.71,36.19955,36.19955,0,0,1-1.52,5.76,37.58443,37.58443,0,0,1-3.71,7.63c-.06.09-.11.18-.17.27-.67,1.07-1.31,2.16-1.91,3.26-.45.82-.87,1.66-1.26,2.5a51.95669,51.95669,0,0,0-2.88,7.24,53.58646,53.58646,0,0,0-2.44,13.54c-.07,1.22-.09,2.44-.05,3.66a51.97943,51.97943,0,0,0,1.03,9.36005c.09.42.18005.83.27,1.25l.73,3.19,1.73,7.61,1.2,5.24,1.11,4.86,1.64-2.35c.56-.8,1.97-3.26,3.86-6.74,1.25-2.27,2.7-4.98,4.27-7.94,2.18994-4.15,4.59-8.78,6.93994-13.4.95-1.87,1.89-3.73,2.80005-5.55,1.72-3.45,3.34-6.78,4.73-9.74,1.28-2.73,2.37-5.15,3.18-7.09.25,1.27.46,2.56.62,3.86.18,1.32.31,2.66.38,4,.02.2.03.41.04.61005l.04.82.01.24,1.06.14a93.02194,93.02194,0,0,0,18.4.14h.01a74.86185,74.86185,0,0,0,23.56-5.71,49.25718,49.25718,0,0,0,11.8-7.24,41.3,41.3,0,0,0,4.66-4.52c.36-.41.71-.82,1.05-1.24a41.12455,41.12455,0,0,0,5.05-7.9,41.80164,41.80164,0,0,0,2.34-5.76c3.84-11.63,3.62-26.14-.66-43.38a9.923,9.923,0,0,0,3.27-1.26c3.14-1.88995,5.32-5.63995,6-10.22l1.08.29a30.104,30.104,0,0,0,10.01-7.54,24.11545,24.11545,0,0,0,1.54-2.03C687.58,398.45,687.62,389.81,684.45,382.52Z" transform="translate(-311 -161)" fill="#241C5C" /> <polygon points="206.32 475.296 214.817 442.504 222.32 470.8 206.32 475.296" opacity="0.2" /> <path d="M743.43,614.93c-3.04,41.88.11,60.32-16.67,94.85A286.15918,286.15918,0,0,1,679.24,728q-2.55.72-5.11,1.4a288.58782,288.58782,0,0,1-65.84,9.49c-1.16.03-2.3.05-3.4.07-.39.01-.77.02-1.15.02-1.25.01-2.49.02-3.74.02a289.27116,289.27116,0,0,1-69.54-8.43q-3.42-.84-6.81-1.77a285.47262,285.47262,0,0,1-34.97-12.03q-9-3.75-17.68-8.09c-1.31-.66-2.62-1.32-3.91-2-6.63-11.66-10.4-25.84-10.48-42.88C461.2,634.44,733.29,589.61,743.43,614.93Z" transform="translate(-311 -161)" fill="#2f2e41" /> <path d="M743.42212,622.10217c.15527-2.59271.32886-5.27093.53131-8.05987-10.14-25.32-282.23,19.51-286.82,48.87.01264,2.69184.12775,5.30414.32129,7.85456C468.57031,641.78857,727.05945,599.18054,743.42212,622.10217Z" transform="translate(-311 -161)" opacity="0.2" /> <path d="M474.09552,503.15162a6.36455,6.36455,0,0,0-6.75274-6.81562,5.8541,5.8541,0,0,0-1.00507.12575l-39.7621,8.98257a6.54762,6.54762,0,0,0-4.20873,3.23509,8.18371,8.18371,0,0,0-1.72738.25112,9.66133,9.66133,0,0,0,4.2714,18.84464,9.79394,9.79394,0,0,0,3.89453-1.88439l13.474,37.9406a6.3285,6.3285,0,0,0,6.941,3.04646l25.84869-5.84179A6.41623,6.41623,0,0,0,480,555.31982Zm-49.78137,21.92253a6.91049,6.91049,0,0,1-3.0779-13.47385c.12556-.03144.25132,0,.37688-.03144a6.50647,6.50647,0,0,0,.84807,3.26634l4.93085,8.60569A6.50519,6.50519,0,0,1,424.31415,525.07415Z" transform="translate(-311 -161)" fill="#241C5C" /> <path d="M467.34278,496.336c.37688,5.02535-8.22881,10.80427-19.75539,13.09716-10.58459,2.16714-20.06959.65944-22.73936-3.29777a6.02524,6.02524,0,0,1,1.72758-.69107l39.7621-8.98257A5.8541,5.8541,0,0,1,467.34278,496.336Z" transform="translate(-311 -161)" fill="#3f3d56" /> <path d="M439.84333,623.90524,462.177,612.73843l-18.6114-50.25079-4.90493-25.342a19.16137,19.16137,0,0,0-31.28219-10.90731h0a19.16136,19.16136,0,0,0-2.49251,26.51833l18.20719,22.75891Z" transform="translate(-311 -161)" fill="#a0616a" /> <path d="M462.177,603.43273l-29.77821,14.889,22.59854,70.80908A30.9768,30.9768,0,0,0,477.333,709.84721h0a30.97681,30.97681,0,0,0,33.73743-14.197l59.92487-102.71393a31.62026,31.62026,0,0,0-10.19564-42.982h0a31.62037,31.62037,0,0,0-45.29613,12.76511l-36.576,77.93632Z" transform="translate(-311 -161)" fill="#3f3d56" /> <path d="M452.9668,539.44141a.49632.49632,0,0,1-.1626-.02735l-6.50147-2.23828a.49923.49923,0,0,1-.20556-.81055l4.83545-5.26464a.49972.49972,0,1,1,.73633.67578l-4.31885,4.70215,5.77929,1.99023a.49991.49991,0,0,1-.16259.97266Z" transform="translate(-311 -161)" fill="#ec4434" /> <path d="M461.87842,537.61719a.5.5,0,0,1-.34766-.85938l4.39453-4.249-5.90332-2.43262a.49963.49963,0,1,1,.38086-.92383l6.60938,2.72364a.49951.49951,0,0,1,.15722.82129l-4.94336,4.77929A.49966.49966,0,0,1,461.87842,537.61719Z" transform="translate(-311 -161)" fill="#ec4434" /> <path d="M454.33154,542.5a.48228.48228,0,0,1-.147-.02246.49976.49976,0,0,1-.33105-.625l4.61474-15a.50026.50026,0,0,1,.95606.29492l-4.61475,15A.50035.50035,0,0,1,454.33154,542.5Z" transform="translate(-311 -161)" fill="#ec4434" /> </svg> </div> </div> </div> <!-- Teams Page --> <div class="page" id="teams"> <div class="team-header" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/5/57/Country-road-autumn-mountain-sunset_-_Virginia_-_ForestWander.jpg');"> <div class="text-box"> <h4>Team</h4> <h3>Binary Bulldogs</h3> <p>The leanest and meanest team, the Bulldogs are ready to smash the competiton and blaze to TCO glory.</p> <div class="join-now" onClick="javascript:switchPage(1)">Join now <span class="material-symbols-outlined">keyboard_double_arrow_right </span></div> </div> <div class="image-cont"> <img src="https://www.khanacademy.org/computer-programming/new-program/6522737220304896/latest.png"> </div> </div> <div class="team-cont" id="bulldogs"></div> <div class="team-header" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/7/7b/Wild_Flowers_%2816322421533%29.jpg');"> <div class="text-box"> <h4>Team</h4> <h3>Bug Bashers</h3> <p>With a sting as powerful as their versatile programming skills, the Bug Bashers will squash the other teams.</p> <div class="join-now" onClick="javascript:switchPage(1)">Join now <span class="material-symbols-outlined">keyboard_double_arrow_right </span></div> </div> <div class="image-cont"> <img src="https://www.khanacademy.org/computer-programming/new-program/5329725127573504/latest.png"> </div> </div> <div class="team-cont" id='bugs'></div> <div class="team-header" style="background-image:url('https://upload.wikimedia.org/wikipedia/commons/9/9b/Aurora_borealis_above_Lyngenfjorden%2C_2012_March.jpg');"> <div class="text-box"> <h4>Team</h4> <h3>Program Penguins</h3> <p>While the Program Penguins might always keep their cool, they are the hottest programmers this summer. </p> <div class="join-now" onClick="javascript:switchPage(1)">Join now <span class="material-symbols-outlined">keyboard_double_arrow_right </span></div> </div> <div class="image-cont"> <img src="https://www.khanacademy.org/computer-programming/new-program/5235102132649984/latest.png"> </div> </div> <div class="team-cont" id="penguins"></div> </div> <!-- Challenges Page --> <div class="page" id="challenges"> <div class="challenge-cont"> <div class="challenge red"> <h3>Homepage Challenge</h3> <p>Use HTML or PJS to design a unique homepage for your team. The top entry from each team will become the Team Captain.</p> </div> <div class="challenge blue"> <h3>Challenge One</h3> <p>Summer is just getting started, so make a program around your favorite summer experience. Animation is key to success!<br><br>Theme: Summer Animation</p> </div> <div class="challenge yellow"> <h3>Second Challenge</h3> <p>Tires squeal...engines roar, and if you're lucky, you cross the finish line in one piece! Time for some high speed fun.<br><br>Theme: The Race Is On!</p> </div> <div class="challenge red"> <h3>Third Challenge</h3> <p>Create something breathtakingly realistic OR build a program that takes you into a world unknown and mystical.<br><br>Theme: Real or Unreal</p> </div> <div class="challenge blue"> <h3>Grand Finale</h3> <p>Work with your team to create two highly detailed programs each worth 30 points. Teamwork is the key to victory.<br><br>Theme: Teamwork!</p> </div> </div> </div> <!-- Leaderboard Page --> <div class="page" id="lead"> <div class="leaderboard"> <h2>Leaderboard</h2> <div class="lead-cont"> <div class="leader second"> <img id="second-img2"> <div class="box"> <h3>2</h3> <p id="second-score2"></p> </div> </div> <div class="leader first"> <img id="first-img2"> <div class="box"> <h3>1</h3> <p id="first-score2"></p> </div> </div> <div class="leader third"> <img id="third-img2"> <div class="box"> <h3>3</h3> <p id="third-score2"></p> </div> </div> </div> </div> </div> <!-- Scrolling animations - Stolen from Voldemort --> <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.1)) { el.classList.add("scrolled"); } else if (!elementIsInView(el)) { el.classList.remove("scrolled"); } }); } window.addEventListener("scroll", handleScrollAnimation); })(); </script> <!-- Scene change script--> <script type> //Handles the hiding/showing of pages var switchPage = function(index) { var pages = document.getElementsByClassName("page"); //Hide all pages document.querySelectorAll('.page').forEach(function(p) { p.style.display = 'none'; p.style.opacity = 1; }); //show the current page pages[index].style.display = "block"; //Remove active class from all nav items document.querySelectorAll('.menu-bar').forEach(function(n) { n.classList.remove('active'); }) //Add active class for the current page document.getElementsByClassName("menu-bar")[index].classList.add('active'); window.scrollTo({ top: 0, behavior: 'smooth' }); }; //Display the home page when the site loads switchPage(0); </script> <!-- Menu script --> <script> function toggleNav() { document.getElementById("menu-nav").classList.toggle("open"); } </script> <!-- Join script --> <script> function copyStringToClipboard(str) { // Create new element var el = document.createElement('textarea'); // Set value (string to be copied) el.value = str; // Set non-editable to avoid focus and move outside of view el.setAttribute('readonly', ''); el.style = { position: 'absolute', left: '-9999px' }; document.body.appendChild(el); // Select text inside element el.select(); // Copy text to clipboard document.execCommand('copy'); // Remove temporary element document.body.removeChild(el); } function authenticateForm() { if (document.getElementById("check").checked) { if (document.getElementById("fname").value === "") { document.getElementById("error-msg").innerHTML = "Error: Enter a name"; } else { let joinCode = "{\n name: '" + document.getElementById("fname").value + "',\n team: '" + document.getElementById("team").value + "',\n level: " + document.getElementById("level").value + ",\n points: 0,\n},"; copyStringToClipboard(joinCode); document.getElementById("join-form").innerHTML = "<h4>Thank you</h4><h3>For Your Response</h3><p> Your join form has been copied to your clipboard. Please head down to the T&T and use CTRL + V to paste your response into the join thread. <br><br>Afterwards, subscribe to the News thread and then go say hello to your team.</p>"; } } else { document.getElementById("error-msg").innerHTML = "Error: Agree to Terms"; } } </script> <!-- Participants script --> <script> var participants = [{ name: 'kiaantolia', team: 'penguins', level: 2, points: 0, }, { name: 'TD Overlord', team: 'penguins', level: 0, points: 5.3, }, { name: 'VVhiteTiger', team: 'penguins', level: 1, points: 6.6 + 6.1 + 4.9, }, { name: 'Raaga', team: 'penguins', level: 0, points: 0, }, { name: 'BlåhajCoder', team: 'penguins', level: 0, points: 3.8 + 4.8, }, { name: 'snow', team: 'bugs', level: 0, points: 0, }, { name: 'Universe Games', team: 'bulldogs', level: 1, points: 0, }, { name: 'TechSquidy', team: 'bulldogs', level: 0, points: 0, }, { name: 'Wort-Head', team: 'bugs', level: 1, points: 0, }, { name: 'MiNi_MeGuLiTe', team: 'bulldogs', level: 2, points: 0, }, { name: 'im bob', team: 'bugs', level: 0, points: 0, }, { name: 'LeaferStudios', team: 'bugs', level: 2, points: 5.9 + 7.8, }, { name: 'Rainbow Lava', team: 'bulldogs', level: 0, points: 3.9 + 4.1, }, { name: 'JLE', team: 'bulldogs', level: 0, points: 6.1 + 6.1 + 6.4, }, { name: 'THE BEHEMOTH', team: 'bugs', level: 1, points: 4.2, }, { name: 'TDJ', team: 'bulldogs', level: 1, points: 5.7 + 4.7, }, { name: 'JSCoder', team: 'bugs', level: 0, points: 6.2 + 7.2 + 5.4, }, { name: 'LJE', team: 'penguins', level: 1, points: 8.5 + 5.5 + 6.8, }, { name: 'Trenton', team: 'bugs', level: 0, points: 5.6 + 1.8, }, { name: 'Avenger', team: 'bulldogs', level: 1, points: 4.9 + 5.7 + 5.2, }, { name: 'Blazing Meteor / Tuba', team: 'penguins', level: 0, points: 0, }, { name: 'Yokiebob', team: 'bugs', level: 1, points: 4.2 + 8.2 + 7.7, }, { name: 'n o b o d y i s d a g o a t', team: 'bulldogs', level: 0, points: 0, }, { name: 'Boiling point', team: 'penguins', level: 1, points: 3.1 + 3.5 + 5.2, }, { name: 'Shadowpower Panther', team: 'penguins', level: 1, points: 3.1, }, { name: 'Kalabii', team: 'bulldogs', level: 0, points: 0, }, { name: 'TJJ2008', team: 'bugs', level: 0, points: 0, }, { name: 'Lily', team: 'bugs', level: 1, points: 0, }, { name: 'ASBackup', team: 'penguins', level: 2, points: 0, }, { name: 'emvalle10', team: 'penguins', level: 0, points: 2.8, }, { name: 'Serenity', level: 0, points: 0, team: "penguins", }, { name: 'Ani', team: 'penguins', level: 0, points: 0, }, { name: 'Digits and Kineto', team: 'bugs', level: 1, points: 5.3, }, { name: 'windawine', team: 'bugs', level: 1, points: 4.5 + 5 + 3.5, }, { name: '-A--I-', team: 'bulldogs', level: 1, points: 4.4 + 4.6, }, { name: 'Peregrine', team: 'penguins', level: 1, points: 6.8 + 6.3, }, { name: 'Leo2009', team: 'bulldogs', level: 1, points: 0, }, { name: 'Arrow', team: 'bugs', level: 2, points: 6, }, { name: 'Animator101', team: 'bugs', level: 2, points: 4.8, }, { name: 'WinstonWinner', team: 'bulldogs', level: 2, points: 0, }, { name: 'Hurtin', team: 'bulldogs', level: 2, points: 7.1, }, { name: '21262', team: 'bulldogs', level: 1, points: 0, }, { name: 'Yaksh ', team: 'bulldogs', level: 0, points: 0, }, { name: 'Pineapples', team: 'penguins', level: 1, points: 0, }, { name: 'The Coding Speedster', team: 'bugs', level: 0, points: 3.2, }, { name: 'FROSTED', team: 'bulldogs', level: 0, points: 3.4, }, { name: 'RedRaven9', team: 'penguins', level: 1, points: 3.3, }, { name: 'LT', team: 'bugs', level: 1, points: 3.2, }, { name: 'lucia', team: 'bulldogs', level: 0, points: 0, }, { name: 'Sparky', team: 'bugs', level: 1, points: 6.8, }, { name: 'OP_Hero', team: 'bugs', level: 0, points: 0, }, { name: 'The Former Wizard of Oz', team: 'bulldogs', level: 0, points: 3.2 + 4.3 + 7.1, }, { name: 'Fer Fer', team: 'penguins', level: 1, points: 5.8, }, { name: 'Sourbread', team: 'penguins', level: 0, points: 0, }, { name: 'Mindque blast', team: 'penguins', level: 2, points: 6.8 + 6.5 + 6.3, }, { name: 'Curiosity', team: 'penguins', level: 0, points: 0, }, { name: 'Nightwaves Studios', team: 'bugs', level: 1, points: 4.8 + 6.2, },{ name: 'sugar', team: 'bugs', level: 1, points: 3.8 +4.7, },{ name: 'Cpark2031', team: 'bugs', level: 1, points: 0, }, { name: 'CanonRouge24', team: 'penguins', level: 2, points: 7.2, }, { name: 'cwalsh1223', team: 'bugs', level: 0, points: 0, }, { name:'StormDragon', team: 'bugs', level: 0, points: 0, }, { name: 'Arctic Fox', team: 'penguins', level: 1, points: 8 + 6.2, }, { name: 'panda', team: 'bulldogs', level: 0, points: 2.9 + 5.6 + 3, }, { name: 'NL', team: 'penguins', level: 1, points: 7.8 + 4.3, }, { name: 'The Reviewer ', team: 'bugs', level: 1, points: 4.9 + 6.2, }, { name: 'inSYNC', team: 'bulldogs', level: 1, points: 0, }, { name:'Kayden Ganus', team:'bulldogs', level:0, points:0, }, { name: 'Fireball', team: 'bugs', level: 1, points: 4.6 + 5.7 + 5, }, { name: 'Lightning Driver Esq.', team: 'bulldogs', level: 1, points: 0, }, { name: 'Falling Dragon', team: 'bulldogs', level: 1, points: 0, }, { name: 'Van-Houston', team: 'bulldogs', level: 2, points: 3.2, }, { name: 'Jadie', team: 'penguins', level: 2, points: 8.4, }, { name: 'Vetri R', team: 'bugs', level: 0, points: 2.1 + 4.5 + 3.4, }, { name: 'Eternal Progress', team: 'penguins', level: 0, points: 7.8, }, ]; for (var i = 0; i < participants.length; i++) { let img, lvl; switch (participants[i].team) { case "bulldogs": img = "https://www.khanacademy.org/computer-programming/new-program/6522737220304896/latest.png" break; case "penguins": img = "https://www.khanacademy.org/computer-programming/new-program/5235102132649984/latest.png" break; case "bugs": img = "https://www.khanacademy.org/computer-programming/new-program/5329725127573504/latest.png" break; } switch (participants[i].level) { case 0: lvl = "Beginner" break; case 1: lvl = "Intermediate" break; case 2: lvl = "Advanced" break; } var div = document.getElementById(participants[i].team); div.innerHTML += '<div class="participant"><div class="img"></div><img src="' + img + '"><h3 class="name">' + participants[i].name + '</h3><p><i>' + lvl + '</i><br>Points: ' + participants[i].points + '</p><div class="icons"><span class="material-symbols-outlined">code</span><span class="material-symbols-outlined">manufacturing</span><span class="material-symbols-outlined">subtitles</span></div>'; } </script> <!-- Leaderboard script --> <script> var scores = [{ score: 80.0 + 21.6 + 44.6, team: "Bulldogs", path: "https://www.khanacademy.org/computer-programming/new-program/6522737220304896/latest.png" }, { score: 113.9 + 52.4 + 33.5, team: "Penguins", path: "https://www.khanacademy.org/computer-programming/new-program/5235102132649984/latest.png" }, { score: 131.7 + 40.8 + 42.3, team: "Bees", path: "https://www.khanacademy.org/computer-programming/new-program/5329725127573504/latest.png" } ].sort(function(a, b) { return (b.score - a.score) }); //display the team images document.getElementById("first-img").src = scores[0].path; document.getElementById("second-img").src = scores[1].path; document.getElementById("third-img").src = scores[2].path; document.getElementById("first-img2").src = scores[0].path; document.getElementById("second-img2").src = scores[1].path; document.getElementById("third-img2").src = scores[2].path; //display the scores document.getElementById("first-score").innerHTML = scores[0].score; document.getElementById("second-score").innerHTML = scores[1].score; document.getElementById("third-score").innerHTML = scores[2].score; document.getElementById("first-score2").innerHTML = scores[0].score; document.getElementById("second-score2").innerHTML = scores[1].score; document.getElementById("third-score2").innerHTML = scores[2].score; </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; var s = document.documentElement.clientWidth; window.parent.html2canvas = e => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, onclone: e => e.getAnimations().forEach(a => { try { a.finish() } catch {} }) }).then(e => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext('2d').drawImage(e, 0, 0, e.width, e.height, 0, 0, r, r); window.top.postMessage(c.toDataURL(), ""); }).catch(e => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage(document.createElement("canvas").toDataURL(), ""); } }; </script> </body> </html>
Folds	54,72,75,191,194,785,788,986,989,1159,1162,1226,1229,1343,1346,1423,1426,1480,1487,1523,1526,1805,1808,1974,1977,2017,2020,2044,2047,2075,2078,2100,2103,2134,2137,2141,2144,2178,2181,2662,2705,2732
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJvwrNW5Cww
Votes	109
Spin-Offs	1
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"4810038945955840","title":"Contest: Celebrations - HTML Submissions","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Liam K.
Author Name	liamk.ka
Author ID	kaid_160653079463992085090428
Author Profile Access	PUBLIC

Archive Data

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