Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,213 @@
+:root {
+    --primary: #5D4037;
+    --secondary: #8D6E63;
+    --accent: #FFCC80;
+    --light: #FFF8E1;
+    --dark: #3E2723;
+    --text: #4E342E;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Montserrat', sans-serif;
+    line-height: 1.6;
+    color: var(--text);
+    background-color: var(--light);
+}
+
+header {
+    background: var(--primary);
+    color: white;
+    padding: 1rem;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    z-index: 100;
+}
+
+nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.nav-links {
+    display: flex;
+    list-style: none;
+}
+
+.nav-links li {
+    margin-left: 2rem;
+}
+
+.nav-links a {
+    color: white;
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.nav-links a:hover {
+    color: var(--accent);
+}
+
+.burger {
+    display: none;
+    cursor: pointer;
+}
+
+.burger span {
+    display: block;
+    width: 25px;
+    height: 3px;
+    margin: 5px 0;
+    background-color: white;
+}
+
+.hero {
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://picsum.photos/seed/coffee/1600/900.jpg');
+    background-size: cover;
+    background-position: center;
+    text-align: center;
+    color: white;
+    padding: 0 1rem;
+}
+
+.hero-text h1 {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+}
+
+.hero-text p {
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+}
+
+.cta {
+    display: inline-block;
+    background: var(--accent);
+    color: var(--dark);
+    padding: 0.8rem 1.5rem;
+    text-decoration: none;
+    border-radius: 4px;
+    font-weight: bold;
+    transition: transform 0.3s;
+}
+
+.cta:hover {
+    transform: translateY(-3px);
+}
+
+section {
+    padding: 4rem 1rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+section h2 {
+    text-align: center;
+    margin-bottom: 3rem;
+    color: var(--primary);
+    font-size: 2.5rem;
+}
+
+.menu-items {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+}
+
+.menu-item {
+    background: white;
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    transition: transform 0.3s;
+}
+
+.menu-item:hover {
+    transform: translateY(-5px);
+}
+
+.menu-item h3 {
+    margin-bottom: 0.5rem;
+    color: var(--primary);
+}
+
+.price {
+    font-weight: bold;
+    color: var(--secondary);
+    margin-bottom: 1rem;
+}
+
+.about {
+    background: white;
+    text-align: center;
+}
+
+.contact {
+    background: var(--primary);
+    color: white;
+    text-align: center;
+}
+
+.contact h2 {
+    color: white;
+}
+
+.contact-info p {
+    margin: 0.5rem 0;
+}
+
+footer {
+    background: var(--dark);
+    color: white;
+    text-align: center;
+    padding: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+    .nav-links {
+        position: absolute;
+        right: 0;
+        top: 70px;
+        background: var(--primary);
+        width: 100%;
+        flex-direction: column;
+        align-items: center;
+        padding: 1rem 0;
+        transform: translateY(-100%);
+        transition: transform 0.5s;
+    }
+
+    .nav-links.active {
+        transform: translateY(0);
+    }
+
+    .nav-links li {
+        margin: 1rem 0;
+    }
+
+    .burger {
+        display: block;
+    }
+
+    .hero-text h1 {
+        font-size: 2rem;
+    }
+}

assets/js/script.js

@@ -0,0 +1,15 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const burger = document.querySelector('.burger');
+    const navLinks = document.querySelector('.nav-links');
+    
+    burger.addEventListener('click', function() {
+        navLinks.classList.toggle('active');
+    });
+    
+    // Close mobile menu when clicking on a link
+    document.querySelectorAll('.nav-links a').forEach(link => {
+        link.addEventListener('click', () => {
+            navLinks.classList.remove('active');
+        });
+    });
+});

index.html

@@ -1,19 +1,79 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brew Perfect | Artisan Coffee</title>
+    <meta name="description" content="Artisanal coffee shop brewing the perfect cup since 2015">
+    <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=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header>
+        <nav>
+            <div class="logo">Brew Perfect</div>
+            <ul class="nav-links">
+                <li><a href="#menu">Menu</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+            <div class="burger"><span></span><span></span><span></span></div>
+        </nav>
+    </header>
+
+    <section class="hero">
+        <div class="hero-text">
+            <h1>Crafted with Passion</h1>
+            <p>Experience the art of coffee with our expertly roasted beans</p>
+            <a href="#menu" class="cta">View Our Menu</a>
+        </div>
+        <div class="hero-image">
+            <img src="https://huggingface.co/datasets/akhaliq/anycoder-media/resolve/main/image/20250824_225843_b0ccc994_generated_image_0.jpg" alt="cup full of coffee" style="max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0;" loading="lazy" />
+        </div>
+    </section>
+
+    <section id="menu" class="menu">
+        <h2>Our Signature Brews</h2>
+        <div class="menu-items">
+            <div class="menu-item">
+                <h3>Espresso</h3>
+                <p class="price">$3.50</p>
+                <p>Rich and bold with notes of dark chocolate</p>
+            </div>
+            <div class="menu-item">
+                <h3>Cappuccino</h3>
+                <p class="price">$4.25</p>
+                <p>Perfect balance of espresso, steamed milk, and foam</p>
+            </div>
+            <div class="menu-item">
+                <h3>Pour Over</h3>
+                <p class="price">$5.00</p>
+                <p>Single-origin beans brewed to highlight unique flavors</p>
+            </div>
+        </div>
+    </section>
+
+    <section id="about" class="about">
+        <h2>Our Story</h2>
+        <p>Founded in 2015, Brew Perfect began with a simple mission: to serve the most exceptional coffee in town. We source our beans directly from sustainable farms around the world and roast them in-house to ensure maximum freshness and flavor.</p>
+    </section>
+
+    <section id="contact" class="contact">
+        <h2>Visit Us</h2>
+        <div class="contact-info">
+            <p>123 Coffee Street</p>
+            <p>Portland, OR 97201</p>
+            <p>Hours: Mon-Fri 7am-6pm, Sat-Sun 8am-7pm</p>
+            <p>Phone: (555) 123-4567</p>
+        </div>
+    </section>
+
+    <footer>
+        <p>&copy; 2023 Brew Perfect. All rights reserved.</p>
+    </footer>
+
+    <script src="assets/js/script.js"></script>
+</body>
+</html>