Viewing Program

Program Data

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

Title	Echolite Homepage
ID	4933514702012416
Created	1 months ago, 1731531965382
Updated	1 months ago, 1731537218006
Code	<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1 " /> <title>Echolite Homepage</title> <link href="https://fonts.googleapis.com/css?family=Google+Sans:700,500,400\|Material+Icons" rel="stylesheet"> <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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> </head> <style> * { font-family: "Poppins", sans-serif; margin: 0; padding: 0; box-sizing: border-box; } :root { --body-color: #e4e9f7; --sidebar-color: #fff; --primary-color: #52E662; --primary-color-light: #F1F1F1; --text-color: rgba(102, 102, 102,0.5); --theme-color: #F1F1F1; --tran-two: all 0.2s ease; --tran-four: all 0.4s ease; --tran-five: all 0.5s ease; } body { height: 100vh; background: var(--body-color); transition: var(--tran-four); } .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 250px; padding: 10px 14px; background: var(--sidebar-color); transition: var(--tran-five); } .sidebar.close { width: 88px; } .sidebar.close .text { opacity: 0; } .sidebar .image { min-width: 60px; display: flex; justify-content:center; } .sidebar header { position: relative; } .sidebar img { width: 60px; border-radius: 6px; } .sidebar li { height: 3rem; border-radius: 6px; margin-top: 0.8rem; list-style: none; display: flex; } .sidebar li .icon { display: flex; justify-content: center; min-width: 60px; font-size: 20px; } .sidebar li .icon { color: var(--text-color); transition: var(--tran-two); } .sidebar header { display: flex; align-items: center; } header { margin-top: 10px; display: flex; flex-direction: column; } .sidebar li a { height: 100%; width: 100%; display: flex; align-items: center; text-decoration: none; border-radius: 6px; transition: var(--tran-four); } .sidebar li a:hover { background: var(--primary-color); } .menu-bar .mode { justify-content: center; align-items: center; border-radius: 6px; background: var(--theme-color); transition: var(--tran-five); } .menu-bar .mode:hover { background: var(--primary-color); cursor:pointer; transition: var(--tran-five); } .container { align-items:center; justify-content:center; border-radius:15px; background: var(--sidebar-color); color: var(--text-color); padding:10px; margin-left:130px; margin-top: 10px; text-align:center; font-size:1.3rem; line-height:25px; width:70%; transition: var(--tran-five); } .container h1{ padding:10px; font-size:2.3rem; color: var(--primary-color); } .container h2{ padding:5px; font-size:1.5rem; } .dark-mode { --body-color: #18191a; --sidebar-color: #242526; --primary-color-light: #3a383c; --text-color: #FFF; --theme-color: #3a383c; } .bg-waves { position: fixed; z-index: -1; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; top:0px; } .bg-waves .wave { position: absolute; left: 0; width: 100%; height: 100%; background: #56ab2f; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5); transition: 0.5s; } .bg-waves .wave span { content: ""; position: absolute; width: 325vh; height: 325vh; left: 50%; transform: translate(-50%, -75%); background: #000; } .content { position: fixed; color: rgba(255, 255, 255); left:3.5em; top:3em; z-index: -1; font-size: 3em; } .bg-waves .wave span:nth-child(1) { border-radius: 45%; background: rgba(20, 20, 20, 1); animation: animate 5s linear infinite; } .bg-waves .wave span:nth-child(2) { border-radius: 40%; background: rgba(20, 20, 20, 0.5); animation: animate 10s linear infinite; } .bg-waves .wave span:nth-child(3) { border-radius: 42.5%; background: rgba(20, 20, 20, 0.5); animation: animate 15s linear infinite; } @keyframes animate { 0% { transform: translate(-50%, -75%) rotate(0deg); } 100% { transform: translate(-50%, -75%) rotate(360deg); } } </style> <body> <main class= "bg-waves"> <div class="wave"> <span></span> <span></span> <span></span> </div> </main> <div class="content"> <h2>Echolite</h2> </div> <div class="page"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div class="container"> <h1>Welcome</h1> <h2>To the home of the Echolites</h2> <p></p> </div> </div> <div class="page"></div> <div class="page"></div> <div class="page"></div> <nav class="sidebar close"> <header> <span class="image"> <img src="https://www.khanacademy.org/computer-programming/spin-off-of-echolite-green-leaf-avatars/5615945713106944/4663276517376000.png" alt="Echolite Logo" /> </span> </header> <div class="menu-bar"> <div class="menu"> <ul class="menu-links"> <li class="nav-link"> <a href="javascript:changePage(1);"> <i class='material-icons icon'>home</i> </a> </li> <li class="nav-link"> <a href="javascript:changePage(2);"> <i class='material-icons icon'>help</i> </a> </li> <li class="nav-link"> <a href="javascript:changePage(3);"> <i class='material-icons icon'>bar_chart</i> </a> </li> <li class="nav-link"> <a href="javascript:changePage(4);"> <i class='material-icons icon'>group</i> </a> </li> </ul> </div> <li class="mode"> <i class='material-icons icon' onClick="toggleDarkMode()">dark_mode</i> </li> </div> </nav> <script> function toggleDarkMode() { document.body.classList.toggle("dark-mode"); } </script> <script> var page = document.getElementsByClassName('page'); function changePage(index) { for (var i = 0; i < page.length; i++) { page[i].style.display = 'none'; } page[index - 1].style.display = 'block'; window.scroll(0, 0); } changePage(1);</script> </body> </html>
Folds	1,300
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLu6luDhCAw
Votes	8
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	awesomeorion
Author Name	awesomeorion
Author ID	kaid_1141658061792924357651232
Author Profile Access	PUBLIC

Archive Data

Added	1 months ago, 1731542299589
Updated	1 months ago, 1731542299589
Source Deleted	unknown