Hugging Face's logo

Spaces:
Mikeshu
/
bean-bliss-caf
Running

App Files Community
Mikeshu commited on
Commit
df67a94
·
verified ·
1 Parent(s): 259212b

Create a modern coffee shop website with a cozy hero image, menu board with drinks and pastries, about our story section, location finder, online ordering button, and Instagram gallery showing café atmosphere.

Browse files
Files changed (4) hide show
  1. README.md +7 -4
  2. index.html +273 -19
  3. script.js +44 -0
  4. style.css +22 -20
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Bean Bliss Caf
3
- emoji: 🐠
4
- colorFrom: pink
5
  colorTo: purple
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Bean Bliss Café ☕️
3
+ colorFrom: gray
 
4
  colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,273 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bean Bliss Café</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#ef4444', // red-500
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ </head>
23
+ <body class="bg-gray-50 font-sans">
24
+ <!-- Navigation -->
25
+ <nav class="bg-white shadow-md sticky top-0 z-50">
26
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
27
+ <a href="#" class="text-2xl font-bold text-primary">Bean Bliss ☕️</a>
28
+ <div class="hidden md:flex space-x-8">
29
+ <a href="#menu" class="text-gray-700 hover:text-primary transition">Menu</a>
30
+ <a href="#about" class="text-gray-700 hover:text-primary transition">Our Story</a>
31
+ <a href="#location" class="text-gray-700 hover:text-primary transition">Find Us</a>
32
+ <a href="#gallery" class="text-gray-700 hover:text-primary transition">Gallery</a>
33
+ </div>
34
+ <button class="md:hidden focus:outline-none" id="menu-toggle">
35
+ <i data-feather="menu" class="text-gray-700"></i>
36
+ </button>
37
+ </div>
38
+ <!-- Mobile Menu -->
39
+ <div class="md:hidden hidden bg-white py-2 px-4 shadow-md" id="mobile-menu">
40
+ <a href="#menu" class="block py-2 text-gray-700 hover:text-primary transition">Menu</a>
41
+ <a href="#about" class="block py-2 text-gray-700 hover:text-primary transition">Our Story</a>
42
+ <a href="#location" class="block py-2 text-gray-700 hover:text-primary transition">Find Us</a>
43
+ <a href="#gallery" class="block py-2 text-gray-700 hover:text-primary transition">Gallery</a>
44
+ </div>
45
+ </nav>
46
+
47
+ <!-- Hero Section -->
48
+ <header class="relative h-screen flex items-center justify-center bg-gray-900 overflow-hidden">
49
+ <img src="http://static.photos/food/1200x630/42" alt="Coffee shop interior" class="absolute w-full h-full object-cover opacity-70">
50
+ <div class="relative z-10 text-center px-4">
51
+ <h1 class="text-4xl md:text-6xl font-bold text-white mb-4">Welcome to Bean Bliss</h1>
52
+ <p class="text-xl md:text-2xl text-white mb-8">Where every sip tells a story</p>
53
+ <a href="#menu" class="bg-primary hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full transition shadow-lg">Explore Our Menu</a>
54
+ </div>
55
+ </header>
56
+
57
+ <!-- Menu Section -->
58
+ <section id="menu" class="py-16 px-4">
59
+ <div class="container mx-auto">
60
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our Menu</h2>
61
+
62
+ <!-- Coffee Menu -->
63
+ <div class="mb-16">
64
+ <h3 class="text-2xl font-semibold mb-6 text-primary flex items-center">
65
+ <i data-feather="coffee" class="mr-2"></i> Coffee & Drinks
66
+ </h3>
67
+ <div class="grid md:grid-cols-2 gap-8">
68
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
69
+ <div class="flex justify-between items-start">
70
+ <h4 class="font-bold text-lg">Espresso</h4>
71
+ <span class="font-bold text-primary">$3.50</span>
72
+ </div>
73
+ <p class="text-gray-600 mt-2">Rich and bold single shot of espresso</p>
74
+ </div>
75
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
76
+ <div class="flex justify-between items-start">
77
+ <h4 class="font-bold text-lg">Cappuccino</h4>
78
+ <span class="font-bold text-primary">$4.50</span>
79
+ </div>
80
+ <p class="text-gray-600 mt-2">Espresso with steamed milk and foam</p>
81
+ </div>
82
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
83
+ <div class="flex justify-between items-start">
84
+ <h4 class="font-bold text-lg">Latte</h4>
85
+ <span class="font-bold text-primary">$5.00</span>
86
+ </div>
87
+ <p class="text-gray-600 mt-2">Espresso with a lot of steamed milk</p>
88
+ </div>
89
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
90
+ <div class="flex justify-between items-start">
91
+ <h4 class="font-bold text-lg">Cold Brew</h4>
92
+ <span class="font-bold text-primary">$4.00</span>
93
+ </div>
94
+ <p class="text-gray-600 mt-2">Slow-steeped cold coffee concentrate</p>
95
+ </div>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Pastry Menu -->
100
+ <div>
101
+ <h3 class="text-2xl font-semibold mb-6 text-primary flex items-center">
102
+ <i data-feather="pie-chart" class="mr-2"></i> Pastries & Treats
103
+ </h3>
104
+ <div class="grid md:grid-cols-2 gap-8">
105
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
106
+ <div class="flex justify-between items-start">
107
+ <h4 class="font-bold text-lg">Croissant</h4>
108
+ <span class="font-bold text-primary">$3.50</span>
109
+ </div>
110
+ <p class="text-gray-600 mt-2">Freshly baked buttery croissant</p>
111
+ </div>
112
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
113
+ <div class="flex justify-between items-start">
114
+ <h4 class="font-bold text-lg">Blueberry Muffin</h4>
115
+ <span class="font-bold text-primary">$3.75</span>
116
+ </div>
117
+ <p class="text-gray-600 mt-2">Moist muffin with fresh blueberries</p>
118
+ </div>
119
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
120
+ <div class="flex justify-between items-start">
121
+ <h4 class="font-bold text-lg">Almond Croissant</h4>
122
+ <span class="font-bold text-primary">$4.50</span>
123
+ </div>
124
+ <p class="text-gray-600 mt-2">Croissant filled with almond cream</p>
125
+ </div>
126
+ <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
127
+ <div class="flex justify-between items-start">
128
+ <h4 class="font-bold text-lg">Cinnamon Roll</h4>
129
+ <span class="font-bold text-primary">$4.00</span>
130
+ </div>
131
+ <p class="text-gray-600 mt-2">Sweet dough with cinnamon sugar</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="mt-12 text-center">
137
+ <a href="#" class="bg-primary hover:bg-red-600 text-white font-bold py-3 px-8 rounded-full transition shadow-lg inline-flex items-center">
138
+ <i data-feather="shopping-bag" class="mr-2"></i> Order Online
139
+ </a>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- About Section -->
145
+ <section id="about" class="py-16 px-4 bg-gray-100">
146
+ <div class="container mx-auto">
147
+ <div class="flex flex-col md:flex-row items-center">
148
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
149
+ <img src="http://static.photos/people/640x360/5" alt="Cafe owners" class="rounded-lg shadow-lg">
150
+ </div>
151
+ <div class="md:w-1/2">
152
+ <h2 class="text-3xl font-bold mb-6 text-gray-800">Our Story</h2>
153
+ <p class="text-gray-600 mb-4">Founded in 2015 by two coffee enthusiasts, Bean Bliss was born from a shared passion for quality coffee and community.</p>
154
+ <p class="text-gray-600 mb-4">We source our beans directly from small farms around the world, ensuring fair trade and exceptional flavor in every cup.</p>
155
+ <p class="text-gray-600">Our cozy space was designed to be your home away from home - whether you're looking for a quiet place to work or a spot to catch up with friends.</p>
156
+ <div class="mt-6 flex items-center">
157
+ <i data-feather="award" class="text-primary mr-2"></i>
158
+ <span class="text-gray-700 font-medium">Locally voted "Best Coffee Shop" 2020-2023</span>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+
165
+ <!-- Location Section -->
166
+ <section id="location" class="py-16 px-4">
167
+ <div class="container mx-auto">
168
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Find Us</h2>
169
+ <div class="flex flex-col md:flex-row gap-8">
170
+ <div class="md:w-1/2 bg-white p-6 rounded-lg shadow-md">
171
+ <h3 class="text-2xl font-semibold mb-4 text-primary">Visit Our Café</h3>
172
+ <div class="mb-4">
173
+ <div class="flex items-start mb-2">
174
+ <i data-feather="map-pin" class="text-primary mr-2 mt-1"></i>
175
+ <div>
176
+ <p class="font-medium">123 Coffee Lane</p>
177
+ <p class="text-gray-600">Downtown, CA 12345</p>
178
+ </div>
179
+ </div>
180
+ <div class="flex items-start mb-2">
181
+ <i data-feather="clock" class="text-primary mr-2 mt-1"></i>
182
+ <div>
183
+ <p class="font-medium">Hours:</p>
184
+ <p class="text-gray-600">Mon-Fri: 7am - 7pm</p>
185
+ <p class="text-gray-600">Sat-Sun: 8am - 6pm</p>
186
+ </div>
187
+ </div>
188
+ <div class="flex items-start">
189
+ <i data-feather="phone" class="text-primary mr-2 mt-1"></i>
190
+ <div>
191
+ <p class="font-medium">(123) 456-7890</p>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ <a href="#" class="inline-block bg-primary hover:bg-red-600 text-white font-bold py-2 px-6 rounded-full transition shadow">
196
+ Get Directions
197
+ </a>
198
+ </div>
199
+ <div class="md:w-1/2 h-64 md:h-auto bg-gray-200 rounded-lg overflow-hidden">
200
+ <!-- Map placeholder -->
201
+ <div class="w-full h-full flex items-center justify-center bg-gray-300">
202
+ <i data-feather="map" class="text-gray-500 w-16 h-16"></i>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Gallery Section -->
210
+ <section id="gallery" class="py-16 px-4 bg-gray-100">
211
+ <div class="container mx-auto">
212
+ <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">#BeanBlissMoments</h2>
213
+ <p class="text-center text-gray-600 max-w-2xl mx-auto mb-8">Follow us on Instagram @beanblisscafe for daily updates and more café moments</p>
214
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
215
+ <div class="aspect-square overflow-hidden rounded-lg shadow-md hover:shadow-lg transition">
216
+ <img src="http://static.photos/food/640x360/1" alt="Cafe atmosphere" class="w-full h-full object-cover hover:scale-105 transition">
217
+ </div>
218
+ <div class="aspect-square overflow-hidden rounded-lg shadow-md hover:shadow-lg transition">
219
+ <img src="http://static.photos/food/640x360/2" alt="Coffee art" class="w-full h-full object-cover hover:scale-105 transition">
220
+ </div>
221
+ <div class="aspect-square overflow-hidden rounded-lg shadow-md hover:shadow-lg transition">
222
+ <img src="http://static.photos/food/640x360/3" alt="Pastry display" class="w-full h-full object-cover hover:scale-105 transition">
223
+ </div>
224
+ <div class="aspect-square overflow-hidden rounded-lg shadow-md hover:shadow-lg transition">
225
+ <img src="http://static.photos/food/640x360/4" alt="Cafe seating" class="w-full h-full object-cover hover:scale-105 transition">
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </section>
230
+
231
+ <!-- Newsletter -->
232
+ <section class="py-12 px-4 bg-primary text-white">
233
+ <div class="container mx-auto max-w-2xl text-center">
234
+ <h3 class="text-2xl font-bold mb-4">Join Our Coffee Club</h3>
235
+ <p class="mb-6">Sign up for our newsletter and receive exclusive offers, new menu announcements, and more!</p>
236
+ <form class="flex flex-col sm:flex-row gap-2 max-w-md mx-auto">
237
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
238
+ <button type="submit" class="bg-white text-primary font-bold px-6 py-2 rounded-full hover:bg-gray-100 transition">Subscribe</button>
239
+ </form>
240
+ </div>
241
+ </section>
242
+
243
+ <!-- Footer -->
244
+ <footer class="bg-gray-900 text-white py-8 px-4">
245
+ <div class="container mx-auto">
246
+ <div class="flex flex-col md:flex-row justify-between items-center">
247
+ <div class="mb-6 md:mb-0">
248
+ <h3 class="text-2xl font-bold text-primary">Bean Bliss ☕️</h3>
249
+ <p class="text-gray-400 mt-2">Crafting exceptional coffee experiences since 2015</p>
250
+ </div>
251
+ <div class="flex space-x-6">
252
+ <a href="#" class="hover:text-primary transition">
253
+ <i data-feather="instagram"></i>
254
+ </a>
255
+ <a href="#" class="hover:text-primary transition">
256
+ <i data-feather="facebook"></i>
257
+ </a>
258
+ <a href="#" class="hover:text-primary transition">
259
+ <i data-feather="twitter"></i>
260
+ </a>
261
+ </div>
262
+ </div>
263
+ <div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-400">
264
+ <p>&copy; 2023 Bean Bliss Café. All rights reserved.</p>
265
+ </div>
266
+ </div>
267
+ </footer>
268
+
269
+ <script src="script.js"></script>
270
+ <script>feather.replace();</script>
271
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
272
+ </body>
273
+ </html>
script.js ADDED
@@ -0,0 +1,44 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Mobile menu toggle
2
+ document.getElementById('menu-toggle').addEventListener('click', function() {
3
+ const mobileMenu = document.getElementById('mobile-menu');
4
+ mobileMenu.classList.toggle('hidden');
5
+ });
6
+
7
+ // Smooth scrolling for all links
8
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
9
+ anchor.addEventListener('click', function (e) {
10
+ e.preventDefault();
11
+
12
+ const targetId = this.getAttribute('href');
13
+ if (targetId === '#') return;
14
+
15
+ const targetElement = document.querySelector(targetId);
16
+ if (targetElement) {
17
+ window.scrollTo({
18
+ top: targetElement.offsetTop - 80,
19
+ behavior: 'smooth'
20
+ });
21
+
22
+ // Close mobile menu if open
23
+ const mobileMenu = document.getElementById('mobile-menu');
24
+ if (!mobileMenu.classList.contains('hidden')) {
25
+ mobileMenu.classList.add('hidden');
26
+ }
27
+ }
28
+ });
29
+ });
30
+
31
+ // Add shadow to navbar on scroll
32
+ window.addEventListener('scroll', function() {
33
+ const nav = document.querySelector('nav');
34
+ if (window.scrollY > 50) {
35
+ nav.classList.add('shadow-lg');
36
+ } else {
37
+ nav.classList.remove('shadow-lg');
38
+ }
39
+ });
40
+
41
+ // Initialize feather icons (though they're also initialized in HTML)
42
+ document.addEventListener('DOMContentLoaded', function() {
43
+ feather.replace();
44
+ });
style.css CHANGED
@@ -1,28 +1,30 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
1
+ /* Smooth scrolling */
2
+ html {
3
+ scroll-behavior: smooth;
4
  }
5
 
6
+ /* Custom styles for mobile menu transition */
7
+ #mobile-menu {
8
+ transition: all 0.3s ease-in-out;
9
  }
10
 
11
+ /* Animation for menu items */
12
+ .menu-item:hover {
13
+ transform: translateY(-3px);
 
 
14
  }
15
 
16
+ /* Gallery image hover effect */
17
+ .gallery-item img {
18
+ transition: transform 0.3s ease;
 
 
 
19
  }
20
 
21
+ /* Hero section overlay */
22
+ header::after {
23
+ content: '';
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+ background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
30
+ }