Viewing Program

Program Data

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

Title	Roosters \| Codaru 2025
ID	6523760347824128
Created	5 days ago, 1744564832437
Updated	5 days ago, 1744567828598
Code	<!DOCTYPE html> <!-- Created by Washington for Codaru 2025 Features: -Somewhat responsive design -Intersection observer API for scroll animations. -ES6 Javascript Syntax -Gallery Special Thanks: -Wikipedia -Mozilla Dev Network -SVG Repo -Voldemort --> <html> <head> <meta charset="utf-8"> <title>Roosters \| Codaru 2025</title> <!-- Importing Font --> <link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet"> <!-- Material icons --> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@1" rel="stylesheet" /> <!-- Setup --> <style> /* ---Setup--- / { margin:0; padding:0; } :root { --background-color-one:rgb(252, 249, 202); --background-color-two:rgb(255, 253, 242); --text-color: rgb(196, 111, 6); --darker-text-color: rgb(135, 78, 8); --highlight-color: rgb(255, 71, 71); } body { background-color:var(--background-color-one); font-size:18px; font-family:"Roboto",system-ui; overflow-x:hidden; } ::-webkit-scrollbar { background-color:var(--background-color-two); width:8px; } ::-webkit-scrollbar-thumb { background-color:var(--background-color-one); width:8px; } h1, h2 { color:var(--darker-text-color); } h3, h4, h5, h6, p { color:var(--text-color); } em, strong, a { color:var(--highlight-color); } @keyframes float { 50% { transform:translateY(-5%); } } .round-img { width:33vw; height:33vw; border-radius:50%; margin:20px; animation:float 3s infinite ease-in-out; box-shadow: 0 0 20px; transition:box-shadow 0.3s; } .round-img:hover { box-shadow: 0 0 10px; } .material-symbols-outlined { vertical-align:middle; } .icon-btn { background:transparent; color:var(--text-color); width:50px; height:50px; border:solid 3px var(--text-color); border-radius:50%; transition:0.5s; } .icon-btn:hover { background:rgba(0,0,0,0.2); transform:scale(1.1); cursor:pointer; } .section { width:100%; min-height:100vh; } .jumbo { padding:3%; } .jumbo h1, .jumbo h2, .jumbo p { margin:20px 20px; } @keyframes fadeUp { from{ opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeRight { from{ opacity:0; transform:translateX(-100px); } to { opacity:1; transform:translateX(0); } } @keyframes fadeLeft { from{ opacity:0; transform:translateX(100px); } to { opacity:1; transform:translateX(0); } } .scrollE { opacity:0; } .scrolled.u { animation:fadeUp 1s ease; animation-fill-mode:forwards; } .scrolled.r { animation:fadeRight 1s ease; animation-fill-mode:forwards; } .scrolled.l { animation:fadeLeft 1s ease; animation-fill-mode:forwards; } </style> <!-- Hero --> <style> .hero { background-color:inherit; display:flex; } .hero-header{ font-size:5vw; margin:25% 10vw; z-index:2; } .broken-image { position:absolute; border:20px solid var(--background-color-one); background-color: var(--background-color-one); background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/60/Rooster_portrait2.jpg); background-repeat:no-repeat; z-index:2; } @keyframes drop-down { from { transform:translateY(-50%); opacity:0; } to { transform:translateY(0%); opacity:1; } } #bi-1 { width: 200px; height:200px; top:13vh; /* 80px / left:58vw; / 270px / background-size:150%; animation:drop-down 1s; } #bi-2 { width: 160px; height:160px; top:calc(13vh + 163px); left:calc(58vw + 115px); background-size:162%; background-position:-98px -135px; animation:drop-down 2s; } #bi-3 { width: 140px; height:140px; top:calc(13vh + 224px); left:calc(58vw - 18px); background-size:162%; background-position:40px -164px; animation:drop-down 3s; } .hero button { position:absolute; top:83vh; left:45%; } .bubble { background-color: rgba(255, 71, 71,0.5); position:absolute; z-index:1; } </style> <!-- Index --> <style> .contents { background-color: var(--background-color-two); padding-top:100px; } #index-header { font-size:60px; transform:rotate(-90deg); position:absolute; left:-150px; top:150vh; } .index-btn { display:flex; align-items:center; justify-content:space-around; margin-left:30%; width:70%; height:60px; vertical-align:middle; border-bottom:2px solid var(--text-color); border-top:2px solid var(--text-color); transition:0.5s; } @keyframes hover { 0% { transform:translateY(0); } 33% { transform:translateY(-5px); } 67% { transform:translateY(5px); } 100% { transform:translateY(0); } } .index-btn:hover { cursor:pointer; background-color:rgba(0,0,0,0.05); --icon-animation:hover 1s infinite; } .index-btn svg { animation:var(--icon-animation); } .index-btn .number { color:var(--highlight-color); } #disclaimer { font-family:monospace; font-size:15px; width:300px; margin-left:200px; margin-top:130px; } </style> <!-- Facts --> <style> .fact-card { background-color: var(--background-color-two); width:70%; margin:3%; padding:10px; border:3px solid var(--darker-text-color); border-radius:10px; } </style> <!-- Gallery --> <style> #gallery { background-image: linear-gradient(to right, rgb(255, 255, 0), rgb(199, 136, 68)); height:100vh; text-align:center; padding:10px; } #cur-img { background:var(--background-color-one); background-size:cover; width:80%; height:60%; border-radius:20px; margin:5% 10%; } </style> </head> <body> <main> <!-- Page Hero --> <div class = "hero section"> <!-- Heading --> <div class = "hero-header scrollE r"> <h1>Roosters</h1> <p>From beak to tail</p> </div> <!-- Image --> <div> <!-- Broken Image--> <div class = "broken-image" id = "bi-1"></div> <div class = "broken-image" id = "bi-2"></div> <div class = "broken-image" id = "bi-3"></div> </div> <!-- Continue Button --> <button class = "icon-btn" onClick = "javascript:moveScroll('index');">arrow_downward</button> </div> <!-- Contents --> <div class = "contents section"> <h1 id = "index-header">Table of Contents</h1> <!-- Content Cards --> <div class = "index-btn" onClick = "javascript:moveScroll('intro');"> <h1 class = "number">01</h1> <h3>Introduction</h3> <svg height="30px" width="30px" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"> </g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#FFF0B4;" d="M255.973,45.511c-78.421,0-142.222,63.801-142.222,142.222s63.801,142.222,142.222,142.222 s142.222-63.801,142.222-142.222S334.394,45.511,255.973,45.511z"></path> <path style="fill:#FFE98F;" d="M255.973,329.956c78.421,0,142.222-63.801,142.222-142.222S334.394,45.511,255.973,45.511"></path> <path style="fill:#FFF8DA;" d="M58.084,324.267C68.851,429.667,153.51,512,256.027,512s187.176-82.333,197.944-187.733 L347.05,278.756l-91.022,45.511l-102.4-45.511L58.084,324.267z"></path> <path style="fill:#FFD6A0;" d="M256.027,512c102.517,0,187.176-82.333,197.944-187.733L347.05,278.756l-91.022,45.511"></path> <path style="fill:#F285B9;" d="M421.556,123.49C384.631,46.164,322.731,0,255.973,0S127.313,46.164,90.388,123.49l-3.512,7.355 l100.829-34.133l68.267,34.133l68.267-34.133l100.829,34.133L421.556,123.49z"></path> <path style="fill:#EE5DA2;" d="M255.973,130.844l68.267-34.133l100.829,34.133l-3.511-7.355C384.631,46.164,322.731,0,255.973,0"></path> <path style="fill:#FFC170;" d="M408.165,396.144c-7.887,5.679-18.689,13.456-38.415,13.456s-30.528-7.778-38.415-13.456 c-6.289-4.528-9.753-7.024-18.47-7.024c-8.72,0-12.184,2.495-18.475,7.024c-7.889,5.68-18.693,13.456-38.419,13.456 s-30.53-7.777-38.419-13.456c-6.291-4.528-9.756-7.024-18.475-7.024c-8.717,0-12.181,2.494-18.471,7.024 c-7.887,5.679-18.689,13.456-38.416,13.456s-30.53-7.778-38.417-13.456c-6.29-4.528-9.754-7.024-18.472-7.024 c-4.093,0-7.022,0.556-9.636,1.609C107.485,462.312,176.336,512,255.973,512c79.635,0,148.486-49.687,180.305-121.269 c-2.615-1.054-5.547-1.611-9.642-1.611C417.919,389.12,414.455,391.614,408.165,396.144z"></path> <path style="fill:#FF9811;" d="M255.973,512c79.635,0,148.486-49.687,180.305-121.269c-2.615-1.054-5.547-1.611-9.642-1.611 c-8.717,0-12.181,2.494-18.47,7.023c-7.888,5.679-18.69,13.456-38.416,13.456s-30.528-7.778-38.415-13.456 c-6.289-4.528-9.753-7.024-18.47-7.024c-8.72,0-12.184,2.495-18.475,7.024c-7.889,5.68-18.693,13.456-38.419,13.456"></path> <g> <circle style="fill:#50412E;" cx="199.088" cy="182.044" r="17.067"></circle> <circle style="fill:#50412E;" cx="312.866" cy="182.044" r="17.067"></circle> </g> <path style="fill:#FFAD41;" d="M227.528,238.933c0-15.709,12.735-28.444,28.444-28.444s28.444,12.735,28.444,28.444l-28.444,18.963 L227.528,238.933z"></path> <path style="fill:#FF9811;" d="M255.973,210.489c15.709,0,28.444,12.735,28.444,28.444l-28.444,18.963"></path> <path style="fill:#F285B9;" d="M346.995,278.756l-91.022,45.511l-102.4-45.511l-95.544,45.511 c1.199,11.736,3.319,23.183,6.274,34.265c5.666-2.098,12.502-3.545,21.001-3.545c19.727,0,30.529,7.778,38.416,13.457 c6.29,4.528,9.755,7.023,18.472,7.023c8.717,0,12.181-2.494,18.471-7.023c7.886-5.679,18.688-13.457,38.415-13.457 c19.728,0,30.531,7.777,38.419,13.457c6.291,4.528,9.756,7.023,18.475,7.023c8.719,0,12.184-2.495,18.475-7.023 c7.888-5.679,18.691-13.457,38.419-13.457c19.726,0,30.528,7.778,38.415,13.457c6.289,4.528,9.753,7.023,18.47,7.023 s12.181-2.494,18.47-7.023c7.887-5.679,18.689-13.457,38.416-13.457c8.503,0,15.34,1.448,21.007,3.548 c2.955-11.082,5.074-22.53,6.274-34.268L346.995,278.756z"></path> <path style="fill:#EE5DA2;" d="M255.972,375.467c8.72,0,12.184-2.495,18.475-7.023c7.888-5.679,18.691-13.457,38.419-13.457 c19.726,0,30.528,7.778,38.415,13.457c6.289,4.528,9.753,7.023,18.47,7.023s12.181-2.494,18.47-7.023 c7.887-5.679,18.689-13.457,38.416-13.457c8.503,0,15.34,1.448,21.007,3.548c2.955-11.082,5.074-22.53,6.274-34.268l-106.922-45.511 l-91.022,45.511"></path> </g></svg> </div> <div class = "index-btn" onClick = "javascript:moveScroll('facts');"> <h1 class = "number">02</h1> <h3>Fun Facts</h3> <svg height="36px" width="36px" viewBox="0 0 512 512" fill="#000000"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <polygon style="fill:#FFAD41;" points="237.57,512 187.733,512 187.733,477.867 206.163,477.867 210.548,425.249 244.563,428.084 "></polygon> <polygon style="fill:#FFAD41;" points="324.267,512 274.43,512 267.437,428.084 301.452,425.249 305.837,477.867 324.267,477.867 "></polygon> </g> <path style="fill:#FFDA44;" d="M290.133,22.756c-8.12,0-15.799,1.908-22.627,5.286C259.038,11.42,241.766,0,221.867,0h-11.378 v34.133h11.378c9.411,0,17.067,7.656,17.067,17.067v45.511h34.133V73.956c0-9.411,7.656-17.067,17.067-17.067h11.378V22.756H290.133 z"></path> <path style="fill:#FFE98F;" d="M344.181,320.57c-20.918-15.156-46.483-21.261-71.996-17.184 c-25.509,4.076-47.905,17.839-63.061,38.758l-10.012,13.821l128.13,92.834c5.753,4.168,12.503,6.326,19.385,6.326 c3.138,0,6.306-0.449,9.415-1.362c9.908-2.908,17.745-10.084,21.502-19.69C393.573,393.09,379.854,346.416,344.181,320.57z"></path> <path style="fill:#FFF0B4;" d="M302.876,342.146c-15.156-20.919-37.552-34.684-63.061-38.758 c-25.512-4.076-51.079,2.028-71.996,17.184c-35.674,25.846-49.392,72.519-33.363,113.501c3.758,9.606,11.594,16.782,21.502,19.69 c3.11,0.914,6.277,1.362,9.415,1.362c6.882,0,13.634-2.158,19.385-6.326l128.131-92.834L302.876,342.146z"></path> <path style="fill:#FFDA44;" d="M256,250.311c-53.327,0-96.711,43.385-96.711,96.711s43.385,96.711,96.711,96.711 s96.711-43.385,96.711-96.711S309.327,250.311,256,250.311z"></path> <path style="fill:#FFF0B4;" d="M256,68.267c-78.421,0-142.222,63.801-142.222,142.222S177.579,352.711,256,352.711 s142.222-63.801,142.222-142.222S334.421,68.267,256,68.267z"></path> <path style="fill:#FFE98F;" d="M256,352.711c78.421,0,142.222-63.801,142.222-142.222S334.421,68.267,256,68.267"></path> <g> <circle style="fill:#50412E;" cx="199.111" cy="204.8" r="17.067"></circle> <circle style="fill:#50412E;" cx="312.889" cy="204.8" r="17.067"></circle> </g> <path style="fill:#FFAD41;" d="M227.556,273.067c0-15.709,12.734-28.444,28.444-28.444c15.709,0,28.444,12.735,28.444,28.444 L256,292.03L227.556,273.067z"></path> <path style="fill:#FF9811;" d="M256,244.622c15.709,0,28.444,12.735,28.444,28.444L256,292.03"></path> </g></svg> </div> <div class = "index-btn" onClick = "javascript:moveScroll('gallery');"> <h1 class = "number">03</h1> <h3>Gallery</h3> <svg width="36px" height="36px" viewBox="0 0 512 512" aria-hidden="true" preserveAspectRatio="xMidYMid meet" fill="#000000"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#E7EDF1" d="M256 66.299c-93.73 0-169.713 81.729-169.713 175.459v230.865C92.758 484.747 105.528 493 120.229 493c14.702 0 27.472-8.253 33.943-20.376C160.643 484.747 173.413 493 188.115 493s27.472-8.253 33.943-20.376C228.528 484.747 241.298 493 256 493c14.063 0 26.343-7.561 33.048-18.828C295.754 485.439 308.034 493 322.096 493c14.702 0 27.472-8.253 33.943-20.376h1.789C364.299 484.747 377.069 493 391.77 493c14.702 0 27.472-8.253 33.943-20.376V241.759c0-93.73-75.983-175.46-169.713-175.46z"></path><path fill="#2B3B47" d="M189.904 219.001v33.621h-.05c0 .05.05.068.05.094c0 13.204-10.713 23.916-23.916 23.916c-13.204 0-23.916-10.713-23.916-23.916v-.094h-.102v-33.621h.288c1.067-12.247 11.204-21.884 23.731-21.884c12.492 0 22.629 9.637 23.68 21.884h.235zm179.892 0c-1.052-12.247-11.188-21.884-23.68-21.884c-12.527 0-22.663 9.637-23.731 21.884h-.288v33.621h.102v.094c0 13.204 10.713 23.916 23.916 23.916s23.916-10.713 23.916-23.916c0-.026-.05-.043-.05-.094h.05v-33.621h-.235z"></path><path fill="#FF473E" d="M276.742 335.293l.425 1.208l1.122 3.414l1.607 5.305c.594 2.049 1.245 4.36 1.914 6.881a334.563 334.563 0 0 1 2.068 8.142c.715 2.889 1.394 5.936 2.107 9.087c.672 3.152 1.381 6.408 2.019 9.717c.68 3.309 1.267 6.671 1.895 10.033c.571 3.362 1.17 6.723 1.682 10.033c.501 3.309 1.05 6.566 1.445 9.718c.401 3.152.692 6.198.881 9.087c.167 2.889.274 5.62.263 8.142c.013 2.521-.089 4.833-.215 6.881c-.142 2.049-.319 3.834-.524 5.305c-.385 2.942-.835 4.622-.835 4.622c-5.412 20.212-26.184 32.21-46.396 26.799c-13.529-3.622-23.388-14.187-26.799-26.799c0 0-.45-1.681-.835-4.622c-.205-1.471-.382-3.257-.524-5.305c-.126-2.049-.229-4.36-.215-6.881c-.011-2.521.096-5.253.263-8.142c.189-2.889.48-5.936.881-9.087c.396-3.152.944-6.408 1.445-9.718c.512-3.309 1.111-6.671 1.682-10.033c.627-3.362 1.214-6.723 1.895-10.033c.638-3.309 1.348-6.566 2.019-9.717c.713-3.152 1.392-6.198 2.107-9.087c.687-2.889 1.402-5.62 2.068-8.142a316.832 316.832 0 0 1 1.914-6.881l1.607-5.305l1.122-3.414l.425-1.208c4.026-11.456 16.576-17.478 28.032-13.453c6.51 2.287 11.3 7.427 13.455 13.453zm-25.367-206.252c5.4 2.554 11.848.248 14.402-5.152c0 0 .172-.363.448-1.043c.279-.68.699-1.678 1.159-2.948c.485-1.27 1.049-2.812 1.635-4.581c.589-1.769 1.23-3.765 1.861-5.942a176.902 176.902 0 0 0 1.922-7.03c.638-2.495 1.26-5.125 1.841-7.847c.306-1.361.583-2.744.856-4.144c.286-1.4.555-2.818.8-4.246c.533-2.857.967-5.76 1.443-8.663c.423-2.903.874-5.806 1.229-8.663c.39-2.857.703-5.669 1.01-8.391c.286-2.721.539-5.352.742-7.847c.199-2.495.367-4.853.483-7.03c.242-4.354.32-7.983.318-10.523c-.011-2.54-.078-3.991-.078-3.991c-.638-12.961-11.047-23.666-24.274-24.274c-14.054-.647-25.97 10.221-26.617 24.274c0 0-.067 1.451-.078 3.991c-.002 2.54.076 6.168.318 10.523c.116 2.177.284 4.536.483 7.03c.203 2.495.456 5.125.742 7.847c.307 2.721.62 5.533 1.01 8.391c.355 2.857.807 5.76 1.229 8.663c.476 2.903.91 5.806 1.443 8.663c.245 1.429.514 2.846.8 4.246c.273 1.4.55 2.784.856 4.144a202.112 202.112 0 0 0 1.841 7.847c.63 2.495 1.275 4.853 1.922 7.03a157.515 157.515 0 0 0 1.861 5.942c.586 1.769 1.15 3.311 1.635 4.581c.461 1.27.88 2.268 1.159 2.948c.276.68.448 1.043.448 1.043a10.795 10.795 0 0 0 5.151 5.152z"></path><path fill="#FFB636" d="M176.614 301.21c0-12.324 35.542-11.484 79.386-11.484s79.386-.84 79.386 11.484S282.75 353.441 256 353.441s-79.386-39.907-79.386-52.231z"></path><path fill="#FFD833" d="M335.386 298.438c0 12.391-35.542 17.579-79.386 17.579s-79.386-5.188-79.386-17.579S229.25 247.759 256 247.759s79.386 38.288 79.386 50.679z"></path></g></svg> </div> <div class = "index-btn" onClick = "javascript:moveScroll('foot');"> <h1 class = "number">04</h1> <h3>Footnotes</h3> <svg width="36px" height="36px" viewBox="0 0 64 64" aria-hidden="true" preserveAspectRatio="xMidYMid meet" fill="#000000"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M7.6 20.4c1.8 2.9 3.8 3.3 5.2 1.6c2.2-2.6-.2-5.9-2.8-6.8c-4.3-1.7-8 3.1-8 3.1s4.1-.4 5.6 2.1" fill="#f29a2e"> </path> <path d="M42.8 10.2c-7.7 4.5-1.3 15.3-15.2 18.2l14.8 7.3c3 5.2 11.3 5.6 11.3 5.6s2.1-6.2.4-10.8c4.6 0 7.8-2.8 7.8-2.8s-2.6-9.2-10.5-9.2c7.8-3.2 9.2-9.8 9.2-9.8s-6.9-4.8-17.8 1.5" fill="#e1eaf2"> </path> <path d="M35.7 62H21.4c0-1.2 8.4-1.4 8.8-9.4c1.3 8.9 5.5 8.2 5.5 9.4" fill="#f4bc58"> </path> <g fill="#d1dce6"> <path d="M49.4 30.6c0 11.5-9.4 23.3-21 23.3s-21-11.8-21-23.3c0-7.7 16.6-2.3 21-2.3c11.6-.1 21-9.3 21 2.3"> </path> <path d="M36.4 49.2c0 2.3-3.3 7.3-6.2 7.3c-2.9 0-6.2-3.4-6.2-5.7c0-2.3 12.4-2.7 12.4-1.6"> </path> </g> <path d="M6.5 26.3c0 3 .6 11.7.6 11.7l2.7-3.4l3.2 3.8l.7-5.3l4.9 3.5l-.9-5.2l5.9.6l-2.7-3.2l4.1-2.7s-5 1.1-4.9-2c.1-3.1 2.6-11.9-.5-13.2c-5.7-2.1-13.1 2.7-13.1 15.4" fill="#e1eaf2"> </path> <g fill="#3e4347"> <ellipse cx="6.5" cy="16.1" rx=".7" ry=".3"> </ellipse> <circle cx="11.5" cy="16.7" r="1.5"> </circle> </g> <g fill="#e24b4b"> <path d="M7.8 23.6c0 3.2-2.1.9-2.1.9c-.7 0-3.6 2.2-2.6-1.5c1.3-4.8 6.3-8 6.3-8s-1.6 2.8-1.6 8.6"> </path> <path d="M20.8 10.6V9.4c-.2-2.5 3.4-3.5 3-4.8c-.6-1.7-5.3-.6-7.6 3.1c-.3.4-.5.9-.6 1.5c-.1-.4-.2-.8-.4-1.2c-1.1-2.3 2.2-4.4 1.2-5.5c-1.3-1.5-5.2 1.1-6.1 5.4c-.2.9-.2 1.8.1 2.7c-.1-.1-.2-.2-.3-.2c-1.7-1.3 0-4-1.2-4.6c-1.8-.8-3.4 2.8-2.5 6.3c.6 2 2.8 4.1 4.6 2.4c.6-.5 2-1.3 2.8-1.6c.6-.2 2.2-.1 3.2.6c.9.6 1.6 1.8 2.9 1.8c5.7.2 8.8-5.3 6.7-6.5c-1.1-.8-2.8 1.2-5.8 1.8"> </path> </g> <path d="M42.5 43.9c-.9-2.2-3.5-3.4-3.5-3.4c2.7-1.4 4.3-4.4 4.3-4.4c-1.4-.6-6.8-1-6.8-1c1.2-1.2 2.2-2.9 2.2-2.9s-6.2-1.5-11.4 1.3c-6.8 3.8-4.8 12.8 2.9 13.8c8.5 1.1 12.3-3.4 12.3-3.4" fill="#e1eaf2"> </path> </g></svg> </div> <!-- Disclaimer --> <p id = "disclaimer">NOTICE: Even though I attempted to conserve peak accuracy, this website may contain misinformation. Please double-check anything that seems fishy (and even things that don't).</p> </div> <!-- Intro --> <div class = "section jumbo" id = "intro"> <h1>Introduction</h1> <img class = "round-img" style = "float:right" src = "https://upload.wikimedia.org/wikipedia/commons/f/f8/Rooster04_adjusted.jpg"> <p class = "scrollE u">The <strong>chicken</strong> (<em>Gallus gallus domesticus</em>) is a large and round short-winged bird, domesticated from the <strong>red junglefowl</strong> of <strong>Southeast Asia</strong>. Most chickens are raised for food, providing meat and eggs; others are kept as pets or for <strong>cockfighting</strong>.</p> <p class = "scrollE u"><strong>Chickens</strong> are common and widespread domestic animals, with a total population of <strong>26.5 billion as of 2023</strong>, and an annual production of more than <strong>50 billion birds</strong>. A male's crowing is a loud and sometimes <strong>shrill call</strong>, serving as a <strong>territorial signal</strong> to other males. There are numerous cultural references to chickens and roosters in <strong>folklore, religion, and literature</strong>.</p> <p class = "scrollE u">Adult <strong>chickens</strong> of both sexes have a <strong>fleshy crest</strong> on their heads called a <strong>comb</strong> or <strong>cockscomb</strong>, and hanging flaps of skin on either side under their beaks called <strong>wattles</strong>; combs and wattles are <strong>more prominent in males</strong>. Some breeds have a mutation that causes extra feathering under the face, giving the appearance of a <strong>beard</strong>.</p> </div> <!-- Fun Facts --> <div class = "section jumbo" style = "background-color:var(--background-color-two);" > <h1>Fun Facts</h1> <!-- Fact cards --> <div class = "fact-card scrollE l" > <h2>Crowing Contests</h2> <p>Roosters <strong>will sometimes compete</strong> to see who can crow the loudest or longest, using their voices to establish dominance.</p> </div> <div class = "fact-card scrollE r" style = "margin-left:20%;"> <h2>Excellent Memory</h2> <p>Roosters have excellent memory and can distinguish between <strong>individual hens</strong> and other roosters.</p> </div> <div class = "fact-card scrollE l" > <h2>Sun Compasses</h2> <p>Roosters can navigate <strong>using the position of the sun</strong>, helping them find their way back to familiar territory. </p> </div> <div class = "fact-card scrollE r" style = "margin-left:20%;"> <h2>Pecking Order Enforcers</h2> <p>In a flock, roosters often <strong>help maintain order</strong> by breaking up fights among hens and keeping social structures balanced. </p> </div> </div> <!-- Gallery --> <div id = "gallery"> <h1>Gallery</h1> <div id = "cur-img"></div> <button id = "backbtn" class = "icon-btn" onClick = "javascript:backImg();">arrow_back</button> <button id = "nextbtn" class = "icon-btn" onClick = "javascript:nextImg();">arrow_forward</button> </div> <!-- Footnotes --> <div class = "section jumbo"> <h1>Footnotes and Credits</h1> <div class = "fact-card scrollE u"> <h2>WikiPedia</h2> <p>Most of the information about chickens on this website was taken from <a href = "https://en.wikipedia.org/wiki/Chicken">Wikipedia</a>.</p> </div> <div class = "fact-card scrollE u" style = "margin-left:20%;"> <h2>Mozilla Developer Network</h2> <p>Excelent source of information and docs. In this case I used it to understand better the Intersection Observer API for the on-scroll animations.</p> </div> <div class = "fact-card scrollE u"> <h2>SVG Repo</h2> <p>For all their free svgs used in this page. (Specifically at the index).</p> </div> <div class = "fact-card scrollE u" style = "margin-left:20%;"> <h2>Voldemort</h2> <p>Sort of inspiration.</p> </div> <div class = "fact-card scrollE u"> <h2>Washington (the author)</h2> <p>HEYY! What am I doing here??</p> </div> <img class = "round-img" src = "https://upload.wikimedia.org/wikipedia/commons/c/cb/Thomas_Cheesman_-_General_Washington_-_B1970.3.669_-_Yale_Center_for_British_Art.jpg"> <p>The end. :)</p> </div> </main> <!-- Main Script --> <script type> //Adding material-symbols class to every icon-btn let iconBtns = document.getElementsByClassName("icon-btn"); for (let i = 0; i < iconBtns.length; i++) { iconBtns[i].classList.add("material-symbols-outlined"); } //Creating particles in hero for(let i = 0; i < 45; i++) { let b = document.createElement("div"); b.classList.add("bubble"); let size = Math.random()10+3+"px"; b.style.width = size; b.style.height = size; b.style.top = Math.random()100+"vh"; b.style.left = Math.random()100+"vw"; document.getElementsByClassName("hero")[0].appendChild(b); } //Content scrolling const moveScroll = (to) => { var yScroll; switch(to) { case "index": yScroll = 600; break; case "top": yScroll = 0; break; case "intro": yScroll = 1300; break; case "facts": yScroll = 1915; break; case "gallery": yScroll = 2800; break; case "foot": yScroll = 3500; break; } window.scroll({top:yScroll,behavior:"smooth"}); }; //Gallery stuff const images = [ "https://upload.wikimedia.org/wikipedia/commons/1/17/Gallus_gallus_domesticus_-_Zwarte_Poolsche_Haan_1869.jpg", "https://upload.wikimedia.org/wikipedia/commons/9/9d/Chicken_on_the_grounds_of_Melville_Castle.jpg", "https://upload.wikimedia.org/wikipedia/commons/1/12/G._gallus_domesticus%2C_Neuss_%28DE%29_--_2022_--_0248.jpg", "https://upload.wikimedia.org/wikipedia/commons/c/c1/Gallus_gallus_domesticus_-_Vogelpark_Steinen_03.jpg" ]; let curImage = 0; document.getElementById("cur-img").style.backgroundImage = "url("+images[0]+")"; const backImg = () => { curImage--; if(curImage < 0) { curImage = 3; } document.getElementById("cur-img").style.backgroundImage = "url("+images[curImage]+")"; } const nextImg = () => { curImage++; if(curImage > 3) { curImage = 0; } document.getElementById("cur-img").style.backgroundImage = "url("+images[curImage]+")"; } </script> <!-- Scroll Animations --> <script type> //callback function for elements intersecting the viewport const callback = (entries) => { entries.forEach((entry) => { if(entry.isIntersecting) { entry.target.classList.add("scrolled"); } else { entry.target.classList.remove("scrolled"); } }); }; //options for observer API const options = { root: null, rootMargin: "0px", threshold: 0.2, }; //the observer const observer = new IntersectionObserver(callback, options); //observing scrollEls let scrollEls = document.getElementsByClassName("scrollE"); Array.from(scrollEls).forEach(el => observer.observe(el)); </script> <!-- The Thumbnail Script 2.0.0 10/24/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, }).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	33,195,198,275,278,352,355,370,373,394,402,422,425,467,470,481,484,510,513,521,524,563,568,649,652,683,687,709
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIeRtarLCww
Votes	24
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Washington 🐓
Author Name	SnowFalcon
Author ID	kaid_701855056246665520276831
Author Profile Access	PUBLIC

Archive Data

Added	4 days ago, 1744686037278
Updated	4 days ago, 1744686037278
Source Deleted	unknown