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)
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 & 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">
© 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>

