| <!doctype html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="description" |
| content="About Class of Learners � the team, the story, and the mission behind the studio." /> |
| <meta name="google-site-verification" content="bWaer2b60VA1y3RMV48HYGPv8vlMUcvlFGxY3e6SAqU" /> |
| <title>About Us | Class Of Learners</title> |
| <link rel="icon" type="image/png" href="Icon.png" /> |
| <link rel="canonical" href="https://advancedlogiclabs.dpdns.org/about" /> |
| <script> |
| ; (function () { |
| try { |
| var c = localStorage.getItem('col_admin_config') |
| if (c) { |
| var cfg = JSON.parse(c), |
| p = window.location.pathname.split('/').pop() || 'home', |
| s = cfg.pages[p] || '200' |
| if (s === '503') { |
| document.write( |
| '<div style="display:flex;height:100vh;width:100vw;background:#070A14;color:#fff;flex-direction:column;justify-content:center;align-items:center;font-family:sans-serif;text-align:center;padding:20px"><h1 style="font-size:5rem;margin:0;color:#F2B84B">503</h1><h2>System Maintenance</h2><p style="color:#8C94B0">Check back soon.</p></div>' |
| ) |
| window.stop() |
| } |
| if (s === '404') { |
| document.write( |
| '<div style="display:flex;height:100vh;width:100vw;background:#070A14;color:#fff;flex-direction:column;justify-content:center;align-items:center;font-family:sans-serif;text-align:center;padding:20px"><h1 style="font-size:5rem;margin:0;color:#ef4444">404</h1><h2>Page Not Found</h2><a href="home" style="margin-top:20px;color:#F2B84B;text-decoration:none;font-weight:bold">Return Home</a></div>' |
| ) |
| window.stop() |
| } |
| } |
| } catch (e) { } |
| })() |
| </script> |
| <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=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap" |
| rel="stylesheet" /> |
| <style> |
| :root { |
| --void: #070a14; |
| --void2: #0c1224; |
| --panel: #111827; |
| --line: rgba(255, 255, 255, 0.08); |
| --lineb: rgba(255, 255, 255, 0.16); |
| --ink: #e8e3d8; |
| --dim: #8891aa; |
| --signal: #f2b84b; |
| --ion: #5ed4f5; |
| --teal: #00f0cc; |
| --plasma: #b89bff; |
| --em: #34d399; |
| --nav: rgba(7, 10, 20, 0.68); |
| --serif: 'Instrument Serif', Georgia, serif; |
| --sans: 'Inter', system-ui, sans-serif; |
| --mono: 'Space Mono', monospace; |
| --ease: cubic-bezier(0.16, 1, 0.3, 1); |
| --spring: cubic-bezier(0.34, 1.56, 0.64, 1); |
| --r: 18px; |
| } |
| |
| body.lm { |
| --void: #f0ede4; |
| --void2: #e6e2d8; |
| --panel: #fff; |
| --line: rgba(0, 0, 0, 0.09); |
| --lineb: rgba(0, 0, 0, 0.18); |
| --ink: #15181f; |
| --dim: #5c6175; |
| --signal: #b8720a; |
| --ion: #0e72a0; |
| --teal: #0a8c7a; |
| --plasma: #6f4fe0; |
| --em: #1b9d66; |
| --nav: rgba(240, 237, 228, 0.75); |
| } |
| |
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| html { |
| scroll-behavior: smooth; |
| } |
| |
| body { |
| background: var(--void); |
| color: var(--ink); |
| font-family: var(--sans); |
| line-height: 1.6; |
| overflow-x: hidden; |
| -webkit-font-smoothing: antialiased; |
| transition: |
| background 0.5s var(--ease), |
| color 0.5s var(--ease); |
| } |
| |
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
| |
| img { |
| display: block; |
| max-width: 100%; |
| } |
| |
| button { |
| font-family: var(--sans); |
| } |
| |
| ::selection { |
| background: var(--signal); |
| color: #0a0800; |
| } |
| |
| ::-webkit-scrollbar { |
| width: 10px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: var(--void); |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: var(--lineb); |
| border-radius: 10px; |
| border: 3px solid var(--void); |
| } |
| |
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--signal); |
| } |
| |
| @media (prefers-reduced-motion: reduce) { |
| |
| *, |
| *::before, |
| *::after { |
| animation-duration: 0.01ms !important; |
| transition-duration: 0.01ms !important; |
| } |
| } |
| |
| |
| .loader { |
| position: fixed; |
| inset: 0; |
| z-index: 10000; |
| background: var(--void); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 24px; |
| transition: |
| opacity 0.7s var(--ease), |
| visibility 0.7s; |
| } |
| |
| .loader.gone { |
| opacity: 0; |
| visibility: hidden; |
| } |
| |
| .lid { |
| font-family: var(--mono); |
| font-size: 0.72rem; |
| letter-spacing: 0.42em; |
| color: var(--dim); |
| text-transform: uppercase; |
| } |
| |
| .lid span { |
| color: var(--signal); |
| } |
| |
| .lbar { |
| width: 180px; |
| height: 1px; |
| background: var(--lineb); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .lbar::after { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| background: var(--signal); |
| transform-origin: left; |
| transform: scaleX(0); |
| animation: lf 1.1s var(--ease) 0.2s forwards; |
| } |
| |
| @keyframes lf { |
| to { |
| transform: scaleX(1); |
| } |
| } |
| |
| |
| .cd, |
| .cr { |
| position: fixed; |
| top: 0; |
| left: 0; |
| pointer-events: none; |
| z-index: 9999; |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| will-change: transform; |
| } |
| |
| .cd { |
| width: 6px; |
| height: 6px; |
| background: var(--signal); |
| } |
| |
| .cr { |
| width: 36px; |
| height: 36px; |
| border: 1px solid rgba(94, 212, 245, 0.5); |
| opacity: 0.55; |
| transition: |
| width 0.22s var(--ease), |
| height 0.22s var(--ease), |
| border-color 0.22s, |
| opacity 0.22s; |
| } |
| |
| body.ch .cr { |
| width: 64px; |
| height: 64px; |
| border-color: var(--signal); |
| opacity: 0.9; |
| } |
| |
| @media (pointer: coarse) { |
| |
| .cd, |
| .cr { |
| display: none; |
| } |
| } |
| |
| |
| .top-nav { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| z-index: 1000; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 14px 32px; |
| background: var(--nav); |
| backdrop-filter: blur(18px) saturate(1.4); |
| border-bottom: 1px solid var(--line); |
| flex-wrap: wrap; |
| gap: 14px; |
| transition: |
| background 0.5s var(--ease), |
| border-color 0.5s, |
| padding 0.4s var(--ease); |
| } |
| |
| .top-nav.s { |
| padding: 10px 32px; |
| border-bottom-color: var(--lineb); |
| } |
| |
| .nav-brand { |
| display: flex; |
| align-items: center; |
| gap: 13px; |
| } |
| |
| .brand-logo { |
| height: 28px; |
| width: auto; |
| border-radius: 8px; |
| } |
| |
| .brand-name { |
| font-family: var(--mono); |
| font-size: 0.78rem; |
| font-weight: 700; |
| letter-spacing: 0.24em; |
| text-transform: uppercase; |
| color: var(--ink); |
| } |
| |
| .nav-links { |
| display: flex; |
| gap: 18px; |
| align-items: center; |
| flex-wrap: wrap; |
| } |
| |
| .nav-link { |
| color: var(--dim); |
| font-weight: 500; |
| font-size: 0.82rem; |
| transition: color 0.25s; |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| left: 0; |
| bottom: -7px; |
| width: 0; |
| height: 1px; |
| background: var(--signal); |
| transition: width 0.3s var(--ease); |
| } |
| |
| .nav-link:hover { |
| color: var(--ink); |
| } |
| |
| .nav-link:hover::after, |
| .nav-link.act::after { |
| width: 100%; |
| } |
| |
| .nav-link.act { |
| color: var(--ink); |
| } |
| |
| .nav-dl-btn { |
| background: var(--signal); |
| color: #0a0500; |
| padding: 8px 18px; |
| border-radius: 30px; |
| font-weight: 700; |
| font-size: 0.84rem; |
| transition: |
| transform 0.3s var(--ease), |
| box-shadow 0.3s; |
| } |
| |
| .nav-dl-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 12px 28px -10px var(--signal); |
| } |
| |
| .desktop-dl {} |
| |
| .mobile-dl { |
| display: none; |
| } |
| |
| .dropdown { |
| position: relative; |
| } |
| |
| .dropdown-btn { |
| color: var(--dim); |
| background: none; |
| border: none; |
| font-size: 0.9rem; |
| font-weight: 500; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-family: var(--sans); |
| transition: color 0.25s; |
| padding: 0; |
| } |
| |
| .dropdown.active .dropdown-btn, |
| .dropdown-btn:hover { |
| color: var(--ink); |
| } |
| |
| .darr { |
| font-size: 0.68rem; |
| display: inline-block; |
| transition: transform 0.3s var(--ease); |
| } |
| |
| .dropdown.active .darr { |
| transform: rotate(180deg); |
| } |
| |
| .dropdown-content { |
| position: absolute; |
| top: calc(100% + 14px); |
| left: 50%; |
| transform: translateX(-50%) translateY(6px); |
| min-width: 225px; |
| z-index: 1001; |
| opacity: 0; |
| visibility: hidden; |
| pointer-events: none; |
| transition: |
| opacity 0.28s var(--ease), |
| transform 0.28s var(--ease), |
| visibility 0s linear 0.32s; |
| } |
| |
| .dropdown.active .dropdown-content { |
| opacity: 1; |
| visibility: visible; |
| pointer-events: auto; |
| transform: translateX(-50%) translateY(0); |
| transition-delay: 0s; |
| } |
| |
| .dropdown-content-inner { |
| background: var(--panel); |
| border: 1px solid var(--lineb); |
| border-radius: 14px; |
| box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); |
| padding: 8px; |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| } |
| |
| .dropdown-content a { |
| color: var(--dim); |
| padding: 11px 14px; |
| font-size: 0.88rem; |
| font-weight: 500; |
| border-radius: 8px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| transition: 0.2s; |
| } |
| |
| .dropdown-content a:hover { |
| background: rgba(255, 255, 255, 0.07); |
| color: var(--ink); |
| padding-left: 18px; |
| } |
| |
| .tw { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding-left: 18px; |
| |
| } |
| |
| .tl { |
| font-size: 0.7rem; |
| font-weight: 700; |
| color: var(--dim); |
| text-transform: uppercase; |
| letter-spacing: 0.07em; |
| min-width: 32px; |
| } |
| |
| .tsb { |
| position: relative; |
| width: 46px; |
| height: 24px; |
| cursor: pointer; |
| display: inline-block; |
| flex-shrink: 0; |
| } |
| |
| .tsb input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| position: absolute; |
| } |
| |
| .tst { |
| position: absolute; |
| inset: 0; |
| border-radius: 30px; |
| background: var(--void2); |
| border: 1px solid var(--lineb); |
| transition: 0.4s; |
| } |
| |
| .tsth { |
| position: absolute; |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| top: 3px; |
| left: 3px; |
| background: var(--signal); |
| transition: transform 0.4s var(--spring); |
| font-size: 0.6rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| input:checked+.tst .tsth { |
| transform: translateX(22px); |
| } |
| |
| .nav-login-btn { |
| background: transparent; |
| color: var(--em); |
| border: 1px solid var(--em); |
| padding: 8px 20px; |
| border-radius: 30px; |
| font-weight: 700; |
| font-size: 0.82rem; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| transition: 0.25s; |
| font-family: var(--sans); |
| } |
| |
| .nav-login-btn:hover { |
| background: var(--em); |
| color: #06140e; |
| box-shadow: 0 0 24px -6px var(--em); |
| } |
| |
| .nav-user-profile { |
| display: none; |
| align-items: center; |
| gap: 10px; |
| padding: 4px 14px 4px 4px; |
| border: 1px solid var(--line); |
| border-radius: 30px; |
| cursor: pointer; |
| transition: 0.25s; |
| } |
| |
| .nav-user-profile:hover { |
| border-color: var(--em); |
| } |
| |
| .nav-user-avatar { |
| width: 28px; |
| height: 28px; |
| border-radius: 50%; |
| background: var(--em); |
| color: #06140e; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| font-weight: 800; |
| font-size: 0.8rem; |
| overflow: hidden; |
| } |
| |
| .nun { |
| font-size: 0.82rem; |
| font-weight: 700; |
| } |
| |
| |
| .about-hero { |
| position: relative; |
| width: 100%; |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| overflow: hidden; |
| } |
| |
| #constellation { |
| position: absolute; |
| inset: 0; |
| width: 100%; |
| height: 100%; |
| display: block; |
| opacity: 0; |
| transition: opacity 1.8s var(--ease); |
| } |
| |
| #constellation.v { |
| opacity: 1; |
| } |
| |
| .hvig { |
| position: absolute; |
| inset: 0; |
| pointer-events: none; |
| background: radial-gradient(ellipse 55% 90% at 14% 50%, transparent 0%, var(--void) 84%); |
| transition: background 0.5s; |
| z-index: 1; |
| } |
| |
| .hvigb { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 220px; |
| background: linear-gradient(to top, var(--void), transparent); |
| pointer-events: none; |
| z-index: 1; |
| } |
| |
| .ahc { |
| position: relative; |
| z-index: 2; |
| max-width: 1360px; |
| width: 100%; |
| margin: 0 auto; |
| padding: 160px 52px 80px; |
| } |
| |
| .hey { |
| font-family: var(--mono); |
| font-size: 0.7rem; |
| letter-spacing: 0.4em; |
| color: var(--signal); |
| text-transform: uppercase; |
| margin-bottom: 30px; |
| display: inline-flex; |
| align-items: center; |
| gap: 14px; |
| opacity: 0; |
| transform: translateY(18px); |
| animation: fu 0.8s var(--ease) 0.9s forwards; |
| } |
| |
| .hey::before { |
| content: ''; |
| width: 24px; |
| height: 1px; |
| background: var(--signal); |
| flex-shrink: 0; |
| } |
| |
| .about-hero h1 { |
| font-family: var(--serif); |
| font-size: clamp(2.8rem, 7.2vw, 6.4rem); |
| font-weight: 400; |
| line-height: 1.07; |
| max-width: 15ch; |
| letter-spacing: -0.01em; |
| opacity: 0; |
| transform: translateY(28px); |
| animation: fu 0.95s var(--ease) 1.05s forwards; |
| } |
| |
| .about-hero h1 em { |
| font-style: italic; |
| color: var(--signal); |
| } |
| |
| .hlede { |
| font-size: clamp(0.98rem, 1.4vw, 1.15rem); |
| line-height: 1.78; |
| color: var(--dim); |
| max-width: 50ch; |
| margin-top: 28px; |
| opacity: 0; |
| transform: translateY(18px); |
| animation: fu 0.8s var(--ease) 1.3s forwards; |
| } |
| |
| @keyframes fu { |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .sci { |
| position: absolute; |
| left: 52px; |
| bottom: 46px; |
| z-index: 2; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 13px; |
| font-family: var(--mono); |
| font-size: 0.68rem; |
| letter-spacing: 0.34em; |
| color: var(--dim); |
| text-transform: uppercase; |
| opacity: 0; |
| animation: fi 1s var(--ease) 2.1s forwards; |
| } |
| |
| .scl { |
| width: 1px; |
| height: 50px; |
| background: var(--lineb); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .scl::after { |
| content: ''; |
| position: absolute; |
| top: -100%; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(transparent, var(--signal)); |
| animation: sf 2.2s ease-in-out 2.3s infinite; |
| } |
| |
| @keyframes sf { |
| 0% { |
| top: -100%; |
| } |
| |
| 60% { |
| top: 100%; |
| } |
| |
| 100% { |
| top: 100%; |
| } |
| } |
| |
| @keyframes fi { |
| to { |
| opacity: 1; |
| } |
| } |
| |
| @keyframes fi { |
| to { |
| opacity: 1; |
| } |
| } |
| |
| #ntip { |
| position: fixed; |
| pointer-events: none; |
| z-index: 999; |
| opacity: 0; |
| transition: |
| opacity 0.3s, |
| transform 0.2s; |
| transform: translate(-50%, -150%); |
| } |
| |
| #ntip-inner { |
| background: rgba(7, 10, 20, 0.85); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| padding: 8px 16px; |
| border-radius: 30px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); |
| font-family: var(--mono); |
| font-size: 0.75rem; |
| color: var(--ink); |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| } |
| |
| body.lm #ntip-inner { |
| background: rgba(255, 255, 255, 0.9) !important; |
| border-color: rgba(0, 0, 0, 0.12) !important; |
| box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.15); |
| } |
| |
| #ntip-inner::after { |
| content: ''; |
| position: absolute; |
| bottom: -5px; |
| left: 50%; |
| transform: translateX(-50%); |
| border-width: 5px 5px 0; |
| border-style: solid; |
| border-color: rgba(255, 255, 255, 0.1) transparent transparent transparent; |
| display: block; |
| width: 0; |
| } |
| |
| body.lm #ntip-inner::after { |
| border-color: rgba(255, 255, 255, 0.9) transparent transparent transparent; |
| } |
| |
| #ntip-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--signal); |
| box-shadow: 0 0 10px var(--signal); |
| } |
| |
| |
| .section { |
| max-width: 1360px; |
| margin: 0 auto; |
| padding: 130px 52px 80px; |
| } |
| |
| .sey { |
| font-family: var(--mono); |
| font-size: 0.7rem; |
| letter-spacing: 0.36em; |
| color: var(--signal); |
| text-transform: uppercase; |
| margin-bottom: 14px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
| |
| .sey::before { |
| content: ''; |
| width: 20px; |
| height: 1px; |
| background: var(--signal); |
| } |
| |
| .st { |
| font-family: var(--serif); |
| font-size: clamp(2rem, 4vw, 3.3rem); |
| font-weight: 400; |
| line-height: 1.14; |
| max-width: 18ch; |
| margin-bottom: 20px; |
| } |
| |
| .sdesc { |
| font-size: 1rem; |
| color: var(--dim); |
| max-width: 56ch; |
| line-height: 1.78; |
| } |
| |
| |
| .rv { |
| opacity: 0; |
| transform: translateY(36px); |
| transition: |
| opacity 0.8s var(--ease), |
| transform 0.8s var(--ease); |
| } |
| |
| .rv.vis { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| |
| .mentor-section { |
| border-top: 1px solid var(--line); |
| border-bottom: 1px solid var(--line); |
| background: rgba(255, 255, 255, 0.015); |
| } |
| |
| .mentor-card { |
| display: flex; |
| align-items: center; |
| gap: 52px; |
| flex-wrap: wrap; |
| } |
| |
| .mentor-avatar { |
| width: 140px; |
| height: 140px; |
| border-radius: 24px; |
| background: linear-gradient(135deg, var(--signal), #e8952a); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: var(--serif); |
| font-size: 4rem; |
| color: #0a0500; |
| flex-shrink: 0; |
| box-shadow: 0 24px 60px -20px rgba(242, 184, 75, 0.35); |
| transition: transform 0.5s var(--ease); |
| } |
| |
| .mentor-avatar:hover { |
| transform: scale(1.06) rotate(-3deg); |
| } |
| |
| .mentor-info { |
| flex: 1; |
| min-width: 260px; |
| } |
| |
| .mentor-name { |
| font-family: var(--serif); |
| font-size: 2.2rem; |
| font-weight: 400; |
| margin-bottom: 4px; |
| } |
| |
| .mentor-role { |
| font-family: var(--mono); |
| font-size: 0.72rem; |
| letter-spacing: 0.28em; |
| color: var(--signal); |
| text-transform: uppercase; |
| margin-bottom: 18px; |
| } |
| |
| .mentor-desc { |
| font-size: 1rem; |
| color: var(--dim); |
| line-height: 1.78; |
| max-width: 52ch; |
| } |
| |
| |
| .team-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 24px; |
| margin-top: 52px; |
| } |
| |
| .tm { |
| background: rgba(255, 255, 255, 0.035); |
| border: 1px solid var(--line); |
| border-radius: var(--r); |
| padding: 44px 32px 36px; |
| text-align: center; |
| position: relative; |
| overflow: hidden; |
| transition: |
| border-color 0.4s var(--ease), |
| box-shadow 0.4s var(--ease), |
| transform 0.4s var(--ease); |
| } |
| |
| .tm:hover { |
| border-color: var(--lineb); |
| transform: translateY(-10px); |
| } |
| |
| .tm::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 2px; |
| opacity: 0; |
| transition: opacity 0.4s; |
| } |
| |
| .tm:hover::before { |
| opacity: 1; |
| } |
| |
| .tm:nth-child(1)::before { |
| background: var(--ion); |
| } |
| |
| .tm:nth-child(2)::before { |
| background: var(--signal); |
| } |
| |
| .tm:nth-child(3)::before { |
| background: var(--plasma); |
| } |
| |
| .tm:nth-child(4)::before { |
| background: var(--teal); |
| } |
| |
| .tm:nth-child(1):hover { |
| box-shadow: 0 28px 60px -20px rgba(94, 212, 245, 0.2); |
| border-color: rgba(94, 212, 245, 0.3); |
| } |
| |
| .tm:nth-child(2):hover { |
| box-shadow: 0 28px 60px -20px rgba(242, 184, 75, 0.2); |
| border-color: rgba(242, 184, 75, 0.3); |
| } |
| |
| .tm:nth-child(3):hover { |
| box-shadow: 0 28px 60px -20px rgba(184, 155, 255, 0.2); |
| border-color: rgba(184, 155, 255, 0.3); |
| } |
| |
| .tm:nth-child(4):hover { |
| box-shadow: 0 28px 60px -20px rgba(0, 240, 204, 0.2); |
| border-color: rgba(0, 240, 204, 0.3); |
| } |
| |
| .tm-av { |
| width: 88px; |
| height: 88px; |
| border-radius: 50%; |
| margin: 0 auto 22px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: var(--serif); |
| font-size: 2.4rem; |
| color: #0a0500; |
| font-weight: 400; |
| position: relative; |
| transition: transform 0.4s var(--ease); |
| } |
| |
| .tm:hover .tm-av { |
| transform: scale(1.1) rotate(5deg); |
| } |
| |
| .tm:nth-child(1) .tm-av { |
| background: linear-gradient(135deg, var(--ion), #2a9bd4); |
| box-shadow: 0 14px 36px -10px rgba(94, 212, 245, 0.4); |
| } |
| |
| .tm:nth-child(2) .tm-av { |
| background: linear-gradient(135deg, var(--signal), #e8952a); |
| box-shadow: 0 14px 36px -10px rgba(242, 184, 75, 0.4); |
| } |
| |
| .tm:nth-child(3) .tm-av { |
| background: linear-gradient(135deg, var(--plasma), #7c3aed); |
| box-shadow: 0 14px 36px -10px rgba(184, 155, 255, 0.4); |
| } |
| |
| .tm:nth-child(4) .tm-av { |
| background: linear-gradient(135deg, var(--teal), #00a895); |
| box-shadow: 0 14px 36px -10px rgba(0, 240, 204, 0.4); |
| } |
| |
| |
| .tm-av::after { |
| content: ''; |
| position: absolute; |
| inset: -10px; |
| border-radius: 50%; |
| border: 1px dashed rgba(255, 255, 255, 0.15); |
| animation: orbit 8s linear infinite; |
| pointer-events: none; |
| } |
| |
| @keyframes orbit { |
| to { |
| transform: rotate(360deg); |
| } |
| } |
| |
| .tm-name { |
| font-family: var(--serif); |
| font-size: 1.6rem; |
| font-weight: 400; |
| margin-bottom: 6px; |
| } |
| |
| .tm-role { |
| font-family: var(--mono); |
| font-size: 0.68rem; |
| letter-spacing: 0.2em; |
| color: var(--dim); |
| text-transform: uppercase; |
| margin-bottom: 18px; |
| } |
| |
| .tm-tags { |
| display: flex; |
| gap: 7px; |
| flex-wrap: wrap; |
| justify-content: center; |
| } |
| |
| .tag { |
| font-family: var(--mono); |
| font-size: 0.62rem; |
| font-weight: 700; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| color: var(--dim); |
| padding: 5px 10px; |
| border-radius: 6px; |
| background: rgba(255, 255, 255, 0.045); |
| border: 1px solid var(--line); |
| transition: border-color 0.3s; |
| } |
| |
| .tm:hover .tag { |
| border-color: var(--lineb); |
| } |
| |
| |
| .timeline-section { |
| border-top: 1px solid var(--line); |
| } |
| |
| .timeline { |
| position: relative; |
| margin-top: 60px; |
| padding-left: 42px; |
| } |
| |
| .timeline::before { |
| content: ''; |
| position: absolute; |
| left: 14px; |
| top: 0; |
| bottom: 0; |
| width: 1px; |
| background: var(--lineb); |
| } |
| |
| .tl-item { |
| position: relative; |
| padding-bottom: 52px; |
| } |
| |
| .tl-item:last-child { |
| padding-bottom: 0; |
| } |
| |
| .tl-dot { |
| position: absolute; |
| left: -42px; |
| top: 4px; |
| width: 28px; |
| height: 28px; |
| border-radius: 50%; |
| border: 2px solid var(--lineb); |
| background: var(--void); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| z-index: 2; |
| transition: |
| border-color 0.4s, |
| box-shadow 0.4s; |
| } |
| |
| .tl-dot::after { |
| content: ''; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--dim); |
| transition: background 0.4s; |
| } |
| |
| .tl-item:hover .tl-dot { |
| border-color: var(--signal); |
| box-shadow: 0 0 20px -4px var(--signal); |
| } |
| |
| .tl-item:hover .tl-dot::after { |
| background: var(--signal); |
| } |
| |
| .tl-date { |
| font-family: var(--mono); |
| font-size: 0.68rem; |
| letter-spacing: 0.22em; |
| color: var(--signal); |
| text-transform: uppercase; |
| margin-bottom: 10px; |
| } |
| |
| .tl-title { |
| font-family: var(--serif); |
| font-size: 1.5rem; |
| font-weight: 400; |
| margin-bottom: 8px; |
| } |
| |
| .tl-desc { |
| font-size: 0.94rem; |
| color: var(--dim); |
| line-height: 1.72; |
| max-width: 52ch; |
| } |
| |
| |
| .stats-bar { |
| border-top: 1px solid var(--line); |
| border-bottom: 1px solid var(--line); |
| background: rgba(255, 255, 255, 0.015); |
| } |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 0; |
| max-width: 1360px; |
| margin: 0 auto; |
| } |
| |
| .stat { |
| padding: 48px 32px; |
| text-align: center; |
| border-right: 1px solid var(--line); |
| transition: background 0.3s; |
| } |
| |
| .stat:last-child { |
| border-right: none; |
| } |
| |
| .stat:hover { |
| background: rgba(255, 255, 255, 0.025); |
| } |
| |
| .stat-num { |
| font-family: var(--serif); |
| font-size: clamp(2.4rem, 4vw, 3.6rem); |
| font-weight: 400; |
| line-height: 1; |
| margin-bottom: 8px; |
| } |
| |
| .stat:nth-child(1) .stat-num { |
| color: var(--ion); |
| } |
| |
| .stat:nth-child(2) .stat-num { |
| color: var(--signal); |
| } |
| |
| .stat:nth-child(3) .stat-num { |
| color: var(--teal); |
| } |
| |
| .stat:nth-child(4) .stat-num { |
| color: var(--plasma); |
| } |
| |
| .stat-label { |
| font-family: var(--mono); |
| font-size: 0.68rem; |
| letter-spacing: 0.22em; |
| color: var(--dim); |
| text-transform: uppercase; |
| } |
| |
| |
| .mission-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 24px; |
| margin-top: 52px; |
| } |
| |
| .mission-card { |
| background: rgba(255, 255, 255, 0.035); |
| border: 1px solid var(--line); |
| border-radius: var(--r); |
| padding: 36px; |
| transition: |
| border-color 0.4s, |
| box-shadow 0.4s, |
| transform 0.4s var(--ease); |
| } |
| |
| .mission-card:hover { |
| border-color: var(--lineb); |
| transform: translateY(-6px); |
| } |
| |
| .mc-icon { |
| font-size: 2.2rem; |
| margin-bottom: 18px; |
| filter: drop-shadow(0 0 12px rgba(242, 184, 75, 0.4)); |
| } |
| |
| .mc-title { |
| font-family: var(--serif); |
| font-size: 1.35rem; |
| font-weight: 400; |
| margin-bottom: 10px; |
| } |
| |
| .mc-desc { |
| font-size: 0.92rem; |
| color: var(--dim); |
| line-height: 1.72; |
| } |
| |
| |
| .sf { |
| border-top: 1px solid var(--line); |
| background: rgba(255, 255, 255, 0.012); |
| backdrop-filter: blur(8px); |
| padding: 48px 52px 36px; |
| transition: |
| border-color 0.5s, |
| background 0.5s; |
| } |
| |
| .fi { |
| max-width: 1360px; |
| margin: 0 auto; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| flex-wrap: wrap; |
| gap: 22px; |
| } |
| |
| .fb { |
| font-family: var(--mono); |
| font-size: 0.7rem; |
| letter-spacing: 0.28em; |
| text-transform: uppercase; |
| color: var(--dim); |
| } |
| |
| .fb span { |
| color: var(--signal); |
| } |
| |
| .fl { |
| display: flex; |
| gap: 26px; |
| flex-wrap: wrap; |
| } |
| |
| .fl a { |
| color: var(--dim); |
| font-size: 0.88rem; |
| font-weight: 500; |
| transition: color 0.25s; |
| } |
| |
| .fl a:hover { |
| color: var(--ink); |
| } |
| |
| .fc { |
| color: var(--dim); |
| font-size: 0.82rem; |
| } |
| |
| |
| .mo { |
| position: fixed; |
| inset: 0; |
| z-index: 2000; |
| background: rgba(0, 0, 0, 0.82); |
| backdrop-filter: blur(14px); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.3s var(--ease); |
| } |
| |
| .mo.open { |
| opacity: 1; |
| pointer-events: auto; |
| } |
| |
| .md { |
| background: var(--panel); |
| border: 1px solid var(--lineb); |
| border-radius: 24px; |
| width: 90%; |
| max-width: 440px; |
| overflow: hidden; |
| transform: translateY(26px) scale(0.96); |
| transition: transform 0.4s var(--ease); |
| box-shadow: 0 40px 100px rgba(0, 0, 0, 0.75); |
| color: var(--ink); |
| } |
| |
| .mo.open .md { |
| transform: translateY(0) scale(1); |
| } |
| |
| .mhd { |
| padding: 30px; |
| border-bottom: 1px solid var(--line); |
| text-align: center; |
| } |
| |
| .mhd h2 { |
| font-family: var(--serif); |
| font-size: 1.75rem; |
| font-weight: 400; |
| } |
| |
| .mhd p { |
| font-size: 0.9rem; |
| color: var(--dim); |
| margin-top: 6px; |
| } |
| |
| .mbd { |
| padding: 30px; |
| } |
| |
| .ml2 { |
| font-size: 0.7rem; |
| font-weight: 700; |
| color: var(--dim); |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| display: block; |
| margin-bottom: 8px; |
| } |
| |
| .mi { |
| width: 100%; |
| padding: 13px; |
| border: 1px solid var(--lineb); |
| border-radius: 12px; |
| font-size: 0.93rem; |
| outline: none; |
| margin-bottom: 18px; |
| color: var(--ink); |
| background: rgba(255, 255, 255, 0.05); |
| font-family: var(--sans); |
| transition: border-color 0.3s; |
| } |
| |
| .mi:focus { |
| border-color: var(--em); |
| box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); |
| } |
| |
| .gbtn { |
| width: 100%; |
| padding: 13px; |
| background: #fff; |
| border: 1px solid #dadce0; |
| border-radius: 8px; |
| font-weight: 500; |
| font-size: 0.88rem; |
| cursor: pointer; |
| color: #3c4043; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| margin-bottom: 18px; |
| transition: 0.2s; |
| font-family: var(--sans); |
| } |
| |
| body.lm .gbtn { |
| background: #4285f4; |
| border: none; |
| color: #fff; |
| } |
| |
| .ms { |
| width: 100%; |
| padding: 13px; |
| background: var(--em); |
| border: none; |
| border-radius: 12px; |
| font-weight: 800; |
| font-size: 0.93rem; |
| cursor: pointer; |
| color: #06140e; |
| transition: 0.3s; |
| font-family: var(--sans); |
| } |
| |
| .ms:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 24px rgba(52, 211, 153, 0.3); |
| } |
| |
| .msk { |
| width: 100%; |
| padding: 13px; |
| background: none; |
| border: none; |
| font-size: 0.88rem; |
| font-weight: 600; |
| color: var(--dim); |
| cursor: pointer; |
| margin-top: 8px; |
| transition: 0.25s; |
| font-family: var(--sans); |
| } |
| |
| .msk:hover { |
| color: var(--ink); |
| } |
| |
| .mskd { |
| width: 100%; |
| padding: 13px; |
| background: transparent; |
| border: 1px solid #ef4444; |
| border-radius: 12px; |
| font-size: 0.93rem; |
| font-weight: 700; |
| color: #ef4444; |
| cursor: pointer; |
| margin-top: 10px; |
| transition: 0.25s; |
| font-family: var(--sans); |
| } |
| |
| .mskd:hover { |
| background: rgba(239, 68, 68, 0.1); |
| } |
| |
| .toast { |
| position: fixed; |
| bottom: 32px; |
| right: 32px; |
| background: var(--panel); |
| border: 1px solid var(--lineb); |
| color: var(--ink); |
| padding: 13px 22px; |
| border-radius: 12px; |
| font-size: 0.88rem; |
| font-weight: 700; |
| z-index: 3000; |
| transform: translateY(14px); |
| opacity: 0; |
| transition: 0.35s var(--ease); |
| pointer-events: none; |
| } |
| |
| .toast.show { |
| transform: translateY(0); |
| opacity: 1; |
| pointer-events: auto; |
| } |
| |
| .toast.green { |
| border-color: var(--em); |
| color: var(--em); |
| } |
| |
| |
| @media (max-width: 1024px) { |
| .team-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .stats-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| |
| .stat:nth-child(2) { |
| border-right: none; |
| } |
| |
| .mission-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| @media (max-width: 768px) { |
| .ahc { |
| padding: 120px 22px 60px; |
| } |
| |
| .sci { |
| left: 22px; |
| } |
| |
| .section { |
| padding: 80px 22px 60px; |
| } |
| |
| .team-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .stats-grid { |
| grid-template-columns: 1fr; |
| } |
| |
| .stat { |
| border-right: none; |
| border-bottom: 1px solid var(--line); |
| } |
| |
| .stat:last-child { |
| border-bottom: none; |
| } |
| |
| .mentor-card { |
| flex-direction: column; |
| text-align: center; |
| gap: 28px; |
| } |
| |
| .sf { |
| padding: 40px 22px 28px; |
| } |
| |
| .fi { |
| flex-direction: column; |
| gap: 16px; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| .about-hero h1 { |
| font-size: 2.6rem; |
| } |
| } |
| </style> |
| <script defer src="col-router.js"></script> |
| <link rel="stylesheet" href="col-ui.css?v=1782446126.5715783" /> |
| <script defer src="col-ui.js"></script> |
| <script defer src="col-auth.js"></script> |
| <link rel="manifest" href="manifest.json" /> |
| <meta name="apple-mobile-web-app-capable" content="yes" /> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> |
| </head> |
|
|
| <body> |
| <script> |
| ; (function () { |
| try { |
| if (localStorage.getItem('theme') === 'light') document.body.classList.add('lm') |
| } catch (e) { } |
| })() |
| </script> |
| <div class="loader" id="loader"> |
| <div class="lid"><span>CoL</span> · About</div> |
| <div class="lbar"></div> |
| </div> |
| <div class="cd" id="cDot"></div> |
| <div class="cr" id="cRing"></div> |
| <div id="ntip"> |
| <div id="ntip-inner"> |
| <div id="ntip-dot"></div> |
| <span id="ntip-name"></span> |
| </div> |
| </div> |
|
|
| <button class="mmb" id="mmb" aria-label="Toggle menu"> |
| <svg viewBox="0 0 24 24" fill="none"> |
| <path d="M3 6H21M3 12H21M3 18H21" stroke-width="1.5" stroke-linecap="round" /> |
| </svg> |
| </button> |
| <nav class="top-nav" id="topNav"> |
| <a href="home" class="nav-brand"><img src="Class.png" alt="Class Of Learners" class="brand-logo" width="56" |
| height="56" fetchpriority="high" decoding="async" /><span class="brand-name">Class Of Learners</span></a> |
| <div class="nav-links" id="navLinks"> |
| <a href="home" class="nav-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" /> |
| <polyline points="9 22 9 12 15 12 15 22" /> |
| </svg>Home</a> |
| <a href="about" class="nav-link act"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <circle cx="12" cy="12" r="10" /> |
| <path d="M12 16v-4" /> |
| <path d="M12 8h.01" /> |
| </svg>About</a> |
| <a href="school" class="nav-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z" /> |
| <path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z" /> |
| </svg>School</a> |
| <a href="sneh-asha" class="nav-link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <path |
| d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" /> |
| </svg>Sneh Asha</a> |
| <div class="dropdown" id="projDD" onclick="this.classList.toggle('active')"> |
| <button class="dropdown-btn"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| stroke-linejoin="round"> |
| <rect x="2" y="3" width="20" height="14" rx="2" ry="2" /> |
| <line x1="8" y1="21" x2="16" y2="21" /> |
| <line x1="12" y1="17" x2="12" y2="21" /> |
| </svg>Projects <span class="darr">▼</span> |
| </button> |
| <div class="dropdown-content"> |
| <div class="dropdown-content-inner"> |
| <a href="ati"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <polyline points="4 7 4 4 20 4 20 7" /> |
| <line x1="9" y1="20" x2="15" y2="20" /> |
| <line x1="12" y1="4" x2="12" y2="20" /> |
| </svg>Typing Instructor</a><a href="solar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" |
| stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <circle cx="12" cy="12" r="5" /> |
| <line x1="12" y1="1" x2="12" y2="3" /> |
| <line x1="12" y1="21" x2="12" y2="23" /> |
| <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /> |
| <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /> |
| <line x1="1" y1="12" x2="3" y2="12" /> |
| <line x1="21" y1="12" x2="23" y2="12" /> |
| <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /> |
| <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" /> |
| </svg>Solar Engine</a><a href="gesture"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" |
| stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M18 8h1a4 4 0 010 8h-1" /> |
| <path d="M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z" /> |
| <line x1="6" y1="1" x2="6" y2="4" /> |
| <line x1="10" y1="1" x2="10" y2="4" /> |
| <line x1="14" y1="1" x2="14" y2="4" /> |
| </svg>Gesture Control</a><a href="rpg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" |
| stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" /> |
| </svg>RPG Game</a><a href="qr"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" |
| stroke-linecap="round" stroke-linejoin="round"> |
| <rect x="2" y="2" width="8" height="8" rx="1" /> |
| <rect x="14" y="2" width="8" height="8" rx="1" /> |
| <rect x="2" y="14" width="8" height="8" rx="1" /> |
| <rect x="14" y="14" width="4" height="4" /> |
| <rect x="20" y="14" width="2" height="2" /> |
| <rect x="14" y="20" width="2" height="2" /> |
| <rect x="20" y="20" width="2" height="2" /> |
| </svg>QR Generator</a> |
| </div> |
| </div> |
| </div> |
| <div class="hz-toggle" onclick="hzToggle()"> |
| <div class="hz-stars"></div> |
| <div class="hz-skyline"></div> |
| <div class="hz-windows"></div> |
| <div class="hz-orb"></div> |
| </div> |
| <button class="nav-login-btn" id="navLoginBtn" onclick="openLogin()"> |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| stroke-linejoin="round"> |
| <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" /> |
| <circle cx="12" cy="7" r="4" /> |
| </svg>Sign In |
| </button> |
| <div class="nav-user-profile" id="navUserProfile" onclick="openLogin()"> |
| <div class="nav-user-avatar" id="navUserAv">?</div> |
| <span class="nun" id="navUserName">User</span> |
| </div> |
| <a href="download" class="nav-dl-btn mobile-dl"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" |
| stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
| <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" /> |
| <polyline points="7 10 12 15 17 10" /> |
| <line x1="12" y1="15" x2="12" y2="3" /> |
| </svg>Downloads</a> |
| </div> |
| <button class="mobile-close" id="mobileClose" aria-label="Close menu"> |
| <svg viewBox="0 0 24 24" fill="none"> |
| <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round" /> |
| <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round" /> |
| </svg> |
| </button> |
| <a href="download" class="nav-dl-btn desktop-dl">Downloads Hub</a> |
| </nav> |
|
|
| |
| <section class="about-hero"> |
| <canvas id="constellation"></canvas> |
| <div class="hvig"></div> |
| <div class="hvigb"></div> |
| <div class="ahc"> |
| <div class="hey">Our Story · Est. 2024</div> |
| <h1>The Minds Behind The <em>Code</em>.</h1> |
| <p class="hlede"> |
| Three passionate students from Mumbai with a shared obsession for programming logic, deep-space physics, and |
| interactive design — building tools the world can learn from. We believe |
| that technology should be accessible, and education should be an engaging journey fueled by curiosity and |
| innovation. |
| </p> |
| </div> |
| <div class="sci"> |
| <span>Scroll</span> |
| <div class="scl"></div> |
| </div> |
| </section> |
|
|
| |
| <section class="stats-bar"> |
| <div class="stats-grid"> |
| <div class="stat rv"> |
| <div class="stat-num">05</div> |
| <div class="stat-label">Active Projects</div> |
| </div> |
| <div class="stat rv"> |
| <div class="stat-num">04</div> |
| <div class="stat-label">Team Members</div> |
| </div> |
| <div class="stat rv"> |
| <div class="stat-num">15K+</div> |
| <div class="stat-label">Lines of Code</div> |
| </div> |
| <div class="stat rv"> |
| <div class="stat-num">01</div> |
| <div class="stat-label">Mentor</div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="section mentor-section rv"> |
| <div class="sey">Guided By</div> |
| <div class="mentor-card"> |
| <div class="mentor-avatar">S</div> |
| <div class="mentor-info"> |
| <h2 class="mentor-name">Sanjana Kasbe</h2> |
| <div class="mentor-role">Project Mentor & Educator</div> |
| <p class="mentor-desc"> |
| Providing invaluable guidance, feedback, and academic support to help shape and refine these advanced learning |
| modules and programming projects. Her mentorship drives the studio's ambition |
| to build beyond the classroom. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="section rv"> |
| <div class="sey">The Core Team</div> |
| <h2 class="st">Three Students. One Studio.</h2> |
| <p class="sdesc">Each member brings a different strength to the table — from low-level system architecture to |
| physics simulations to pixel-perfect design.</p> |
| <div class="team-grid"> |
| <div class="tm rv"> |
| <div class="tm-av">N</div> |
| <h3 class="tm-name">Neel Badri</h3> |
| <div class="tm-role">Lead Developer & Logic Engine</div> |
| <p class="tm-bio" |
| style="font-size: 0.9rem; color: var(--dim); margin: 15px 0; text-align: left; line-height: 1.6"> |
| Neel architects the core systems and backend logic. Passionate about low-level programming and algorithmic |
| efficiency, he ensures every module runs smoothly, from complex math calculations |
| to seamless user authentication. |
| </p> |
| <div class="tm-tags"> |
| <span class="tag">Python</span><span class="tag">C++</span><span class="tag">System Arch</span><span |
| class="tag">HTML / CSS</span><span class="tag">JavaScript</span> |
| </div> |
| </div> |
| <div class="tm rv"> |
| <div class="tm-av">A</div> |
| <h3 class="tm-name">Ansh Patil</h3> |
| <div class="tm-role">Co-Developer & Quality Assurance</div> |
| <p class="tm-bio" |
| style="font-size: 0.9rem; color: var(--dim); margin: 15px 0; text-align: left; line-height: 1.6"> |
| Ansh meticulously tests edge cases and refines user flows. His keen eye for detail ensures high reliability |
| across all projects, acting as the bridge between raw ideas and polished |
| implementations. |
| </p> |
| <div class="tm-tags"><span class="tag">HTML / CSS</span><span class="tag">QA Testing</span><span |
| class="tag">Idea Inventor</span><span class="tag">Presenter</span></div> |
| </div> |
| <div class="tm rv"> |
| <div class="tm-av">Aa</div> |
| <h3 class="tm-name">Aarush Vangari</h3> |
| <div class="tm-role">UI/UX Design & Physics Engine</div> |
| <p class="tm-bio" |
| style="font-size: 0.9rem; color: var(--dim); margin: 15px 0; text-align: left; line-height: 1.6"> |
| Aarush brings ideas to life with stunning interfaces and fluid physics simulations. Combining artistic vision |
| with mathematical precision, he creates the engaging 3D environments and |
| aesthetic language of CoL. |
| </p> |
| <div class="tm-tags"><span class="tag">Design</span><span class="tag">Telemetry</span><span |
| class="tag">Physics</span></div> |
| </div> |
| <div class="tm rv"> |
| <div class="tm-av">Y</div> |
| <h3 class="tm-name">Yashan Jadhav</h3> |
| <div class="tm-role">QA Tester, UI/UX Designer & Idea Developer</div> |
| <p class="tm-bio" |
| style="font-size: 0.9rem; color: var(--dim); margin: 15px 0; text-align: left; line-height: 1.6"> |
| Yashan specializes in refining user experiences, stress-testing core concepts, and developing new ideas. By bridging the gap between |
| initial ideation and final implementation, he ensures every feature is intuitive and robust. |
| </p> |
| <div class="tm-tags"><span class="tag">QA Testing</span><span class="tag">UI/UX Design</span><span |
| class="tag">Idea Developer</span></div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="section rv"> |
| <div class="sey">What We Believe</div> |
| <h2 class="st">Our Mission.</h2> |
| <p class="sdesc">We don't just build projects for grades — we build tools that solve real problems and teach |
| real skills.</p> |
| <div class="mission-grid"> |
| <div class="mission-card rv"> |
| <div class="mc-icon">🚀</div> |
| <h3 class="mc-title">Learn By Building</h3> |
| <p class="mc-desc"> |
| Every project in our studio exists because we wanted to understand something deeply — orbital mechanics, |
| computer vision, game engines. The best way to learn is to ship. |
| </p> |
| </div> |
| <div class="mission-card rv"> |
| <div class="mc-icon">🌏</div> |
| <h3 class="mc-title">Open & Accessible</h3> |
| <p class="mc-desc">All of our tools are free to use and accessible from any browser. No downloads, no logins |
| required. Education should have zero barriers.</p> |
| </div> |
| <div class="mission-card rv"> |
| <div class="mc-icon">⚡</div> |
| <h3 class="mc-title">Production Quality</h3> |
| <p class="mc-desc">We hold ourselves to professional standards — real physics engines, real-time 3D |
| rendering, responsive design, and performance-optimized code.</p> |
| </div> |
| <div class="mission-card rv"> |
| <div class="mc-icon">🤖</div> |
| <h3 class="mc-title">Always Evolving</h3> |
| <p class="mc-desc">Our studio is a living portfolio. We constantly iterate, redesign, and push the boundaries of |
| what student-built software can look and feel like.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="section timeline-section rv"> |
| <div class="sey">Our Journey</div> |
| <h2 class="st">From Idea To Engine.</h2> |
| <div class="timeline"> |
| <div class="tl-item rv"> |
| <div class="tl-dot"></div> |
| <div class="tl-date">Early 2024</div> |
| <h3 class="tl-title">The Spark</h3> |
| <p class="tl-desc">Neel, Ansh, and Aarush began brainstorming ideas for interactive learning tools that went |
| beyond PowerPoint slides and textbook PDFs.</p> |
| </div> |
| <div class="tl-item rv"> |
| <div class="tl-dot"></div> |
| <div class="tl-date">Mid 2024</div> |
| <h3 class="tl-title">First Prototypes</h3> |
| <p class="tl-desc">The Advanced Typing Instructor and Solar System Engine were born. Rough, buggy, but full of |
| ambition. Sanjana Kasbe joined as project mentor.</p> |
| </div> |
| <div class="tl-item rv"> |
| <div class="tl-dot"></div> |
| <div class="tl-date">Late 2024</div> |
| <h3 class="tl-title">Studio Launch</h3> |
| <p class="tl-desc">Class of Learners went live with five projects, a unified design language, and a custom-built |
| admin dashboard for remote page management.</p> |
| </div> |
| <div class="tl-item rv"> |
| <div class="tl-dot"></div> |
| <div class="tl-date">2025 — Present</div> |
| <h3 class="tl-title">The Next Chapter</h3> |
| <p class="tl-desc">Migration to a custom domain, 3D WebGL backgrounds, gesture control prototypes, and an RPG |
| game currently in active development.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="sf"> |
| <div class="fi"> |
| <div class="fb"><span>CoL</span> · Class Of Learners</div> |
| <div class="fl"> |
| <a href="privacy">Privacy</a> |
| <a href="terms">Terms</a> |
| <a href="feedback">Feedback</a> |
| <a href="download">Downloads</a> |
| </div> |
| <div class="fc">© 2026 Neel, Ansh, Aarush & Yashan.</div> |
| </div> |
| </footer> |
|
|
| |
| <div class="mo" id="loginMo" onclick="if (event.target === this) closeMo()"> |
| <div class="md"> |
| <div class="mhd"> |
| <h2 id="moAuthTitle">Authenticate</h2> |
| <p id="moAuthSub">Unlock dashboard storage and cloud sync.</p> |
| </div> |
| <div class="mbd"> |
| <button class="gbtn" id="gSignInBtn" onclick="gSignIn()"> |
| <svg width="18" height="18" viewBox="0 0 24 24"> |
| <path |
| d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" |
| fill="#4285F4" /> |
| <path |
| d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" |
| fill="#34A853" /> |
| <path |
| d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" |
| fill="#FBBC05" /> |
| <path |
| d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" |
| fill="#EA4335" /> |
| </svg> |
| Continue with Google |
| </button> |
| <div id="loggedInPanel" style="display: none"> |
| <label class="ml2">Username</label> |
| <input class="mi" id="miName" type="text" placeholder="Your display name" /> |
| <label class="ml2">Email</label> |
| <input class="mi" id="miEmail" type="email" placeholder="Email address" readonly /> |
| <button class="ms" onclick="updateUsername()">Save Changes</button> |
| <button class="mskd" onclick="doLogout()">Sign Out</button> |
| </div> |
| <button class="msk" onclick="closeMo()">Maybe Later</button> |
| </div> |
| </div> |
| </div> |
| <div class="toast" id="toast"></div> |
|
|
| |
| <script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script defer src="col-3d.js"></script> |
| <script> |
| |
| ; (function () { |
| document.querySelectorAll('.tm,.mission-card').forEach(function (el) { |
| el.addEventListener('mouseenter', function () { |
| document.body.classList.add('ch') |
| }) |
| el.addEventListener('mouseleave', function () { |
| document.body.classList.remove('ch') |
| }) |
| }) |
| })() |
| |
| function removeLoader() { var l = document.getElementById('loader'); if (l && !l.classList.contains('gone')) l.classList.add('gone'); } window.addEventListener('load', function () { setTimeout(removeLoader, 1300); }); setTimeout(removeLoader, 4000); |
| var navEl = document.getElementById('topNav') |
| window.addEventListener( |
| 'scroll', |
| function () { |
| navEl.classList.toggle('s', scrollY > 60) |
| }, |
| { passive: true } |
| ) |
| window.addEventListener('click', function (e) { |
| if (!e.target.closest('.dropdown')) |
| document.querySelectorAll('.dropdown').forEach(function (d) { |
| d.classList.remove('active') |
| }) |
| }) |
| |
| |
| ; (function () { |
| var els = document.querySelectorAll('.rv') |
| var io = new IntersectionObserver( |
| function (entries) { |
| entries.forEach(function (entry) { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('vis') |
| io.unobserve(entry.target) |
| } |
| }) |
| }, |
| { threshold: 0.08 } |
| ) |
| els.forEach(function (el) { |
| io.observe(el) |
| }) |
| })() |
| |
| |
| document.querySelectorAll('.tm').forEach(function (card) { |
| card.addEventListener('mousemove', function (e) { |
| if (innerWidth < 768) return |
| var r = card.getBoundingClientRect(), |
| x = (e.clientX - r.left) / r.width - 0.5, |
| y = (e.clientY - r.top) / r.height - 0.5 |
| card.style.transform = 'translateY(-10px) perspective(900px) rotateX(' + -y * 5 + 'deg) rotateY(' + x * 5 + 'deg)' |
| }) |
| card.addEventListener('mouseleave', function () { |
| card.style.transform = '' |
| }) |
| }) |
| |
| |
| var Storage = { |
| get: function (k) { |
| try { |
| return localStorage.getItem(k) |
| } catch (e) { |
| return null |
| } |
| }, |
| set: function (k, v) { |
| try { |
| localStorage.setItem(k, v) |
| } catch (e) { } |
| } |
| } |
| |
| function initializeTheme() { |
| var tsck = document.getElementById('tsck') |
| var tl = document.getElementById('tLabel') |
| |
| if (Storage.get('theme') === 'light') { |
| document.body.classList.add('lm') |
| if (tsck) tsck.checked = true |
| if (tl) tl.textContent = 'Light Mode' |
| } else { |
| |
| document.body.classList.remove('lm') |
| if (tsck) tsck.checked = false |
| if (tl) tl.textContent = 'Dark Mode' |
| Storage.set('theme', 'dark') |
| } |
| } |
| |
| function toggleTheme(el) { |
| var tl = document.getElementById('tLabel') |
| if (el.checked) { |
| document.body.classList.add('lm') |
| Storage.set('theme', 'light') |
| if (tl) tl.textContent = 'Light Mode' |
| } else { |
| document.body.classList.remove('lm') |
| Storage.set('theme', 'dark') |
| if (tl) tl.textContent = 'Dark Mode' |
| } |
| } |
| |
| ; (function () { |
| initializeTheme() |
| })() |
| </script> |
| <script> |
| function hzInit() { var t = localStorage.getItem('theme'); if (t === 'light') { document.body.classList.add('lm') } else { document.body.classList.remove('lm') } hzSync() } |
| function hzSync() { var el = document.querySelector('.hz-toggle'); if (!el) return; if (document.body.classList.contains('lm')) { el.classList.remove('night') } else { el.classList.add('night') } } |
| function hzToggle() { document.body.classList.toggle('lm'); localStorage.setItem('theme', document.body.classList.contains('lm') ? 'light' : 'dark'); hzSync() } |
| hzInit() |
| </script> |
| </body> |
|
|
| </html> |
