Food truck websiteOne-line
MiniMax M3.1 Flash
by MiniMaxReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 54.4 s
- Cost
- $0.0090
- Output tokens
- 14,913
- Spent thinking
- 507 tokens
- Speed
- 276.3 tok/s
- Console errors
- 0
- First token after
- 435 ms
- First visible text after
- 3.5 s
- Prompt tokens
- 533
- Code size
- 42.0 KB
- Finish reason
- stop
- Served by
- DigitalOcean
- Model id
minimax/minimax-m3.1-flash- Reasoning sent
{"effort":"medium"}- 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 · 640 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kimchi Loco — Korean Tacos, Zero Boring</title>
<style>
:root{
--ink:#171310;
--cream:#fff7e6;
--paper:#fffdf7;
--red:#f0442d;
--red-dark:#b92519;
--lime:#d8f35b;
--gold:#ffbe3d;
--orange:#ff7a2f;
--muted:#6d6258;
--border:rgba(23,19,16,.14);
--shadow:0 22px 60px rgba(45,26,12,.13);
--radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
color:var(--ink);
background:var(--cream);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
overflow-x:hidden;
}
button,input,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 0 0 5px rgba(240,68,45,.14)}
.btn{
border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-weight:900;letter-spacing:.02em;border-radius:999px;padding:15px 23px;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.btn:hover{transform:translateY(-3px)}
.btn.primary{background:var(--red);color:white;box-shadow:0 10px 24px rgba(240,68,45,.26)}
.btn.primary:hover{background:var(--red-dark);box-shadow:0 14px 30px rgba(240,68,45,.34)}
.btn.dark{background:var(--ink);color:white}
.btn.light{background:white;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn .arrow{font-size:20px;line-height:1}
.ticker{
background:var(--red);color:white;overflow:hidden;height:38px;display:flex;align-items:center;
font-size:12px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.ticker-track{display:flex;gap:46px;min-width:max-content;animation:marquee 22s linear infinite}
.ticker span::after{content:"✦";margin-left:46px;color:var(--lime)}
@keyframes marquee{to{transform:translateX(-50%)}}
header{
position:sticky;top:0;z-index:50;background:rgba(255,247,230,.9);
backdrop-filter:blur(14px);border-bottom:1px solid rgba(23,19,16,.08);
}
nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo-mark{
width:43px;height:43px;background:var(--ink);border-radius:13px;display:grid;place-items:center;
color:var(--lime);font-size:23px;transform:rotate(-5deg);box-shadow:4px 4px 0 var(--red);
}
.logo b{font-size:20px;line-height:.9;letter-spacing:-.05em;text-transform:uppercase}
.logo small{display:block;font-size:9px;letter-spacing:.22em;margin-top:5px;font-weight:800;color:var(--red)}
.nav-links{display:flex;align-items:center;gap:30px;font-weight:750;font-size:14px}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--red);transition:right .25s}
.nav-links a:hover::after{right:0}
.nav-actions{display:flex;align-items:center;gap:12px}
.cart-btn{position:relative;border:0;background:transparent;padding:10px;cursor:pointer;font-size:20px}
.cart-count{position:absolute;top:0;right:-2px;background:var(--red);color:#fff;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;font-size:10px;font-weight:900}
.menu-btn{display:none;background:none;border:0;font-size:25px;cursor:pointer}
.hero{position:relative;min-height:680px;display:flex;align-items:center;overflow:hidden;padding:64px 0 72px}
.hero::before{
content:"";position:absolute;width:520px;height:520px;right:-190px;top:-120px;border-radius:50%;
background:radial-gradient(circle,#ffe49a 0,rgba(255,228,154,.35) 48%,transparent 70%);
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:42px;position:relative;z-index:1}
.hero h1{
margin:18px 0 18px;font-size:clamp(58px,7.3vw,96px);line-height:.85;letter-spacing:-.075em;
text-transform:uppercase;font-weight:1000;
}
.hero h1 .outline{color:var(--red);-webkit-text-stroke:1.5px var(--red);paint-order:stroke fill;background:transparent}
.korean{font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
.hero-copy>p{max-width:560px;font-size:18px;line-height:1.65;color:#5f544a;margin:0 0 27px}
.hero-buttons{display:flex;gap:13px;align-items:center;flex-wrap:wrap}
.hero-meta{display:flex;gap:22px;align-items:center;margin-top:31px;font-size:13px;font-weight:750}
.avatars{display:flex}
.avatars i{width:34px;height:34px;border:3px solid var(--cream);border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;margin-left:-8px}
.avatars i:first-child{margin-left:0}
.stars{color:var(--red);letter-spacing:2px}
.hero-visual{position:relative;min-height:520px;display:grid;place-items:center}
.sun{position:absolute;width:430px;height:430px;border-radius:50%;background:var(--gold);opacity:.9;box-shadow:inset 0 0 0 14px rgba(255,255,255,.16)}
.burst{position:absolute;width:500px;height:500px;background:repeating-conic-gradient(from 0deg,rgba(240,68,45,.13) 0deg 8deg,transparent 8deg 16deg);border-radius:50%;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.taco-art{width:min(500px,96%);position:relative;z-index:2;filter:drop-shadow(0 30px 22px rgba(50,25,10,.22));animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(1deg)}}
.steam{position:absolute;z-index:3;left:50%;top:4%;width:210px;height:170px;transform:translateX(-50%);opacity:.65}
.steam path{fill:none;stroke:white;stroke-width:9;stroke-linecap:round;stroke-dasharray:70;animation:steam 2.8s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:.7s}
.steam path:nth-child(3){animation-delay:1.4s}
@keyframes steam{0%{opacity:0;transform:translateY(18px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-25px)}}
.float-badge{
position:absolute;z-index:4;background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
border-radius:16px;padding:12px 16px;font-weight:900;transform:rotate(-4deg);
}
.float-badge.one{top:11%;left:-1%;font-size:13px}
.float-badge.two{bottom:8%;right:1%;transform:rotate(5deg);background:var(--lime);font-size:14px}
.float-badge strong{font-size:20px;display:block;color:var(--red)}
.scribble{position:absolute;bottom:18%;left:-3%;font-family:cursive;font-size:20px;color:var(--red);font-weight:800;transform:rotate(-10deg)}
.feature-strip{background:var(--ink);color:white;padding:24px 0}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.feature{padding:6px 22px;border-right:1px solid rgba(255,255,255,.14);display:flex;gap:13px;align-items:center}
.feature:first-child{padding-left:0}
.feature:last-child{border:0}
.feature .icon{font-size:25px}
.feature b{display:block;font-size:14px;margin-bottom:3px}
.feature span{font-size:12px;color:#bcb2a7}
section{padding:100px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px}
.section-head h2{font-size:clamp(42px,5.5vw,68px);line-height:.94;letter-spacing:-.055em;margin:13px 0 0;text-transform:uppercase}
.section-head p{max-width:420px;color:var(--muted);line-height:1.65;margin:0}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.food-card{
background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
transition:transform .3s ease,box-shadow .3s ease;position:relative;
}
.food-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.food-art{height:245px;position:relative;display:grid;place-items:center;overflow:hidden}
.food-art svg{width:80%;height:90%;filter:drop-shadow(0 16px 12px rgba(50,25,10,.17));transition:transform .35s}
.food-card:hover .food-art svg{transform:rotate(-3deg) scale(1.05)}
.food-art.one{background:#ffd85d}
.food-art.two{background:#ffad93}
.food-art.three{background:#cce97e}
.food-tag{position:absolute;top:15px;left:15px;background:var(--ink);color:white;padding:7px 10px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.food-body{padding:23px}
.food-title{display:flex;justify-content:space-between;gap:15px;align-items:center}
.food-title h3{font-size:22px;letter-spacing:-.03em;margin:0}
.price{font-size:19px;font-weight:900;color:var(--red)}
.food-body p{font-size:14px;line-height:1.55;color:var(--muted);min-height:44px;margin:10px 0 18px}
.food-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed var(--border);padding-top:15px}
.heat{font-size:12px;font-weight:800;color:#a44b2d}
.add-btn{border:0;background:var(--lime);border-radius:999px;width:38px;height:38px;cursor:pointer;font-size:21px;font-weight:900;transition:transform .2s}
.add-btn:hover{transform:scale(1.12) rotate(5deg)}
.story{background:var(--paper);position:relative}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.story-art{position:relative;min-height:480px;background:var(--red);border-radius:36px;overflow:hidden;display:grid;place-items:center}
.story-art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 30px,rgba(255,255,255,.06) 30px 60px)}
.story-art svg{width:86%;position:relative;z-index:1}
.big-korean{position:absolute;right:-8px;bottom:-28px;font-size:130px;font-weight:1000;color:rgba(255,255,255,.12);font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;writing-mode:vertical-rl}
.story-copy h2{font-size:clamp(44px,5.4vw,70px);line-height:.93;letter-spacing:-.06em;margin:14px 0 23px;text-transform:uppercase}
.story-copy h2 em{font-style:normal;color:var(--red)}
.story-copy>p{font-size:17px;line-height:1.7;color:var(--muted)}
.perks{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:28px 0}
.perk{border:2px solid var(--ink);border-radius:18px;padding:16px;background:var(--cream)}
.perk span{font-size:22px}
.perk b{display:block;margin:7px 0 3px}
.perk small{color:var(--muted);line-height:1.4;display:block}
.locate{background:var(--lime);position:relative;overflow:hidden}
.locate::after{content:"SEOUL";position:absolute;right:-30px;bottom:-90px;font-size:220px;font-weight:1000;color:rgba(23,19,16,.06);letter-spacing:-.08em}
.locate-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:55px;align-items:center;position:relative;z-index:1}
.locate h2{font-size:clamp(48px,6vw,78px);line-height:.88;letter-spacing:-.065em;margin:15px 0 20px;text-transform:uppercase}
.locate p{line-height:1.65;max-width:520px;color:#4f4a30}
.schedule{display:flex;gap:12px;margin:28px 0;flex-wrap:wrap}
.day{background:var(--paper);border:2px solid var(--ink);border-radius:18px;padding:14px 17px;min-width:112px;box-shadow:4px 4px 0 var(--ink)}
.day b{display:block;font-size:13px}
.day span{font-size:12px;color:var(--muted);display:block;margin-top:4px}
.day.today{background:var(--red);color:white;border-color:var(--ink)}
.day.today span{color:#ffe1d8}
.truck-card{background:var(--ink);color:white;border-radius:32px;padding:30px;box-shadow:12px 12px 0 rgba(23,19,16,.18);position:relative}
.truck-card .pin{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--red);font-size:22px}
.truck-card h3{font-size:30px;margin:19px 0 7px;letter-spacing:-.04em}
.truck-card p{color:#bfb4aa;line-height:1.55;margin:0 0 21px}
.truck-art{height:170px;background:#2d2722;border-radius:22px;margin:23px 0;display:grid;place-items:center;position:relative;overflow:hidden}
.truck-art::before{content:"";position:absolute;bottom:0;width:100%;height:3px;background:#61564c}
.truck-art svg{width:95%;height:150px}
.location-line{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:750;margin-top:16px}
.location-line i{width:9px;height:9px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 5px rgba(216,243,91,.15)}
.order-section{background:var(--red);color:white;position:relative;overflow:hidden}
.order-section::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 42px,rgba(255,255,255,.035) 42px 84px)}
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;position:relative}
.order-copy h2{font-size:clamp(52px,6.8vw,84px);line-height:.87;letter-spacing:-.07em;margin:14px 0 22px;text-transform:uppercase}
.order-copy h2 span{color:var(--lime)}
.order-copy>p{font-size:17px;line-height:1.65;color:#ffe1da;max-width:500px}
.order-perks{display:flex;gap:20px;flex-wrap:wrap;margin:29px 0;font-size:13px;font-weight:800}
.order-card{background:var(--paper);color:var(--ink);border-radius:30px;padding:28px;box-shadow:12px 12px 0 rgba(92,18,9,.25)}
.order-card h3{margin:0 0 19px;font-size:22px}
.order-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px dashed var(--border)}
.order-row b{font-size:14px}
.order-row small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:31px;height:31px;border-radius:50%;border:1px solid var(--border);background:white;cursor:pointer;font-weight:900}
.qty span{min-width:15px;text-align:center;font-weight:900}
.order-total{display:flex;justify-content:space-between;font-weight:950;font-size:20px;padding:19px 0}
.order-card .btn{width:100%}
footer{background:var(--ink);color:white;padding:60px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr 1fr;gap:45px;padding-bottom:45px;border-bottom:1px solid rgba(255,255,255,.13)}
footer .logo b{color:white}
footer .logo small{color:var(--lime)}
.footer-about p{color:#a99f95;font-size:13px;line-height:1.65;max-width:290px;margin:18px 0}
.socials{display:flex;gap:9px}
.socials a{width:37px;height:37px;display:grid;place-items:center;border:1px solid #4a423b;border-radius:50%;font-size:13px;font-weight:800;transition:.2s}
.socials a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
footer h4{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:#8f857b;margin:5px 0 17px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:13px;font-weight:700}
footer ul a:hover{color:var(--lime)}
.newsletter p{font-size:12px;color:#a99f95;line-height:1.5}
.newsletter form{display:flex;margin-top:12px}
.newsletter input{min-width:0;flex:1;border:1px solid #4a423b;background:#24201c;color:white;padding:12px;border-radius:12px 0 0 12px;outline:none}
.newsletter button{border:0;background:var(--red);color:white;padding:0 16px;border-radius:0 12px 12px 0;cursor:pointer}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:24px;color:#776e66;font-size:11px}
.footer-bottom span:last-child{color:var(--lime);font-weight:800}
.mobile-cta{display:none}
@media(max-width:900px){
.nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--cream);padding:25px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--border);box-shadow:0 15px 25px rgba(0,0,0,.08)}
.nav-links.open{display:flex}
.nav-actions .btn{display:none}
.menu-btn{display:block}
.hero{padding-top:50px}
.hero-grid,.story-grid,.locate-grid,.order-grid{grid-template-columns:1fr}
.hero-copy{text-align:center}
.hero-copy>p{margin-inline:auto}
.hero-buttons,.hero-meta{justify-content:center}
.hero-visual{min-height:450px;margin-top:20px}
.sun{width:360px;height:360px}
.burst{width:420px;height:420px}
.feature-grid{grid-template-columns:1fr 1fr;gap:18px}
.feature{border:0;padding:0}
.menu-grid{grid-template-columns:1fr 1fr}
.food-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
.food-card:last-child .food-art{height:100%;min-height:250px}
.story-grid{gap:45px}
.story-art{min-height:420px}
.locate-grid{gap:35px}
.order-grid{gap:38px}
.footer-grid{grid-template-columns:1.5fr 1fr 1fr}
.footer-about{grid-column:1/-1}
}
@media(max-width:620px){
.wrap{width:min(100% - 26px,1180px)}
nav{height:68px}
.logo-mark{width:38px;height:38px}
.logo b{font-size:17px}
.nav-links{top:68px}
.hero{padding:42px 0 50px;min-height:auto}
.hero h1{font-size:56px}
.hero-copy>p{font-size:16px}
.hero-visual{min-height:350px}
.sun{width:285px;height:285px}
.burst{width:330px;height:330px}
.float-badge.one{left:0;top:3%}
.float-badge.two{right:0;bottom:0}
.scribble{display:none}
.feature-grid{grid-template-columns:1fr 1fr;gap:17px 8px}
.feature .icon{font-size:21px}
.feature b{font-size:12px}
.feature span{font-size:10px}
section{padding:72px 0}
.section-head{display:block}
.section-head p{margin-top:18px}
.menu-grid{grid-template-columns:1fr}
.food-card:last-child{grid-column:auto;display:block}
.food-card:last-child .food-art{height:245px}
.story-art{min-height:330px}
.perks{grid-template-columns:1fr}
.schedule{gap:9px}
.day{min-width:0;flex:1;padding:12px 9px;text-align:center}
.order-card{padding:20px}
.footer-grid{grid-template-columns:1fr 1fr;gap:35px}
.footer-bottom{flex-direction:column}
.mobile-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:80;background:var(--red);color:white;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:999px;padding:14px 20px;align-items:center;justify-content:center;gap:9px;font-weight:900}
body{padding-bottom:70px}
}
</style>
</head>
<body>
<div class="ticker" aria-hidden="true">
<div class="ticker-track">
<span>Seoul-meets-Mexico</span><span>Crunchy shell, funky filling</span><span>Spicy • cheesy • gloriously messy</span><span>Fresh kimchi. Big flavor.</span>
<span>Seoul-meets-Mexico</span><span>Crunchy shell, funky filling</span><span>Spicy • cheesy • gloriously messy</span><span>Fresh kimchi. Big flavor.</span>
</div>
</div>
<header>
<nav class="wrap">
<a href="#" class="logo" aria-label="Kimchi Loco home">
<div class="logo-mark">K</div>
<div><b>Kimchi Loco</b><small>KOREAN TACOS</small></div>
</a>
<div class="nav-links" id="navLinks">
<a href="#menu">The Tacos</a>
<a href="#story">Our Story</a>
<a href="#locations">Find Us</a>
<a href="#order">Order</a>
</div>
<div class="nav-actions">
<button class="cart-btn" aria-label="Open cart" onclick="scrollToId('order')">🛒<span class="cart-count" id="cartCount">0</span></button>
<a href="#order" class="btn primary">Order now <span class="arrow">↗</span></a>
<button class="menu-btn" aria-label="Open menu" onclick="document.getElementById('navLinks').classList.toggle('open')">☰</button>
</div>
</nav>
</header>
<main>
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy">
<div class="eyebrow">Korean tacos. All-American soul.</div>
<h1>Tasty <span class="korean">Kimchi.</span><br><span class="outline">Taco</span> Crazy.</h1>
<p>Big, crispy tortillas loaded with fire-roasted meat, tangy kimchi, melty cheese, and our addictive gochujang sauce. Seoul heat, Mexican style.</p>
<div class="hero-buttons">
<a href="#menu" class="btn primary">Explore the menu <span class="arrow">↓</span></a>
<a href="#locations" class="btn light">📍 Find the truck</a>
</div>
<div class="hero-meta">
<div class="avatars"><i>😋</i><i>🌮</i><i>🔥</i></div>
<div><span class="stars">★★★★★</span><br><small>Loved by 2,000+ taco people</small></div>
</div>
</div>
<div class="hero-visual">
<div class="burst"></div><div class="sun"></div>
<svg class="steam" viewBox="0 0 220 170" aria-hidden="true"><path d="M70 150c-35-30 25-42-3-76"/><path d="M110 150c-35-30 25-42-3-76"/><path d="M150 150c-35-30 25-42-3-76"/></svg>
<svg class="taco-art" viewBox="0 0 500 380" role="img" aria-label="A loaded Korean taco with meat, kimchi, cheese and lime">
<defs>
<linearGradient id="shell" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#ffd86c"/><stop offset="1" stop-color="#ee922b"/></linearGradient>
<linearGradient id="meat" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#7f3425"/><stop offset="1" stop-color="#3a2018"/></linearGradient>
</defs>
<ellipse cx="255" cy="342" rx="150" ry="19" fill="#7d3e1c" opacity=".18"/>
<path d="M91 286C90 170 155 72 250 72s160 98 159 214c-42 40-103 55-159 55s-117-15-159-55z" fill="url(#shell)" stroke="#5f351b" stroke-width="7" stroke-linejoin="round"/>
<path d="M105 274c47-44 90-57 145-57s100 14 145 58" fill="none" stroke="#c76a24" stroke-width="10" stroke-linecap="round" opacity=".55"/>
<path d="M121 264c27-39 69-59 129-59 57 0 98 19 128 57l-25 39c-37-30-72-43-103-43s-68 14-104 44z" fill="url(#meat)"/>
<path d="M122 233c28-31 66-48 128-48 61 0 101 17 129 48l-22 21c-34-23-70-34-107-34s-72 11-105 34z" fill="#f7c93b"/>
<path d="M147 212c22-20 52-31 103-31 50 0 81 11 104 31l-16 19c-30-17-58-24-88-24s-59 7-89 24z" fill="#b9d84a"/>
<g fill="#ee3e31" stroke="#c72821" stroke-width="2">
<path d="M159 207c24-16 49-14 69 2-13 17-36 25-61 18z"/>
<path d="M270 204c21-17 51-17 71 0-16 20-43 26-67 14z"/>
<path d="M224 219c15-14 36-15 52-2-11 15-29 20-47 12z"/>
</g>
<g fill="#fff0ba"><rect x="164" y="235" width="27" height="9" rx="4" transform="rotate(-24 164 235)"/><rect x="293" y="237" width="28" height="9" rx="4" transform="rotate(23 293 237)"/><rect x="234" y="248" width="26" height="9" rx="4" transform="rotate(6 234 248)"/></g>
<g fill="#f8efff" stroke="#e0d7ef" stroke-width="2"><ellipse cx="186" cy="192" rx="29" ry="14"/><ellipse cx="305" cy="189" rx="31" ry="15"/><ellipse cx="247" cy="178" rx="27" ry="13"/></g>
<path d="M119 265c47 43 103 60 131 60 29 0 87-17 131-60-9 40-61 70-131 70s-122-30-131-70z" fill="#ffd45c" stroke="#5f351b" stroke-width="7"/>
<g fill="#9a5121" opacity=".6"><circle cx="178" cy="286" r="4"/><circle cx="226" cy="303" r="4"/><circle cx="281" cy="303" r="4"/><circle cx="330" cy="284" r="4"/><circle cx="207" cy="270" r="3"/><circle cx="302" cy="267" r="3"/></g>
<g transform="translate(363 58) rotate(22)"><circle r="48" fill="#b9df36" stroke="#284413" stroke-width="6"/><circle r="35" fill="#d7f05a"/><path d="M0-31v62M-27-15h54M-21 14h42M-15-23l30 46M15-23l-30 46" stroke="#7e9f26" stroke-width="3"/></g>
<g fill="#fff" stroke="#3a2018" stroke-width="4"><path d="M196 93c-10-24 12-27 3-48 28 15 36 34 21 51z"/><path d="M261 78c-4-20 15-24 10-40 21 13 27 28 14 42z"/></g>
</svg>
<div class="float-badge one"><strong>100%</strong>addictive</div>
<div class="float-badge two">Crunchy outside.<br>🔥 Big flavor inside.</div>
<div class="scribble">so good it’s loco ↘</div>
</div>
</div>
</section>
<div class="feature-strip">
<div class="wrap feature-grid">
<div class="feature"><span class="icon">🌮</span><div><b>Fresh-pressed shells</b><span>Crispy, golden, made daily</span></div></div>
<div class="feature"><span class="icon">🌶️</span><div><b>Real gochujang</b><span>Fermented, fiery, full flavor</span></div></div>
<div class="feature"><span class="icon">🥬</span><div><b>House kimchi</b><span>Tangy, crunchy, probiotic</span></div></div>
<div class="feature"><span class="icon">🧀</span><div><b>Molten cheese</b><span>Because rules are suggestions</span></div></div>
</div>
</div>
<section id="menu">
<div class="wrap">
<div class="section-head">
<div><div class="eyebrow">Pick your player</div><h2>The main<br>characters.</h2></div>
<p>Every taco is built to order with warm tortillas, generous fillings, and a sauce named after the chef’s questionable decisions.</p>
</div>
<div class="menu-grid">
<article class="food-card">
<div class="food-art one">
<span class="food-tag">Fan favorite</span>
<svg viewBox="0 0 400 300" aria-label="Seoul Crunch taco">
<defs><linearGradient id="s1" x2="1" y2="1"><stop stop-color="#ffdc72"/><stop offset="1" stop-color="#e88c2b"/></linearGradient></defs>
<ellipse cx="205" cy="264" rx="124" ry="16" fill="#7b421c" opacity=".18"/>
<path d="M76 230C82 129 138 56 202 56s120 73 126 174c-34 34-76 47-126 47s-92-13-126-47z" fill="url(#s1)" stroke="#653516" stroke-width="6"/>
<path d="M92 219c30-27 68-40 110-40s80 13 110 40" fill="none" stroke="#5d281d" stroke-width="40" stroke-linecap="round"/>
<path d="M95 203c33-24 68-35 107-35s74 11 107 35" fill="none" stroke="#d53d2e" stroke-width="22" stroke-linecap="round"/>
<path d="M95 220c34-22 68-31 107-31s73 9 107 31" fill="none" stroke="#f4ce39" stroke-width="10" stroke-linecap="round"/>
<path d="M91 226c37 39 73 48 111 48s74-9 111-48c-9 37-54 61-111 61s-102-24-111-61z" fill="#ffd15b" stroke="#653516" stroke-width="6"/>
<g fill="#b5d743"><path d="M106 194q25-33 53-9-10 30-42 24z"/><path d="M229 185q28-31 54-6-13 29-45 21z"/></g>
<g fill="#e83c2f"><path d="M127 183q22-18 43 0-18 22-42 8z"/><path d="M220 172q22-17 43 1-17 21-41 8z"/></g>
<g fill="#fff0b8"><rect x="125" y="207" width="24" height="8" rx="3" transform="rotate(-24 125 207)"/><rect x="244" y="204" width="24" height="8" rx="3" transform="rotate(22 244 204)"/></g>
<path d="M295 75c-9-21 11-25 4-43 25 14 32 30 18 45z" fill="white" stroke="#653516" stroke-width="3"/>
</svg>
</div>
<div class="food-body">
<div class="food-title"><h3>Seoul Crunch</h3><span class="price">$8.50</span></div>
<p>Slow-roasted pork, crunchy kimchi slaw, sesame aioli, and a bright squeeze of lime.</p>
<div class="food-foot"><span class="heat">🔥🔥 · Extra tangy</span><button class="add-btn" onclick="addToCart()" aria-label="Add Seoul Crunch to order">+</button></div>
</div>
</article>
<article class="food-card">
<div class="food-art two">
<span class="food-tag">Cheese pull</span>
<svg viewBox="0 0 400 300" aria-label="Gangnam Melt taco">
<defs><linearGradient id="s2" x2="1" y2="1"><stop stop-color="#ffe07d"/><stop offset="1" stop-color="#e98829"/></linearGradient></defs>
<ellipse cx="204" cy="264" rx="124" ry="16" fill="#7b421c" opacity=".18"/>
<path d="M76 230C82 129 138 56 202 56s120 73 126 174c-34 34-76 47-126 47s-92-13-126-47z" fill="url(#s2)" stroke="#653516" stroke-width="6"/>
<path d="M92 217c30-26 68-39 110-39s80 13 110 39" fill="none" stroke="#4f251b" stroke-width="40" stroke-linecap="round"/>
<path d="M92 204c34-23 69-34 110-34s76 11 110 34" fill="none" stroke="#f7cf38" stroke-width="23" stroke-linecap="round"/>
<path d="M99 220c32-20 66-29 105-29s72 9 104 29" fill="none" stroke="#cf3430" stroke-width="9" stroke-linecap="round"/>
<path d="M91 226c37 39 73 48 111 48s74-9 111-48c-9 37-54 61-111 61s-102-24-111-61z" fill="#ffd15b" stroke="#653516" stroke-width="6"/>
<path d="M157 188q22-38 46-4-4 34-37 21z" fill="#ffc83a"/>
<path d="M218 184q23-34 43-2-7 30-38 17z" fill="#ffc83a"/>
<g fill="#e83c2f"><path d="M115 192q23-18 44 0-18 22-42 8z"/><path d="M241 188q23-18 44 0-17 22-42 8z"/></g>
<g fill="#b8d847"><path d="M153 195q24-28 47-4-13 27-43 17z"/><path d="M216 190q25-27 46-2-12 26-41 15z"/></g>
<path d="M295 75c-9-21 11-25 4-43 25 14 32 30 18 45z" fill="white" stroke="#653516" stroke-width="3"/>
</svg>
</div>
<div class="food-body">
<div class="food-title"><h3>Gangnam Melt</h3><span class="price">$9.75</span></div>
<p>Gochujang-glazed beef, American cheese, charred scallions, and smoky kimchi mayo.</p>
<div class="food-foot"><span class="heat">🔥🔥🔥 · Big heat</span><button class="add-btn" onclick="addToCart()" aria-label="Add Gangnam Melt to order">+</button></div>
</div>
</article>
<article class="food-card">
<div class="food-art three">
<span class="food-tag">New</span>
<svg viewBox="0 0 400 300" aria-label="Budae Bomb taco">
<defs><linearGradient id="s3" x2="1" y2="1"><stop stop-color="#ffe181"/><stop offset="1" stop-color="#e88a28"/></linearGradient></defs>
<ellipse cx="204" cy="264" rx="124" ry="16" fill="#7b421c" opacity=".18"/>
<path d="M76 230C82 129 138 56 202 56s120 73 126 174c-34 34-76 47-126 47s-92-13-126-47z" fill="url(#s3)" stroke="#653516" stroke-width="6"/>
<path d="M92 218c30-26 68-39 110-39s80 13 110 39" fill="none" stroke="#73331f" stroke-width="40" stroke-linecap="round"/>
<path d="M93 203c33-23 68-34 109-34s76 11 109 34" fill="none" stroke="#f4c832" stroke-width="23" stroke-linecap="round"/>
<path d="M99 220c32-20 66-29 105-29s72 9 104 29" fill="none" stroke="#dc3b2d" stroke-width="9" stroke-linecap="round"/>
<path d="M91 226c37 39 73 48 111 48s74-9 111-48c-9 37-54 61-111 61s-102-24-111-61z" fill="#ffd15b" stroke="#653516" stroke-width="6"/>
<g fill="#d74732"><circle cx="143" cy="190" r="11"/><circle cx="184" cy="179" r="10"/><circle cx="224" cy="184" r="12"/><circle cx="263" cy="193" r="9"/></g>
<g fill="#b7d947"><path d="M106 200q23-32 49-6-13 28-44 20z"/><path d="M230 192q27-30 52-4-14 29-47 18z"/></g>
<g fill="#fff1bc"><rect x="131" y="209" width="25" height="8" rx="3" transform="rotate(-25 131 209)"/><rect x="240" y="205" width="25" height="8" rx="3" transform="rotate(24 240 205)"/></g>
<path d="M295 75c-9-21 11-25 4-43 25 14 32 30 18 45z" fill="white" stroke="#653516" stroke-width="3"/>
</svg>
</div>
<div class="food-body">
<div class="food-title"><h3>Budae Bomb</h3><span class="price">$10.25</span></div>
<p>Crispy chicken, kimchi, pickled jalapeño, cotija, and sweet chili glaze. Explode with joy.</p>
<div class="food-foot"><span class="heat">🔥🔥🔥🔥 · Bring water</span><button class="add-btn" onclick="addToCart()" aria-label="Add Budae Bomb to order">+</button></div>
</div>
</article>
</div>
</div>
</section>
<section class="story" id="story">
<div class="wrap story-grid">
<div class="story-art">
<svg viewBox="0 0 500 470" role="img" aria-label="A smiling food truck named Kimchi Loco">
<defs><linearGradient id="body" x2="0" y2="1"><stop stop-color="#f05a39"/><stop offset="1" stop-color="#d73624"/></linearGradient></defs>
<ellipse cx="255" cy="405" rx="200" ry="20" fill="#6f1f15" opacity=".25"/>
<rect x="68" y="138" width="375" height="228" rx="35" fill="url(#body)" stroke="#6d271b" stroke-width="7"/>
<path d="M91 140h330c14 0 22 10 22 24v42H68v-42c0-14 9-24 23-24z" fill="#ffdf75" stroke="#6d271b" stroke-width="7"/>
<rect x="93" y="165" width="320" height="23" rx="11" fill="#1b1714"/>
<text x="253" y="183" text-anchor="middle" font-family="Arial Black,Arial" font-size="19" fill="#f4ce39" letter-spacing="2">KIMCHI LOCO</text>
<rect x="116" y="218" width="134" height="94" rx="12" fill="#fff1cc" stroke="#6d271b" stroke-width="5"/>
<rect x="132" y="234" width="102" height="16" rx="8" fill="#f1c73b"/>
<text x="183" y="283" text-anchor="middle" font-family="Arial Black,Arial" font-size="20" fill="#d63b29">TACOS</text>
<circle cx="268" cy="263" r="43" fill="#ffe58c" stroke="#6d271b" stroke-width="5"/>
<path d="M246 264q22-43 44 0l-8 23h-28z" fill="#f08b2f" stroke="#6d271b" stroke-width="3"/>
<path d="M251 259q19-27 34 0" fill="#e74730"/><path d="M254 250l6-11 6 12 8-11 5 13" fill="#b9d948"/>
<circle cx="350" cy="241" r="19" fill="#dff05b" stroke="#6d271b" stroke-width="4"/>
<circle cx="380" cy="294" r="14" fill="#ffcf43" stroke="#6d271b" stroke-width="4"/>
<path d="M394 208c16 0 16 22 0 22" fill="none" stroke="#6d271b" stroke-width="7"/>
<circle cx="135" cy="356" r="35" fill="#25201c" stroke="#6d271b" stroke-width="7"/><circle cx="135" cy="356" r="14" fill="#f3c64b"/>
<circle cx="382" cy="356" r="35" fill="#25201c" stroke="#6d271b" stroke-width="7"/><circle cx="382" cy="356" r="14" fill="#f3c64b"/>
<path d="M438 175h26v78l-29-27z" fill="#ffd95e" stroke="#6d271b" stroke-width="6"/>
</svg>
<div class="big-korean">최고의 타코</div>
</div>
<div class="story-copy">
<div class="eyebrow">Our origin story</div>
<h2>Two cultures.<br>One <em>loco</em> idea.</h2>
<p>Kimchi Loco started with a homesick food truck owner, a missing taco truck, and a question: what if Seoul’s boldest flavors drove straight into a warm, crunchy tortilla?</p>
<p>So we got weird with it. We fire-roasted Korean BBQ. We folded house-made kimchi into slaw. We drizzled gochujang mayo over everything. The result was messy, spicy, and completely addictive.</p>
<div class="perks">
<div class="perk"><span>🌱</span><b>Better ingredients</b><small>Local produce, quality proteins, no mystery mush.</small></div>
<div class="perk"><span>👩🍳</span><b>Made by hand</b><small>Every shell pressed, sauce mixed, taco built by us.</small></div>
</div>
<a href="#locations" class="btn dark">Meet us at the truck <span class="arrow">→</span></a>
</div>
</div>
</section>
<section class="locate" id="locations">
<div class="wrap locate-grid">
<div>
<div class="eyebrow">Catch us in the wild</div>
<h2>Follow the<br>flavor.</h2>
<p>We roam the city, parking where the good smells are. Follow our Instagram for secret pop-ups, live music, and free sauce Friday.</p>
<div class="schedule">
<div class="day today"><b>THU</b><span>Downtown</span></div>
<div class="day"><b>FRI</b><span>Midtown</span></div>
<div class="day"><b>SAT</b><span>Arts District</span></div>
<div class="day"><b>SUN</b><span>Farmers Mkt</span></div>
</div>
<a href="https://maps.google.com" target="_blank" rel="noopener" class="btn dark">Open in Maps <span class="arrow">↗</span></a>
</div>
<div class="truck-card">
<div class="pin">📍</div>
<h3>Today’s location</h3>
<p>Plaza de Tacos, 123 Kimchi Lane</p>
<div class="truck-art">
<svg viewBox="0 0 500 170" aria-hidden="true">
<rect x="38" y="40" width="390" height="105" rx="20" fill="#ef4d32" stroke="#15110e" stroke-width="6"/>
<path d="M60 40h345v35H60z" fill="#ffda66"/>
<text x="230" y="65" text-anchor="middle" font-family="Arial Black,Arial" font-size="22" fill="#15110e">KIMCHI LOCO</text>
<rect x="64" y="92" width="90" height="35" rx="7" fill="#fff1cc"/>
<text x="109" y="115" text-anchor="middle" font-family="Arial Black,Arial" font-size="14" fill="#e83c2d">TACOS</text>
<circle cx="188" cy="92" r="23" fill="#ffe38c"/>
<path d="M175 94q13-26 26 0l-5 14h-16z" fill="#eb8a2c"/>
<path d="M178 90q10-17 20 0" fill="#e43d2e"/>
<circle cx="108" cy="144" r="21" fill="#171310"/><circle cx="108" cy="144" r="8" fill="#ffcf43"/>
<circle cx="350" cy="144" r="21" fill="#171310"/><circle cx="350" cy="144" r="8" fill="#ffcf43"/>
<path d="M428 55h37v60l-37-18z" fill="#ffdc69" stroke="#15110e" stroke-width="5"/>
</svg>
</div>
<div class="location-line"><i></i> Open today · 11:30 AM–9:00 PM</div>
<div class="location-line"><i></i> Free sauce with every 6-taco order</div>
</div>
</div>
</section>
<section class="order-section" id="order">
<div class="wrap order-grid">
<div class="order-copy">
<div class="eyebrow" style="color:white">Build your feast</div>
<h2>Rush hour.<br><span>Not a dull</span><br>meal.</h2>
<p>Order ahead, skip the line, and get your tacos hot and crispy. Pick up at the truck or call us for delivery within 5 miles.</p>
<div class="order-perks"><span>✓ No app download</span><span>✓ Pay at pickup</span><span>✓ Fresh off the grill</span></div>
<a href="tel:+15550148865" class="btn light">📞 Call (555) 014-KIMO</a>
</div>
<div class="order-card">
<h3>Build your order</h3>
<div class="order-row">
<div><b>Seoul Crunch</b><small>Slow-roasted pork · kimchi slaw</small></div>
<div class="qty"><button onclick="changeQty('seoul',-1)" aria-label="Remove Seoul Crunch">−</button><span id="seoul">0</span><button onclick="changeQty('seoul',1)" aria-label="Add Seoul Crunch">+</button></div>
</div>
<div class="order-row">
<div><b>Gangnam Melt</b><small>Gochujang beef · American cheese</small></div>
<div class="qty"><button onclick="changeQty('gangnam',-1)" aria-label="Remove Gangnam Melt">−</button><span id="gangnam">0</span><button onclick="changeQty('gangnam',1)" aria-label="Add Gangnam Melt">+</button></div>
</div>
<div class="order-row">
<div><b>Budae Bomb</b><small>Crispy chicken · pickled jalapeño</small></div>
<div class="qty"><button onclick="changeQty('budae',-1)" aria-label="Remove Budae Bomb">−</button><span id="budae">0</span><button onclick="changeQty('budae',1)" aria-label="Add Budae Bomb">+</button></div>
</div>
<div class="order-row">
<div><b>Kimchi Fries</b><small>Crispy fries · kimchi cheese dust</small></div>
<div class="qty"><button onclick="changeQty('fries',-1)" aria-label="Remove Kimchi Fries">−</button><span id="fries">0</span><button onclick="changeQty('fries',1)" aria-label="Add Kimchi Fries">+</button></div>
</div>
<div class="order-total"><span>Total</span><span id="total">$0.00</span></div>
<button class="btn primary" onclick="placeOrder()">Reserve my tacos <span class="arrow">→</span></button>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="footer-grid">
<div class="footer-about">
<a href="#" class="logo"><div class="logo-mark">K</div><div><b>Kimchi Loco</b><small>KOREAN TACOS</small></div></a>
<p>Crunchy tacos, fiery kimchi, and good vibes on wheels. Sliding into your lunch break since 2021.</p>
<div class="socials"><a href="#" aria-label="Instagram">ig</a><a href="#" aria-label="TikTok">tk</a><a href="#" aria-label="Facebook">f</a></div>
</div>
<div><h4>Explore</h4><ul><li><a href="#menu">Our tacos</a></li><li><a href="#story">Our story</a></li><li><a href="#locations">Locations</a></li><li><a href="#order">Order online</a></li></ul></div>
<div><h4>More bites</h4><ul><li><a href="#">Catering</a></li><li><a href="#">Gift cards</a></li><li><a href="#">Careers</a></li><li><a href="#">Franchise</a></li></ul></div>
<div class="newsletter"><h4>Sauce, not spam</h4><p>Secret pop-ups, new tacos, and questionable deals. Straight to your inbox.</p><form onsubmit="subscribe(event)"><input type="email" required placeholder="you@email.com" aria-label="Email address"><button type="submit">→</button></form></div>
</div>
<div class="footer-bottom"><span>© 2025 Kimchi Loco. Made with fire and fermented veggies.</span><span>Seoul → Your City 🌮</span></div>
</div>
</footer>
<a class="mobile-cta" href="#order">🌮 Order tacos now <span>→</span></a>
<script>
const prices = {seoul:8.50, gangnam:9.75, budae:10.25, fries:5.50};
const qty = {seoul:0, gangnam:0, budae:0, fries:0};
function changeQty(id, delta){
qty[id] = Math.max(0, qty[id] + delta);
document.getElementById(id).textContent = qty[id];
updateTotal();
}
function addToCart(){
const first = Object.keys(qty).find(k => qty[k] === 0) || 'seoul';
changeQty(first, 1);
document.getElementById('order').scrollIntoView({behavior:'smooth'});
}
function updateTotal(){
const count = Object.values(qty).reduce((a,b)=>a+b,0);
const total = Object.keys(qty).reduce((a,k)=>a+qty[k]*prices[k],0);
document.getElementById('total').textContent = '$'+total.toFixed(2);
document.getElementById('cartCount').textContent = count;
}
function placeOrder(){
const count = Object.values(qty).reduce((a,b)=>a+b,0);
if(count === 0){
changeQty('seoul',1);
return;
}
const btn = document.querySelector('.order-card .btn');
btn.innerHTML = 'Order reserved! 🌮 <span class="arrow">✓</span>';
btn.style.background = '#171310';
setTimeout(()=>{
btn.innerHTML = 'Reserve my tacos <span class="arrow">→</span>';
btn.style.background = '';
},3500);
}
function subscribe(e){
e.preventDefault();
const input = e.target.querySelector('input');
input.value = '';
input.placeholder = 'You’re on the list! ✓';
}
function scrollToId(id){
document.getElementById(id).scrollIntoView({behavior:'smooth'});
}
document.querySelectorAll('.nav-links a').forEach(a=>{
a.addEventListener('click',()=>document.getElementById('navLinks').classList.remove('open'));
});
</script>
</body>
</html>Reasoning trace (507 tokens)
We need build single HTML site. Must output one code block. Need create appealing food truck website Korean tacos. No external images? Allowed no external files images fonts network except CDN explicitly allowed—task doesn't specify CDN. So use inline SVG/CSS, gradients, emoji maybe. Need make it look premium and appetizing. Let's design full page hero with nav, big headline, CTA, food visual built with CSS/SVG, marquee ticker, menu cards, story, truck band, catering, footer, sticky mobile CTA. Animations subtle. Ensure responsive 1280x800 first paint visible: nav, hero with headline and taco illustration, buttons, rating. Let's craft carefully. Use Google Fonts? Network not allowed except CDN explicitly allowed by task; avoid. Use system fonts with Korean fallback. Create inline SVG illustrations of tacos—layered shells, meat, kimchi. Could use CSS-drawn card art with SVG per card maybe three different SVGs. Use emoji for small accents sparingly. Colors: deep charcoal #15110e, cream #fff8e8, hot red #e33723, lime #d6f05b, warm yellow. Hero split layout on cream, maybe bold black typography. Navbar dark. Top ticker red. Hero: left headline "TASTY KIMCHI. TACO CRAZY." with Korean "김치 타코". Right big blob with taco SVG and floating badges "No weird. Just delicious.", "Spicy • Crunchy • Cheesy". Add steam animation. Menu section: cards Tacos: Seoul Crunch, Gangnam Melt, Budae Bomb? Use prices. Each card with colorful SVG taco illustration. Need meaningful visible first paint at 3s: hero, marquee, maybe menu heading. Include JS for mobile nav toggle, scroll reveal maybe IntersectionObserver, order button opens a modal? Could add order panel modal (not required). Better interactive: sticky nav, "Order now" button scrolls to ordering section; order form inline with size options and add to order tally. Fun but don't overdo. Include cart counter updating on click. Let's write. Careful no horizontal scroll. Use overflow-x hidden. SVG taco: viewBox 0 0 400 300. shell shape arcs. Use gradients unique ids. Create a function? Just inline multiple SVGs. Hero SVG large taco with shell semicircle, lettuce, meat, kimchi. Maybe make background grain with CSS radial patterns. Let's produce ~700 lines? Keep reasonable.