Viewing Program

Program Data

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

Title	PolarLabs v1.2
ID	5656267071733760
Created	2 years ago, 1644556240564
Updated	2 years ago, 1644984435274
Code	<!DOCTYPE html> <!-- the retired version of polarlabs. not very good. --> <html> <head> <meta charset="utf-8"> <title>PolarLabs v1.2</title> <link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Titillium+Web" rel="stylesheet"> <style> :root{ background-color: #181818; } .header{ left: 0; top: 0; position: fixed; width: 100%; height: 15%; background-color: #121212; font-family: Poppins; color: white; } .logo{ height: 100%; display: table; float: left; margin-left: 1%; } .logo h1{ display: table-cell; vertical-align: middle; width: 50px; font-weight: 200; } .logo h1 span{ color: lime; font-weight: 800; } .logo h1:hover{ cursor: pointer; } .logocontainer{ height: 100%; width: 50px; display: table-cell; vertical-align: middle; } .logocontainer img{ width: 50px; } .nav{ height: 100%; display: table; float: right; } .nav a{ height: 100%; display: table; float: left; } .nav a li{ display: table-cell; vertical-align: middle; padding-right: 10px; } .nav a li:hover{ cursor: pointer; color: lime; } main{ margin-top: 90px; font-family: Titillium Web; color: white; } .signature{ display: table; height: 50px; } .signature a{ display: table-cell; padding-left: 10px; height: 100%; vertical-align: middle; text-decoration: none; color: white; } .signature a:hover{ color: lime; } .signature img{ height: 75px; } .programcard{ display: table; width: 100%; margin-top: 20px; } .description{ color: white; height: 100%; width: 50%; display: table-cell; float: left; } .image{ height: 100%; width: 40%; float: right; display: table-cell; } .membercard{ display: inline-block; width: 200px; padding-left: 50px; } .membercard img{ width: 150px; display: block; margin: 0 auto; } .membercard p{ display: block; width: 100%; text-align: center; } .membercard a{ text-decoration: none; width: 100%; color: lime; display: block; text-align: center; margin-top: 10px; } ::selection{ background: #222222; } ::-moz-selection{ background: #222222; } #renovation{ z-index: 10; background-color: #121212; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; color: white; } </style> </head> <body> <div class="header"> <div onClick="javascript:nav('0')" class="logo"> <div class="logocontainer"> <img src="https://www.khanacademy.org/computer-programming/logo/5946955320573952/latest.png"> </div> <h1>POLAR<span>LABS</span></h1> </div> <div class="nav"> <a onClick="javascript:nav('1')"><li>Learn</li></a> <a onClick="javascript:nav('2')"><li>Libraries</li></a> <a onClick="javascript:nav('3')"><li>Links</li></a> <a onClick="javascript:nav('4')"><li>Lab</li></a> </div> </div> <main> <section id="0" class="page"> <h1>Notice</h1> We are under renovation. This time, I will finish. <h1>Home</h1> <p>Welcome to PolarLabs! Here, you can find helpful tutorials and tips to further your computer programming journey!</p> <h1>News</h1> <div class="programcard"> <div class="description"> <h3>Winter Challenge 2022</h3> <p>I have joined a new programming challenge known as The Winter Challenge 2022! Check that out by clicking on this image!</p> </div> <a href="https://www.khanacademy.org/computer-programming/the-winter-challenges-2022offical/4563239960625152"><img class="image" src="https://www.khanacademy.org/computer-programming/the-winter-challenges-2022offical/4563239960625152/latest.png"></a> </div> <h1>Our Story</h1> <p>PolarLabs was born on a slow day of winter break. I was working on another game of mine, and was constantly struggling through problem after problem while in development. It seemed as though nobody explained the topics in a way that I could understand. I found that a lot of other people were experiencing something similar, especially with topics such as Object-Oriented Programming and Arrays.<br><br>I began the HTML and CSS tutorials recently, and found that they were way easier. Easy enough, that I could start this site, dedicated to making sure you understand programming concepts enough to make games you can be proud of!<br><br>It is my sincerest wish that you find something helpful today,</p> <div class="signature"> <img class src="https://www.khanacademy.org/computer-programming/polars-new-logo/5646968632164352/latest.png"> <a href="https://www.khanacademy.org/profile/kaid_80710011086149831327935">Polar</a> </div> <h1>Become a Featured Programmer!</h1> <p>We are looking for programmers who want to walk us through a game that they have created! Your game should have at least 20 votes and approved by the team! Talk to us in the T&T below!</p> <h1>Subscribe to Our Newsletter!</h1> <p>To receive updates from PolarLabs, post a period "." in the updates thread below! Don't worry, there will be no spam since a "." is less than 3 characters!</p> </section> <section id="1" class="page"> <h1>Learn</h1> <p>Here you can find tutorials on a variety of Processing JavaScript topics, ranging from platformer tutorials to simple buttons and scene changes!</p> <div class="programcard"> <div class="description"> <h1>Navbars: HTML Tutorial #1</h1> <p>A brief tutorial on how to create a navigation bar in HTML!</p> </div> <a href="https://www.khanacademy.org/computer-programming/navbar-html-tutorial-1/6538396367372288"><img class="image" src="https://www.khanacademy.org/computer-programming/navbar-html-tutorial-1/6538396367372288/latest.png"></a> </div> </section> <section id="2" class="page"> <h1>Programming Libraries</h1> <p>Here you can find programming libraries for Processing JavaScript, which can help you create your vision faster and easier!</p> <h3>What is a Library?</h3> <p>A programming library is a collection of functions which can be imported, installed or downloaded that can be called throughout your project. For example, after adding an "arrow();" function, you can draw as many arrows as you want thoughout the program! Amazing!</p> <div class="programcard"> <div class="description"> <h1>Librapex</h1> <p>A community contribution project initiated by Apex. Includes shorthand println(), rectangular and circular collision functions and more! </p> </div> <a href="https://www.khanacademy.org/computer-programming/librapex-community-contribution-project/4567804680388608"><img class="image" src="https://www.khanacademy.org/computer-programming/librapex-community-contribution-project/4567804680388608/latest.png"> </a> </div> </section> <section id="3" class="page"> <h1>Program Links</h1> <div class="programcard"> <div class="description"> <h3>Text Particles</h3> <p>A really neat project by Levi F., using particles which move around to create an animation! Amazing!</p> </div> <a href="https://www.khanacademy.org/computer-programming/text-particles/5534642755125248"><img class="image" src="https://www.khanacademy.org/computer-programming/text-particles/5534642755125248/latest.png"></a> </div> <div class="programcard"> <div class="description"> <h3>New program</h3> <p>This project is a work-in-progress, but it is looking really interesting so far! Almost like a variation of Minecraft! Created by amazing game developer WiggleWiggleStudios!</p> </div> <a href="https://www.khanacademy.org/computer-programming/new-program/5887504517480448"><img class="image" src="https://www.khanacademy.org/computer-programming/new-program/5887504517480448/latest.png"></a> </div> </section> <section id="4" class="page"> <h1>Meet The Lab Rats</h1> <div class="membercard"> <img src="https://www.khanacademy.org/computer-programming/polars-new-logo/5646968632164352/latest.png"> <a href="https://www.khanacademy.org/profile/kaid_80710011086149831327935">Polar</a> <p>Founder of PolarLabs</p> </div> <div class="membercard"> <img src="https://www.khanacademy.org/computer-programming/logo-intro/4590343632764928/latest.png"> <a href="https://www.khanacademy.org/profile/kaid_4465081938278916237377999">Lil Tyler</a> <p>Links Manager</p> </div> </section> </main> <script> function nav(page) {document.querySelectorAll('.page').forEach(function(p) {p.style.display = 'none';}) document.getElementById(page).style.display = 'block'; window.scroll({top: 0, left: 0, behavior: 'smooth'});} nav('0'); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMPshIuGCgw
Votes	5
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Polar
Author Name	notpolar
Author ID	kaid_80710011086149831327935
Author Profile Access	PUBLIC

Archive Data

Added	9 months ago, 1711912379715
Updated	9 months ago, 1711912379715
Source Deleted	unknown