Food truck websiteOne-line
Dots3-Note Preview (free)
by Dots StudioReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 29 s
- Cost
- $0
- Output tokens
- 9,082
- Spent thinking
- 1,862 tokens
- Speed
- 103.1 tok/s
- Console errors
- 0
- First token after
- 678 ms
- First visible text after
- 22.7 s
- Prompt tokens
- 361
- Code size
- 27.3 KB
- Finish reason
- stop
- Served by
- AtlasCloud
- Model id
dots-studio/dots-3-note-preview:free- Reasoning sent
model default- Max output
- 32,000 tokens
- Generated
- Nov 9, 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 · 915 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 Food Truck</title>
<style>
:root {
--primary: #FF5A5A;
--primary-dark: #E04444;
--accent: #FFD200;
--dark: #333333;
--light: #FFFFFF;
--gray: #F5F5F5;
--text: #444444;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text);
background-color: var(--light);
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header */
header {
background-color: var(--light);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: background 0.3s ease;
}
header.scrolled {
background-color: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
.logo {
font-size: 1.8rem;
font-weight: 800;
color: var(--primary);
text-decoration: none;
display: flex;
align-items: center;
}
.logo span {
color: var(--dark);
}
.logo-icon {
margin-right: 8px;
font-size: 2rem;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 30px;
}
nav ul li a {
text-decoration: none;
color: var(--dark);
font-weight: 600;
transition: color 0.3s ease;
position: relative;
}
nav ul li a:hover {
color: var(--primary);
}
nav ul li a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--primary);
transition: width 0.3s ease;
}
nav ul li a:hover::after {
width: 100%;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background-color: var(--dark);
margin: 3px 0;
transition: 0.3s;
}
/* Hero */
.hero {
height: 100vh;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
color: var(--light);
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 20px;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
animation: fadeInDown 1s ease;
}
.hero p {
font-size: 1.5rem;
margin-bottom: 30px;
animation: fadeInUp 1s ease;
}
.btn {
display: inline-block;
background-color: var(--accent);
color: var(--dark);
padding: 15px 40px;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
border: none;
cursor: pointer;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
background-color: #FFC200;
}
.btn-primary {
background-color: var(--accent);
color: var(--dark);
}
.btn-primary:hover {
background-color: #FFC200;
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--light);
color: var(--light);
}
.btn-outline:hover {
background-color: var(--light);
color: var(--primary);
}
/* Sections */
section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--dark);
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-title h2::after {
content: '';
position: absolute;
width: 70px;
height: 4px;
background-color: var(--primary);
bottom: -10px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.section-title p {
color: var(--text);
max-width: 700px;
margin: 0 auto;
font-size: 1.1rem;
}
/* Menu */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.menu-card {
background-color: var(--light);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.menu-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.menu-img {
height: 200px;
background-color: var(--gray);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: var(--primary);
}
.menu-content {
padding: 20px;
}
.menu-content h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: var(--dark);
}
.menu-content p {
margin-bottom: 15px;
color: var(--text);
}
.price {
font-size: 1.3rem;
font-weight: 700;
color: var(--primary);
}
/* About */
.about-content {
display: flex;
align-items: center;
gap: 50px;
}
.about-text {
flex: 1;
}
.about-text h3 {
font-size: 2rem;
margin-bottom: 20px;
color: var(--dark);
}
.about-text p {
margin-bottom: 20px;
font-size: 1.1rem;
}
.about-img {
flex: 1;
height: 300px;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
color: var(--light);
}
/* Location */
.location-container {
display: flex;
gap: 50px;
flex-wrap: wrap;
}
.location-info {
flex: 1;
min-width: 300px;
}
.location-info h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--dark);
}
.info-item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.info-icon {
margin-right: 15px;
color: var(--primary);
font-size: 1.5rem;
}
.map {
flex: 1;
min-width: 300px;
height: 400px;
background-color: var(--gray);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--primary);
position: relative;
overflow: hidden;
}
.map-pin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translate(-50%, -50%) translateY(0); }
50% { transform: translate(-50%, -50%) translateY(-10px); }
}
/* Testimonials */
.testimonial-slider {
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.testimonial-slide {
text-align: center;
padding: 30px;
background-color: var(--gray);
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
display: none;
animation: fadeIn 0.5s ease;
}
.testimonial-slide.active {
display: block;
}
.testimonial-text {
font-size: 1.3rem;
font-style: italic;
margin-bottom: 20px;
color: var(--text);
}
.testimonial-author {
font-weight: 700;
color: var(--primary);
}
.slider-dots {
display: flex;
justify-content: center;
margin-top: 30px;
}
.dot {
width: 12px;
height: 12px;
background-color: var(--gray);
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.dot.active {
background-color: var(--primary);
}
/* CTA */
.cta {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--light);
text-align: center;
padding: 80px 0;
}
.cta h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.cta p {
font-size: 1.2rem;
margin-bottom: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Footer */
footer {
background-color: var(--dark);
color: var(--light);
padding: 50px 0 20px;
}
.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 40px;
margin-bottom: 40px;
}
.footer-column {
flex: 1;
min-width: 250px;
}
.footer-column h3 {
font-size: 1.3rem;
margin-bottom: 20px;
color: var(--accent);
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 10px;
}
.footer-column ul li a {
color: var(--light);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: var(--accent);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255,255,255,0.1);
border-radius: 50%;
transition: background-color 0.3s ease;
}
.social-links a:hover {
background-color: var(--primary);
}
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
font-size: 0.9rem;
color: rgba(255,255,255,0.7);
}
/* Animations */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Responsive */
@media (max-width: 992px) {
.hero h1 {
font-size: 3rem;
}
.hero p {
font-size: 1.3rem;
}
.about-content {
flex-direction: column;
}
}
@media (max-width: 768px) {
.hamburger {
display: flex;
}
nav ul {
position: fixed;
top: 70px;
left: -100%;
width: 100%;
height: calc(100vh - 70px);
background-color: var(--light);
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 50px;
transition: left 0.3s ease;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
nav ul.active {
left: 0;
}
nav ul li {
margin: 15px 0;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.section-title h2 {
font-size: 2rem;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.btn {
padding: 12px 30px;
font-size: 1rem;
}
section {
padding: 60px 0;
}
}
</style>
</head>
<body>
<!-- Header -->
<header id="header">
<div class="container header-container">
<a href="#" class="logo">
<span class="logo-icon">🌮</span>
Kimchi<span>Loco</span>
</a>
<div class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul id="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#location">Location</a></li>
<li><a href="#testimonials">Reviews</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero -->
<section class="hero" id="home">
<div class="hero-content">
<h1>Kimchi Loco</h1>
<p>Fusion Korean Tacos that will make your taste buds dance!</p>
<div>
<a href="#menu" class="btn btn-primary">View Menu</a>
<a href="#location" class="btn btn-outline">Find Us</a>
</div>
</div>
</section>
<!-- Menu -->
<section id="menu">
<div class="container">
<div class="section-title">
<h2>Our Menu</h2>
<p>Authentic Korean flavors meets Mexican street food perfection</p>
</div>
<div class="menu-grid">
<div class="menu-card">
<div class="menu-img">🌮</div>
<div class="menu-content">
<h3>Kimchi Quesadilla</h3>
<p>Melted cheese with spicy kimchi and jalapeños on a toasted tortilla.</p>
<div class="price">$8.99</div>
</div>
</div>
<div class="menu-card">
<div class="menu-img">🌮</div>
<div class="menu-content">
<h3>Spicy Pork Taco</h3>
<p>Slow-cooked pork belly with gochujang glaze, pickled radish, and cilantro.</p>
<div class="price">$7.99</div>
</div>
</div>
<div class="menu-card">
<div class="menu-img">🌮</div>
<div class="menu-content">
<h3>BBQ Beef Taco</h3>
<p>Marinated bulgogi beef with sesame seeds, scallions, and a sesame aioli.</p>
<div class="price">$8.49</div>
</div>
</div>
<div class="menu-card">
<div class="menu-img">🌮</div>
<div class="menu-content">
<h3>Kimchi Fries</h3>
<p>Crispy fries topped with kimchi, melted cheese, and green onions.</p>
<div class="price">$6.99</div>
</div>
</div>
<div class="menu-card">
<div class="menu-img">🌮</div>
<div class="menu-content">
<h3>Vegetarian Taco</h3>
<p>Grilled tofu, spinach, mushrooms, and a spicy gochujang sauce.</p>
<div class="price">$7.49</div>
</div>
</div>
<div class="menu-card">
<div class="menu-img">🌮</div>
<div class="menu-content">
<h3>Kimchi Loco Special</h3>
<p>Our signature combo: pork, beef, kimchi, and a fried egg on a tortilla.</p>
<div class="price">$9.99</div>
</div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" style="background-color: var(--gray);">
<div class="container">
<div class="about-content">
<div class="about-text">
<h3>About Kimchi Loco</h3>
<p>Born from a love for Korean street food and Mexican flavors, Kimchi Loco brings you the ultimate fusion experience. Our food truck started as a weekend hobby and has now become a local favorite, serving up bold, spicy, and delicious tacos that combine the best of both worlds.</p>
<p>We source fresh, local ingredients and prepare our kimchi and marinades in-house daily. Every taco is made to order, ensuring you get the freshest, most flavorful experience possible.</p>
<a href="#location" class="btn btn-primary">Visit Us</a>
</div>
<div class="about-img">🚚</div>
</div>
</div>
</section>
<!-- Location -->
<section id="location">
<div class="container">
<div class="section-title">
<h2>Find Us</h2>
<p>Come say hello and grab a taco!</p>
</div>
<div class="location-container">
<div class="location-info">
<h3>Location & Hours</h3>
<div class="info-item">
<div class="info-icon">📍</div>
<div>
<h4>Address</h4>
<p>123 Food Truck Lane, Seoul City, CA 90210</p>
</div>
</div>
<div class="info-item">
<div class="info-icon">🕒</div>
<div>
<h4>Hours</h4>
<p>Mon - Fri: 11:00 AM - 8:00 PM<br>
Sat - Sun: 12:00 PM - 9:00 PM</p>
</div>
</div>
<div class="info-item">
<div class="info-icon">📞</div>
<div>
<h4>Contact</h4>
<p>(555) 123-4567</p>
</div>
</div>
</div>
<div class="map">
<div class="map-pin">📍</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" style="background-color: var(--gray);">
<div class="container">
<div class="section-title">
<h2>What People Are Saying</h2>
<p>Don't just take our word for it</p>
</div>
<div class="testimonial-slider">
<div class="testimonial-slide active">
<p class="testimonial-text">"The best Korean tacos I've ever had! The kimchi quesadilla is to die for. Can't wait to come back!"</p>
<p class="testimonial-author">- Sarah J.</p>
</div>
<div class="testimonial-slide">
<p class="testimonial-text">"I'm obsessed with the spicy pork taco. The perfect balance of heat and flavor. Kimchi Loco is a must-visit!"</p>
<p class="testimonial-author">- Mike T.</p>
</div>
<div class="testimonial-slide">
<p class="testimonial-text">"As a foodie, I've tried many fusion trucks, but Kimchi Loco stands out. The quality is incredible."</p>
<p class="testimonial-author">- Jessica L.</p>
</div>
<div class="slider-dots">
<span class="dot active" data-slide="0"></span>
<span class="dot" data-slide="1"></span>
<span class="dot" data-slide="2"></span>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta">
<div class="container">
<h2>Ready to Taste the Loco?</h2>
<p>Follow us on social media for daily locations and special deals.</p>
<a href="#location" class="btn btn-primary">Find Us Now</a>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>Kimchi Loco</h3>
<p>Bringing the heat and flavor of Korean-Mexican fusion to the streets.</p>
<div class="social-links">
<a href="#">FB</a>
<a href="#">IG</a>
<a href="#">TW</a>
</div>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#location">Location</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Contact</h3>
<ul>
<li>123 Food Truck Lane, Seoul City, CA 90210</li>
<li>(555) 123-4567</li>
<li>info@kimchiloco.com</li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2023 Kimchi Loco. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Header scroll effect
window.addEventListener('scroll', function() {
const header = document.getElementById('header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Mobile menu toggle
const hamburger = document.getElementById('hamburger');
const navMenu = document.getElementById('nav-menu');
hamburger.addEventListener('click', function() {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Close mobile menu when clicking on a link
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', function() {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
});
});
// Testimonial slider
let currentSlide = 0;
const slides = document.querySelectorAll('.testimonial-slide');
const dots = document.querySelectorAll('.dot');
function showSlide(n) {
slides.forEach(slide => slide.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].classList.add('active');
dots[currentSlide].classList.add('active');
}
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
showSlide(index);
});
});
// Auto slide every 5 seconds
setInterval(() => {
showSlide(currentSlide + 1);
}, 5000);
</script>
</body>
</html>Reasoning trace (1,862 tokens)
We need to produce a self-contained HTML page for a Korean taco food truck named "Kimchi Loco". The website should make people want to come. It should be visually appealing, maybe include images, menu, location, hours, etc. But we cannot use external images or fonts unless via CDN. The instructions say we can use CDN URLs explicitly allowed by the task. The task didn't specify allowed CDNs, but typical ones like Google Fonts, Bootstrap, etc. However, we need to output a single HTML file with inline CSS and JS. No external files, except CDN URLs allowed. The task says "No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task." Since the task didn't list any, maybe we should avoid external resources entirely. But we can use inline SVG for graphics. Or we can use base64 data URIs for images. But we don't have images. We can create a visually appealing design with CSS gradients, animations, etc.
We need to make a website that makes people want to come. So we need to include appetizing descriptions, menu items, maybe a slideshow of food pics (but we don't have actual images). We could use emojis or SVG illustrations.
We also need to adapt to 1280x800 viewport and down to 375px. No horizontal scrollbar.
We need to include a call to action, maybe a map, hours, location.
We can include a simple interactive element like a "Find us" button that shows a map (maybe using an iframe? But that's external). Could use a static SVG map.
We need to ensure it's self-contained.
We can use Google Fonts via CDN? The task says "except the CDN URLs explicitly allowed by the task." It didn't list any, so maybe we should not use any external CDN. Safer to use system fonts.
But we can include a link to Google Fonts if we want, but it's a network request. The instructions say "No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task." So unless the task explicitly allows a specific CDN, we should avoid any network requests. So we should use inline CSS with system fonts.
We need to produce a single fenced code block with the HTML.
We'll create a modern, colorful site with a header, hero section with a mouth-watering description, menu section with items, location and hours, maybe a testimonial, and a call to action.
We can use CSS animations to make it lively.
We can include a simple JavaScript to toggle a mobile menu, but it's optional.
We need to make sure it looks good on first paint.
We'll produce an HTML file with embedded CSS and JS.
We'll use a food truck theme: maybe a background with a pattern.
We can use SVG for a taco or kimchi icon.
We'll include a menu with items like "Kimchi Quesadilla", "Spicy Pork Taco", etc., with prices.
We'll include a section for "Find Us" with an address and maybe a simple map SVG.
We'll include a CTA to "Visit Us" or "Order Now".
We'll ensure responsive design.
We'll use a color scheme: red/orange for spice, green for fresh.
We'll create a sticky header with logo.
We'll use a font like 'Georgia' for headings, 'Arial' for body.
We'll add some hover effects.
We'll include a simple slideshow of text testimonials.
We'll ensure no horizontal scrollbar.
We'll test in mind.
Now, let's draft.
We'll create:
<!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 Food Truck</title>
<style>
/* CSS here */
</style>
</head>
<body>
<!-- Header -->
<!-- Hero -->
<!-- Menu -->
<!-- About -->
<!-- Location -->
<!-- Testimonials -->
<!-- CTA -->
<!-- Footer -->
<script>
// simple script for mobile menu or slideshow
</script>
</body>
</html>
We need to make it visually appealing.
We can use a background image via CSS gradient, maybe with a pattern.
We can use CSS flexbox/grid.
We'll create a hero with a large title and a subheading, maybe a button.
We'll include an SVG of a taco or a truck.
We can draw a simple food truck using SVG.
But we need to keep it simple.
We can use emojis: 🌮, 🌶️, 🍲.
But better to use SVG.
Let's create a simple SVG of a food truck.
Alternatively, we can use a div with a gradient and text.
Given time, we can create a simple design.
We'll use a color palette: #FF5A5A (red), #FFD200 (yellow), #FFFFFF (white), #333333 (dark).
We'll make a header with logo "Kimchi Loco" stylized.
We'll have a navigation bar that becomes a hamburger on mobile.
We'll implement a simple hamburger toggle with JS.
We'll create a hero section with a background image using CSS gradient and maybe a pattern.
We'll use a pattern of small SVG icons? Or just a solid color.
We can use a repeating linear gradient to create a subtle pattern.
We'll create a menu section with cards.
We'll include a location section with an address and a simple map using an SVG of a pin.
We'll include a CTA section.
We'll ensure responsive.
Now, write the code.
We'll include a script for mobile menu toggle.
We'll also include a simple auto-playing slideshow of testimonials.
But we must ensure it's visible on first paint.
We'll make the slideshow with fade transitions.
We'll use CSS animations.
We'll include a "Click or press a key to start" message? The instructions say: "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." But this is not a game. It's a website. So that rule may not apply. However, the instructions are general for any demo. But it says "Games must start...". Since this is not a game, we don't need that.
But we need to ensure something meaningful is visible on first paint. So we'll ensure the hero is visible.
We'll avoid any heavy scripts that block rendering.
We'll put CSS in <style> and JS at bottom.
Now, let's write the HTML.
We'll start with the code block.
We'll include a simple but attractive design.
We'll use a font like 'Poppins' from Google Fonts? But we can't use external. So we'll use system fonts.
We'll use a combination of sans-serif and maybe a cursive font for headings.
We can use a CSS font-face with a base64 encoded font? That's too heavy.
We'll just use generic fonts.
We'll make headings bold and styled.
We'll create a logo using CSS.
We'll use a hamburger menu.
We'll create a mobile menu that slides down.
We'll include a CTA button that scrolls to menu.
We'll also include a "Order Online" button maybe.
But we don't have an external link.
We'll just make it a static site.
Now, write the code.
We'll structure:
- Header (logo, nav)
- Hero (title, subtitle, button)
- Menu (section with items)
- About (maybe a short story)
- Location (address, hours, map)
- Testimonials (slideshow)
- CTA (call to action)
- Footer
We'll use a single page.
We'll use smooth scrolling for nav links.
We'll include a simple form? Not needed.
We'll keep it simple.
Now, let's write the CSS.
We'll use variables for colors.
We'll set a max-width for content.
We'll make it responsive.
We'll use a hamburger menu.
We'll write the HTML.
Let's begin.
We'll output the code block.