Spaces:

akhaliq
/

coffee-qwen-working

Running

App Files Files Community

coffee-qwen-working / index.html

akhaliq HF Staff

Upload folder using huggingface_hub

bf5399e verified 21 days ago

raw

history blame contribute delete

12.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Welcome to Brew & Bean - Your local artisan coffee shop offering premium coffee, cozy atmosphere, and delicious pastries.">
	<meta name="keywords" content="coffee, cafe, coffee shop, artisan coffee, espresso, latte, cappuccino">
	<title>Brew & Bean - Artisan Coffee Shop</title>
	<link rel="stylesheet" href="assets/css/styles.css">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	</head>
	<body>
	<!-- Header Section -->
	<header>
	<nav class="navbar">
	<div class="nav-container">
	<div class="logo">
	<h2>Brew & Bean</h2>
	</div>
	<ul class="nav-menu">
	<li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
	<li class="nav-item"><a href="#menu" class="nav-link">Menu</a></li>
	<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
	<li class="nav-item"><a href="#contact" class="nav-link">Contact</a></li>
	</ul>
	<div class="hamburger">
	<span class="bar"></span>
	<span class="bar"></span>
	<span class="bar"></span>
	</div>
	</div>
	</nav>
	</header>

	<!-- Hero Section -->
	<section id="home" class="hero">
	<div class="hero-content">
	<h1>Artisan Coffee Experience</h1>
	<p>Handcrafted beverages in a cozy atmosphere</p>
	<a href="#menu" class="btn-primary">View Menu</a>
	</div>
	<div class="hero-video-container">
	<video controls autoplay muted loop playsinline style="max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; display: block;" onloadstart="this.style.backgroundColor='#f0f0f0'" onerror="this.style.display='none'; console.error('Video failed to load')"><source src="https://huggingface.co/datasets/akhaliq/anycoder-media/resolve/main/video/20250825_015918_eda41504_text_to_video_result.mp4" type="video/mp4" /><p style="text-align: center; color: #666;">Your browser does not support the video tag.</p></video>
	</div>
	</section>

	<!-- Menu Section -->
	<section id="menu" class="menu-section">
	<div class="container">
	<h2 class="section-title">Our Menu</h2>
	<div class="menu-grid">
	<div class="menu-category">
	<h3>Coffee</h3>
	<ul class="menu-items">
	<li>
	<div class="menu-item">
	<h4>Espresso</h4>
	<span class="price">$2.50</span>
	<p>Strong black coffee made by forcing steam through ground beans</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Cappuccino</h4>
	<span class="price">$4.25</span>
	<p>Espresso with steamed milk foam</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Latte</h4>
	<span class="price">$4.75</span>
	<p>Espresso with steamed milk and a light layer of foam</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Americano</h4>
	<span class="price">$3.50</span>
	<p>Espresso diluted with hot water</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Mocha</h4>
	<span class="price">$5.25</span>
	<p>Espresso with chocolate and steamed milk</p>
	</div>
	</li>
	</ul>
	</div>

	<div class="menu-category">
	<h3>Tea & Other</h3>
	<ul class="menu-items">
	<li>
	<div class="menu-item">
	<h4>Green Tea</h4>
	<span class="price">$2.75</span>
	<p>Antioxidant-rich loose leaf green tea</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Chai Latte</h4>
	<span class="price">$4.50</span>
	<p>Spiced tea with steamed milk</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Hot Chocolate</h4>
	<span class="price">$4.25</span>
	<p>Rich cocoa with steamed milk and whipped cream</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Fresh Juice</h4>
	<span class="price">$3.75</span>
	<p>Seasonal selection of fresh squeezed juices</p>
	</div>
	</li>
	</ul>
	</div>

	<div class="menu-category">
	<h3>Pastries</h3>
	<ul class="menu-items">
	<li>
	<div class="menu-item">
	<h4>Croissant</h4>
	<span class="price">$2.50</span>
	<p>Buttery, flaky pastry baked fresh daily</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Blueberry Muffin</h4>
	<span class="price">$3.25</span>
	<p>Fluffy muffin with fresh blueberries</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Chocolate Chip Cookie</h4>
	<span class="price">$2.00</span>
	<p>Warm, chewy cookies with premium chocolate chips</p>
	</div>
	</li>
	<li>
	<div class="menu-item">
	<h4>Cinnamon Roll</h4>
	<span class="price">$3.75</span>
	<p>Freshly baked with cream cheese frosting</p>
	</div>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<!-- About Section -->
	<section id="about" class="about-section">
	<div class="container">
	<h2 class="section-title">About Us</h2>
	<div class="about-content">
	<div class="about-text">
	<p>Brew & Bean opened in 2010 with a simple mission: to serve exceptional coffee in a welcoming environment. Our beans are sourced directly from sustainable farms around the world and roasted in-house to ensure the highest quality.</p>
	<p>We believe that great coffee brings people together. Whether you're here to work, meet friends, or simply enjoy a quiet moment, our cozy space provides the perfect atmosphere for your coffee experience.</p>
	<div class="about-stats">
	<div class="stat">
	<h3>12+</h3>
	<p>Years of Experience</p>
	</div>
	<div class="stat">
	<h3>200+</h3>
	<p>Happy Customers Daily</p>
	</div>
	<div class="stat">
	<h3>100%</h3>
	<p>Ethically Sourced Beans</p>
	</div>
	</div>
	</div>
	<div class="about-image">
	<img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&h=600&q=80" alt="Coffee shop interior">
	</div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact" class="contact-section">
	<div class="container">
	<h2 class="section-title">Visit Us</h2>
	<div class="contact-content">
	<div class="contact-info">
	<div class="info-item">
	<i class="fas fa-map-marker-alt"></i>
	<div>
	<h4>Location</h4>
	<p>123 Main Street, Coffeeville</p>
	</div>
	</div>
	<div class="info-item">
	<i class="fas fa-clock"></i>
	<div>
	<h4>Hours</h4>
	<p>Monday-Friday: 7am - 7pm</p>
	<p>Saturday-Sunday: 8am - 6pm</p>
	</div>
	</div>
	<div class="info-item">
	<i class="fas fa-phone"></i>
	<div>
	<h4>Phone</h4>
	<p>(123) 456-7890</p>
	</div>
	</div>
	<div class="info-item">
	<i class="fas fa-envelope"></i>
	<div>
	<h4>Email</h4>
	<p>[email protected]</p>
	</div>
	</div>
	</div>
	<div class="contact-map">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.184133404672!2d-73.98757092454555!3d40.75802747138721!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes%20Square!5e0!3m2!1sen!2sus!4v1689871234567!5m2!1sen!2sus" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
	</div>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer>
	<div class="container">
	<div class="footer-content">
	<div class="footer-logo">
	<h2>Brew & Bean</h2>
	<p>Premium coffee since 2010</p>
	</div>
	<div class="footer-social">
	<a href="#"><i class="fab fa-facebook-f"></i></a>
	<a href="#"><i class="fab fa-instagram"></i></a>
	<a href="#"><i class="fab fa-twitter"></i></a>
	</div>
	</div>
	<div class="footer-bottom">
	<p>© 2023 Brew & Bean Coffee Shop. All rights reserved.</p>
	</div>
	</div>
	</footer>

	<script src="assets/js/script.js"></script>
	</body>
	</html>