Food truck websiteOne-line
DeepSeek V4.1 Flash 1017
by DeepSeekReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 44.8 s
- Cost
- $0.0041
- Output tokens
- 8,212
- Spent thinking
- 0 tokens
- Speed
- 185.7 tok/s
- Console errors
- 0
- First token after
- 586 ms
- First visible text after
- 586 ms
- Prompt tokens
- 364
- Code size
- 23.6 KB
- Finish reason
- stop
- Served by
- Relace
- Model id
deepseek/deepseek-v4.1-flash-1017- Reasoning sent
{"effort":"none"}- Max output
- 64,000 tokens
- Generated
- Nov 11, 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 · 615 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kimchi Loco — Korean Tacos Food Truck</title>
<style>
:root{
--ink:#1a1210;
--cream:#fff6e9;
--chili:#e23b2e;
--loco:#ffb020;
--gochu:#8b1a1a;
--lime:#7bc043;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
body{
font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
background:var(--cream);
color:var(--ink);
-webkit-font-smoothing:antialiased;
}
/* ---------- HERO ---------- */
header{
position:relative;
min-height:100vh;
display:flex;
flex-direction:column;
padding:0 clamp(16px,4vw,64px);
background:
radial-gradient(120% 80% at 80% 10%, rgba(255,176,32,.55), transparent 60%),
radial-gradient(90% 70% at 10% 90%, rgba(123,192,67,.35), transparent 60%),
linear-gradient(160deg,#2b0f0c 0%, #7a1712 45%, #e23b2e 100%);
color:var(--cream);
overflow:hidden;
}
/* animated starburst */
.burst{
position:absolute;
width:min(90vw,900px);
aspect-ratio:1;
right:-14%;
top:-10%;
background:repeating-conic-gradient(from 0deg,
rgba(255,176,32,.16) 0deg 6deg,
transparent 6deg 12deg);
border-radius:50%;
animation:spin 60s linear infinite;
pointer-events:none;
z-index:0;
}
@keyframes spin{to{transform:rotate(360deg)}}
.nav{
position:relative;z-index:2;
display:flex;align-items:center;justify-content:space-between;
padding:22px 0;
flex-wrap:wrap;
gap:12px;
}
.logo{
font-weight:900;font-size:clamp(18px,2.2vw,24px);
letter-spacing:.06em;text-transform:uppercase;
display:flex;align-items:center;gap:10px;
}
.logo .dot{width:14px;height:14px;border-radius:50%;background:var(--loco);
box-shadow:0 0 0 4px rgba(255,176,32,.25);display:inline-block}
.nav a{color:var(--cream);text-decoration:none;font-weight:700;font-size:14px;
letter-spacing:.08em;text-transform:uppercase;opacity:.85;transition:.2s}
.nav a:hover{opacity:1;color:var(--loco)}
.navlinks{display:flex;gap:clamp(14px,3vw,36px);flex-wrap:wrap}
.hero-main{
position:relative;z-index:2;
flex:1;display:grid;grid-template-columns:1.05fr .95fr;
align-items:center;gap:clamp(20px,4vw,60px);
padding:clamp(24px,4vw,60px) 0 clamp(48px,6vw,90px);
}
.kicker{
display:inline-flex;align-items:center;gap:10px;
background:rgba(255,246,233,.12);
border:1.5px solid rgba(255,246,233,.3);
padding:8px 16px;border-radius:999px;
font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:var(--loco);
margin-bottom:22px;
}
.kicker .pulse{width:9px;height:9px;border-radius:50%;background:var(--lime);
animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(123,192,67,.7)}50%{box-shadow:0 0 0 9px rgba(123,192,67,0)}}
h1{
font-size:clamp(46px,8.6vw,118px);
line-height:.86;
font-weight:900;
letter-spacing:-.03em;
text-transform:uppercase;
}
h1 .loco{
color:var(--loco);
text-shadow:0 6px 0 rgba(0,0,0,.18);
display:inline-block;
transform:rotate(-2deg);
}
h1 .outline{
-webkit-text-stroke:2px var(--cream);
color:transparent;
}
.sub{
max-width:44ch;
margin-top:26px;
font-size:clamp(16px,1.6vw,20px);
line-height:1.55;
color:rgba(255,246,233,.88);
font-weight:500;
}
.cta-row{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;align-items:center}
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:16px 30px;border-radius:999px;
font-weight:900;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
text-decoration:none;cursor:pointer;border:none;
transition:transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--loco);color:var(--ink);
box-shadow:0 10px 0 rgba(0,0,0,.28)}
.btn-primary:hover{box-shadow:0 13px 0 rgba(0,0,0,.28)}
.btn-ghost{background:transparent;color:var(--cream);
border:2px solid rgba(255,246,233,.45)}
.btn-ghost:hover{border-color:var(--loco);color:var(--loco)}
/* taco visual */
.taco-stage{
position:relative;display:flex;justify-content:center;align-items:center;
min-height:clamp(280px,44vw,460px);
}
.taco-plate{
position:relative;width:min(78%,420px);aspect-ratio:1;
display:grid;place-items:center;
}
.taco{
width:100%;height:100%;
filter:drop-shadow(0 26px 30px rgba(0,0,0,.45));
animation:bob 4.5s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
.steam{position:absolute;top:4%;width:100%;display:flex;justify-content:center;gap:22px;pointer-events:none}
.steam span{width:8px;height:0;background:linear-gradient(to top,rgba(255,246,233,.5),transparent);
border-radius:999px;animation:rise 3s ease-in infinite}
.steam span:nth-child(2){animation-delay:.7s}
.steam span:nth-child(3){animation-delay:1.4s}
@keyframes rise{0%{height:0;opacity:0}30%{opacity:.8}100%{height:80px;opacity:0;transform:translateY(-30px)}}
.price-tag{
position:absolute;bottom:2%;right:-6%;
background:var(--cream);color:var(--gochu);
font-weight:900;font-size:clamp(15px,2vw,22px);
padding:12px 20px;border-radius:16px;
transform:rotate(7deg);
box-shadow:0 12px 24px rgba(0,0,0,.35);
border:3px dashed var(--chili);
}
.stamp{
position:absolute;top:6%;left:-4%;
width:clamp(82px,12vw,116px);aspect-ratio:1;
border-radius:50%;
background:var(--chili);
color:var(--cream);
display:grid;place-items:center;text-align:center;
font-weight:900;font-size:clamp(10px,1.3vw,13px);line-height:1.15;
letter-spacing:.05em;text-transform:uppercase;
transform:rotate(-12deg);
border:3px solid rgba(255,246,233,.7);
animation:stampPulse 3s ease-in-out infinite;
}
@keyframes stampPulse{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-8deg) scale(1.07)}}
.scroll-hint{
position:relative;z-index:2;
text-align:center;padding-bottom:26px;
font-size:12px;letter-spacing:.25em;text-transform:uppercase;
color:rgba(255,246,233,.6);font-weight:800;
animation:fade 2s ease-in-out infinite;
}
@keyframes fade{0%,100%{opacity:.4}50%{opacity:1}}
/* ---------- MARQUEE ---------- */
.marquee{
background:var(--ink);
color:var(--cream);
padding:16px 0;
overflow:hidden;
white-space:nowrap;
border-top:4px solid var(--loco);
border-bottom:4px solid var(--loco);
}
.marquee-track{
display:inline-block;
animation:scroll 26s linear infinite;
font-weight:900;font-size:clamp(16px,2vw,22px);
letter-spacing:.1em;text-transform:uppercase;
}
.marquee-track span{margin:0 26px;color:var(--cream)}
.marquee-track .hl{color:var(--loco)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- SECTION SHARED ---------- */
section.block{padding:clamp(56px,8vw,110px) clamp(16px,4vw,64px)}
.eyebrow{
font-size:13px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;
color:var(--chili);margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--chili);display:inline-block}
h2{
font-size:clamp(32px,5vw,64px);
line-height:.95;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;
margin-bottom:18px;
}
.lead{max-width:60ch;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:#4a3b36}
/* ---------- MENU ---------- */
.menu-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:22px;margin-top:44px;
}
.card{
background:#fff;
border-radius:22px;
padding:26px 24px 24px;
border:2px solid #f0e3cf;
box-shadow:0 6px 0 #f0e3cf;
position:relative;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
overflow:hidden;
}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 0 #f0e3cf;border-color:var(--loco)}
.card .emoji{font-size:44px;display:block;margin-bottom:14px}
.card h3{font-size:23px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px}
.card p{font-size:15px;line-height:1.55;color:#5c4a44;min-height:66px}
.price{
display:inline-block;margin-top:18px;
font-weight:900;font-size:20px;color:var(--gochu);
background:#ffefd4;padding:6px 14px;border-radius:999px;
}
.tag{
position:absolute;top:16px;right:16px;
font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
background:var(--chili);color:#fff;padding:5px 10px;border-radius:999px;
}
.tag.green{background:var(--lime);color:var(--ink)}
.tag.dark{background:var(--ink);color:var(--loco)}
/* ---------- STORY / NUMBERS ---------- */
.story{
background:linear-gradient(170deg,#fff6e9 0%, #ffe9c9 100%);
}
.story-wrap{
display:grid;grid-template-columns:1.05fr .95fr;
gap:clamp(28px,5vw,70px);align-items:center;max-width:1240px;margin:0 auto;
}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat{
background:var(--ink);color:var(--cream);
border-radius:20px;padding:26px 22px;
position:relative;overflow:hidden;
}
.stat:nth-child(2){background:var(--chili)}
.stat:nth-child(3){background:var(--loco);color:var(--ink)}
.stat:nth-child(4){background:var(--gochu)}
.stat .num{font-size:clamp(30px,4vw,46px);font-weight:900;line-height:1;letter-spacing:-.02em}
.stat .lbl{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
margin-top:10px;opacity:.85}
/* ---------- FIND US ---------- */
.find{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.find h2{color:var(--cream)}
.find .eyebrow{color:var(--loco)}
.find .eyebrow::before{background:var(--loco)}
.find .lead{color:rgba(255,246,233,.75)}
.sched{
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:16px;margin-top:40px;
}
.slot{
border:1.5px solid rgba(255,246,233,.18);
border-radius:18px;padding:22px;
background:rgba(255,246,233,.04);
transition:.2s;
}
.slot:hover{border-color:var(--loco);background:rgba(255,176,32,.09)}
.slot .day{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--loco)}
.slot .place{font-size:19px;font-weight:800;margin-top:8px}
.slot .time{font-size:14px;color:rgba(255,246,233,.6);margin-top:6px}
.now{
display:inline-flex;align-items:center;gap:8px;
background:var(--lime);color:var(--ink);
font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
padding:5px 12px;border-radius:999px;margin-top:14px;
}
.now::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);
animation:pulse 1.4s ease-in-out infinite}
/* ---------- FOOTER CTA ---------- */
.final{
background:linear-gradient(120deg,var(--chili),var(--gochu));
color:var(--cream);text-align:center;
padding:clamp(64px,9vw,120px) clamp(16px,4vw,64px);
position:relative;overflow:hidden;
}
.final h2{font-size:clamp(34px,6vw,76px);color:var(--cream)}
.final p{max-width:56ch;margin:18px auto 0;font-size:clamp(16px,1.6vw,20px);line-height:1.6;
color:rgba(255,246,233,.9)}
.final .btn-primary{margin-top:38px;font-size:16px;padding:18px 40px}
.socials{display:flex;justify-content:center;gap:18px;margin-top:44px;flex-wrap:wrap}
.socials a{
color:rgba(255,246,233,.8);text-decoration:none;font-weight:800;
font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
border-bottom:2px solid transparent;padding-bottom:3px;transition:.2s;
}
.socials a:hover{color:var(--loco);border-color:var(--loco)}
.copyright{
text-align:center;padding:26px;font-size:12px;letter-spacing:.1em;
text-transform:uppercase;color:#8a7a72;background:var(--cream);font-weight:700;
}
/* taco floaters */
.floater{position:absolute;font-size:clamp(26px,4vw,48px);opacity:.16;pointer-events:none;
animation:bob 6s ease-in-out infinite}
.floater.f1{top:12%;left:6%}
.floater.f2{bottom:16%;right:8%;animation-delay:1.2s}
.floater.f3{top:60%;left:12%;animation-delay:2.4s}
/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
.hero-main{grid-template-columns:1fr;gap:10px;padding-top:10px}
.taco-stage{order:-1;min-height:auto}
.taco-plate{width:min(62%,300px)}
.story-wrap{grid-template-columns:1fr}
.price-tag{right:4%}
.stamp{left:2%}
}
@media (max-width:520px){
.navlinks{display:none}
.card p{min-height:0}
.price-tag{bottom:-2%;font-size:14px;padding:9px 14px}
.cta-row{flex-direction:column;align-items:stretch}
.btn{justify-content:center}
}
</style>
</head>
<body>
<!-- HERO -->
<header>
<div class="burst"></div>
<div class="floater f1">🌮</div>
<div class="floater f2">🌶️</div>
<div class="floater f3">🔥</div>
<nav class="nav">
<div class="logo"><span class="dot"></span>Kimchi Loco</div>
<div class="navlinks">
<a href="#menu">Menu</a>
<a href="#story">The Fire</a>
<a href="#find">Find the Truck</a>
</div>
</nav>
<div class="hero-main">
<div>
<div class="kicker"><span class="pulse"></span>Now serving • Austin, TX</div>
<h1>Korean<br><span class="loco">Fire</span> <span class="outline">in a</span><br>Taco Shell</h1>
<p class="sub">Gochujang-braised short rib. Crackly kimchi. A blistered corn tortilla that can barely hold it all. This is not fusion — this is a collision, and it tastes incredible.</p>
<div class="cta-row">
<a href="#menu" class="btn btn-primary">🌮 See the Menu</a>
<a href="#find" class="btn btn-ghost">📍 Find the Truck</a>
</div>
</div>
<div class="taco-stage">
<div class="steam"><span></span><span></span><span></span></div>
<div class="taco-plate">
<svg class="taco" viewBox="0 0 400 400" role="img" aria-label="A loaded Korean taco">
<defs>
<linearGradient id="shell" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f6c453"/>
<stop offset="55%" stop-color="#e8a52e"/>
<stop offset="100%" stop-color="#c47c18"/>
</linearGradient>
<linearGradient id="meat" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#8b1a1a"/>
<stop offset="100%" stop-color="#5a0e0e"/>
</linearGradient>
<linearGradient id="lettuce" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#a8d95f"/>
<stop offset="100%" stop-color="#6aa832"/>
</linearGradient>
</defs>
<!-- tortilla shadow -->
<ellipse cx="200" cy="330" rx="140" ry="22" fill="rgba(0,0,0,.22)"/>
<!-- tortilla back -->
<path d="M70 300 C70 175 135 105 200 105 C265 105 330 175 330 300 Z" fill="url(#shell)"/>
<path d="M70 300 C70 175 135 105 200 105 C265 105 330 175 330 300 Z" fill="none" stroke="#a8690f" stroke-width="3" opacity=".5"/>
<!-- char marks -->
<g stroke="#8a5309" stroke-width="7" stroke-linecap="round" opacity=".45">
<path d="M120 240 q14 -16 8 -34"/>
<path d="M165 200 q-10 22 4 34"/>
<path d="M255 215 q12 -18 4 -36"/>
<path d="M290 255 q-12 16 -6 30"/>
</g>
<!-- lettuce bed -->
<path d="M88 250 C100 210 145 190 200 190 C255 190 300 210 312 250 C290 285 250 300 200 300 C150 300 110 285 88 250 Z" fill="url(#lettuce)"/>
<!-- lettuce frills -->
<g fill="#8cc44a">
<circle cx="110" cy="240" r="18"/>
<circle cx="150" cy="222" r="20"/>
<circle cx="200" cy="212" r="22"/>
<circle cx="250" cy="222" r="20"/>
<circle cx="290" cy="240" r="18"/>
</g>
<!-- bulgogi meat -->
<g fill="url(#meat)">
<path d="M120 258 C110 235 145 218 175 226 C195 231 200 250 188 262 C170 278 130 280 120 258Z"/>
<path d="M185 250 C180 226 215 210 245 222 C268 231 268 258 250 266 C228 276 195 272 185 250Z"/>
<path d="M240 262 C234 244 262 232 288 244 C305 252 300 275 282 280 C260 286 246 278 240 262Z"/>
</g>
<!-- glossy meat highlights -->
<g fill="rgba(255,190,120,.35)">
<ellipse cx="150" cy="242" rx="14" ry="6" transform="rotate(-14 150 242)"/>
<ellipse cx="218" cy="238" rx="16" ry="6" transform="rotate(8 218 238)"/>
<ellipse cx="270" cy="254" rx="12" ry="5" transform="rotate(-10 270 254)"/>
</g>
<!-- kimchi red strips -->
<g fill="#d9342a">
<path d="M135 270 q18 -12 34 -2 q-6 14 -24 14 q-12 -2 -10 -12Z"/>
<path d="M210 272 q20 -10 34 2 q-10 14 -26 10 q-12 -4 -8 -12Z"/>
<path d="M262 230 q16 -8 26 4 q-8 12 -22 8 q-10 -4 -4 -12Z"/>
</g>
<!-- green onion -->
<g stroke="#7bc043" stroke-width="6" stroke-linecap="round">
<path d="M140 218 l-12 -6"/>
<path d="M170 208 l-4 -12"/>
<path d="M205 202 l6 -12"/>
<path d="M238 210 l10 -10"/>
<path d="M268 222 l14 -6"/>
</g>
<!-- sesame -->
<g fill="#fff6e9">
<ellipse cx="160" cy="250" rx="4" ry="2.4" transform="rotate(20 160 250)"/>
<ellipse cx="198" cy="240" rx="4" ry="2.4" transform="rotate(-15 198 240)"/>
<ellipse cx="236" cy="252" rx="4" ry="2.4" transform="rotate(35 236 252)"/>
<ellipse cx="276" cy="246" rx="4" ry="2.4" transform="rotate(-25 276 246)"/>
<ellipse cx="128" cy="256" rx="4" ry="2.4" transform="rotate(10 128 256)"/>
</g>
<!-- tortilla front lip -->
<path d="M70 300 C110 336 290 336 330 300 C290 322 110 322 70 300 Z" fill="#d99524" opacity=".9"/>
</svg>
<div class="stamp">Real<br>Fire<br>Only</div>
<div class="price-tag">From $6 🌮</div>
</div>
</div>
</div>
<div class="scroll-hint">Scroll · Get Hungry</div>
</header>
<!-- MARQUEE -->
<div class="marquee">
<div class="marquee-track" id="mq">
<span>Gochujang <span class="hl">★</span> Kimchi <span class="hl">★</span> Bulgogi <span class="hl">★</span> Crackly Corn Tortillas <span class="hl">★</span> Pickled Daikon <span class="hl">★</span> Fire Sauce <span class="hl">★</span> </span>
</div>
</div>
<!-- MENU -->
<section class="block" id="menu">
<div class="eyebrow">The Lineup</div>
<h2>Tacos that<br>start arguments.</h2>
<p class="lead">Six things on the menu. Every single one earns its place. Order two, regret nothing, come back tomorrow for the rest.</p>
<div class="menu-grid">
<div class="card">
<span class="tag">Best Seller</span>
<span class="emoji">🥩</span>
<h3>Galbi Short Rib</h3>
<p>12-hour gochujang-braised short rib, charred scallion, pickled daikon, sesame. Melts before you chew.</p>
<span class="price">$6.50</span>
</div>
<div class="card">
<span class="tag dark">Fire</span>
<span class="emoji">🔥</span>
<h3>Buldak Blaze</h3>
<p>Fire-chicken thighs, triple-chili sauce, lime crema, crunchy cabbage slaw. It's hot. It's honest about it.</p>
<span class="price">$6.00</span>
</div>
<div class="card">
<span class="tag green">Veggie</span>
<span class="emoji">🍄</span>
<h3>King Oyster Seoul</h3>
<p>Smoked king oyster mushroom, soy-ginger glaze, house kimchi, toasted garlic. Meat-eaters order this twice.</p>
<span class="price">$5.75</span>
</div>
<div class="card">
<span class="emoji">🌶️</span>
<h3>Kimchi Pork Belly</h3>
<p>Crackling pork belly, aged house kimchi, gochujang aioli, fresno chili. The messy one. Worth it.</p>
<span class="price">$7.00</span>
</div>
<div class="card">
<span class="emoji">🌽</span>
<h3>Elote Loco</h3>
<p>Grilled street corn, gochugaru butter, cotija, lime, chili threads. A side that steals the show.</p>
<span class="price">$4.50</span>
</div>
<div class="card">
<span class="emoji">🥤</span>
<h3>Yuja Agua Fresca</h3>
<p>Korean yuja citrus, fresh lime, mint, sparkling water. The reset button your mouth will thank you for.</p>
<span class="price">$3.50</span>
</div>
</div>
</section>
<!-- STORY -->
<section class="block story" id="story">
<div class="story-wrap">
<div>
<div class="eyebrow">The Fire Behind It</div>
<h2>Two kitchens.<br>One truck.</h2>
<p class="lead">Kimchi Loco started as a joke between a Korean grandma's kitchen and a taco stand on South 1st. Then we actually cooked it — gochujang on a charred corn tortilla, crackling at the edges — and the joke stopped being funny. It became a line around the block.</p>
<p class="lead" style="margin-top:18px">Everything gets made on the truck. The kimchi ferments in the back. The tortillas get pressed to order. The fire sauce is a family recipe we're not allowed to write down.</p>
</div>
<div class="stats">
<div class="stat"><div class="num">12<br>hrs</div><div class="lbl">Short Rib Braise</div></div>
<div class="stat"><div class="num">800+</div><div class="lbl">Tacos / Saturday</div></div>
<div class="stat"><div class="num">4.9★</div><div class="lbl">Across 1,200 Reviews</div></div>
<div class="stat"><div class="num">0</div><div class="lbl">Freezers On Board</div></div>
</div>
</div>
</section>
<!-- FIND US -->
<section class="block find" id="find">
<div class="eyebrow">Rolling Schedule</div>
<h2>Find the<br>taco truck.</h2>
<p class="lead">We move. Follow the smoke. Here's where the Kimchi Loco truck parks this week — and yes, we sell out early.</p>
<div class="sched">
<div class="slot">
<div class="day">Monday – Tuesday</div>
<div class="place">South Congress Lot</div>
<div class="time">11:30 AM – 8 PM · 1500 S Congress</div>
<div class="now">Serving Now</div>
</div>
<div class="slot">
<div class="day">Wednesday – Thursday</div>
<div class="place">Rainey Street Row</div>
<div class="time">5 PM – 11 PM · Late-night fire</div>
</div>
<div class="slot">
<div class="day">Friday</div>
<div class="place">Mueller Farmers Market</div>
<div class="time">11 AM – 2 PM · Get there early</div>
</div>
<div class="slot">
<div class="day">Saturday – Sunday</div>
<div class="place">Zilker Park Edge</div>
<div class="time">12 PM – 9 PM · Picnic-plate chaos</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="final">
<h2>Come hungry.<br>Leave loco.</h2>
<p>The truck is warming up. The kimchi is ready. The first 20 tacos on Saturday go fast — and the fire sauce waits for nobody.</p>
<a href="#menu" class="btn btn-primary">🌮 Plan Your Order</a>
<div class="socials">
<a href="#">Instagram</a>
<a href="#">TikTok</a>
<a href="#">Text the Truck</a>
</div>
</section>
<div class="copyright">© Kimchi Loco Food Truck · Austin, TX · Gochujang is a personality</div>
<script>
// Duplicate marquee content for seamless loop
(function(){
const mq = document.getElementById('mq');
mq.innerHTML += mq.innerHTML;
})();
// Smooth scroll for in-page links
document.querySelectorAll('a[href^="#"]').forEach(function(a){
a.addEventListener('click', function(e){
const id = a.getAttribute('href');
if(id.length > 1){
const el = document.querySelector(id);
if(el){ e.preventDefault(); el.scrollIntoView({behavior:'smooth', block:'start'}); }
}
});
});
</script>
</body>
</html>