Food truck websiteOne-line
GPT-6 Luna
by OpenAIReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 2 min 26 s
- Cost
- $0.0068
- Output tokens
- 13,536
- Spent thinking
- 3,889 tokens
- Speed
- 99.4 tok/s
- Console errors
- 0
- First token after
- 10.3 s
- First visible text after
- 1 min 2 s
- Prompt tokens
- 360
- Code size
- 29.4 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6-luna- Reasoning sent
{"effort":"high"}- Max output
- 64,000 tokens
- Generated
- Nov 10, 2026
What it was asked
The prompt
“i'm opening a korean taco food truck called "Kimchi Loco", make me a website that makes people really want to come”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task. Output rules: - Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block. - Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task. - Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw. - The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar. - Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction. - Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session. - Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing. - The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message. - The code must run with zero errors in the console of the latest Chrome.
Code run-1.html · 765 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#fff8ed">
<title>Kimchi Loco — Seoul food. Taco attitude.</title>
<style>
:root {
--cream: #fff8ed;
--ink: #173b31;
--green: #173b31;
--tomato: #ed553a;
--lime: #d9ef72;
--pink: #f4b4a5;
--muted: #64736a;
--line: #e9e2d5;
--display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: "Trebuchet MS", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.wrap { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.site-header {
height: 78px;
display: flex;
align-items: center;
position: relative;
z-index: 10;
background: var(--cream);
border-bottom: 1px solid rgba(23,59,49,.07);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
font-family: var(--display);
font-size: 25px;
letter-spacing: -.6px;
line-height: 1;
}
.brand-mark { width: 39px; height: 39px; display: block; }
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-name span { color: var(--tomato); }
.nav {
display: flex;
align-items: center;
gap: 35px;
font-size: 13px;
font-weight: 800;
letter-spacing: .035em;
}
.nav a:not(.nav-cta) { transition: color .2s; }
.nav a:not(.nav-cta):hover { color: var(--tomato); }
.nav-cta, .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
border-radius: 999px;
background: var(--green);
color: white;
padding: 14px 21px;
font-size: 12px;
font-weight: 900;
letter-spacing: .04em;
transition: transform .2s, background .2s;
}
.nav-cta:hover, .button:hover { transform: translateY(-2px); background: #265546; }
.nav-cta svg, .button svg { width: 15px; height: 15px; }
.menu-toggle {
display: none;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: var(--green);
color: white;
cursor: pointer;
align-items: center;
justify-content: center;
}
.hero {
overflow: hidden;
position: relative;
background:
radial-gradient(ellipse at 5% 100%, rgba(217,239,114,.18), transparent 27%),
var(--cream);
}
.hero-inner {
min-height: 550px;
display: grid;
grid-template-columns: .95fr 1.05fr;
align-items: center;
gap: 8px;
padding-top: 28px;
padding-bottom: 30px;
}
.hero-copy { position: relative; z-index: 2; padding: 10px 0 22px; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 23px;
text-transform: uppercase;
letter-spacing: .14em;
font-size: 10px;
font-weight: 900;
}
.live-dot {
width: 10px;
height: 10px;
position: relative;
border-radius: 50%;
background: #68ae53;
}
.live-dot::after {
content: "";
position: absolute;
inset: -4px;
border: 1px solid #68ae53;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
h1 {
margin: 0;
max-width: 560px;
font-family: var(--display);
font-size: clamp(55px, 6.3vw, 80px);
font-weight: 900;
letter-spacing: -.055em;
line-height: .91;
text-transform: uppercase;
}
h1 .accent { color: var(--tomato); }
.hero-description {
max-width: 420px;
margin: 22px 0 25px;
color: #53665d;
font-size: 16px;
line-height: 1.65;
}
.hero-description strong { color: var(--ink); }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.button { min-height: 49px; padding: 15px 21px; }
.button-primary { background: var(--tomato); }
.button-primary:hover { background: #d94730; }
.button-secondary {
background: transparent;
border: 1px solid #cad1c7;
color: var(--green);
}
.button-secondary:hover { background: white; }
.tiny-proof {
display: flex;
align-items: center;
gap: 10px;
margin-top: 28px;
color: #66766d;
font-size: 11px;
font-weight: 800;
letter-spacing: .045em;
text-transform: uppercase;
}
.stars { color: #ed9f31; letter-spacing: 2px; font-size: 14px; }
.proof-divider { width: 1px; height: 17px; background: #d9d7ca; margin: 0 3px; }
.hero-art {
min-width: 0;
height: 510px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.hero-art > svg { width: 100%; max-width: 625px; height: 100%; overflow: visible; }
.art-tag {
position: absolute;
z-index: 2;
display: flex;
align-items: center;
gap: 9px;
padding: 11px 14px;
border-radius: 12px;
background: white;
box-shadow: 0 10px 30px rgba(71,48,31,.13);
color: var(--ink);
font-size: 10px;
line-height: 1.25;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;
}
.art-tag small { display: block; color: #809087; font-size: 8px; margin-top: 3px; letter-spacing: .12em; }
.tag-one { left: 1%; top: 12%; transform: rotate(-4deg); }
.tag-two { right: 0; bottom: 11%; transform: rotate(3deg); }
.tag-icon {
width: 29px;
height: 29px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--lime);
font-size: 15px;
}
.ticker {
min-height: 66px;
background: var(--green);
color: white;
display: flex;
align-items: center;
overflow: hidden;
}
.ticker-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
width: min(1160px, calc(100% - 64px));
margin: auto;
}
.ticker-item {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--display);
font-size: 17px;
letter-spacing: .035em;
white-space: nowrap;
}
.ticker-item span { color: var(--lime); font-family: Arial, sans-serif; font-size: 17px; }
.ticker-note {
color: #d6e0d8;
font-size: 10px;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
white-space: nowrap;
}
.section { padding: 88px 0; }
.section-kicker {
margin: 0 0 13px;
color: var(--tomato);
font-size: 10px;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
}
.section-heading {
margin: 0;
font-family: var(--display);
font-size: clamp(40px, 5vw, 61px);
letter-spacing: -.045em;
line-height: .98;
text-transform: uppercase;
}
.menu-section { background: #fffdf7; }
.section-top {
display: flex;
justify-content: space-between;
align-items: end;
gap: 25px;
margin-bottom: 34px;
}
.section-note { max-width: 290px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.food-card {
position: relative;
min-height: 270px;
overflow: hidden;
padding: 25px;
border: 1px solid #eee9dd;
border-radius: 17px;
background: var(--cream);
transition: transform .2s, box-shadow .2s;
}
.food-card:hover { transform: translateY(-5px); box-shadow: 0 14px 35px rgba(23,59,49,.08); }
.food-card:nth-child(2) { background: #f6eddf; }
.food-card:nth-child(3) { background: #f5f1de; }
.dish-illustration {
position: absolute;
right: 16px;
top: 15px;
width: 112px;
height: 105px;
}
.dish-illustration svg { width: 100%; height: 100%; }
.card-number {
display: inline-block;
padding: 6px 9px;
border-radius: 99px;
background: var(--lime);
color: var(--green);
font-size: 9px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.food-card h3 {
position: relative;
z-index: 1;
margin: 105px 0 7px;
font-family: var(--display);
font-size: 25px;
letter-spacing: -.02em;
text-transform: uppercase;
}
.food-card p { max-width: 255px; margin: 0; color: #64736a; font-size: 12px; line-height: 1.55; }
.price {
position: absolute;
right: 23px;
bottom: 23px;
color: var(--tomato);
font-family: var(--display);
font-size: 20px;
}
.location-section { background: var(--cream); }
.location-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; align-items: center; }
.location-copy .section-heading { max-width: 440px; }
.location-copy > p:not(.section-kicker) {
max-width: 400px;
margin: 20px 0 25px;
color: #62736a;
font-size: 14px;
line-height: 1.7;
}
.social-handle { color: var(--tomato); font-weight: 900; }
.map-card {
min-height: 320px;
overflow: hidden;
position: relative;
display: flex;
align-items: end;
padding: 25px;
border-radius: 19px;
background-color: #e8edcf;
background-image:
linear-gradient(29deg, transparent 46%, rgba(255,255,255,.8) 47%, rgba(255,255,255,.8) 50%, transparent 51%),
linear-gradient(120deg, transparent 36%, rgba(255,255,255,.8) 37%, rgba(255,255,255,.8) 40%, transparent 41%),
linear-gradient(75deg, transparent 68%, rgba(255,255,255,.8) 69%, rgba(255,255,255,.8) 72%, transparent 73%),
repeating-linear-gradient(0deg, transparent 0 54px, rgba(134,157,112,.17) 55px 56px),
repeating-linear-gradient(90deg, transparent 0 63px, rgba(134,157,112,.17) 64px 65px);
}
.map-road {
position: absolute;
width: 240px;
height: 120px;
top: 58px;
left: 28%;
border: 5px solid rgba(255,255,255,.85);
border-left-color: transparent;
border-bottom-color: transparent;
border-radius: 48%;
transform: rotate(-21deg);
}
.map-pin {
width: 68px;
height: 68px;
position: absolute;
left: 56%;
top: 30%;
display: grid;
place-items: center;
border: 6px solid white;
border-radius: 50% 50% 50% 8px;
background: var(--tomato);
color: white;
box-shadow: 0 9px 20px rgba(83,59,41,.2);
transform: rotate(-45deg);
}
.map-pin svg { width: 27px; height: 27px; transform: rotate(45deg); }
.map-label {
position: relative;
z-index: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 17px 19px;
border-radius: 12px;
background: white;
box-shadow: 0 8px 24px rgba(32,53,32,.12);
}
.map-label strong { display: block; font-size: 13px; }
.map-label span { display: block; margin-top: 4px; color: #718077; font-size: 10px; }
.map-label .map-arrow {
width: 35px;
height: 35px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--lime);
color: var(--green);
font-size: 18px;
}
.about-strip {
padding: 37px 0;
background: var(--tomato);
color: white;
text-align: center;
}
.about-strip p {
margin: 0;
font-family: var(--display);
font-size: clamp(25px, 4vw, 42px);
letter-spacing: -.015em;
text-transform: uppercase;
}
.about-strip span { color: var(--lime); }
footer { padding: 25px 0; background: var(--green); color: #d5dfd8; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; }
.footer-brand { color: white; font-family: var(--display); font-size: 17px; text-transform: uppercase; }
.footer-brand span { color: var(--lime); }
.footer-social { font-weight: 800; letter-spacing: .04em; }
@media (max-width: 850px) {
.wrap, .ticker-inner { width: min(100% - 40px, 680px); }
.nav { gap: 20px; }
.nav a { font-size: 12px; }
.hero-inner { grid-template-columns: 1fr .9fr; min-height: 500px; }
h1 { font-size: clamp(52px, 8vw, 68px); }
.hero-art { height: 420px; }
.art-tag { font-size: 8px; padding: 9px; }
.tag-one { left: -5%; }
.ticker-note { display: none; }
.location-grid { gap: 35px; }
}
@media (max-width: 620px) {
.wrap, .ticker-inner { width: calc(100% - 36px); }
.site-header { height: 68px; }
.brand { font-size: 22px; }
.brand-mark { width: 35px; height: 35px; }
.menu-toggle { display: flex; }
.nav {
display: none;
position: absolute;
top: 59px;
left: 18px;
right: 18px;
padding: 16px;
border: 1px solid var(--line);
border-radius: 15px;
background: #fffdf7;
box-shadow: 0 15px 35px rgba(23,59,49,.12);
flex-direction: column;
align-items: stretch;
gap: 0;
}
.nav.open { display: flex; }
.nav a:not(.nav-cta) { padding: 13px 10px; }
.nav-cta { margin-top: 8px; }
.hero-inner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding-top: 39px;
padding-bottom: 20px;
}
.hero-copy { padding: 0; }
.eyebrow { margin-bottom: 18px; font-size: 9px; }
h1 { max-width: 470px; font-size: clamp(49px, 13.2vw, 67px); }
.hero-description { max-width: 360px; margin: 17px 0 20px; font-size: 14px; }
.button { min-height: 46px; padding: 13px 16px; font-size: 10px; }
.tiny-proof { margin-top: 19px; font-size: 9px; }
.hero-art { height: min(88vw, 390px); margin: -3px -12px 0; }
.hero-art > svg { max-height: 100%; }
.tag-one { left: 2%; top: 7%; }
.tag-two { right: 1%; bottom: 7%; }
.ticker { min-height: 60px; }
.ticker-inner { justify-content: center; }
.ticker-item { font-size: 15px; }
.ticker-item:nth-child(2) { display: none; }
.section { padding: 65px 0; }
.section-top { display: block; margin-bottom: 25px; }
.section-note { margin-top: 13px; }
.menu-grid { grid-template-columns: 1fr; gap: 12px; }
.food-card { min-height: 236px; }
.food-card h3 { margin-top: 85px; }
.location-grid { grid-template-columns: 1fr; gap: 30px; }
.map-card { min-height: 280px; }
.map-pin { left: 54%; top: 27%; }
.footer-inner { flex-wrap: wrap; }
.footer-social { width: 100%; }
}
@media (max-width: 390px) {
.wrap, .ticker-inner { width: calc(100% - 30px); }
.hero-actions { gap: 8px; }
.button { padding-left: 13px; padding-right: 13px; }
.art-tag { font-size: 7px; }
.tag-two { right: 0; }
.ticker-item { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
</style>
</head>
<body>
<header class="site-header">
<div class="wrap header-inner">
<a class="brand" href="#home" aria-label="Kimchi Loco home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none">
<circle cx="24" cy="24" r="23" fill="#D9EF72"/>
<path d="M8 29C10.5 16.9 17.2 10.5 24.8 10.5C32.8 10.5 38.8 17.8 40 29L8 29Z" fill="#ED553A" stroke="#173B31" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M10 29C16 33.8 30.9 35 38.2 29" stroke="#173B31" stroke-width="2.5" stroke-linecap="round"/>
<path d="M16 21L19.3 18M25 19L27 22M32 23L35 20" stroke="#FFF8ED" stroke-width="2.5" stroke-linecap="round"/>
</svg>
</span>
<span class="brand-name">KIMCHI <span>LOCO</span></span>
</a>
<button class="menu-toggle" aria-label="Open navigation" aria-expanded="false">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
</button>
<nav class="nav" id="main-nav" aria-label="Main navigation">
<a href="#menu">The menu</a>
<a href="#about">Our vibe</a>
<a href="#location">Find the truck</a>
<a class="nav-cta" href="#location">Come get loco <span aria-hidden="true">↗</span></a>
</nav>
</div>
</header>
<main>
<section class="hero" id="home">
<div class="wrap hero-inner">
<div class="hero-copy">
<div class="eyebrow"><span class="live-dot"></span> Big Seoul energy. Rolling your way.</div>
<h1>Seoul food.<br><span class="accent">Taco attitude.</span></h1>
<p class="hero-description">Korean BBQ meets Mexican street food—and the two hit it off <strong>hard.</strong> Get ready for crispy, spicy, ridiculously good tacos.</p>
<div class="hero-actions">
<a class="button button-primary" href="#location">Find the truck
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><path d="M4 10h11M10 5l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
<a class="button button-secondary" href="#menu">Meet the menu</a>
</div>
<div class="tiny-proof">
<span class="stars" aria-label="5 stars">★★★★★</span>
<span>Good moods, stuffed tacos</span>
<span class="proof-divider"></span>
<span>Made fresh, always</span>
</div>
</div>
<div class="hero-art" aria-label="Illustration of Korean barbecue tacos">
<div class="art-tag tag-one"><span class="tag-icon">🔥</span><span>Seoul meets street<small>IT'S A FLAVOR THING</small></span></div>
<div class="art-tag tag-two"><span class="tag-icon">✦</span><span>Kimchi crunch<small>ALWAYS EXTRA LOCO</small></span></div>
<svg viewBox="0 0 640 540" role="img" aria-hidden="true">
<defs>
<linearGradient id="shell" x1="75" y1="16" x2="220" y2="220" gradientUnits="userSpaceOnUse">
<stop stop-color="#F8CB65"/>
<stop offset="1" stop-color="#E99A36"/>
</linearGradient>
<linearGradient id="shellFront" x1="0" y1="10" x2="250" y2="220" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFD879"/>
<stop offset="1" stop-color="#ECA443"/>
</linearGradient>
<filter id="softShadow" x="-30%" y="-30%" width="160%" height="180%">
<feGaussianBlur stdDeviation="11"/>
</filter>
<g id="taco">
<path d="M27 176C37 119 80 48 132 29C182 10 231 48 260 104C278 139 286 173 278 192C209 216 102 211 27 176Z" fill="url(#shell)" stroke="#B9762C" stroke-width="5" stroke-linejoin="round"/>
<path d="M37 157C55 112 91 59 135 44C176 33 216 68 244 111C258 133 267 154 265 170C206 188 111 182 37 157Z" fill="#823D28"/>
<path d="M40 153C63 110 99 70 133 54C143 49 151 48 161 50C148 75 137 104 131 135C104 154 72 160 40 153Z" fill="#4F8A4C"/>
<path d="M124 105C143 70 161 51 181 57C198 63 208 91 216 116C193 137 170 151 142 153C130 143 125 125 124 105Z" fill="#E05235"/>
<path d="M168 76C190 74 215 96 231 120L218 139C203 123 187 111 168 109C159 98 158 87 168 76Z" fill="#F57942"/>
<path d="M75 126C89 103 103 89 117 82L131 100L113 130L91 145Z" fill="#77AD55"/>
<path d="M210 132C223 117 236 113 247 122L256 148C244 156 230 157 216 151Z" fill="#D84032"/>
<path d="M80 170C126 183 205 188 264 169" fill="none" stroke="#FAD98F" stroke-width="5" stroke-linecap="round"/>
<path d="M95 174L101 180M123 180L128 185M153 183L158 188M184 183L190 188M217 180L222 184M245 175L249 179" stroke="#B9762C" stroke-width="2.5" stroke-linecap="round"/>
<path d="M157 115C170 101 185 101 195 113M179 133C192 120 205 122 213 132" fill="none" stroke="#F7D06E" stroke-width="5" stroke-linecap="round"/>
<circle cx="146" cy="84" r="7" fill="#F9E5C5"/>
<circle cx="145" cy="84" r="3" fill="#ED6B5A"/>
<circle cx="229" cy="139" r="7" fill="#F9E5C5"/>
<circle cx="229" cy="139" r="3" fill="#ED6B5A"/>
<path d="M98 117C103 107 109 102 115 99M190 71L197 78M65 145L71 139" stroke="#A9CF61" stroke-width="4" stroke-linecap="round"/>
<path d="M51 180C104 198 215 204 268 185" fill="none" stroke="#C98734" stroke-width="3" opacity=".75"/>
</g>
</defs>
<path d="M74 98C117 20 234 13 310 39C394 68 481 58 535 117C595 184 589 315 546 385C501 460 406 485 320 469C227 452 111 475 63 405C12 331 29 178 74 98Z" fill="#F4B4A5"/>
<circle cx="486" cy="111" r="53" fill="#D9EF72"/>
<circle cx="109" cy="385" r="34" fill="#F6CC65"/>
<path d="M68 161L79 151M559 292L570 282M142 92L151 81M527 410L536 401" stroke="#ED553A" stroke-width="5" stroke-linecap="round"/>
<circle cx="525" cy="188" r="5" fill="#ED553A"/>
<circle cx="108" cy="238" r="5" fill="#F8D66F"/>
<ellipse cx="323" cy="397" rx="250" ry="86" fill="#8F4530" opacity=".22" filter="url(#softShadow)"/>
<ellipse cx="320" cy="375" rx="257" ry="91" fill="#FFFDF7" stroke="#E8DCC8" stroke-width="5"/>
<ellipse cx="320" cy="371" rx="226" ry="69" fill="#F5EBDD"/>
<path d="M129 378C188 346 439 336 522 379" fill="none" stroke="#E4D7C3" stroke-width="2" stroke-dasharray="5 9"/>
<g transform="translate(80 108) rotate(-13 145 108) scale(.86)">
<ellipse cx="160" cy="186" rx="128" ry="22" fill="#77402E" opacity=".2"/>
<use href="#taco"/>
</g>
<g transform="translate(310 105) rotate(12 145 108) scale(.84)">
<ellipse cx="160" cy="186" rx="128" ry="22" fill="#77402E" opacity=".18"/>
<use href="#taco"/>
</g>
<g transform="translate(175 224) rotate(-2 145 108) scale(1.07)">
<ellipse cx="160" cy="186" rx="128" ry="22" fill="#77402E" opacity=".18"/>
<use href="#taco"/>
</g>
<path d="M130 426C174 442 224 448 270 445" fill="none" stroke="#D8CBB7" stroke-width="3" stroke-linecap="round"/>
<path d="M443 93l9-16 9 16-9 16z" fill="#ED553A"/>
<path d="M555 353l7-12 7 12-7 12z" fill="#ED553A"/>
</svg>
</div>
</div>
</section>
<div class="ticker" aria-label="Korean barbecue, Mexican soul, zero boring bites">
<div class="ticker-inner">
<div class="ticker-item">KOREAN BBQ <span>✳</span> MEXICAN SOUL</div>
<div class="ticker-item">ZERO BORING BITES <span>✳</span> ALL THE GOOD STUFF</div>
<div class="ticker-note">Catch the truck. Chase the crunch.</div>
</div>
</div>
<section class="section menu-section" id="menu">
<div class="wrap">
<div class="section-top">
<div>
<p class="section-kicker">A little menu mischief</p>
<h2 class="section-heading">Small tortilla.<br>Big main character.</h2>
</div>
<p class="section-note">Korean-inspired, street-style, and built to make that first bite a moment.</p>
</div>
<div class="menu-grid">
<article class="food-card">
<span class="card-number">01 · Fan favorite</span>
<div class="dish-illustration" aria-hidden="true">
<svg viewBox="0 0 130 110">
<ellipse cx="66" cy="83" rx="52" ry="15" fill="#E8D9C5"/>
<path d="M24 70C32 38 50 22 66 21C85 20 102 42 108 71C83 83 49 83 24 70Z" fill="#F1B74F" stroke="#B9762C" stroke-width="3"/>
<path d="M31 65C39 43 52 31 66 30C80 31 94 48 100 67C77 75 50 75 31 65Z" fill="#803E2A"/>
<path d="M38 54l12-13 9 12-12 12zm35-13 12 8-6 13-13-7z" fill="#6E9D4F"/>
<path d="M58 49l12-9 11 12-14 10z" fill="#E35B3F"/>
<circle cx="79" cy="49" r="5" fill="#FBEBD0"/><circle cx="79" cy="49" r="2.5" fill="#E35B3F"/>
</svg>
</div>
<h3>Bulgogi bad boy</h3>
<p>Sweet-savory marinated beef, crunchy slaw, a little gochujang glow.</p>
<span class="price">$6</span>
</article>
<article class="food-card">
<span class="card-number">02 · The spicy one</span>
<div class="dish-illustration" aria-hidden="true">
<svg viewBox="0 0 130 110">
<ellipse cx="66" cy="83" rx="52" ry="15" fill="#E8D9C5"/>
<path d="M24 70C32 38 50 22 66 21C85 20 102 42 108 71C83 83 49 83 24 70Z" fill="#F1B74F" stroke="#B9762C" stroke-width="3"/>
<path d="M31 65C39 43 52 31 66 30C80 31 94 48 100 67C77 75 50 75 31 65Z" fill="#77402C"/>
<path d="M39 57l13-16 11 11-13 14zm34-15 13 8-7 14-14-8z" fill="#76A04D"/>
<path d="M56 46l12-6 13 12-13 11z" fill="#E05235"/>
<path d="M85 26C91 34 91 39 85 43C79 39 80 34 85 26Z" fill="#ED553A"/>
<circle cx="79" cy="49" r="5" fill="#FBEBD0"/><circle cx="79" cy="49" r="2.5" fill="#E35B3F"/>
</svg>
</div>
<h3>Kimchi loco</h3>
<p>Charred chicken, house kimchi, lime crema. Tangy, spicy, gone-too-fast.</p>
<span class="price">$6</span>
</article>
<article class="food-card">
<span class="card-number">03 · Plant-powered</span>
<div class="dish-illustration" aria-hidden="true">
<svg viewBox="0 0 130 110">
<ellipse cx="66" cy="83" rx="52" ry="15" fill="#E8D9C5"/>
<path d="M24 70C32 38 50 22 66 21C85 20 102 42 108 71C83 83 49 83 24 70Z" fill="#F1B74F" stroke="#B9762C" stroke-width="3"/>
<path d="M31 65C39 43 52 31 66 30C80 31 94 48 100 67C77 75 50 75 31 65Z" fill="#6D8546"/>
<path d="M39 57l13-16 11 11-13 14zm34-15 13 8-7 14-14-8z" fill="#8BAC55"/>
<path d="M56 46l12-6 13 12-13 11z" fill="#E05235"/>
<circle cx="79" cy="49" r="5" fill="#FBEBD0"/><circle cx="79" cy="49" r="2.5" fill="#E35B3F"/>
</svg>
</div>
<h3>Seoul garden</h3>
<p>Crispy tofu, sesame greens, pickled crunch, and a sweet chili kick.</p>
<span class="price">$5</span>
</article>
</div>
</div>
</section>
<section class="section location-section" id="location">
<div class="wrap location-grid">
<div class="location-copy">
<p class="section-kicker">We don't stay put</p>
<h2 class="section-heading">Follow the<br>flavor trail.</h2>
<p>We're out on the streets serving the good stuff. Our daily stop changes, so check in before you head over—and bring a friend who doesn't mind sharing fries.</p>
<a class="button button-primary" href="#follow">Get today's location <span aria-hidden="true">↗</span></a>
</div>
<div class="map-card" aria-label="A map illustration marking the Kimchi Loco food truck">
<div class="map-road"></div>
<div class="map-pin" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none"><path d="M20 10.2c0 5.2-8 11.3-8 11.3S4 15.4 4 10.2a8 8 0 1 1 16 0Z" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="10" r="2.5" fill="currentColor"/></svg>
</div>
<div class="map-label">
<div><strong>Today’s spot is a moving target.</strong><span>Follow along for the freshest pin.</span></div>
<span class="map-arrow" aria-hidden="true">↗</span>
</div>
</div>
</div>
</section>
<section class="about-strip" id="about">
<div class="wrap"><p>Come hungry. Leave <span>a little loco.</span></p></div>
</section>
</main>
<footer id="follow">
<div class="wrap footer-inner">
<a class="footer-brand" href="#home">KIMCHI <span>LOCO</span></a>
<div>Good food. Good mood. See you out there.</div>
<a class="footer-social" href="#location">@KIMCHILOCO · DAILY TRUCK UPDATES</a>
</div>
</footer>
<script>
const toggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav');
toggle.addEventListener('click', () => {
const isOpen = nav.classList.toggle('open');
toggle.setAttribute('aria-expanded', String(isOpen));
toggle.setAttribute('aria-label', isOpen ? 'Close navigation' : 'Open navigation');
});
nav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
nav.classList.remove('open');
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-label', 'Open navigation');
});
});
</script>
</body>
</html>Reasoning trace (3,889 tokens)
**Planning website design** I need to create a polished landing page for a Korean taco food truck called "Kimchi Loco." This site should have a vibrant and appetizing feel using colors like vibrant orange and lime pink, with a layout at 1280x800 pixels. I'll include a dark header, a pale cream hero section, and an inline SVG illustration of tacos to make it visually appealing. The goal is to ensure the first screen is meaningful and engaging, setting the tone for the overall site.**Designing hero section** I'm working on the hero section for the website, starting with a cream background and a logo in the header, along with navigation links and a notice badge. The hero text will be asymmetrical, with text on the left and an oversized oval filled with SVG tacos on the right. The taco image should look photo-like, featuring colorful fillings and shadows. I'll also add a floating tag that reads "KOREAN BBQ / MEXICAN SOUL," along with a kimchi bottle, ensuring the layout works well on mobile devices.**Creating taco illustration** I'm considering an SVG illustration that shows a tray with two tacos, using a charming perspective and vibrant colors. The SVG should be 640x520 pixels, featuring a circular orange background and an elliptical plate. I need to ensure there's a strong visual hierarchy and proper structure in the design. For the tagline, I'm thinking of options like "Seoul food. Taco attitude." or "Your new favorite taco has a Seoul," along with the description "Korean BBQ tacos with a little kick," and a status like "NOW ROAMING ...".**Designing a layout** I'm working on a visual layout. I need to set the dimensions to 1280 width and 470 height, with the second line approximately at 450. I think I should mark the heading line with a font size of 69 for "Taco attitude," making it bold at 475. The text should be in font size 68, and I want to include an eyebrow sticker. There's a hero illustration on the right, at 590 wide. It’ll be a big, contrasting SVG illustration sized 600x500.**Designing taco artwork** I’m considering creating an outer shell shape for tacos, giving it pointy tips in a U crescent form, and filling in shapes near the top with layers. I think it could look delicious on a tray. My plan involves rendering the artwork as an embedded SVG with a specific size. The background should be a warm orange, and I want to draw three overlapping tacos on a pale plate, carefully defining their shapes and fillings.**Refining taco shell design** I’m working on improving the taco shell design using a specific path for the outer hard shell. The new shape has a nice curve and I'm using a golden fill for the tortilla. I want to ensure the top edge has a smooth arc. The fillings should be placed just above the inner face near the upper edge, and the second taco will be slightly rotated for better presentation. It definitely feels like a valid taco shell design!**Designing taco illustration** I'm thinking about how to make tacos visually appealing. I could arrange three tacos in a tray for strong illustration. A plate with an ellipsis shape could work, and I can play with an SVG background featuring a coral blob and fun motifs. I want to focus on detailing the tacos themselves, without making them overly simplistic. Adding textures like crimped edges, gradients for the tortilla, and realistic fillings like chunks of meat, leafy greens, cheese, and radish slices would enhance the design!**Visualizing taco design** I'm designing a taco illustration where the outer shell's top edge curves diagonally, displaying a contour that encloses the contents while keeping some filling visible. I want to create an open internal fill shape that fits the taco. There will be paths for the shell and the filling, ensuring to add detail like greens, meat, and kimchi. Also, I need to ensure the taco is engaging and bespoke for a website, displaying elements like a hero image and a ticker/menu preview at the right dimensions.**Creating a website layout** I’m designing a website layout with specific dimensions: a header at 74 pixels, a hero section at 570 pixels, and a footer ticker at 72 pixels featuring bold text. For mobile, there'll be a header with a logo and a burger menu, with a one-column hero grid and an art height of 350 pixels. The hero section will include a status note at the top left, and I want to ensure no horizontal overflow occurs. Also, I'll add buttons, social ratings, and a CTA to scroll to the location and menu sections.**Designing location features** I’m thinking about a restaurant menu card layout. It could feature a full-page design with a location section that has a dark green map showing cross streets and a pin for location details. Since the user didn’t specify a city, I want to avoid making up information. Instead, I could say something like, "Find us on the streets of [your city]," and note that their daily location changes. It needs to feel meaningful yet adaptable!**Crafting location features** For the location section, I'm aiming for a dynamic experience. Instead of saying, "We don't stay put. We follow the hungry," I could use something like "Catch us around town." I think a button that says "See today's pin" could open a modal stating, "Today's pin drops at 11 AM. Check our Instagram for today's location." It would be visually Instagram-style. I’ll also consider toggling the daily location detail card for interactivity. Plus, I want to ensure the header navigation and main sections are clear and engaging!**Designing the layout** I'm organizing the layout with a parent frame and a hero block grid. The header container will be set at 1160 pixels wide. For the hero section, I want a light background (#fff8ed) along with decorative stripe shapes. I need to ensure the hero copy has a margin and maintains a line height of .98. I’ll emphasize “Seoul food” in dark colors, possibly with an orange highlight for a second line. The phrase "Taco attitude" should fit within a specified width. Let's make sure everything aligns well!**Figuring out tray design** I'm analyzing the tray's design, which features an ellipse shape. I’m thinking the decorative sticker might say "HOT / HOT / HOT," and it could be slightly rotated. I also see a label bubble above some artwork. There’s a floating white card labeled "KIMCHI / CRUNCH," along with a circle icon and a location icon. Lastly, I’m wondering if the SVG labels are placed outside using absolute positioning? There could be a lot to consider!**Designing layout elements** I'm planning the location button with a grid layout. The left side will have text, while the right features a green card with a map. For visual effects, I'm thinking of using dashed SVG paths and pins. I should set reduced motion to enhance accessibility. Plus, including options like "Get the menu" and "Find the truck" will be useful. At 1280 width, I've got to ensure dimensions and padding are aligned, and the hero section has a nice visual appeal. Let's get started!**Creating SVG artwork** I'm working on an SVG design that involves defining a gradient for a tortilla and adding shading to give it a shell-like appearance. I want to include drop shadows for depth. The backdrop needs a coral color with organic textures and speckles to add some visual interest. I plan to create a main SVG element with a `<g>` tag for the taco definition. I might also consider making a pattern, adding another layer of flair to the overall design.**Considering SVG design** I’m thinking about using an orange background for the outer SVG, with a coral fill for the path and a yellow circle behind a taco graphic for visual appeal. It seems like the card doesn’t require any actual image requests. I should check whether to use a `clip` on the SVG, but I guess I won’t. Instead, I might want to use CSS with `@media` queries for responsive design. Let’s keep this straightforward with the code!