Food truck websiteOne-line
DeepSeek V4 Pro 0813
by DeepSeekreasoning defaultClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 2 min 54 s
- Cost
- $0.042
- Output tokens
- 10,463
- Spent thinking
- 446 tokens
- Speed
- 60.2 tok/s
- Console errors
- 0
- First token after
- 546 ms
- First visible text after
- 8.1 s
- Prompt tokens
- 442
- Code size
- 38.2 KB
- Finish reason
- stop
- Served by
- Cloudflare
- Model id
deepseek/deepseek-v4-pro-0813- Reasoning sent
model default- Max output
- 943,718 tokens
- Generated
- Nov 12, 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 · 1146 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 Taco Truck</title>
<style>
:root {
--red: #d32f2f;
--dark-red: #b71c1c;
--orange: #ff6d00;
--lime: #8bc34a;
--green: #43a047;
--purple: #7b1fa2;
--cream: #fff8f0;
--dark: #1a1a2e;
--gold: #ffc107;
--kimchi-red: #e53935;
--gochujang: #ff5722;
--white: #ffffff;
--shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
--shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
background: var(--cream);
color: var(--dark);
overflow-x: hidden;
line-height: 1.6;
}
/* ============ NAV ============ */
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(26, 26, 46, 0.92);
backdrop-filter: blur(12px);
padding: 0.6rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 3px solid var(--orange);
transition: all 0.3s ease;
}
.nav-logo {
font-size: 1.5rem;
font-weight: 900;
color: var(--white);
letter-spacing: -0.5px;
text-transform: uppercase;
}
.nav-logo span {
color: var(--orange);
}
.nav-logo .loco {
color: var(--lime);
}
.nav-links {
display: flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
.nav-links a {
color: #ddd;
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: color 0.2s;
white-space: nowrap;
}
.nav-links a:hover {
color: var(--orange);
}
.nav-cta {
background: var(--orange);
color: white;
padding: 0.5rem 1.2rem;
border-radius: 30px;
text-decoration: none;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 14px rgba(255, 109, 0, 0.4);
}
.nav-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 109, 0, 0.6);
}
/* ============ HERO ============ */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 6rem 2rem 4rem;
background: linear-gradient(160deg, #1a1a2e 0%, #2d1b3d 40%, #4a1a1a 100%);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 80%, rgba(255, 109, 0, 0.25) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 195, 74, 0.2) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(229, 57, 53, 0.15) 0%, transparent 60%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
}
.hero-badge {
display: inline-block;
background: rgba(255, 193, 7, 0.15);
border: 2px solid var(--gold);
color: var(--gold);
padding: 0.4rem 1.4rem;
border-radius: 40px;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 1.5rem;
animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
0%,
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 12px rgba(255, 193, 7, 0);
}
}
.hero h1 {
font-size: clamp(3.5rem, 10vw, 7rem);
font-weight: 900;
letter-spacing: -3px;
line-height: 1;
color: var(--white);
text-transform: uppercase;
margin-bottom: 0.5rem;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}
.hero h1 .kimchi {
color: var(--kimchi-red);
display: inline-block;
animation: spicy-shake 3s infinite;
}
.hero h1 .loco {
color: var(--lime);
display: inline-block;
animation: loco-spin 4s infinite;
}
@keyframes spicy-shake {
0%,
90%,
100% {
transform: rotate(0deg) scale(1);
}
92% {
transform: rotate(-3deg) scale(1.05);
}
94% {
transform: rotate(3deg) scale(1.05);
}
96% {
transform: rotate(-2deg) scale(1.03);
}
98% {
transform: rotate(2deg) scale(1.03);
}
}
@keyframes loco-spin {
0%,
70%,
100% {
transform: rotate(0deg);
}
75% {
transform: rotate(5deg) scale(1.08);
}
80% {
transform: rotate(-5deg) scale(1.08);
}
85% {
transform: rotate(3deg) scale(1.05);
}
90% {
transform: rotate(-3deg) scale(1.05);
}
}
.hero-tagline {
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
color: #e0d8e8;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-tagline strong {
color: var(--orange);
font-weight: 700;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 1rem 2.2rem;
border-radius: 50px;
font-weight: 800;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.6rem;
transition: all 0.3s;
cursor: pointer;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--orange), #ff8f00);
color: white;
box-shadow: 0 8px 30px rgba(255, 109, 0, 0.5);
}
.btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 14px 40px rgba(255, 109, 0, 0.7);
}
.btn-secondary {
background: transparent;
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.4);
}
.btn-secondary:hover {
border-color: var(--lime);
color: var(--lime);
transform: translateY(-4px);
}
/* Floating food items in hero */
.floating-item {
position: absolute;
font-size: 3rem;
pointer-events: none;
user-select: none;
animation: float-around 8s infinite ease-in-out;
z-index: 3;
opacity: 0.7;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.floating-item:nth-child(1) {
top: 15%;
left: 8%;
animation-delay: 0s;
animation-duration: 9s;
font-size: 3.5rem;
}
.floating-item:nth-child(2) {
top: 60%;
left: 5%;
animation-delay: 1.5s;
animation-duration: 7s;
font-size: 2.8rem;
}
.floating-item:nth-child(3) {
top: 20%;
right: 8%;
animation-delay: 0.8s;
animation-duration: 8s;
font-size: 3.2rem;
}
.floating-item:nth-child(4) {
top: 55%;
right: 6%;
animation-delay: 2.2s;
animation-duration: 10s;
font-size: 2.5rem;
}
.floating-item:nth-child(5) {
top: 35%;
right: 20%;
animation-delay: 3s;
animation-duration: 11s;
font-size: 2.2rem;
}
@keyframes float-around {
0%,
100% {
transform: translateY(0) rotate(0deg) scale(1);
}
25% {
transform: translateY(-25px) rotate(8deg) scale(1.08);
}
50% {
transform: translateY(-10px) rotate(-5deg) scale(0.95);
}
75% {
transform: translateY(-30px) rotate(6deg) scale(1.05);
}
}
/* ============ MARQUEE ============ */
.marquee {
background: var(--orange);
color: var(--dark);
padding: 0.7rem 0;
overflow: hidden;
white-space: nowrap;
border-top: 3px solid var(--dark);
border-bottom: 3px solid var(--dark);
position: relative;
z-index: 5;
}
.marquee-track {
display: inline-block;
animation: marquee-scroll 22s linear infinite;
font-weight: 800;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.marquee-track span {
margin: 0 1.5rem;
}
.marquee-track .star {
color: var(--white);
font-size: 1.2rem;
}
@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ============ MENU SECTION ============ */
.menu-section {
padding: 6rem 2rem;
position: relative;
}
.menu-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--red), var(--orange), var(--lime), var(--gold), var(--red));
background-size: 300% 100%;
animation: rainbow-move 4s linear infinite;
}
@keyframes rainbow-move {
0% {
background-position: 0% 0;
}
100% {
background-position: 300% 0;
}
}
.section-title {
text-align: center;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
letter-spacing: -1.5px;
text-transform: uppercase;
margin-bottom: 0.5rem;
color: var(--dark);
}
.section-title .highlight {
color: var(--red);
}
.section-sub {
text-align: center;
font-size: 1.1rem;
color: #666;
max-width: 550px;
margin: 0 auto 3rem;
font-weight: 500;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.8rem;
max-width: 1100px;
margin: 0 auto;
}
.menu-card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.35s ease;
cursor: pointer;
position: relative;
border: 2px solid transparent;
}
.menu-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow);
border-color: var(--orange);
}
.menu-card-img {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 4.5rem;
position: relative;
overflow: hidden;
}
.menu-card:nth-child(1) .menu-card-img {
background: linear-gradient(135deg, #ff6d00, #ff9100);
}
.menu-card:nth-child(2) .menu-card-img {
background: linear-gradient(135deg, #e53935, #b71c1c);
}
.menu-card:nth-child(3) .menu-card-img {
background: linear-gradient(135deg, #8bc34a, #43a047);
}
.menu-card:nth-child(4) .menu-card-img {
background: linear-gradient(135deg, #7b1fa2, #4a148c);
}
.menu-card:nth-child(5) .menu-card-img {
background: linear-gradient(135deg, #ffc107, #ff9100);
}
.menu-card:nth-child(6) .menu-card-img {
background: linear-gradient(135deg, #d81b60, #880e4f);
}
.menu-card-img .emoji-big {
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
animation: emoji-bounce 2.5s infinite;
transition: transform 0.3s;
}
.menu-card:hover .menu-card-img .emoji-big {
animation: emoji-bounce-hover 0.6s ease;
transform: scale(1.3);
}
@keyframes emoji-bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes emoji-bounce-hover {
0% {
transform: translateY(0) scale(1);
}
40% {
transform: translateY(-20px) scale(1.3);
}
70% {
transform: translateY(5px) scale(1.2);
}
100% {
transform: translateY(0) scale(1.3);
}
}
.menu-card-body {
padding: 1.4rem 1.6rem 1.8rem;
}
.menu-card-body h3 {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.3px;
margin-bottom: 0.4rem;
color: var(--dark);
}
.menu-card-body .price {
display: inline-block;
background: var(--gold);
color: var(--dark);
padding: 0.25rem 0.9rem;
border-radius: 20px;
font-weight: 800;
font-size: 0.9rem;
margin-bottom: 0.7rem;
letter-spacing: 0.5px;
}
.menu-card-body p {
color: #555;
font-size: 0.9rem;
line-height: 1.5;
}
.spicy-badge {
display: inline-block;
background: #fff0e6;
color: var(--red);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
padding: 0.15rem 0.6rem;
border-radius: 12px;
letter-spacing: 0.5px;
margin-left: 0.4rem;
}
/* ============ STORY SECTION ============ */
.story-section {
background: var(--dark);
color: var(--white);
padding: 5rem 2rem;
position: relative;
overflow: hidden;
}
.story-section::after {
content: '🇰🇷';
position: absolute;
right: -30px;
bottom: -30px;
font-size: 12rem;
opacity: 0.08;
pointer-events: none;
}
.story-section::before {
content: '🌮';
position: absolute;
left: -20px;
top: -30px;
font-size: 10rem;
opacity: 0.08;
pointer-events: none;
}
.story-content {
max-width: 700px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
}
.story-content h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
letter-spacing: -1px;
margin-bottom: 1.5rem;
text-transform: uppercase;
}
.story-content h2 .red {
color: var(--kimchi-red);
}
.story-content p {
color: #bbb;
font-size: 1.05rem;
margin-bottom: 1.5rem;
line-height: 1.7;
}
.story-content p strong {
color: var(--orange);
}
/* ============ LOCATION / HOURS ============ */
.location-section {
padding: 5rem 2rem;
background: #fff;
}
.location-grid {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: start;
}
.location-card {
background: var(--cream);
border-radius: 20px;
padding: 2rem;
box-shadow: var(--shadow-sm);
border: 1px solid #eee;
}
.location-card h3 {
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: -0.3px;
display: flex;
align-items: center;
gap: 0.5rem;
}
.hours-list {
list-style: none;
}
.hours-list li {
display: flex;
justify-content: space-between;
padding: 0.55rem 0;
border-bottom: 1px dashed #ddd;
font-weight: 500;
color: #444;
font-size: 0.95rem;
}
.hours-list li:last-child {
border-bottom: none;
}
.hours-list .day {
font-weight: 700;
color: var(--dark);
}
.hours-list .closed {
color: var(--red);
font-weight: 700;
}
.location-address {
font-size: 1rem;
color: #555;
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
gap: 0.5rem;
flex-wrap: wrap;
}
.location-address strong {
color: var(--dark);
}
.map-placeholder {
background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
border-radius: 12px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
margin-bottom: 1rem;
border: 2px dashed #ccc;
position: relative;
overflow: hidden;
}
.map-placeholder span {
position: relative;
z-index: 2;
}
.map-placeholder::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(30deg, transparent 40%, #ddd 40%, #ddd 42%, transparent 42%),
linear-gradient(150deg, transparent 40%, #ddd 40%, #ddd 42%, transparent 42%),
linear-gradient(90deg, transparent 60%, #ddd 60%, #ddd 62%, transparent 62%);
opacity: 0.5;
}
/* ============ TESTIMONIALS ============ */
.testimonials-section {
padding: 5rem 2rem;
background: #faf5f0;
}
.testimonials-grid {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.testimonial-card {
background: white;
padding: 1.8rem;
border-radius: 16px;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--orange);
transition: transform 0.3s;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
}
.testimonial-card .stars {
color: var(--gold);
font-size: 1.2rem;
margin-bottom: 0.6rem;
letter-spacing: 2px;
}
.testimonial-card p {
color: #444;
font-style: italic;
font-size: 0.95rem;
margin-bottom: 0.8rem;
line-height: 1.6;
}
.testimonial-card .author {
font-weight: 700;
color: var(--dark);
font-size: 0.85rem;
letter-spacing: 0.3px;
}
/* ============ CTA SECTION ============ */
.cta-section {
background: linear-gradient(135deg, var(--red), var(--orange));
padding: 4rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '🔥';
position: absolute;
left: 5%;
top: 50%;
transform: translateY(-50%);
font-size: 5rem;
opacity: 0.2;
animation: fire-flicker 1.5s infinite;
}
.cta-section::after {
content: '🌮';
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
font-size: 5rem;
opacity: 0.2;
animation: fire-flicker 2s infinite;
}
@keyframes fire-flicker {
0%,
100% {
transform: translateY(-50%) scale(1);
}
50% {
transform: translateY(-55%) scale(1.1);
}
}
.cta-section h2 {
color: white;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -1px;
margin-bottom: 1rem;
}
.cta-section p {
color: #ffe0cc;
font-size: 1.1rem;
margin-bottom: 2rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
font-weight: 500;
}
.cta-section .btn {
background: var(--white);
color: var(--red);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.cta-section .btn:hover {
transform: translateY(-4px);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
/* ============ FOOTER ============ */
.footer {
background: var(--dark);
color: #aaa;
text-align: center;
padding: 2rem;
font-size: 0.85rem;
border-top: 3px solid var(--orange);
}
.footer .footer-logo {
font-size: 1.5rem;
font-weight: 900;
color: white;
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: -0.5px;
}
.footer .footer-logo span {
color: var(--orange);
}
.footer .social-links {
display: flex;
justify-content: center;
gap: 1rem;
margin: 1rem 0 0.5rem;
font-size: 1.4rem;
}
.footer .social-links a {
color: #888;
text-decoration: none;
transition: color 0.2s;
}
.footer .social-links a:hover {
color: var(--orange);
}
.footer small {
display: block;
margin-top: 0.6rem;
color: #666;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
.nav {
padding: 0.5rem 1rem;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.nav-links {
gap: 0.8rem;
font-size: 0.75rem;
}
.nav-links a {
font-size: 0.75rem;
}
.nav-cta {
font-size: 0.7rem;
padding: 0.4rem 0.9rem;
}
.hero {
padding: 5rem 1.2rem 3rem;
min-height: 90vh;
}
.hero h1 {
font-size: clamp(2.8rem, 12vw, 4rem);
letter-spacing: -2px;
}
.hero-tagline {
font-size: 1rem;
}
.location-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.floating-item {
font-size: 2rem !important;
opacity: 0.5;
}
.menu-grid {
grid-template-columns: 1fr;
gap: 1.2rem;
}
.menu-card-img {
height: 160px;
font-size: 3.5rem;
}
.section-title {
font-size: 2rem;
}
.cta-section::before,
.cta-section::after {
display: none;
}
.btn {
padding: 0.8rem 1.5rem;
font-size: 0.85rem;
}
}
@media (max-width: 400px) {
.nav {
flex-direction: column;
align-items: center;
padding: 0.4rem 0.5rem;
}
.nav-links {
justify-content: center;
gap: 0.5rem;
}
.hero h1 {
font-size: 2.5rem;
}
.floating-item {
display: none;
}
}
</style>
</head>
<body>
<!-- ============ NAV ============ -->
<nav class="nav">
<div class="nav-logo">Kimchi <span>Loco</span></div>
<div class="nav-links">
<a href="#menu">Menu</a>
<a href="#story">Story</a>
<a href="#location">Location</a>
<a href="#reviews">Reviews</a>
<a href="#menu" class="nav-cta">Order Now 🌮</a>
</div>
</nav>
<!-- ============ HERO ============ -->
<section class="hero" id="hero">
<div class="floating-item">🌮</div>
<div class="floating-item">🥬</div>
<div class="floating-item">🌶️</div>
<div class="floating-item">🧄</div>
<div class="floating-item">🍚</div>
<div class="hero-content">
<div class="hero-badge">🔥 Seoul Meets Mexico City 🔥</div>
<h1>
<span class="kimchi">KIMCHI</span>
<br>
<span class="loco">LOCO</span>
</h1>
<p class="hero-tagline">Korean-Mexican fusion tacos that <strong>slap harder than a K-pop beat</strong>. Hand-made tortillas, gochujang-glazed meats, and kimchi that'll make your taste buds <strong>dance salsa</strong>.</p>
<div class="hero-buttons">
<a href="#menu" class="btn btn-primary">🌮 View the Menu</a>
<a href="#location" class="btn btn-secondary">📍 Find the Truck</a>
</div>
</div>
</section>
<!-- ============ MARQUEE ============ -->
<div class="marquee">
<div class="marquee-track" id="marqueeTrack">
<span>🌮 Korean Tacos</span><span class="star">★</span>
<span>🌶️ Gochujang Heat</span><span class="star">★</span>
<span>🥬 House-Made Kimchi</span><span class="star">★</span>
<span>🍚 Kimchi Fried Rice Burritos</span><span class="star">★</span>
<span>🔥 Bulgogi Beef</span><span class="star">★</span>
<span>🥤 Korean Limeade</span><span class="star">★</span>
<span>🌮 Korean Tacos</span><span class="star">★</span>
<span>🌶️ Gochujang Heat</span><span class="star">★</span>
<span>🥬 House-Made Kimchi</span><span class="star">★</span>
<span>🍚 Kimchi Fried Rice Burritos</span><span class="star">★</span>
<span>🔥 Bulgogi Beef</span><span class="star">★</span>
<span>🥤 Korean Limeade</span><span class="star">★</span>
</div>
</div>
<!-- ============ MENU ============ -->
<section class="menu-section" id="menu">
<h2 class="section-title">The <span class="highlight">Menu</span></h2>
<p class="section-sub">Every taco is a love letter from Seoul to Oaxaca. Pick your poison.</p>
<div class="menu-grid">
<div class="menu-card">
<div class="menu-card-img"><span class="emoji-big">🌮</span></div>
<div class="menu-card-body">
<h3>Bulgogi Beef Taco <span class="spicy-badge">🌶️ Mild</span></h3>
<span class="price">$4.50</span>
<p>Marinated ribeye, charred scallion salsa, sesame crema, pickled daikon, and a kiss of gochujang glaze on a hand-pressed tortilla.</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-img"><span class="emoji-big">🔥</span></div>
<div class="menu-card-body">
<h3>Spicy Pork Belly Taco <span class="spicy-badge">🌶️🌶️ HOT</span></h3>
<span class="price">$5.00</span>
<p>Gochujang-glazed pork belly, charred kimchi, pickled red onion, cilantro, and a Sriracha-lime crema that bites back.</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-img"><span class="emoji-big">🥬</span></div>
<div class="menu-card-body">
<h3>Kimchi Fried Rice Burrito <span class="spicy-badge">🌶️ Medium</span></h3>
<span class="price">$8.00</span>
<p>A monster burrito stuffed with kimchi fried rice, bulgogi beef, cheese, black beans, avocado, and crispy shallots.</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-img"><span class="emoji-big">🍗</span></div>
<div class="menu-card-body">
<h3>Korean Fried Chicken Taco <span class="spicy-badge">🌶️🌶️ HOT</span></h3>
<span class="price">$4.80</span>
<p>Double-fried crispy chicken, gochujang-honey glaze, pickled cucumbers, sesame seeds, and cool ranch-kimchi slaw.</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-img"><span class="emoji-big">🥤</span></div>
<div class="menu-card-body">
<h3>Korean Limeade <span class="spicy-badge">❄️ Cold</span></h3>
<span class="price">$3.50</span>
<p>Fresh-squeezed limes, yuzu, mint, and a splash of sparkling water. The perfect fire extinguisher.</p>
</div>
</div>
<div class="menu-card">
<div class="menu-card-img"><span class="emoji-big">🍠</span></div>
<div class="menu-card-body">
<h3>Korean Sweet Potato Fries <span class="spicy-badge">🍯 Sweet</span></h3>
<span class="price">$4.00</span>
<p>Crispy Korean sweet potato fries dusted with gochugaru sugar and served with a miso-caramel dipping sauce.</p>
</div>
</div>
</div>
</section>
<!-- ============ STORY ============ -->
<section class="story-section" id="story">
<div class="story-content">
<h2>From <span class="red">Seoul</span> to the <span class="red">Streets</span></h2>
<p>Born in 2019 out of a tiny taco cart and a <strong>huge obsession</strong> with Korean-Mexican flavor. Our founder, Min-Jae, grew up eating his grandmother's kimchi in Busan — and spent summers in LA falling in love with street tacos.</p>
<p>One fateful night, he put his grandma's kimchi on a tortilla. The rest is <strong>loco history</strong>. Now we sling the best Korean tacos in town — made with <strong>love, fire, and a little bit of chaos</strong>.</p>
<p><strong>#KimchiLoco</strong> — join the obsession.</p>
</div>
</section>
<!-- ============ LOCATION ============ -->
<section class="location-section" id="location">
<h2 class="section-title">Find the <span class="highlight">Truck</span></h2>
<p class="section-sub">We roll through the city daily. Catch us before we're gone.</p>
<div class="location-grid">
<div class="location-card">
<h3>📍 Current Location</h3>
<div class="map-placeholder"><span>🚚</span></div>
<div class="location-address">
<strong>Today:</strong> 5th & Main Street, Downtown Food Truck Park
</div>
<p style="color:#888; font-size:0.85rem;">* Track us live on social media — we move fast! 🏃♂️</p>
</div>
<div class="location-card">
<h3>🕐 Hours</h3>
<ul class="hours-list">
<li><span class="day">Monday — Wednesday</span><span>11:00am — 8:00pm</span></li>
<li><span class="day">Thursday — Friday</span><span>11:00am — 10:00pm</span></li>
<li><span class="day">Saturday</span><span>12:00pm — 10:00pm</span></li>
<li><span class="day">Sunday</span><span class="closed">Closed — Kimchi Rest Day 😴</span></li>
</ul>
</div>
</div>
</section>
<!-- ============ TESTIMONIALS ============ -->
<section class="testimonials-section" id="reviews">
<h2 class="section-title">People Are <span class="highlight">Loco</span> For It</h2>
<p class="section-sub">Real reviews from real taco lovers. No filter, just fire.</p>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p>"I literally drove 45 minutes out of my way for this bulgogi taco. Worth every mile. The kimchi is INSANE."</p>
<div class="author">— Sarah K., foodie & taco addict</div>
</div>
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p>"The spicy pork belly taco made me see stars. My mouth was on fire but I couldn't stop eating. 10/10 would suffer again."</p>
<div class="author">— Marcus T., heat seeker</div>
</div>
<div class="testimonial-card">
<div class="stars">★★★★★</div>
<p>"Best fusion food I've ever had. It's like Korea and Mexico had a beautiful, delicious baby."</p>
<div class="author">— Aisha R., first-time customer</div>
</div>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="cta-section" id="order">
<h2>Hungry Yet? 🌮</h2>
<p>Come find the truck, follow your nose, and get ready for the tastiest culture clash of your life.</p>
<a href="#location" class="btn">🚚 Get Directions</a>
</section>
<!-- ============ FOOTER ============ -->
<footer class="footer">
<div class="footer-logo">Kimchi <span>Loco</span></div>
<p>Korean Tacos • Kimchi • Seoul-Mexico Fusion</p>
<div class="social-links">
<a href="#" title="Instagram">📸</a>
<a href="#" title="TikTok">🎵</a>
<a href="#" title="X">🐦</a>
<a href="#" title="Facebook">👍</a>
</div>
<small>© 2025 Kimchi Loco. All rights reserved. 🌶️ Made with love & gochujang.</small>
</footer>
<script>
// Duplicate marquee content for seamless loop (already duplicated in HTML)
// Smooth scroll is handled by CSS scroll-behavior
// Add a tiny bit of interactivity — menu card emoji wiggle on click
document.querySelectorAll('.menu-card').forEach(card => {
card.addEventListener('click', () => {
const emoji = card.querySelector('.emoji-big');
if (emoji) {
emoji.style.animation = 'none';
emoji.offsetHeight; // trigger reflow
emoji.style.animation = 'emoji-bounce-hover 0.7s ease';
}
card.style.transform = 'scale(0.97)';
setTimeout(() => {
card.style.transform = '';
}, 200);
});
});
// Animate CTA button pulse
const ctaBtn = document.querySelector('.cta-section .btn');
if (ctaBtn) {
setInterval(() => {
ctaBtn.style.transform = 'scale(1.05)';
setTimeout(() => {
ctaBtn.style.transform = '';
}, 200);
}, 2500);
}
// Update the marquee to ensure seamless animation by duplicating content once more if needed
const track = document.getElementById('marqueeTrack');
if (track) {
const originalContent = track.innerHTML;
// The HTML already has duplicated content, but let's make sure
// we have exactly 2 copies for seamless loop
const singleSet = track.innerHTML.split('<span>🌮 Korean Tacos</span>')[1] ?
'<span>🌮 Korean Tacos</span>' + track.innerHTML.split('<span>🌮 Korean Tacos</span>')[1] :
originalContent;
// Check if we have enough content for seamless loop
const itemCount = (track.innerHTML.match(/<span>/g) || []).length;
if (itemCount < 12) {
track.innerHTML = originalContent + originalContent;
}
}
console.log('🔥 Kimchi Loco — get your taco fix!');
</script>
</body>
</html>Reasoning trace (446 tokens)
The user wants a website for a Korean taco food truck called "Kimchi Loco". I need to make it visually appealing, energetic, and enticing. It should make people really want to come. Let me create a vibrant, engaging single-page website with: 1. A bold hero section with the name "Kimchi Loco" and tagline 2. Colorful, appetizing design - think Korean/Mexican fusion vibes 3. Menu showcase with Korean taco options 4. Location/hours info 5. Some animation/interaction 6. A food truck aesthetic with bright colors Design direction: - Bold typography - Korean-inspired colors (reds, greens) mixed with Mexican warmth (oranges, yellows) - Maybe some kimchi red, gochujang orange, lime green accents - Street food energy - Fun, playful but appetizing Let me create a really polished single-page site with: - Hero with animated elements - Marquee/ticker - Menu cards with taco descriptions - Hours/location section - CTA buttons - Food truck visual element (CSS art) - Social proof/testimonials - Fun animations I'll use CSS animations, maybe some floating elements, gradient backgrounds, and make it look like a real high-quality restaurant site. Let me design this carefully: - Color palette: Deep red (#D32F2F or similar), orange (#FF6D00), lime green (#7CB342), purple accents, off-white/cream background - Font styles: Use system fonts, make headings bold and impactful - Food truck character/illustration using CSS - Menu items with prices - Animated kimchi/pepper elements I'll build an immersive experience with: 1. Sticky nav 2. Hero section with big title, animated background elements 3. Scrolling marquee 4. Menu section with taco cards 5. Story section 6. Location & hours 7. Footer Let me write the complete HTML file now.