hypeorcode
Network offOpen alone (new tab)

Run details

Model
nvidia/nemotron-3.5-super-vl:free
Route
OpenRouter API, one user message
Reasoning
provider default, 9,028 reasoning tokens
Limits
60 min · 131,072 output tokens
Date
21 Oct 2026
Time
1 min 34 s
Size
23 kB
Tokens
106 in, 16,894 out
List price
$0.008 ($0.15 in / $0.5 out per M)
Paid
$0 (free route)

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). Reply with the file in a single ```html code block.

Source

23 kB 863 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lumen Cycles — Custom Cargo Bikes, Copenhagen</title>
<style>
  :root {
    --ink: #0f172a;
    --paper: #fbfaf7;
    --white: #ffffff;
    --accent: #b45309;
    --accent-hover: #92400e;
    --muted: #64748b;
    --border: #e7e5e4;
    --shadow: 0 24px 48px -12px rgba(2, 6, 23, 0.06);
    --radius: 6px;
    --maxw: 1140px;
    --nav-h: 72px;
  }

  *, ::before, ::after { box-sizing: border-box }
  html { -webkit-text-size-adjust: 100% }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, .serif {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: 400;
  }

  h1 {
    font-size: clamp(2.6rem, 5.5vw, 4.8rem);
    line-height: 1.02;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
  }

  h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
  }

  h3 { font-size: 1.35rem; margin: 0 0 0.75rem; line-height: 1.3 }
  p { margin: 0 0 1.25rem }
  a { color: var(--ink); text-decoration: none }

  .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem }
  section { padding: 7rem 1.5rem }

  .section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 4.5rem;
  }

  .section-head .kicker {
    display: inline-block;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 0.8rem;
  }

  .section-head p { color: var(--muted); font-size: 1.1rem }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1rem 1.8rem;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    line-height: 1;
  }

  .btn:active { transform: scale(0.97) }

  .btn-primary { background: var(--ink); color: #fff }
  .btn-primary:hover { background: #000 }

  .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink) }
  .btn-outline:hover { background: var(--ink); color: #fff }

  .btn-accent { background: var(--accent); color: #fff }
  .btn-accent:hover { background: var(--accent-hover) }

  .header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 250, 247, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }

  .header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
  }

  .logo {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    font-weight: 700;
    color: var(--ink);
  }

  .nav {
    display: flex;
    gap: 2.2rem;
    align-items: center;
  }

  .nav a {
    font-size: 0.95rem;
    color: #475569;
    font-weight: 500;
    transition: color 0.2s;
  }

  .nav a:hover { color: var(--ink) }

  .menu-btn {
    display: none;
    border: none;
    background: none;
    color: var(--ink);
    font-size: 1.4rem;
    cursor: pointer;
  }

  .hero {
    position: relative;
    padding-top: calc(6rem + var(--nav-h));
    padding-bottom: 6rem;
  }

  .hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }

  .hero .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 1.5rem;
  }

  .hero p.lead {
    font-size: 1.25rem;
    color: var(--muted);
    max-width: 460px;
    margin: 0 0 2rem;
  }

  .hero .cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .hero .bike {
    position: relative;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero .bike svg {
    width: 100%;
    height: auto;
    max-width: 560px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.08));
  }

  .trust {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 0;
  }

  .trust .item {
    flex: 1;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--muted);
    font-size: 0.95rem;
  }

  .trust .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
  }

  .process .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
  }

  .step {
    position: relative;
    padding-left: 3rem;
  }

  .step .num {
    position: absolute;
    left: 0;
    top: 2px;
    font-family: Georgia, serif;
    font-size: 3rem;
    color: #e7e5e4;
    line-height: 1;
  }

  .step p { color: var(--muted); font-size: 0.98rem; margin: 0 }

  .step::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 4.5rem;
    height: calc(100% + 60px);
    width: 1px;
    background: var(--border);
  }

  .step:last-child::after { display: none }

  .models { background: var(--white) }

  .models .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .model {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .model .thumb {
    height: 300px;
    background: #f1f5f9;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .model .thumb svg {
    width: 150px;
    height: 150px;
    color: #94a3b8;
  }

  .model .thumb .price-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--ink);
    color: #fff;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  .model .body {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .model .from {
    font-size: 1.1rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 0.75rem;
  }

  .model ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
  }

  .model ul li {
    margin-bottom: 0.5rem;
    padding-left: 1.2rem;
    position: relative;
  }

  .model ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
  }

  .workshop {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }

  .detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .detail {
    height: 170px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    background: #fff;
    font-size: 0.9rem;
  }

  .detail .title {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--muted);
  }

  .detail .desc { color: var(--muted) }

  .testimonials { background: #f1f5f9 }

  .t-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .t-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
  }

  .quote {
    font-family: Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 1rem;
  }

  .author {
    font-size: 0.95rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
  }

  .contact {
    background: var(--ink);
    color: #fff;
    padding: 8rem 1.5rem;
  }

  .contact .container { max-width: 700px }
  .contact h2 { color: #fff }
  .contact p { color: #cbd5e1 }

  form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  input, textarea, select {
    width: 100%;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font: inherit;
  }

  input::placeholder { color: #94a3b8 }
  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
  }

  textarea {
    grid-column: span 2;
    min-height: 140px;
    resize: vertical;
  }

  .thanks {
    display: none;
    text-align: center;
    padding: 3rem;
    background: #fff;
    color: var(--ink);
    border-radius: var(--radius);
  }

  footer {
    border-top: 1px solid var(--border);
    padding: 3rem 1.5rem;
    background: var(--paper);
  }

  .footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    max-width: var(--maxw);
    margin: 0 auto;
  }

  .footer-col h4 {
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
  }

  .footer-col ul { list-style: none; padding: 0; margin: 0 }
  .footer-col li { margin-bottom: 0.6rem; color: var(--muted); font-size: 0.95rem }
  .footer-col a { color: var(--muted); transition: color 0.2s }
  .footer-col a:hover { color: var(--ink) }

  .copy {
    margin-top: 3rem;
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
  }

  .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .fade-up.visible { opacity: 1; transform: none }

  @media (max-width: 900px) {
    .hero .container { grid-template-columns: 1fr }
    .models .grid { grid-template-columns: repeat(2, 1fr) }
  }

  @media (max-width: 768px) {
    .nav {
      position: fixed;
      inset: var(--nav-h) 0 0 0;
      background: var(--paper);
      flex-direction: column;
      padding: 2rem;
      border-top: 1px solid var(--border);
      transform: translateY(-100%);
      opacity: 0;
      transition: transform 0.3s, opacity 0.3s;
      pointer-events: none;
    }

    .nav.open {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .menu-btn { display: block }
    .process .steps { grid-template-columns: 1fr }
    .t-grid { grid-template-columns: 1fr }
    .workshop { grid-template-columns: 1fr }
    .models .grid { grid-template-columns: 1fr }
    form { grid-template-columns: 1fr }
  }

  @media (max-width: 600px) {
    .detail-grid { grid-template-columns: 1fr }
  }
</style>
</head>
<body>

<header class="header">
  <div class="container">
    <a href="#" class="logo" aria-label="Lumen Cycles">Lumen Cycles</a>
    <nav class="nav" id="nav">
      <a href="#workshop">The Workshop</a>
      <a href="#models">Models</a>
      <a href="#process">Process</a>
      <a href="#contact">Contact</a>
    </nav>
    <button class="menu-btn" aria-label="Open menu" aria-expanded="false">☰</button>
    <a href="#contact" class="btn btn-outline">Book Consultation</a>
  </div>
</header>

<section class="hero">
  <div class="container">
    <div>
      <div class="badge">Handbuilt in Copenhagen</div>
      <h1>Custom cargo bikes,<br>built to order.</h1>
      <p class="lead">From family transport to commercial delivery. Designed for Copenhagen streets, crafted in our Nørrebro atelier and built around your life.</p>
      <div class="cta">
        <a href="#models" class="btn btn-primary">View Models</a>
        <a href="#contact" class="btn btn-outline">Start a Build</a>
      </div>
    </div>
    <div class="bike">
      <svg viewBox="0 0 700 420" xmlns="http://www.w3.org/2000/svg" aria-label="Lumen Long John cargo bike line drawing" role="img">
        <title>Lumen Long John cargo bike</title>
        <defs>
          <linearGradient id="boxGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#f8fafc" />
            <stop offset="100%" stop-color="#e2e8f0" />
          </linearGradient>
        </defs>
        <circle cx="120" cy="300" r="56" fill="none" stroke="#0f172a" stroke-width="14" stroke-linecap="round" />
        <circle cx="120" cy="300" r="16" fill="none" stroke="#0f172a" stroke-width="5" />
        <circle cx="600" cy="300" r="56" fill="none" stroke="#0f172a" stroke-width="14" stroke-linecap="round" />
        <circle cx="600" cy="300" r="16" fill="none" stroke="#0f172a" stroke-width="5" />
        <path d="M 120 244 L 170 170 L 330 185 L 430 244 L 600 244" fill="none" stroke="#0f172a" stroke-width="12" stroke-linejoin="round" />
        <path d="M 170 170 L 190 140" fill="none" stroke="#0f172a" stroke-width="9" stroke-linecap="round" />
        <path d="M 430 244 L 400 180 L 360 178" fill="none" stroke="#0f172a" stroke-width="10" stroke-linejoin="round" stroke-linecap="round" />
        <path d="M 430 244 L 480 280" fill="none" stroke="#0f172a" stroke-width="10" stroke-linecap="round" />
        <rect x="450" y="200" width="140" height="85" rx="8" fill="url(#boxGrad)" stroke="#0f172a" stroke-width="9" />
        <line x1="450" y1="242" x2="590" y2="242" stroke="#0f172a" stroke-width="4" />
        <circle cx="330" cy="260" r="6" fill="#0f172a" />
      </svg>
    </div>
  </div>
</section>

<section class="trust">
  <div class="container">
    <div class="item"><span class="dot"></span>Handbuilt in Nørrebro</div>
    <div class="item"><span class="dot"></span>Built to order, no stock</div>
    <div class="item"><span class="dot"></span>Danish design, cargo focus</div>
    <div class="item"><span class="dot"></span>2-year frame warranty</div>
  </div>
</section>

<section id="process" class="process">
  <div class="container">
    <div class="section-head fade-up">
      <span class="kicker">The process</span>
      <h2>From conversation to cargo</h2>
      <p>Every bike is built around you. We meet, we draw, we weld, we deliver.</p>
    </div>
    <div class="steps">
      <div class="step fade-up" style="transition-delay:0.1s">
        <span class="num">01</span>
        <h3>Consultation</h3>
        <p>Visit our Copenhagen workshop or book a video call to discuss your needs.</p>
      </div>
      <div class="step fade-up" style="transition-delay:0.2s">
        <span class="num">02</span>
        <h3>Design</h3>
        <p>Choose frame geometry, box size, drivetrain, finishes, and electric options.</p>
      </div>
      <div class="step fade-up" style="transition-delay:0.3s">
        <span class="num">03</span>
        <h3>Build</h3>
        <p>Hand-built to your specification over 6–8 weeks in our workshop.</p>
      </div>
      <div class="step fade-up" style="transition-delay:0.4s">
        <span class="num">04</span>
        <h3>Delivery</h3>
        <p>Handover in Copenhagen or freight arranged across Europe.</p>
      </div>
    </div>
  </div>
</section>

<section id="models" class="models">
  <div class="container">
    <div class="section-head fade-up">
      <span class="kicker">The range</span>
      <h2>Three starting points</h2>
      <p>Prices shown include VAT and are starting points. Custom builds are quoted individually.</p>
    </div>
    <div class="grid">
      <article class="model fade-up" style="transition-delay:0.1s">
        <div class="thumb">
          <span class="price-badge">From €4,200</span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="18" r="2"/><circle cx="5" cy="18" r="2"/><path d="M2 6h8l2 4H4z"/></svg>
        </div>
        <div class="body">
          <h3>Lumen Long John</h3>
          <div class="from">From €4,200</div>
          <ul>
            <li>Open front cargo box</li>
            <li>Space for two children</li>
            <li>Steel frame, Shimano drivetrain</li>
            <li>Optional electric assist</li>
          </ul>
          <a href="#contact" class="btn btn-outline">Order this model</a>
        </div>
      </article>
      <article class="model fade-up" style="transition-delay:0.2s">
        <div class="thumb">
          <span class="price-badge">From €5,100</span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
        </div>
        <div class="body">
          <h3>Lumen Box</h3>
          <div class="from">From €5,100</div>
          <ul>
            <li>Weatherproof cabin</li>
            <li>Lockable storage</li>
            <li>All-weather commuting</li>
            <li>Optional bench seating</li>
          </ul>
          <a href="#contact" class="btn btn-outline">Order this model</a>
        </div>
      </article>
      <article class="model fade-up" style="transition-delay:0.3s">
        <div class="thumb">
          <span class="price-badge">From €5,800</span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="5" r="1"/><path d="M5 12h14M12 18H5.5A1.5 1.5 0 0 1 4 16.5V12a1 1 0 0 1 1-1z"/></svg>
        </div>
        <div class="body">
          <h3>Lumen Electric</h3>
          <div class="from">From €5,800</div>
          <ul>
            <li>Mid-drive motor</li>
            <li>Up to 80 km range</li>
            <li>Integrated battery</li>
            <li>Hydraulic disc brakes</li>
          </ul>
          <a href="#contact" class="btn btn-outline">Order this model</a>
        </div>
      </article>
    </div>
  </div>
</section>

<section id="workshop" class="workshop">
  <div class="container">
    <div class="fade-up">
      <h2>The atelier</h2>
      <p>Our workshop sits on Nørrebrogade, where steel is cut, welded, and finished by hand. We keep no showroom stock—every Lumen begins as a conversation.</p>
      <p style="margin-bottom:0;">Visit by appointment. Coffee is always on.</p>
    </div>
    <div class="detail-grid fade-up" style="transition-delay:0.2s">
      <div class="detail">
        <div class="title">Steel</div>
        <div class="desc">High-tensile tubing, TIG welded for longevity.</div>
      </div>
      <div class="detail">
        <div class="title">Finish</div>
        <div class="desc">Matte lacquer in standard or custom colours.</div>
      </div>
      <div class="detail">
        <div class="title">Location</div>
        <div class="desc">Appointment-only atelier in Nørrebro, Copenhagen.</div>
      </div>
      <div class="detail">
        <div class="title">Support</div>
        <div class="desc">Lifetime frame support and annual tune-ups.</div>
      </div>
    </div>
  </div>
</section>

<section class="testimonials">
  <div class="container">
    <div class="section-head fade-up">
      <span class="kicker">Owners say</span>
      <h2>Built for real life</h2>
    </div>
    <div class="t-grid">
      <div class="t-card fade-up" style="transition-delay:0.1s">
        <p class="quote">“The Long John replaced our second car. The build quality is exceptional, and it handles Copenhagen’s cobblestones beautifully.”</p>
        <p class="author"><span class="avatar">SM</span>Sofie M., Østerbro</p>
      </div>
      <div class="t-card fade-up" style="transition-delay:0.2s">
        <p class="quote">“We use ours for café deliveries across town. It turns heads every day and carries more than we ever expected.”</p>
        <p class="author"><span class="avatar">ML</span>Mads & Line, Nørrebro</p>
      </div>
    </div>
  </div>
</section>

<section id="contact" class="contact">
  <div class="container">
    <div class="section-head fade-up" style="text-align:left; margin-left:0; margin-right:auto;">
      <span class="kicker">Get in touch</span>
      <h2>Start your build</h2>
      <p>Book a consultation at our Copenhagen workshop or send us your ideas. We’ll reply within one business day.</p>
    </div>
    <form id="contact-form" class="fade-up" style="transition-delay:0.2s">
      <input type="text" name="name" placeholder="Full name" required />
      <input type="email" name="email" placeholder="Email address" required />
      <input type="tel" name="phone" placeholder="Phone number" />
      <select name="interest" required>
        <option value="">Which model interests you?</option>
        <option value="long-john">Lumen Long John</option>
        <option value="box">Lumen Box</option>
        <option value="electric">Lumen Electric</option>
        <option value="other">Something custom</option>
      </select>
      <textarea name="message" placeholder="Tell us about your plans"></textarea>
      <button type="submit" class="btn btn-accent" style="grid-column:span 2;">Send message</button>
    </form>
    <div class="thanks" id="thanks">
      <h3>Thank you.</h3>
      <p>Your message has been sent. We’ll be in touch shortly to arrange a time at the workshop.</p>
    </div>
  </div>
</section>

<footer>
  <div class="footer-grid">
    <div class="footer-col">
      <h4>Lumen Cycles</h4>
      <ul>
        <li>Workshop &amp; Atelier</li>
        <li>Nørrebrogade, Copenhagen</li>
        <li>Denmark</li>
        <li>Open by appointment</li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Contact</h4>
      <ul>
        <li><a href="mailto:hello@lumencycles.dk">hello@lumencycles.dk</a></li>
        <li><a href="tel:+4500000000">+45 00 00 00 00</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>Legal</h4>
      <ul>
        <li><a href="#">Privacy policy</a></li>
        <li><a href="#">Terms of sale</a></li>
        <li><a href="#">Warranty</a></li>
      </ul>
    </div>
  </div>
  <div class="copy">
    &copy; 2024 Lumen Cycles. All rights reserved. Prices in EUR including VAT.
  </div>
</footer>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var btn = document.querySelector('.menu-btn');
    var nav = document.getElementById('nav');

    if (btn && nav) {
      btn.addEventListener('click', function () {
        var open = nav.classList.toggle('open');
        btn.setAttribute('aria-expanded', open);
      });
    }

    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 });

    document.querySelectorAll('.fade-up').forEach(function (el) {
      observer.observe(el);
    });

    var form = document.getElementById('contact-form');
    var thanks = document.getElementById('thanks');

    if (form && thanks) {
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        form.style.display = 'none';
        thanks.style.display = 'block';
      });
    }
  });
</script>

</body>
</html>

Compare with

Nemotron 3.5 Super VL: other attempts