Forge — Bold Creative Agency Landing

<nav class="container py-3 d-flex align-items-center">
  <span class="fw-bolder fs-4" style="letter-spacing:-.04em">ATLAS<span style="color:var(--fg-cyan)">*</span> STUDIO</span>
  <div class="ms-auto d-none d-md-flex gap-4 small fw-semibold"><a class="text-dark text-decoration-none" href="#work">Work</a><a class="text-dark text-decoration-none" href="#services">Services</a><a class="text-dark text-decoration-none" href="#contact">Contact</a></div>
  <button class="btn btn-fg btn-sm ms-3">Start a project</button>
</nav>
<header class="container py-5">
  <p class="fg-mono small mb-2" style="color:var(--fg-cyan)">// the studio behind convertatlas.org</p>
  <h1 class="fg-display">WE BUILD<br><span class="fg-outline">TOOLS</span> THAT<br>DEVELOPERS KEEP OPEN.</h1>
  <div class="d-flex flex-wrap align-items-center gap-4 mt-4">
    <button class="btn btn-fg">See our work ↘</button>
    <span class="small text-secondary" style="max-width:300px">Developer tools, UI snippets and templates — crafted in Riga, used worldwide on convertatlas.org.</span>
  </div>
</header>
<div class="fg-marq my-4"><div class="fg-marq-track"><span>TOOLS ✦ SNIPPETS ✦ TEMPLATES ✦ GUIDES ✦ CHEATSHEETS ✦ </span><span>TOOLS ✦ SNIPPETS ✦ TEMPLATES ✦ GUIDES ✦ CHEATSHEETS ✦ </span></div></div>
<section id="work" class="container py-5">
  <h2 class="fw-bold mb-4">Selected work <span class="fg-mono fg-num">(2024–26)</span></h2>
  <div class="row g-4">
    <div class="col-md-6"><a class="fg-work" href="#"><div style="height:230px;background:linear-gradient(135deg,#0c8fc4,#5dd6ff)"></div><div class="p-3 d-flex justify-content-between align-items-center"><div><h6 class="fw-bold mb-0">ConvertAtlas Toolkit</h6><span class="small text-secondary">60+ tools · PHP MVC</span></div><i class="bi bi-arrow-right fs-4"></i></div></a></div>
    <div class="col-md-6"><a class="fg-work" href="#"><div style="height:230px;background:linear-gradient(135deg,#101010,#444)"></div><div class="p-3 d-flex justify-content-between align-items-center"><div><h6 class="fw-bold mb-0">Atlas Snippets Library</h6><span class="small text-secondary">435+ components · Bootstrap 5</span></div><i class="bi bi-arrow-right fs-4"></i></div></a></div>
    <div class="col-md-6"><a class="fg-work" href="#"><div style="height:230px;background:linear-gradient(135deg,#f59e0b,#ef4444)"></div><div class="p-3 d-flex justify-content-between align-items-center"><div><h6 class="fw-bold mb-0">Atlas Templates</h6><span class="small text-secondary">18 page designs · single-file</span></div><i class="bi bi-arrow-right fs-4"></i></div></a></div>
    <div class="col-md-6"><a class="fg-work" href="#"><div style="height:230px;background:linear-gradient(135deg,#16a34a,#a3e635)"></div><div class="p-3 d-flex justify-content-between align-items-center"><div><h6 class="fw-bold mb-0">Dev Guides &amp; Cheatsheets</h6><span class="small text-secondary">SEO content · schema.org</span></div><i class="bi bi-arrow-right fs-4"></i></div></a></div>
  </div>
</section>
<section id="services" class="container py-5">
  <h2 class="fw-bold mb-4">What we do</h2>
  <div class="fg-svc d-flex flex-wrap align-items-baseline gap-3"><span class="fg-mono fg-num">01</span><h4 class="fw-bold mb-0 flex-fill">Browser tools</h4><span class="small text-secondary">Converters, formatters, generators — client-side</span></div>
  <div class="fg-svc d-flex flex-wrap align-items-baseline gap-3"><span class="fg-mono fg-num">02</span><h4 class="fw-bold mb-0 flex-fill">UI snippets</h4><span class="small text-secondary">Copy-paste Bootstrap 5 &amp; vanilla components</span></div>
  <div class="fg-svc d-flex flex-wrap align-items-baseline gap-3"><span class="fg-mono fg-num">03</span><h4 class="fw-bold mb-0 flex-fill">Page templates</h4><span class="small text-secondary">Dashboards, logins, landings — download &amp; ship</span></div>
  <div class="fg-svc d-flex flex-wrap align-items-baseline gap-3" style="border-bottom:2px solid var(--fg-ink)"><span class="fg-mono fg-num">04</span><h4 class="fw-bold mb-0 flex-fill">Guides &amp; docs</h4><span class="small text-secondary">Cheatsheets, HTTP codes, practical how-tos</span></div>
</section>
<section id="contact" class="py-5" style="background:var(--fg-ink);color:var(--fg-ivory)">
  <div class="container text-center py-4">
    <h2 class="fg-display" style="font-size:clamp(2rem,6vw,3.6rem)">GOT AN IDEA?</h2>
    <p class="opacity-75 mb-4">Suggest a tool or template — the best ideas get built.</p>
    <a class="btn btn-lg px-5" style="background:var(--fg-cyan);color:#fff;border-radius:0;font-weight:700" href="mailto:hello@convertatlas.org">hello@convertatlas.org</a>
  </div>
</section>
<footer class="container py-4 d-flex flex-wrap justify-content-between small">
  <span class="fw-bold">ATLAS* STUDIO © 2026</span>
  <span class="fg-mono">Built with <a href="https://convertatlas.org" style="color:var(--fg-cyan);text-decoration:none;font-weight:700">ConvertAtlas</a></span>
</footer>

:root{--fg-ink:#101010;--fg-ivory:#f6f3ee;--fg-cyan:#0c8fc4}
body{background:var(--fg-ivory);color:var(--fg-ink);font-family:'Segoe UI',system-ui,sans-serif}
.fg-mono{font-family:ui-monospace,'JetBrains Mono',monospace}
.fg-display{font-weight:800;letter-spacing:-.045em;line-height:.98;font-size:clamp(2.6rem,8vw,5.4rem)}
.fg-outline{color:transparent;-webkit-text-stroke:2px var(--fg-ink)}
.fg-marq{overflow:hidden;border-top:2px solid var(--fg-ink);border-bottom:2px solid var(--fg-ink);background:var(--fg-ink);color:var(--fg-ivory)}
.fg-marq-track{display:flex;gap:48px;white-space:nowrap;padding:12px 0;animation:fg-roll 18s linear infinite;font-weight:700}
@keyframes fg-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.fg-num{font-size:.85rem;color:var(--fg-cyan)}
.fg-svc{border-top:2px solid var(--fg-ink);padding:26px 0;transition:.15s}
.fg-svc:hover{padding-left:14px}
.fg-work{border-radius:0;border:2px solid var(--fg-ink);overflow:hidden;text-decoration:none;color:inherit;display:block;transition:.15s;background:#fff}
.fg-work:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--fg-ink);color:inherit}
.btn-fg{background:var(--fg-ink);color:var(--fg-ivory);border-radius:0;border:2px solid var(--fg-ink);padding:.75rem 1.6rem;font-weight:700}
.btn-fg:hover{background:var(--fg-cyan);border-color:var(--fg-cyan);color:#fff}