hypeorcode
Network offOpen alone (new tab)

Run details

Model
gpt-6-luna
Route
Command Code CLI
Reasoning
provider default
Limits
60 min
Date
2 Oct 2026
Time
62 s
Size
24 kB
Tokens
54,285 in, 8,940 out
List price
$0.010 ($0.1 in / $0.5 out per M)
Paid
Not billed per run (CLI plan)

Raw files: output · meta.json

Exact prompt

Build the landing page for Lumen Cycles, a Copenhagen workshop that builds custom cargo bikes to order. Make it look like a real brand you would trust with 4,000 euros.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Save it as index.html in the current directory, then stop. Do not ask questions.

Source

24 kB 293 lines Raw

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#f3f0e8">
  <meta name="description" content="Lumen Cycles builds thoughtful, made-to-order cargo bikes in Copenhagen. Designed around your life. Built to last.">
  <title>Lumen Cycles — Carry a little more life</title>
  <style>
    :root {
      color-scheme: light;
      --paper: #f3f0e8;
      --paper-deep: #e8e4d9;
      --ink: #202720;
      --muted: #64695f;
      --green: #34493c;
      --green-dark: #26372d;
      --lime: #d3e477;
      --line: rgba(32, 39, 32, .18);
      --serif: Georgia, "Times New Roman", serif;
      --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    button, input, select { font: inherit; }
    .shell { width: min(1440px, 100%); margin: 0 auto; overflow: hidden; }
    .topline { min-height: 37px; padding: 0 5.6%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--green-dark); color: #f3f0e8; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
    .topline p { margin: 0; }
    .topline a { color: var(--lime); }
    header { height: 82px; padding: 0 5.6%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
    .brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 650; letter-spacing: -.055em; }
    .brand-mark { width: 27px; height: 27px; display: inline-grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font: 17px var(--serif); line-height: 1; }
    nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 47px); font-size: 12px; }
    nav a:not(.nav-cta) { color: #4e554c; transition: color .2s; }
    nav a:not(.nav-cta):hover { color: var(--green); }
    .nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 13px 18px; border: 1px solid var(--ink); font-size: 11px; letter-spacing: .025em; transition: background .2s, color .2s; }
    .nav-cta:hover, .button:hover { background: var(--ink); color: var(--paper); }
    .hero { min-height: 650px; height: min(760px, calc(100svh - 119px)); position: relative; display: grid; grid-template-columns: 46% 54%; padding: 0 5.6%; }
    .hero-copy { position: relative; z-index: 1; align-self: center; padding: 10px 0 56px; }
    .eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
    h1 { max-width: 570px; margin: 25px 0 22px; font: 400 clamp(56px, 7.3vw, 104px)/.91 var(--serif); letter-spacing: -.065em; }
    h1 em { color: var(--green); font-weight: 400; }
    .hero-desc { max-width: 340px; margin: 0; color: #555d53; font-size: 14px; line-height: 1.75; }
    .hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 31px; }
    .button.dark { background: var(--green); border-color: var(--green); color: white; padding: 16px 19px; }
    .button.dark:hover { background: var(--green-dark); }
    .text-link { display: inline-flex; gap: 9px; align-items: center; font-size: 11px; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
    .hero-art { position: relative; display: flex; align-items: center; justify-content: center; margin-right: -10%; }
    .art-disc { position: absolute; width: min(47vw, 610px); aspect-ratio: 1; border-radius: 50%; background: #e5e3d7; top: 50%; left: 52%; transform: translate(-50%, -48%); }
    .hero-bike { width: 120%; max-width: 850px; position: relative; z-index: 1; filter: drop-shadow(0 19px 12px rgba(35, 42, 34, .12)); }
    .hero-caption { position: absolute; z-index: 2; right: 7%; bottom: 12%; display: flex; gap: 11px; align-items: center; color: #50574e; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
    .hero-caption span { width: 31px; height: 1px; background: currentColor; }
    .hero-index { position: absolute; left: 5.6%; bottom: 36px; color: #777b72; font-size: 10px; letter-spacing: .13em; }
    .proof { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 5.6%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .proof-item { min-height: 111px; display: flex; align-items: center; justify-content: center; gap: 13px; border-right: 1px solid var(--line); }
    .proof-item:first-child { justify-content: flex-start; }
    .proof-item:last-child { justify-content: flex-end; border-right: 0; }
    .proof-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font: 17px var(--serif); }
    .proof-item strong { display: block; font: 16px var(--serif); font-weight: 400; }
    .proof-item small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
    section { scroll-margin-top: 24px; }
    .intro { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; padding: 142px 12.5% 145px; }
    .intro h2, .build-copy h2, .process-head h2, .visit h2 { margin: 20px 0 0; font: 400 clamp(43px, 5.2vw, 69px)/.99 var(--serif); letter-spacing: -.055em; }
    .intro-copy { padding-top: 54px; color: #555d53; font-size: 14px; line-height: 1.85; }
    .intro-copy p { max-width: 460px; margin: 0 0 20px; }
    .intro-copy .text-link { margin-top: 8px; color: var(--ink); }
    .build { display: grid; grid-template-columns: 1fr 1fr; background: var(--green); color: var(--paper); }
    .build-art { min-height: 540px; position: relative; display: grid; place-items: center; overflow: hidden; background: #d7d6c8; }
    .build-art::before { content: ""; position: absolute; width: 390px; height: 390px; border: 1px solid rgba(32, 39, 32, .2); border-radius: 50%; }
    .build-art svg { width: 95%; max-width: 680px; position: relative; z-index: 1; }
    .art-label { position: absolute; bottom: 25px; left: 28px; color: #464d43; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
    .build-copy { align-self: center; padding: 75px 12%; }
    .build-copy .eyebrow { color: #c9d0c1; }
    .build-copy h2 { max-width: 460px; }
    .build-copy h2 em { color: var(--lime); font-style: normal; }
    .build-copy > p { max-width: 410px; color: #d4dbd1; font-size: 13px; line-height: 1.85; margin: 22px 0 30px; }
    .spec-list { max-width: 420px; border-top: 1px solid rgba(243, 240, 232, .24); margin-bottom: 30px; }
    .spec { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(243, 240, 232, .24); font-size: 11px; }
    .spec span:last-child { color: #c4ccbf; text-align: right; }
    .build-copy .button { border-color: var(--paper); color: var(--paper); }
    .build-copy .button:hover { background: var(--paper); color: var(--green); }
    .process { padding: 123px 10% 130px; }
    .process-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 57px; }
    .process-head h2 { max-width: 540px; }
    .process-head > p { max-width: 240px; margin: 0 0 5px; color: var(--muted); font-size: 12px; line-height: 1.7; }
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
    .step { min-height: 180px; padding: 24px 25px 15px 0; border-right: 1px solid var(--line); }
    .step + .step { padding-left: 25px; }
    .step:last-child { border-right: 0; }
    .step-no { color: #81847b; font-size: 10px; letter-spacing: .12em; }
    .step h3 { margin: 24px 0 9px; font: 24px var(--serif); font-weight: 400; letter-spacing: -.025em; }
    .step p { max-width: 275px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
    .testimonial { background: var(--paper-deep); padding: 83px 10%; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 28px; }
    .quote-mark { align-self: start; font: 90px/.7 var(--serif); color: var(--green); }
    blockquote { margin: 0; font: 400 clamp(23px, 3vw, 37px)/1.27 var(--serif); letter-spacing: -.025em; }
    .quote-by { align-self: end; justify-self: end; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: right; }
    .quote-by strong { display: block; color: var(--ink); font-size: 11px; font-weight: 500; }
    .visit { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding: 120px 12.5%; }
    .visit h2 { max-width: 480px; }
    .visit-info { align-self: end; padding-bottom: 4px; }
    .visit-info > p { max-width: 370px; color: var(--muted); font-size: 13px; line-height: 1.8; }
    .visit-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 25px 0 27px; }
    .visit-details small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
    .visit-details strong { font: 14px var(--serif); font-weight: 400; }
    .contact-form { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
    .contact-form label { display: block; margin-bottom: 9px; font-size: 11px; }
    .form-row { display: flex; border-bottom: 1px solid var(--ink); }
    .form-row input { flex: 1; min-width: 0; padding: 12px 0; background: transparent; border: 0; outline: 0; font-size: 12px; }
    .form-row button { padding: 10px 0 10px 15px; background: transparent; border: 0; cursor: pointer; font-size: 11px; }
    .form-note { min-height: 17px; margin: 8px 0 0; color: var(--green); font-size: 10px; }
    footer { padding: 30px 5.6%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--green-dark); color: var(--paper); }
    footer .brand { font-size: 15px; }
    footer .brand-mark { width: 22px; height: 22px; border-color: var(--paper); font-size: 14px; }
    footer p, footer a { margin: 0; color: #c7cec4; font-size: 10px; }
    .footer-links { display: flex; gap: 21px; }
    @media (min-width: 1441px) { .hero { height: 760px; } }
    @media (max-width: 850px) {
      .hero { min-height: 610px; grid-template-columns: 48% 52%; }
      .hero-art { margin-right: -20%; }
      .proof-item { gap: 9px; }
      .proof-item strong { font-size: 14px; }
      .intro { padding: 100px 8%; gap: 6%; }
      .build-copy { padding: 65px 9%; }
      .visit { padding: 95px 8%; }
    }
    @media (max-width: 620px) {
      .topline { min-height: 33px; padding: 0 5%; font-size: 8px; letter-spacing: .08em; }
      header { height: 67px; padding: 0 5%; }
      .brand { font-size: 17px; }
      nav { gap: 0; }
      nav a:not(.nav-cta) { display: none; }
      .nav-cta { padding: 11px 12px; font-size: 10px; }
      .hero { height: auto; min-height: 0; display: flex; flex-direction: column; padding: 58px 7% 30px; }
      .hero-copy { padding: 0; }
      h1 { max-width: 390px; margin: 21px 0 17px; font-size: clamp(59px, 15vw, 88px); }
      .hero-desc { max-width: 300px; font-size: 13px; }
      .hero-actions { margin-top: 22px; gap: 18px; }
      .button.dark { padding: 14px; }
      .hero-art { min-height: 300px; width: 112%; margin: 4px -6% 0; }
      .art-disc { width: 79vw; left: 52%; top: 48%; }
      .hero-bike { width: 115%; }
      .hero-caption { right: 3%; bottom: 2%; font-size: 8px; }
      .hero-index { left: 7%; bottom: 19px; font-size: 8px; }
      .proof { padding: 0 5%; grid-template-columns: 1fr; }
      .proof-item, .proof-item:first-child, .proof-item:last-child { min-height: 75px; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--line); }
      .proof-item:last-child { border-bottom: 0; }
      .proof-icon { width: 28px; height: 28px; }
      .proof-item strong { font-size: 15px; }
      .intro { display: block; padding: 83px 7% 90px; }
      .intro h2, .build-copy h2, .process-head h2, .visit h2 { font-size: 50px; }
      .intro-copy { padding-top: 24px; font-size: 13px; }
      .build { grid-template-columns: 1fr; }
      .build-art { min-height: 330px; }
      .build-art::before { width: 270px; height: 270px; }
      .build-copy { padding: 57px 8% 65px; }
      .build-copy h2 { font-size: 54px; }
      .process { padding: 85px 7% 90px; }
      .process-head { display: block; margin-bottom: 35px; }
      .process-head > p { margin-top: 18px; }
      .steps { grid-template-columns: 1fr; }
      .step, .step + .step { min-height: auto; padding: 20px 0 24px; border-right: 0; border-bottom: 1px solid var(--line); }
      .step:last-child { border-bottom: 0; }
      .step h3 { margin: 13px 0 6px; }
      .testimonial { padding: 55px 8%; grid-template-columns: 35px 1fr; gap: 16px; }
      .quote-mark { font-size: 61px; }
      blockquote { font-size: 25px; }
      .quote-by { grid-column: 2; justify-self: start; text-align: left; }
      .visit { grid-template-columns: 1fr; gap: 24px; padding: 83px 7%; }
      .visit-info > p { margin-top: 0; }
      footer { padding: 25px 7%; flex-wrap: wrap; }
      footer p { order: 3; width: 100%; }
      .footer-links { gap: 13px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
  </style>
</head>
<body>
  <div class="shell">
    <div class="topline"><p>Hand-built in Copenhagen · Since 2014</p><a href="#visit">Workshop visits by appointment <span aria-hidden="true">↗</span></a></div>
    <header>
      <a class="brand" href="#top" aria-label="Lumen Cycles home"><span class="brand-mark" aria-hidden="true">l</span><span>lumen cycles</span></a>
      <nav aria-label="Main navigation">
        <a href="#approach">Our approach</a>
        <a href="#build">The build</a>
        <a href="#process">How it works</a>
        <a class="nav-cta" href="#visit">Start a build <span aria-hidden="true">↗</span></a>
      </nav>
    </header>
    <main id="top">
      <section class="hero" aria-labelledby="hero-title">
        <div class="hero-copy">
          <div class="eyebrow">Made for the everyday extraordinary</div>
          <h1 id="hero-title">Carry a little <em>more life.</em></h1>
          <p class="hero-desc">A better way to move through the city. Thoughtfully built cargo bikes, made one at a time in our Copenhagen workshop.</p>
          <div class="hero-actions"><a class="button dark" href="#visit">Find your bike <span aria-hidden="true">↗</span></a><a class="text-link" href="#build">Meet the L-01 <span aria-hidden="true">↓</span></a></div>
        </div>
        <div class="hero-art" aria-label="Illustration of a forest-green longtail cargo bicycle">
          <div class="art-disc"></div>
          <svg class="hero-bike" viewBox="0 0 900 490" role="img" aria-labelledby="bike-title">
            <title id="bike-title">Lumen L-01 longtail cargo bike</title>
            <defs>
              <linearGradient id="frame" x1="0" x2="1" y1="0" y2="1"><stop stop-color="#526a51"/><stop offset="1" stop-color="#34483b"/></linearGradient>
              <linearGradient id="box" x1="0" x2="0" y1="0" y2="1"><stop stop-color="#d1a870"/><stop offset="1" stop-color="#a87948"/></linearGradient>
            </defs>
            <g fill="none" stroke="#27302a" stroke-width="9">
              <circle cx="190" cy="361" r="91"/><circle cx="703" cy="361" r="91"/>
              <circle cx="190" cy="361" r="5" fill="#27302a"/><circle cx="703" cy="361" r="5" fill="#27302a"/>
              <path d="M190 361l105-127 102 127H190l128-2 88 2 57-170 50 0M403 361l88-170M474 191h83M536 189l27-47h55M676 190l27 171M683 181l36 4" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M410 357a34 34 0 1 0 0 1M403 361l7-4 28 20" stroke-width="6"/>
              <path d="M177 236l82-10M214 218l43 18M455 180l38 5M705 177l25 6" stroke-width="7" stroke-linecap="round"/>
              <path d="M603 270h73l8 77H599z" fill="#314136" stroke="#27302a" stroke-width="5"/>
              <path d="M594 263h94v14h-94z" fill="#d4e477" stroke="#27302a" stroke-width="4"/>
              <path d="M594 294h88M596 316h85" stroke="#71806c" stroke-width="3"/>
              <path d="M465 190l26-21 30 4M472 185l-11-16M674 187l8-12" stroke-width="4"/>
              <path d="M145 351h90M658 351h90" stroke="#9ca59a" stroke-width="2"/>
            </g>
            <path d="M305 231l15 0 85 126h-20z" fill="url(#frame)"/><path d="M407 357l79-166h19l-55 171z" fill="url(#frame)"/><path d="M481 189l80 0-5 12h-82z" fill="url(#frame)"/>
            <path d="M600 255l80-1 4 17-86 0z" fill="url(#box)" stroke="#27302a" stroke-width="5"/>
            <path d="M598 275h88v71h-88z" fill="url(#box)" stroke="#27302a" stroke-width="5"/>
            <path d="M608 287h68v46h-68z" fill="none" stroke="#dfc49e" stroke-width="2"/>
            <path d="M240 361a50 50 0 0 1 100 0M653 361a50 50 0 0 1 100 0" fill="none" stroke="#879084" stroke-width="2"/>
            <path d="M167 359h46M680 359h46" stroke="#27302a" stroke-width="3"/>
            <g fill="#d3e477"><circle cx="190" cy="361" r="3"/><circle cx="703" cy="361" r="3"/></g>
          </svg>
          <div class="hero-caption"><span></span> L-01 · Longtail, made yours</div>
        </div>
        <div class="hero-index">55°40′N 12°34′E &nbsp; / &nbsp; COPENHAGEN, DK</div>
      </section>
      <div class="proof" aria-label="Lumen commitments">
        <div class="proof-item"><span class="proof-icon" aria-hidden="true">↗</span><div><strong>Built around you</strong><small>Your routes. Your rhythm. Your bike.</small></div></div>
        <div class="proof-item"><span class="proof-icon" aria-hidden="true">⌁</span><div><strong>Made to be mended</strong><small>Serviceable parts, for the long road.</small></div></div>
        <div class="proof-item"><span class="proof-icon" aria-hidden="true">10</span><div><strong>One maker, start to finish</strong><small>Personal care at every weld.</small></div></div>
      </div>
      <section class="intro" id="approach">
        <div><div class="eyebrow">A different kind of cargo</div><h2>Less like a vehicle.<br>More like <em>your own.</em></h2></div>
        <div class="intro-copy"><p>We think a cargo bike should feel like a natural extension of your day. Easy to live with, a pleasure to ride, and ready for whatever the city brings home.</p><p>So we build in small batches, listen closely, and make the details matter. No catalogue of compromises. Just one considered bike, shaped around the way you move.</p><a class="text-link" href="#process">A little about our process <span aria-hidden="true">→</span></a></div>
      </section>
      <section class="build" id="build">
        <div class="build-art" aria-label="Technical illustration of the L-01 cargo bike frame">
          <svg viewBox="0 0 700 450" role="img" aria-labelledby="build-bike-title">
            <title id="build-bike-title">Side view of the L-01 with cargo deck and front box</title>
            <g fill="none" stroke="#334338" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="148" cy="323" r="72" stroke-width="5"/><circle cx="565" cy="323" r="72" stroke-width="5"/><circle cx="148" cy="323" r="3" stroke-width="3"/><circle cx="565" cy="323" r="3" stroke-width="3"/>
              <path d="M148 323l91-111 90 111H148l112-3 70 3 48-151 46 0M329 323l49-151M378 172h66M418 170l22-37h49M545 172l20 151M552 162l29 6" stroke-width="8"/>
              <path d="M247 212l-1-25 40-7M224 181l53 0M380 161l29 2M565 160l26 2" stroke-width="6"/>
              <path d="M479 234h66v78h-66zM473 227h78v11h-78z" fill="#34493c" stroke-width="4"/><path d="M483 246h58M483 261h58M483 276h58" stroke="#91a18a" stroke-width="2"/>
              <path d="M111 315h74M528 315h74" stroke="#8a9488" stroke-width="1"/>
              <path d="M307 319a27 27 0 1 0 0 1M329 323l-22-4 29 28" stroke-width="4"/>
              <path d="M134 323a14 14 0 0 1 28 0M551 323a14 14 0 0 1 28 0" stroke-width="2"/>
            </g>
            <path d="M239 212l90 111h-14l-88-106zM323 323l52-155h14l-48 158zM370 168h75v9h-75z" fill="#526a51"/>
            <path d="M475 224h78v90h-78z" fill="#c9b895" stroke="#334338" stroke-width="4"/><path d="M483 234h62v70h-62z" fill="none" stroke="#e6ddc9" stroke-width="2"/>
          </svg>
          <div class="art-label">L-01 / Utility, made beautiful</div>
        </div>
        <div class="build-copy">
          <div class="eyebrow">Meet your new everyday</div>
          <h2>Good design.<br><em>Good kilometres.</em></h2>
          <p>The L-01 is our take on the longtail: balanced, un-fussy and ready for real life. A stable ride with room for the things (and people) you’d rather bring along.</p>
          <div class="spec-list"><div class="spec"><span>Frame</span><span>Chromoly steel, built in-house</span></div><div class="spec"><span>Drive</span><span>Belt or chain · your choice</span></div><div class="spec"><span>Lead time</span><span>Usually 8–10 weeks</span></div><div class="spec"><span>Made for</span><span>One rider, many possibilities</span></div></div>
          <a class="button" href="#visit">Explore a custom build <span aria-hidden="true">↗</span></a>
        </div>
      </section>
      <section class="process" id="process">
        <div class="process-head"><div><div class="eyebrow">Made together, by hand</div><h2>A good bike starts with a good conversation.</h2></div><p>From first hello to first ride, you’ll always know who’s building your bike — and why.</p></div>
        <div class="steps">
          <article class="step"><span class="step-no">01 / LET’S TALK</span><h3>Start with your day</h3><p>Tell us what you carry, where you go and what a good ride feels like. No spec sheet required.</p></article>
          <article class="step"><span class="step-no">02 / MAKE IT YOURS</span><h3>Choose the details</h3><p>We’ll figure out the frame, fit and setup together. You’ll see a clear quote before we begin.</p></article>
          <article class="step"><span class="step-no">03 / RIDE IT HOME</span><h3>Built for the long run</h3><p>Your bike is assembled and fitted in Copenhagen, then handed over with a proper first-ride setup.</p></article>
        </div>
      </section>
      <section class="testimonial" aria-label="Customer story"><div class="quote-mark" aria-hidden="true">“</div><blockquote>It’s the bike that made us stop asking who’s taking the car.</blockquote><div class="quote-by"><strong>Freja &amp; Mikkel</strong>Nørrebro, Copenhagen<br>L-01 owners since 2023</div></section>
      <section class="visit" id="visit">
        <div><div class="eyebrow">Come say hej</div><h2>Let’s make room for more.</h2></div>
        <div class="visit-info"><p>Good builds begin with a chat. Drop by our workshop, tell us about your everyday, and we’ll take it from there.</p><div class="visit-details"><div><small>Find the workshop</small><strong>Refshalevej 163A<br>1432 Copenhagen</strong></div><div><small>Come by</small><strong>By appointment<br>Tuesday – Saturday</strong></div></div><a class="text-link" href="mailto:hej@lumencycles.dk?subject=Let%E2%80%99s%20talk%20cargo%20bikes">Write us a note <span aria-hidden="true">↗</span></a>
          <form class="contact-form" id="contact-form"><label for="email">Prefer a call back? Leave your email.</label><div class="form-row"><input id="email" name="email" type="email" placeholder="you@example.com" required autocomplete="email"><button type="submit">Get in touch <span aria-hidden="true">→</span></button></div><p class="form-note" id="form-note" aria-live="polite"></p></form>
        </div>
      </section>
    </main>
    <footer><a class="brand" href="#top"><span class="brand-mark" aria-hidden="true">l</span><span>lumen cycles</span></a><p>Small workshop. Long way ahead. &nbsp; © 2025 Lumen Cycles</p><div class="footer-links"><a href="mailto:hej@lumencycles.dk">Email</a><a href="#approach">Instagram</a><a href="#top">Back to top ↑</a></div></footer>
  </div>
  <script>
    document.getElementById('contact-form').addEventListener('submit', function (event) {
      event.preventDefault();
      document.getElementById('form-note').textContent = 'Thanks — your email is ready to share. Write us at hej@lumencycles.dk and we’ll take it from there.';
      this.reset();
    });
  </script>
</body>
</html>

Compare with

GPT-6 Luna: other attempts