71 lines
8.6 KiB
HTML
71 lines
8.6 KiB
HTML
<!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="Teppelin Labs is an online collective of digital builders pushing the boundaries of today's technology.">
|
|
<title>Teppelin Labs - Digital Builders, One Collective</title>
|
|
<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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body data-page="home">
|
|
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
|
|
<header class="site-header">
|
|
<a class="brand" href="index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a>
|
|
<button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button>
|
|
<nav class="site-nav" aria-label="Primary navigation">
|
|
<span class="nav-divider">Explore</span><a href="index.html" data-nav="home">About</a><a href="pages/solutions.html" data-nav="solutions">Build</a><a href="pages/work.html" data-nav="work">Lab</a>
|
|
<span class="nav-divider">Members</span><a href="pages/methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="pages/join.html" data-nav="join">Apply</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<section class="hero grid-surface">
|
|
<div class="hero-topline reveal"><p class="eyebrow">Online collective / Built on Discord</p><p class="hero-intro">Teppelin Labs is an organized group of digital builders pushing the boundaries of today's technology.</p></div>
|
|
<div class="hero-title-row reveal reveal-delay"><div class="hero-orbit" aria-hidden="true"></div><h1 class="display">Digital<br><span class="text-orange">builders.</span><br>One collective.</h1></div>
|
|
<div class="hero-bottom reveal"><div class="hero-note"><span class="meta">Global / Online / Always building</span><p>Independent minds. Shared momentum.</p></div><div class="hero-actions"><p>We bring developers, designers, researchers, and technical creators together to learn faster and build beyond the obvious.</p><a class="btn" href="pages/methodology.html">Meet the collective</a></div></div>
|
|
</section>
|
|
|
|
<div class="marquee" aria-hidden="true"><div class="marquee-track"><span>Build <i>+</i> Share <i>+</i> Experiment <i>+</i> Collaborate <i>+</i> Ship <i>+</i></span><span>Build <i>+</i> Share <i>+</i> Experiment <i>+</i> Collaborate <i>+</i> Ship <i>+</i></span></div></div>
|
|
|
|
<section class="section grid-surface">
|
|
<p class="eyebrow reveal">Choose your path</p>
|
|
<div class="audience-split reveal">
|
|
<a class="audience-card" href="pages/solutions.html"><span class="meta">For visitors and collaborators</span><h3>See what<br>we build.</h3><p>Explore our disciplines, experiments, and the kinds of ambitious digital problems the collective takes on.</p><span class="arrow" aria-hidden="true">↗</span></a>
|
|
<a class="audience-card" href="pages/join.html"><span class="meta">For prospective members</span><h3>Build with<br>the collective.</h3><p>Learn how the Discord community operates, who thrives here, and how to apply for membership.</p><span class="arrow" aria-hidden="true">↗</span></a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section grid-surface">
|
|
<div class="intro-grid"><h2 class="section-title reveal">Different skills.<br>Shared <span class="text-orange">curiosity.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">Teppelin is a structured environment for people who learn by making.</p><p class="body-copy">Members trade knowledge, start projects, critique work, test new tools, and form small teams around ideas worth pursuing. The collective creates the context; builders create the momentum.</p></div></div>
|
|
<div class="builder-grid reveal">
|
|
<article class="builder-card"><span class="builder-glyph"></span><h3>Engineers</h3><p>Frontend, backend, mobile, infrastructure, creative code, and emerging platforms.</p></article>
|
|
<article class="builder-card"><span class="builder-glyph"></span><h3>Designers</h3><p>Product, brand, motion, 3D, interaction, systems, and visual experimentation.</p></article>
|
|
<article class="builder-card"><span class="builder-glyph"></span><h3>AI Builders</h3><p>Agents, applied models, automation, research, evaluation, and new interfaces.</p></article>
|
|
<article class="builder-card"><span class="builder-glyph"></span><h3>Technical Creators</h3><p>People combining disciplines to invent tools, experiences, and new ways of working.</p></article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="discord-panel">
|
|
<div class="discord-copy reveal"><div><p class="eyebrow">The community layer</p><h2 class="section-title">The lab lives<br>on Discord.</h2><p>Discord is our shared workshop: a place for active project rooms, technical deep dives, critique, calls, opportunities, and the everyday conversations that turn isolated builders into a real collective.</p></div><div class="button-row"><a class="btn btn-light" href="pages/methodology.html">How membership works</a><a class="btn btn-light" href="pages/join.html">Apply to join</a></div></div>
|
|
<div class="discord-visual reveal reveal-delay" aria-label="Illustration of Teppelin Labs Discord channels"><ul class="discord-channels"><li>introductions</li><li>build-in-public</li><li>project-labs</li><li>ai-systems</li><li>design-critique</li><li>opportunities</li></ul></div>
|
|
</section>
|
|
|
|
<section class="section grid-surface">
|
|
<div class="intro-grid"><h2 class="section-title reveal">A collective<br>you can <span class="text-orange">see.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">The strongest technology communities are visible through their people, process, and artifacts.</p><p class="body-copy">Our visual language focuses on concentrated builders, tactile prototypes, and the human texture behind ambitious digital work.</p></div></div>
|
|
<div class="media-direction reveal" style="margin-top:clamp(70px,9vw,140px);">
|
|
<article class="media-card" data-image-slot="hero-builders"><img src="assets/hero-builders.webp" alt="A group of digital builders working together in a technology studio" decoding="async" width="1672" height="941"><span class="media-card-label meta">01 / Build sessions</span><p class="media-card-prompt">People in the middle of real work, not posed profiles.</p></article>
|
|
<article class="media-card" data-image-slot="lab-hardware"><img src="assets/lab-hardware.webp" alt="Close-up of experimental computing hardware and prototypes" decoding="async" width="1536" height="1024"><span class="media-card-label meta">02 / Prototype detail</span><p class="media-card-prompt">The physical texture of experiments, tools, and unfinished ideas.</p></article>
|
|
<article class="media-card" data-image-slot="process-artifacts"><img src="assets/process-artifacts.webp" alt="A builder's workbench with sketches, electronic prototypes, tools, and material studies" decoding="async" width="1003" height="1568"><span class="media-card-label meta">03 / Process artifacts</span><p class="media-card-prompt">Craft made visible through sketches, tools, tests, and working prototypes.</p></article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="statement section-orange"><p class="reveal">The future is built by people willing to learn in public, collaborate deeply, and keep shipping.</p><img class="statement-mark" src="assets/brand/teppelin-flower-mark.png" alt="" aria-hidden="true"></section>
|
|
</main>
|
|
|
|
<footer class="site-footer"><div class="footer-cta"><h2 class="reveal">Find your people.<br>Build the next thing.</h2><a class="btn btn-orange reveal" href="pages/join.html">Apply for membership</a></div><div class="footer-bottom"><a class="footer-brand" href="index.html"><img class="footer-logo" src="assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="pages/solutions.html">What we build</a><a href="pages/work.html">The lab</a><a href="pages/methodology.html">The collective</a><a href="pages/join.html">Apply</a><a href="pages/contact.html">Collaborate</a></div><p class="footer-meta">© <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|