Viewing Program

Program Data

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

Title	Primavera 2024
ID	5108786677858304
Created	9 months ago, 1710785711806
Updated	9 months ago, 1710989659603
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Primavera 2024</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Carter+One&family=Rowdies&family=Inter:wght@100..900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body> <style> * { user-select: none; } @keyframes poof { from { transform: scale(15); opacity: 0; } } @keyframes fade { 0% { opacity: 0; } 40% { opacity: 0; } } @keyframes up { 0% { transform: translateY(500px); opacity: 0; } 40% { transform: translateY(500px); opacity: 0; } } @keyframes down { 0% { transform: translateY(-500px); opacity: 0; } } .center { display: flex; justify-content: center; } body { background-image: linear-gradient(45deg, #e56b6f62, #eee5e9), url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Cherry_Blossom_in_El_Retiro_Park%2C_Madrid%2C_Spain.jpg/640px-Cherry_Blossom_in_El_Retiro_Park%2C_Madrid%2C_Spain.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; color: #355070; height: 97.3vh; display: flex; justify-content: center; font-family: "inter", sans-serif; font-weight: 500; overflow: hidden; } h2 { color: #355070; margin-top: 5%; margin-bottom: 0; font-family: "Carter One", serif; width: 100%; text-align: center; font-size: 5rem; } h1 { font-family: "Carter One", serif; width: 100%; text-align: center; font-size: 3rem; animation: down 0.5s ease; } .letters { display: flex; } h2 div:nth-child(1) { animation: poof 0.2s ease; } h2 div:nth-child(2) { animation: poof 0.22s ease; } h2 div:nth-child(3) { animation: poof 0.24s ease; } h2 div:nth-child(4) { animation: poof 0.26s ease; } h2 div:nth-child(5) { animation: poof 0.28s ease; } h2 div:nth-child(6) { animation: poof 0.3s ease; } h2 div:nth-child(7) { animation: poof 0.32s ease; } h2 div:nth-child(8) { animation: poof 0.34s ease; } h2 div:nth-child(9) { animation: poof 0.36s ease; } .home-nav { display: flex; justify-content: center; text-align: center; font-weight: 400; } .home-nav span { padding: 0.5rem 2.2rem; font-weight: 500; animation: up 1s ease; transition: 0.4s ease; } .home-nav span:hover:nth-child(even) { transform: scale(1.2) rotate(3deg); cursor: pointer; } .home-nav span:hover:nth-child(odd) { cursor: pointer; transform: scale(1.2) rotate(-3deg); } .t0t4 { margin: 0; color: #6d597a; font-family: "Rowdies", serif; text-align: center; font-size: 1.2rem; animation: fade 1s ease; } .page p, img { animation: fade 1s ease; } .head { background: #b0c6ce4a; padding: 1rem 2rem 3rem 2rem; border-radius: 8px; margin-bottom: 12%; margin-top: 20%; } p { font-weight: 400; font-size: 1rem; text-align: center; padding: 1rem 4rem; } img { width: 180px; height: 180px; } nav { position:fixed; font-size:2rem; padding:0.8rem; display:flex; flex-direction:column; right:0; animation: fade 1s ease; } nav span { padding:0.5rem; } nav:hover { cursor: pointer; } </style> <div class="page"> <div class="head"> <h2 class="letters"> <div>P</div> <div>r</div> <div>i</div> <div>m</div> <div>a</div> <div>v</div> <div>e</div> <div>r</div> <div>a</div> </h2> <p class="t0t4">~ 2024 ~</p> </div> <div class="home-nav"> <span onClick="changePage(1)">About</span> <span onClick="changePage(2)">Members</span> <span onClick="changePage(3)">Rankings</span> </div> <div class="home-nav"> <span onClick="changePage(4)">Teams</span> <span onClick="changePage(5)">Challenges</span> </div> </div> <div class="page"> <nav> <span onClick="changePage(0)"> <i class="fa fa-home"></i></span> <span onClick="changePage(1)"><i class="fa fa-question-circle"></i></span> <span onClick="changePage(2)"><i class="fa fa-user-circle-o"></i></span> <span onClick="changePage(3)"><i class="fa fa-bar-chart"></i></span> <span onClick="changePage(4)"><i class="fa fa-steam"></i></span> </nav> <h1>About</h1> <p> Primavera is back for the fifth time in a row.<br /> If you haven't already signed up, sign up now before it's too late! (Joining is open in the T&T)<br /> <br /> This year Primavera will consist of 6 main challanges, each usually lasting about 2-3 weeks. For each challenge there will be a given theme to which the participants aim to follow to score between 1-10 points for thier respective team. Scoring will be based on 5 key factors, theme, complexity of code, efficiency/cleanliness of code, creativity and design.<br /> <br /> <b>New structure</b><br /> Due to a growing inactivty on KA in the recent years, after the 4th challenge the 4 teams will merge into 2. The team in 1st will pair with 4th place at the time and 2nd with 3rd. </p> </div> <div class="page"> <nav> <span onClick="changePage(0)"> <i class="fa fa-home"></i></span> <span onClick="changePage(1)"><i class="fa fa-question-circle"></i></span> <span onClick="changePage(2)"><i class="fa fa-user-circle-o"></i></span> <span onClick="changePage(3)"><i class="fa fa-bar-chart"></i></span> <span onClick="changePage(4)"><i class="fa fa-steam"></i></span> </nav> <h1>Members</h1> <p style="font-size: 5rem;">N/A</p> </div> <div class="page"> <nav> <span onClick="changePage(0)"> <i class="fa fa-home"></i></span> <span onClick="changePage(1)"><i class="fa fa-question-circle"></i></span> <span onClick="changePage(2)"><i class="fa fa-user-circle-o"></i></span> <span onClick="changePage(3)"><i class="fa fa-bar-chart"></i></span> <span onClick="changePage(4)"><i class="fa fa-steam"></i></span> </nav> <h1>Rankings</h1> <p style="font-size: 5rem;">N/A</p> </div> <div class="page"> <nav> <span onClick="changePage(0)"> <i class="fa fa-home"></i></span> <span onClick="changePage(1)"><i class="fa fa-question-circle"></i></span> <span onClick="changePage(2)"><i class="fa fa-user-circle-o"></i></span> <span onClick="changePage(3)"><i class="fa fa-bar-chart"></i></span> <span onClick="changePage(4)"><i class="fa fa-steam"></i></span> </nav> <h1>Teams</h1> <p>Being the 5th year of this contest, the hosts have decided to bring back the 4 winning teams avatars from the previous years to see which team truly prevails</p> <div class="center"> <img src="https://www.khanacademy.org/computer-programming/aviconazul-ultimate/4781098813308928/latest.png" /> <img src="https://www.khanacademy.org/computer-programming/aequor-ultimate/6651724308987904/latest.png" /> </div> <div class="center"> <img src="https://www.khanacademy.org/computer-programming/spin-off-of-pyroach/4801464705400832/latest.png" /> <img src="https://www.khanacademy.org/computer-programming/terratrice/5387890211864576/latest.png" /> </div> </div> <div class="page"> <nav> <span onClick="changePage(0)"> <i class="fa fa-home"></i></span> <span onClick="changePage(1)"><i class="fa fa-question-circle"></i></span> <span onClick="changePage(2)"><i class="fa fa-user-circle-o"></i></span> <span onClick="changePage(3)"><i class="fa fa-bar-chart"></i></span> <span onClick="changePage(4)"><i class="fa fa-steam"></i></span> </nav> <h1>Challenge</h1> <p><b>First Challenge</b><br><br> Teams may began working on a team homepage, either html or pjs; together as a team/with someone else/individually. The creator/s (or team vote) of the winning design in each team will vote/get picked as the captain of the team. After the deadline the entries submitted will be scored (Submission thread will open on Saturday the 23rd) and the top 3 teams will earn points (15,10,5 points respectively). This challenge is NOT mandatory due to the short deadline(March 25th) </p> </div> <script> //es6 was too buggy on KA var pages = document.getElementsByClassName("page"); function changePage(e) { for (var i = 0; i < pages.length; i++) { pages[i].style.display = "none"; } pages[e].style.display = "block"; window.scrollTo(0, 0); } changePage(0); </script> <!-- thumbnail.js --> <script type="thumbnail.js" name="thumbnail"> const img = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Cherry_Blossom_in_El_Retiro_Park%2C_Madrid%2C_Spain.jpg/640px-Cherry_Blossom_in_El_Retiro_Park%2C_Madrid%2C_Spain.jpg") draw = () => { clear() imageMode(0) image(img, 0, 0, 900, 600) rectMode(1) fill(238, 229, 233,150) rect(300,300,600,600) fill(53, 80, 112,100) stroke(250) strokeWeight(3) rect(300, 300, 500, 200, 5) fill(250) noStroke() textAlign(1, 1) textFont("Rowdies", 90) text("Primavera", 300, 300) } </script> <canvas style="display: none;" name="ski"></canvas> <script src="https://cdn.jsdelivr.net/gh/thelegendski/ski.js@1.8.14/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/thelegendski/ski.js@1.8.14/addons/print.js"></script> <script src="https://cdn.jsdelivr.net/gh/thelegendski/thumbnail.js@1.1.2/main.js"></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKu5oc2JCQw
Votes	86
Spin-Offs	15
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Astro
Author Name	astro.ka
Author ID	kaid_4391100538307580650220212
Author Profile Access	PUBLIC

Archive Data

Added	9 months ago, 1710787124675
Updated	9 months ago, 1711062204536
Source Deleted	unknown