Viewing Program

Program Data

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

Title	Spark Tutoring (New)
ID	5223254299426816
Created	4 months ago, 1725029279749
Updated	4 months ago, 1725120752361
Code	<!DOCTYPE html> <!-- Here's the new Spark Tutoring page! Anyone and everyone can join! :D Credits: Boazon: Menu page styling Student page styling ZL_PIZZA: Lesson page styling About page styling Ace Rogers: Results page styling Tutors page styling Scrollbar styling Footer styling SparkyGreen: Matrix background function (slightly changed by Ace Rogers and XL_PIZZA) LeaferStudios: Navbar function & styling Bluebird: Thumbnail script --> <html> <head> <meta charset="utf-8"> <title>Spark Tutoring (New)</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Bebas+Neue\|Raleway:400,500,600\|Tomorrow:400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> <!-- Scrollbar styling (Ace Rogers) --> <style> ::-webkit-scrollbar { width: 13px; } ::-webkit-scrollbar-track { background-color: rgb(15, 15, 15); } ::-webkit-scrollbar-thumb { background-color: rgb(0, 255, 0); border: solid 3px rgb(15, 15, 15); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgb(100, 255, 100); cursor: Row-resize; } ::-webkit-scrollbar-thumb:active { background: rgb(0, 200, 0); cursor: Row-resize; } </style> <!-- Main styling (Ace Rogers) --> <style> body { background-color: rgb(15, 15, 15); overflow-x: hidden; margin: 0px; min-height: 563px;/* Added this to fix a small background issue with the thumbnail. / } .header { color: rgb(0, 255, 0); text-align: center; font-family: Tomorrow; font-size: 55px; } </style> <!-- Menu styling (Boazon) --> <style> #menu-content { color: rgb(41, 255, 41); text-align: center; font-size: 1.3em; font-family: Lato; padding-bottom: 180px; } #top-menu { font-family: Inter; } #menu-content .review { margin: 0px 15%; align-content: center; height: 133px; } #menu-content .review img { float: left; } #menu-content .review div { height: 90%; text-align: start; padding-left: 10px; align-content: center; } #menu-content .review em::before { content: "- "; } </style> <!-- Side Nav styling (Credit to LeaferStudios) --> <style> #sideNav { / Set the height to cover the entire viewport / height: 100%; / Initially, the side navigation is hidden / width: 0; / Position the sidenav relative to the viewport / position: fixed; / Ensure the sidenav stays on top of other elements / z-index: 1000; / Align the sidenav to the top of the viewport / top: 0; / Align the sidenav to the left of the viewport / left: 0; / Dark background color for the sidenav / background-color: #333333; / Right border line / border-right: solid 2px #00FF00; / Hide any content that overflows horizontally / overflow-x: hidden; / Smooth transition for the sidenav width / transition: width 0.5s; / Add padding at the top to accommodate a fixed navbar / padding-top: 60px; } #sideNav a { / Set padding for the links inside the sidenav / padding: 15px 20px; / Remove underlines from the links / text-decoration: none; / Set the font size for the links / font-size: 20px; / Set the default text color for the links / color: #00FF00; / The font / font-family: "Inter"; / Display the links as block elements / display: block; / Smooth transition for link text color / transition: color 400ms; / Smooth transition for the link background color / transition: background-color 600ms; } #sideNav a:hover { / Change the background color on hover / background-color: #00FF00; / Change the text color on hover / color: #000000; } #sideNav .closeBtn { / Position the close button relative to its containing element / position: absolute; / Align the close button to the top of the sidenav / top: 0; / Align the close button to the right side with a small margin / right: 0px; / Set the font size for the close button / font-size: 25px; } #openBtn { / Positioning the menu button / position: absolute; / Makes the menu button stay at the top / top: 0; / Makes the menu button stay 13px away from the left side of the canvas / left: 13px; / The color and font-size of the menu button / color: #FFFFFF; font-size: 40px; / Changes the cursor to pointer / cursor: pointer; / Smooth transition for the color / transition: 500ms; z-index: 999; } #openBtn:hover { / Makes the menu button a yellow when hovered on / color: #00FF00; } </style> <!-- Results styling (Ace Rogers) --> <style> #results { color: rgb(0, 255, 0); / Set a width to the whole table / width: 90%; / Make it so there aren't gaps in between the boxes / border-collapse: collapse; / Give it some space from the edges of the canvas / margin: 5%; } #results td, #results th { / Makes the text inside the boxes be in the center / text-align: center; / Change the font / font-family: "Inter"; / Gives the boxes a solid 2 pixel black border / border: solid 2px rgb(0, 255, 0); / Give it some padding / padding: 10px; } .result-link { / Makes the link text color black instead of blue / color: rgb(0, 255, 0); / Change the underline thinkness / text-decoration: underline 2px; / The speed of the transition / transition: 200ms; } .result-link:hover { / Change the link text color to red when hovered over / color: Red; } .grade { / Makes the grade text color red / color: Red; / Gives it a nice 3 pixel solid red border / border: solid 3px Red; / Makes the border edges curve / border-radius: 30px; / Give it some padding so the text isn't right up against the border / padding: 3px 7px 3px 7px; } </style> <!-- Tutors styling (Ace Rogers) --> <style> .tutor-container { background-color: rgb(0, 255, 0, 0.5); width: 60%; color: rgb(0, 255, 0); border: solid 3px rgb(0, 255, 0, 0.7); border-radius: 10px; padding: 20px; margin: 60px; margin-left: 16%; transition: 300ms; } .tutor-container:hover { box-shadow: 0px 0px 30px rgb(0, 255, 0); transform: scale(1.1); cursor: pointer; } .tutor-container h4 { font-family: Inter; } .tutor-name { color: rgb(0, 255, 0); text-align: center; font-family: Inter; } .tutor-name a { color: rgb(0, 255, 0); text-decoration: underline 2px; } .skills { font-family: Raleway; } .rank { color: rgb(0, 0, 0); text-align: center; font-size: 12px; font-family: Ubuntu; font-weight: Bold; text-decoration: underline 2px rgb(0, 255, 0); margin-top: -17px; } </style> <!-- Student page styling (Boazon) --> <style> #students-page { padding: 0px 15%; padding-bottom: 5px; } .student-card { width: 100%; min-height: 130px; border-radius: 4px; border: rgb(73, 250, 78) 5px solid; margin-bottom: 15px; } .student-card img { float: left; border-right: rgb(73, 250, 78) 5px solid; border-bottom: rgb(73, 250, 78) 5px solid; padding-right: 5px; margin-right: 5px; width: 130px; } .student-card p { color: rgb(0, 250, 46); font-family: "Inter"; font-size: 1.2em; margin-left: 5px; margin-bottom: 5px; } </style> <!-- Background Matrix styling (XL_PIZZA) --> <style> / The real "styling" is done in the: <!-- #bgMatrixCanvas --> <script> ... </script> / #bgMatrixCanvas { / Fix the canvas / position: fixed; / top: 0px / top: 0; / left: 1% of canvas width / left: 1%; / Color for fall back text / color: white; / Put it in the background / z-index: -1; } </style> <!-- About styling (XL_PIZZA) --> <style> #aboutText { / Width of the about tablet thingy / width: 60%; / Add some space between the tablet's sides and text / padding: 10%; / Put the about tablet in the middle with spacing at the top. (Even tho the 5% is setting both top & bottom margin, the top is the only one really affected. Honestly I don't know if this is best but it seems to work...) / margin: 5% auto; / Create the super cool background. XP / background: linear-gradient( 45deg, / Rotate the gradient / transparent, / Transparent-ness / #00cc0063, / The darker green is slightly transparent / transparent / More transparent-ness / ); / Round the sharp edges / border-radius: 3px; / Cuz IT IS COOL! / / x-offset: 0px y-offset: 0px blur-radius: 10px spread-radius: 5px color: #00FF00 / box-shadow: 0px 0px 10px 5px #00FF00; / Center the text / text-align: center; / Color the text / color: #00FF00; / Font the text / font-family: Bebas Neue; / Make the text a little blury / / x-offset: 0px y-offset: 0px blur-radius: 10px color: #00cc00 / text-shadow: 0px 0px 10px #00cc00; / Smooth scale transitioning / transition: 0.15s; } #aboutText:hover { / Scale when hovered upon / transform: scale(1.05); } </style> <!-- Lessons styling (XL_PIZZA) --> <style> @keyframes bobbing { / 50% into the animation do: / 50% { / Move whatever up by 3% / transform: translateY(-3%); } / 100% into the animation do: / 100% { / Move whatever back to it's original y / transform: translateY(0%); } } .coolTablet { / The width for each tablet / width: 38%; / Add some space between the tablet's sides and text / padding: 5px; / Put the tablets evenly in the middle. (Even tho the 5% is setting both top & bottom margin, the top is the only one really affected. Honestly I don't know if this is best but it seems to work...) / margin: 5% auto; / Create the super cool background. XP / background: linear-gradient( 45deg, / Rotate the gradient / transparent, / Transparent-ness / #00cc0063, / The darker green is slightly transparent / transparent / More transparent-ness / ); / Round the sharp edges / border-radius: 3px; / Cuz IT IS COOL! / / x-offset: 0px y-offset: 0px blur-radius: 10px spread-radius: 5px color: #00FF00 / box-shadow: 0px 0px 10px 5px #00ff00; / Smooth scale transitioning / transition: scale 0.15s; } .coolTablet:hover { / Scale when hovered upon / scale: 1.09; / Use animation bobbing when hoverd upon / animation: bobbing; / Play bobbing animation for 2 seconds / animation-duration: 2s; / Infinitely repeat the animation / animation-iteration-count: infinite; } .lessonAbout { / Center text / text-align: center; / Give the text some color / color: rgb(30, 199, 53); / Font the text / font-family: Raleway; / Make the text standout / / x-offset: 0px y-offset: 0px blur-radius: 10px color: #00cc00 / text-shadow: 0 0 10px #000000; } .lessonTitle { / Center the text / text-align: center; / Color the text / color: #00FF00; / Font the text / font-family: Bebas Neue; } / The space where the lesson tablets are / #lessons { / Width of lesson tablets holder / width: 80%; / Put the lesson tablets holder in the middle. (Even tho the 5% is setting both top & bottom margin, the top is the only one really affected. Honestly I don't know if this is best but it seems to work...) / margin: 5% auto; / Add some space between the lesson tablets and the sides / padding: 5%; / flex display for wrapping / display: flex; / Wrap an overflow tablets to the next line / flex-wrap: wrap; } / Ace Rogers made these / .deadline { / Center the text / text-align: center; / Color the text / color: #00FF00; / Size of text / font-size: 20px; / Font the text / font-family: Inter; } #coming-soon { color: rgb(0, 255, 0); text-align: center; font-size: 30px; margin-bottom: 50px; } </style> <!-- Footer styling (Ace Rogers) --> <style> / Link styling / .link { color: #000000; font-weight: Bold; font-family: "Titillium Web"; transition: 500ms; } .link:hover { color: #00FF00; } footer { background-color: #000000; display: grid; grid-template-columns: 50% 5% 44%; border-top: solid 4px #00FF00; padding: 10px; } footer hr { border: solid 2px rgb(0, 255, 0); border-radius: 10px; } .footer-box { background-color: #555555; color: #000000; font-family: "Raleway"; border-radius: 10px; padding: 10px; padding-left: 20px; } .name { padding-left: 10px; } .did { padding-left: 20px; } #page-list { color: #000000; } </style> </head> <body> <!-- Credit to LeaferStudios for this code --> <div id="sideNav" class="sideNav" > <a href="javascript:void(0)" class="closeBtn" onClick="closeNav()" >×</a> <a href="javascript:page(1)" onClick="closeNav()" >Menu</a> <a href="javascript:page(2)" onClick="closeNav()" >About</a> <a href="javascript:page(3)" onClick="closeNav()" >Tutors</a> <a href="javascript:page(4)" onClick="closeNav()" >Students</a> <a href="javascript:page(5)" onClick="closeNav()" >Lessons</a> <a href="javascript:page(6)" onClick="closeNav()" >Results</a> </div> <!-- Credit to LeaferStudios for this span tag --> <span id="openBtn" onClick="openNav()" >☰</span> <!-- Background Matrix --> <canvas id="bgMatrixCanvas">If you're reading this... somethings broken...</canvas> <!-- Menu --> <div class="page" > <h1 class="header" >Spark Tutoring</h1> <!-- Qoute and avatar --> <div id="menu-content"><span id="top-menu">The best tutors at Khan.</span> <br><br><br><br> <div class="review"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Cool.png"> <div>"This tutoring page allows great programmers to come together and help people out." <br><em>Falling Dragon</em> </div> </div> </div> </div> <!-- About --> <div class="page" > <h1 class="header" >About Us</h1> <p id="aboutText"> Here at Spark Tutoring, we try to help out those that want to learn to code more. We teach: P.JS, HTML, CSS, ect. We try to provide you with the BEST service. All of our tutors are friendly and willing to help out those that need it. <br><br><br> If you want to join as a student, just answer these two questions and post them into the Tips & Thanks (T&T):<br>What do you want to learn? Any side notes? <br><br><br> If you want to join as a tutor, just answer these two questions and post them in the Tips & Thanks (T&T):<br>What are you good at? How active can you be for this (in hours per day/week)? </p> </div> <!-- Tutors --> <div class="page" > <h1 class="header" >Meet the Tutors</h1> <!-- Tutors --> <!-- SparkyGreen --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >SparkyGreen (<a href="https://www.khanacademy.org/profile/kaid_159902720169177555106986" >@AshesAfterSparks</a>)</h3> <p class="rank" >Main PJS/HTML/CSS/SQL/PYTHON Tutor and Leader/Founder</p> <h4>Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Web development</li> <li>P.JS</li> </ul> <h4>Availablity:</h4> </div> <!-- AstorSpark --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >AstorSpark (<a href="https://www.khanacademy.org/profile/kaid_2240662899476852532298719" >@AstorSpark</a>)</h3> <p class="rank" >Main PJS & HTML Tutor</p> <h4>Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>P.JS</li> <li>HTML</li> </ul> <h4>Availablity:</h4> </div> <!-- Ace Rogers --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >Ace Rogers (<a href="https://www.khanacademy.org/profile/kaid_714276242204949021450419" >@AmericanGuard</a>)</h3> <p class="rank" >Leader/Co-Founder & Main P.JS Tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Graphic Designing</li> <li>Animation</li> <li>Interactivity</li> <li>Simple web development</li> <li>Simple game development</li> </ul> <h4>Availablity: 72-90 hours a week</h4> </div> <!-- Chickenfarmer2009 --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >ChickenFarmer2009 (<a href="https://www.khanacademy.org/profile/kaid_287879839213083022099587" >@Chickenfarmer2009</a>)</h3> <p class="rank" >Co-founder & Main P.JS Tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>P.JS</li> <li>Gradient</li> <li>Animations</li> <li>Basic HTML</li> </ul> <h4>Availablity: 21-35 hours a week</h4> </div> <!-- Bearkirb314 --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >Bearkirb314 (<a href="https://www.khanacademy.org/profile/kaid_375460112550893828689953" >@BearKirb314</a>)</h3> <p class="rank" >Secondary PJS tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Javascript</li> <li>3D Rendering</li> <li>Physics</li> <li>Other complex systems</li> </ul> <h4>Availablity: 100 hours a week</h4> </div> <!-- Timeless Canyon --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >Timeless Canyon (<a href="https://www.khanacademy.org/profile/kaid_82965951565194985834975" >@Shadowfire.Dragon</a>)</h3> <p class="rank" >Backup PJS tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Graphic designing</li> <li>Animation</li> <li>For loops</li> </ul> <h4>Availablity: 8-12 hours a week</h4> </div> <!-- LJE --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >LJE (<a href="https://www.khanacademy.org/profile/kaid_1034761647362147362261181" >@LJE2008</a>)</h3> <p class="rank" >Backup Graphic Designing tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Graphic Designing</li> </ul> <h4>Availablity: 2-4 hours a week</h4> </div> <!-- Duke --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >Duke (<a href="https://www.khanacademy.org/profile/kaid_351465532815782433620675" >@SethCochran11</a>)</h3> <p class="rank" >P.JS, HTML & CSS Backup Tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>P.JS</li> <li>HTML</li> <li>CSS</li> </ul> <h4>Availablity: 1-2 hours a week</h4> </div> <!-- WESTY METZY --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >WESTY METZY (<a href="https://www.khanacademy.org/profile/kaid_7615172111979300259760122" >@WESTYMETZY</a>)</h3> <p class="rank" >Secondary PJS tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Collision</li> <li>Particles</li> <li>Game Development</li> <li>Movement</li> <li>Trigonometry</li> <li>Bots</li> <li>Math</li> <li>Simulations</li> <li>Animations</li> </ul> <h4>Availablity: Pretty much all day</h4> </div> <!-- Noah H. --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >Noah H. (<a href="https://www.khanacademy.org/profile/kaid_1121453835893982129568101" >@noahcoder11</a>)</h3> <p class="rank" >Backup Computer Science Tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Computer Science (general coding methods or 3D graphics or web development)</li> <li>Complex Mathematics (I've done Calc I & II, Linear Algebra, Differential Equations, and most of Calc III)</li> <li>Physics (I've done mechanical physics as well as electricity and magnetism)</li> </ul> <h4>Availablity: 5-6 hours</h4> </div> <!-- Nightwaves --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >Nightwaves (<a href="https://www.khanacademy.org/profile/kaid_3409445036296964226947053" >@NightwaveStudios</a>)</h3> <p class="rank" >Backup Tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Intermediate HTML / CSS / Javascript</li> <li>Beginner ReactJS</li> <li>Advanced Vue.js.</li> <li>Intermediate MicroPython / Java</li> </ul> <h4>Availablity: All the time during the summer. Depends on Work/Study Focus During School Year.</h4> </div> <!-- Boazon --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >Boazon (<a href="https://www.khanacademy.org/profile/kaid_73656865894951272751214" >@boazon</a>)</h3> <p class="rank" >Main HTML Tutor & backup P.JS Tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Logic in P.JS</li> <li>Variables in P.JS</li> <li>CSS</li> <li>HTML</li> </ul> <h4>Availablity: 3-5 hours (Sunday-Thursday), 1-2 hours (Friday) and probably no time (Saturday)</h4> </div> <!-- SwankyMan --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >SwankyMan (<a href="https://www.khanacademy.org/profile/kaid_82898098000024228278987" >@ColinMichael2010</a>)</h3> <p class="rank" >Backup P.JS Tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Collisions.</li> <li>Particles.</li> <li>Platformers.</li> <li>For Loops.</li> <li>Mini Games.</li> <li>Tool programs.</li> <li>Documentation programs.</li> </ul> <h4>Availablity: Offline all day Saturday & Sunday. Online Monday through Friday at 12:00PM - 6:00PM.</h4> </div> <!-- Coder Guy --> <div class="tutor-container" > <!-- Name --> <h3 class="tutor-name" >Coder Guy (<a href="https://www.khanacademy.org/profile/kaid_606375491131266526437277" >@KingCobraVenom</a>)</h3> <p class="rank" >Backup P.JS Tutor</p> <h4 class="teaches" >Teaches:</h4> <!-- Things that they can teach --> <ul class="skills" > <li>Animations.</li> <li>Particles.</li> </ul> <h4>Availablity: Active around 3-4 hours daily (not sundays tho).</h4> </div> </div> <!-- Students --> <div class="page" id="students-page"> <h1 class="header" >Students</h1> <h3 class="header" style="font-size:30px">Meet our wonderful students!</h3> <!-- Students --> <div class="student-card"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/aqualine-ultimate.png"> <p>Name: Hydrus Coder<br> Needs help with: P.JS and HTML<br><br> Other notes: Beginner</p> </div> <div class="student-card"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/avatars/piceratops-ultimate.png"> <p>Name: Arden Dragon<br> Needs help with: HTML<br><br> Other notes: Beginner/Intermediate</p> </div> <div class="student-card"> <img src="https://cdn.kastatic.org/third_party/javascript-khansrc/live-editor/build/images/creatures/Hopper-Cool.png"> <p>Name: -Dipper98-<br> Needs help with: GLSL/WebGL/HTML<br><br> Other notes: Intermidiate/Advanced</p> </div> <div class="student-card"> <img src="https://cdn.kastatic.org/images/avatars/svg/stelly-orange.svg"> <p>Name: Giraffey<br> Needs help with: P.JS<br><br> Other notes: Beginner</p> </div> <div class="student-card"> <img src="https://cdn.kastatic.org/images/avatars/svg/cs-winston.svg"> <p>Name: I need sleep<br> Needs help with: P.JS<br><br> Other notes: Need help with Object-Oriented Design</p> </div> </div> <!-- Lessons --> <div class="page" > <h1 class="header" >The Lessons</h1> <!-- Lessons --> <div id="lessons"> <div id="lesson1" class="coolTablet"> <h1 class="lessonTitle">Animation basics</h1> <p id="lssn1About" class="lessonAbout"> In this lesson, we'll teach you how to do basic animations. </p> <h2 class="deadline" >Deadline: Sep 12</h2> </div> <div id="lesson2" class="coolTablet"> <h1 class="lessonTitle">Basic HTML tags</h1> <p id="lssn2About" class="lessonAbout"> In this lesson, we'll teach you how to use basic HTML tags. </p> <h2 class="deadline" >Deadline: Sep 12</h2> </div> <div id="lesson1" class="coolTablet"> <h1 class="lessonTitle">Functions</h1> <p id="lssn1About" class="lessonAbout"> In this lesson, we'll teach you how to use and make functions. </p> <h2 class="deadline" >Deadline: Sep 19</h2> </div> <div id="lesson2" class="coolTablet"> <h1 class="lessonTitle">CSS styling</h1> <p id="lssn2About" class="lessonAbout"> In this lesson, we'll teach you how to use basic CSS to style your webpage. </p> <h2 class="deadline" >Deadline: Sep 19</h2> </div> <div id="lesson1" class="coolTablet"> <h1 class="lessonTitle">If/Else statements</h1> <p id="lssn1About" class="lessonAbout"> In this lesson, we'll teach you how to use if and else statements. </p> <h2 class="deadline" >Deadline: Sep 26</h2> </div> <div id="lesson2" class="coolTablet"> <h1 class="lessonTitle">CSS layout</h1> <p id="lssn2About" class="lessonAbout"> In this lesson, we'll teach you how to use more CSS styling to style your webpage. </p> <h2 class="deadline" >Deadline: Sep 26</h2> </div> <div id="lesson1" class="coolTablet"> <h1 class="lessonTitle">Looping</h1> <p id="lssn1About" class="lessonAbout"> In this lesson, we'll teach you how to use for and while loops. </p> <h2 class="deadline" >Deadline: Oct 3</h2> </div> <div id="lesson2" class="coolTablet"> <h1 class="lessonTitle">CSS selectors</h1> <p id="lssn2About" class="lessonAbout"> In this lesson, we'll teach you how to use some more CSS to help style your webpage. </p> <h2 class="deadline" >Deadline: Oct 3</h2> </div> <div id="lesson1" class="coolTablet"> <h1 class="lessonTitle">Looping</h1> <p id="lssn1About" class="lessonAbout"> In this lesson, we'll teach you how to use for and while loops. </p> <h2 class="deadline" >Deadline: Oct 3</h2> </div> <div id="lesson2" class="coolTablet"> <h1 class="lessonTitle">CSS selectors</h1> <p id="lssn2About" class="lessonAbout"> In this lesson, we'll teach you how to use some more CSS to help style your webpage. </p> <h2 class="deadline" >Deadline: Oct 3</h2> </div> </div> <h3 id="coming-soon" >More coming soon...</h3> </div> <!-- Results --> <div class="page" > <!-- Page header --> <h1 class="header" >Results</h1> <!-- Results --> <table id="results" > <thead> <tr> <td>Name <td>Project <td>Grade <td>Date </tr> </thead> <tbody> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/FallingDragon" >Falling Dragon</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/marco-from-one-piece/5738007265460224" >Link</a></th> <th><span class="grade" >A</span></th> <th>7-13-2024</th> </tr> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/kaid_217695367062767875131569" >Arden Dragon</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/the-four-leaps-of-faith/6704774037028864" >Link</a></th> <th><span class="grade" >B</span></th> <th>7-13-2024</th> </tr> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/kaid_217695367062767875131569" >Arden Dragon</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/hw/6534402859778048" >Link</a></th> <th><span class="grade" >C</span></th> <th>7-13-2024</th> </tr> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/kaid_410930663650820568137353" >Hyrule Coder</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/want-to-be-friends/6056046875820032" >Link</a></th> <th><span class="grade" >C+</span></th> <th>7-13-2024</th> </tr> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/kaid_73656865894951272751214" >Boazon#Midsane</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/boazons-css-tutorials/5211177785671680" >Link</a></th> <th><span class="grade" >A</span></th> <th>7-13-2024</th> </tr> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/kaid_1826046083730180486895887" >ℂ𝕠𝕠𝕜𝕚𝕖</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/panda/5626702097465344" >Link</a></th> <th><span class="grade" >C+</span></th> <th>7-20-2024</th> </tr> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/kaid_534563459807953523158495" >brianny</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/sparks-tutoring-page-homework-objects/6406092163039232" >Link</a></th> <th><span class="grade" >B-</span></th> <th>7-20-2024</th> </tr> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/kaid_1826046083730180486895887" >ℂ𝕠𝕠𝕜𝕚𝕖</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/rocket-ship/6356527877636096" >Link</a></th> <th><span class="grade" >A-</span></th> <th>7-27-2024</th> </tr> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/kaid_534563459807953523158495" >brianny</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/sparks-tutoring-program-animation/6228494902542336" >Link</a></th> <th><span class="grade" >A-</span></th> <th>7-27-2024</th> </tr> <tr> <th><a class="result-link" href="https://www.khanacademy.org/profile/kaid_534563459807953523158495" >brianny</a></th> <th><a class="result-link" href="https://www.khanacademy.org/computer-programming/sparks-tutoring-page-if-statements/5507116075237376" >Link</a></th> <th><span class="grade" >A-</span></th> <th>7-10-2024</th> </tr> </tbody> </table> </div> <!-- Footer --> <footer> <!-- About the creator content --> <div class="footer-box" > <h3>Credits</h3> <!-- Credits --> <ul class="name" > <li><a class="link" href="https://www.khanacademy.org/profile/kaid_73656865894951272751214" >Boazon</a><ul class="did" > <li>Menu page styling</li> <li>Students page styling</li> </ul></li> <li><a class="link" href="https://www.khanacademy.org/profile/kaid_387597695665654041806576" >XL_PIZZA</a><ul class="did" > <li>About page styling</li> <li>Lessons page styling</li> </ul></li> <li><a class="link" href="https://www.khanacademy.org/profile/kaid_714276242204949021450419" >Ace Rogers</a><ul class="did" > <li>Tutors page styling</li> <li>Results page styling</li> <li>Scrollbar styling</li> <li>Footer styling</li> </ul></li> <li><a class="link" href="https://www.khanacademy.org/profile/kaid_159902720169177555106986" >SparkyGreen</a><ul class="did" > <li>Matrix background</li> </ul></li> <li><a class="link" href="https://www.khanacademy.org/profile/kaid_553656479258879622339276" >LeaferStudios</a><ul class="did" > <li>Navbar function & styling</li> </ul></li> <li><a class="link" href="https://www.khanacademy.org/profile/kaid_157624541333313939750668" >Bluebird</a><ul class="did" > <li>Thumbnail script</li> </ul></li> </ul> </div> <hr> <!-- Page content --> <div class="footer-box" > <h3>Pages</h3> <!-- Page list --> <ul id="page-list" > <li><a class="link" href="javascript:page(1)" >Menu</a></li> <li><a class="link" href="javascript:page(2)" >About</a></li> <li><a class="link" href="javascript:page(3)" >Tutors</a></li> <li><a class="link" href="javascript:page(4)" >Students</a></li> <li><a class="link" href="javascript:page(5)" >Lessons</a></li> <li><a class="link" href="javascript:page(6)" >Results</a></li> </ul> <hr> <h3>Our Founder</h3> <p><a class="link" href="https://www.khanacademy.org/profile/kaid_159902720169177555106986" >SparkyGreen</a> is our founder and was the leader until they were forced to leave. <br>Now <a class="link" href="https://www.khanacademy.org/profile/kaid_714276242204949021450419" >Ace Rogers</a> is the new leader.</p> </div> </footer> <!-- #bgMatrixCanvas script --> <script> var canvas = document.getElementById("bgMatrixCanvas"); var ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var fontSize = 20; var columns = canvas.width / fontSize; var drops = []; for (var x = 0; x < columns; x++) { drops[x] = 1; } function draw() { ctx.fillStyle = "rgba(0, 0, 0, 0.1)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#00ff0099"; ctx.font = fontSize + "px monospace"; for (var i = 0; i < drops.length; i++) { var text = Math.random() > 0.5 ? "1" : "0"; ctx.fillText(text, i fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; } } setInterval(draw, 33); </script> <!-- Lessons script --> <script> var hoverLessons = function(id) { var el = document.getElementById(id).style; el.scale = '1.1'; } </script> <!-- Button function --> <script> var pages = document.getElementsByClassName("page"); page = function (index) { for (var i = 0; i < pages.length; i++) { pages[i].style.display = "none"; } pages[index - 1].style.display = "block"; window.scroll(0, 0); } page(1); </script> <!-- Credit to LeaferStudios for this code --> <script> // opens sidenav function openNav() { /* Set the width of the sidenav to 250 pixels / document.getElementById("sideNav").style.width = "250px"; / Push the main content to the right by 250 pixels / document.getElementById("main").style.marginLeft = "250px"; } // closes sidenav function closeNav() { / Set the width of the sidenav to 0, hiding it / document.getElementById("sideNav").style.width = "0"; / Reset the margin of the main content, bringing it back to its original position / document.getElementById("main").style.marginLeft = "0"; } </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	28,1402
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNvI2tCjCQw
Votes	32
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	Ace Rogers (Online)
Author Name	AmericanGuard
Author ID	kaid_714276242204949021450419
Author Profile Access	COACH

Archive Data

Added	4 months ago, 1725128662952
Updated	4 months ago, 1725128662952
Source Deleted	unknown