code-brew-caf / index.html
lucacadalora's picture
make me a coffesshop called code LLC with several menus
5ce6277 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Brew Café</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-100">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section class="hero bg-gradient-to-r from-amber-800 to-amber-600 rounded-2xl p-8 md:p-12 mb-12 text-white">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4">Code Brew Café</h1>
<p class="text-xl mb-8">Where developers fuel their creativity with premium coffee</p>
<a href="#menu" class="bg-white text-amber-800 px-6 py-3 rounded-full font-semibold hover:bg-amber-100 transition duration-300 inline-block">Explore Our Menu</a>
</div>
</section>
<!-- Featured Items -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-center">Developer Favorites</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<img src="http://static.photos/food/640x360/1" alt="Espresso" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Debugger Espresso</h3>
<p class="text-gray-600 mb-4">Strong shot to fix your code faster</p>
<span class="text-amber-800 font-bold">$3.50</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<img src="http://static.photos/food/640x360/2" alt="Latte" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Syntax Latte</h3>
<p class="text-gray-600 mb-4">Smooth and perfectly balanced</p>
<span class="text-amber-800 font-bold">$4.75</span>
</div>
</div>
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-300">
<img src="http://static.photos/food/640x360/3" alt="Cold Brew" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Cold Brew Stack</h3>
<p class="text-gray-600 mb-4">For those marathon coding sessions</p>
<span class="text-amber-800 font-bold">$4.50</span>
</div>
</div>
</div>
</section>
<!-- Menu Section -->
<section id="menu" class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-center">Our Menu</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Coffee Menu -->
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center mb-6">
<i data-feather="coffee" class="text-amber-800 mr-3"></i>
<h3 class="text-2xl font-bold">Coffee</h3>
</div>
<ul class="space-y-4">
<li class="flex justify-between border-b pb-2">
<span>Espresso</span>
<span class="font-semibold">$3.50</span>
</li>
<li class="flex justify-between border-b pb-2">
<span>Americano</span>
<span class="font-semibold">$3.75</span>
</li>
<li class="flex justify-between border-b pb-2">
<span>Cappuccino</span>
<span class="font-semibold">$4.50</span>
</li>
<li class="flex justify-between border-b pb-2">
<span>Latte</span>
<span class="font-semibold">$4.75</span>
</li>
<li class="flex justify-between border-b pb-2">
<span>Mocha</span>
<span class="font-semibold">$5.00</span>
</li>
<li class="flex justify-between">
<span>Cold Brew</span>
<span class="font-semibold">$4.50</span>
</li>
</ul>
</div>
<!-- Food Menu -->
<div class="bg-white rounded-xl shadow-md p-6">
<div class="flex items-center mb-6">
<i data-feather="croissant" class="text-amber-800 mr-3"></i>
<h3 class="text-2xl font-bold">Food</h3>
</div>
<ul class="space-y-4">
<li class="flex justify-between border-b pb-2">
<span>Avocado Toast</span>
<span class="font-semibold">$8.50</span>
</li>
<li class="flex justify-between border-b pb-2">
<span>Breakfast Burrito</span>
<span class="font-semibold">$9.75</span>
</li>
<li class="flex justify-between border-b pb-2">
<span>Bagel with Cream Cheese</span>
<span class="font-semibold">$5.50</span>
</li>
<li class="flex justify-between border-b pb-2">
<span>Quiche</span>
<span class="font-semibold">$7.50</span>
</li>
<li class="flex justify-between">
<span>Yogurt Parfait</span>
<span class="font-semibold">$6.50</span>
</li>
</ul>
</div>
</div>
</section>
<!-- About Section -->
<section class="bg-white rounded-xl shadow-md p-8 mb-16">
<h2 class="text-3xl font-bold mb-6 text-center">About Code Brew Café</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div>
<p class="mb-4 text-gray-700">Founded in 2023, Code Brew Café is a haven for developers, designers, and tech enthusiasts. We combine premium coffee with a productive environment featuring high-speed WiFi, plenty of power outlets, and comfortable workspaces.</p>
<p class="mb-4 text-gray-700">Our baristas are trained to understand the needs of our tech-savvy customers, offering drinks that keep you focused and energized throughout your work sessions.</p>
<p class="text-gray-700">Join us for our weekly "Hack & Sip" nights where developers gather to collaborate and share ideas over specially crafted coffee blends.</p>
</div>
<img src="http://static.photos/workspace/640x360/1" alt="Café interior" class="rounded-lg shadow-md">
</div>
</section>
</main>
<custom-footer></custom-footer>
<script>
feather.replace();
</script>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>