Hugging Face's logo

Spaces:
devdetex
/
chumbak
Running

App Files Community
devdetex commited on
Commit
d63e2e5
·
verified ·
1 Parent(s): a90aef9

remove the baground image that used an add gradient as a bacgraund - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +363 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chumbak
3
- emoji: 🐠
4
- colorFrom: yellow
5
- colorTo: pink
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: chumbak
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,363 @@
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>The Chumbak Story - Handcrafted Fridge Magnets</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #D9A66F;
15
+ color: #3A2921;
16
+ }
17
+
18
+ h1, h2, h3 {
19
+ font-family: 'Playfair Display', serif;
20
+ }
21
+
22
+ .hero-image {
23
+ background: linear-gradient(135deg, #D9A66F 0%, #C75B36 100%);
24
+ background-blend-mode: overlay;
25
+ }
26
+
27
+ .magnet-card {
28
+ transition: all 0.3s ease;
29
+ transform: perspective(1000px) rotateY(0deg);
30
+ }
31
+
32
+ .magnet-card:hover {
33
+ transform: perspective(1000px) rotateY(10deg);
34
+ box-shadow: 0 10px 25px rgba(58, 41, 33, 0.2);
35
+ }
36
+
37
+ .testimonial-card {
38
+ transition: all 0.3s ease;
39
+ }
40
+
41
+ .testimonial-card:hover {
42
+ transform: translateY(-5px);
43
+ }
44
+
45
+ @keyframes float {
46
+ 0% { transform: translateY(0px); }
47
+ 50% { transform: translateY(-10px); }
48
+ 100% { transform: translateY(0px); }
49
+ }
50
+
51
+ @keyframes fadeInDown {
52
+ from {
53
+ opacity: 0;
54
+ transform: translateY(-20px);
55
+ }
56
+ to {
57
+ opacity: 1;
58
+ transform: translateY(0);
59
+ }
60
+ }
61
+
62
+ @keyframes fadeInUp {
63
+ from {
64
+ opacity: 0;
65
+ transform: translateY(20px);
66
+ }
67
+ to {
68
+ opacity: 1;
69
+ transform: translateY(0);
70
+ }
71
+ }
72
+
73
+ @keyframes pulseSlow {
74
+ 0% { transform: scale(1); }
75
+ 50% { transform: scale(1.05); }
76
+ 100% { transform: scale(1); }
77
+ }
78
+
79
+ .floating {
80
+ animation: float 4s ease-in-out infinite;
81
+ }
82
+
83
+ .animate-float-1 {
84
+ animation: float 6s ease-in-out infinite;
85
+ }
86
+
87
+ .animate-float-2 {
88
+ animation: float 5s ease-in-out infinite reverse;
89
+ }
90
+
91
+ .animate-float-3 {
92
+ animation: float 7s ease-in-out infinite 1s;
93
+ }
94
+
95
+ .animate-fade-in-down {
96
+ animation: fadeInDown 1s ease-out forwards;
97
+ }
98
+
99
+ .animate-fade-in-up {
100
+ animation: fadeInUp 1s ease-out 0.3s forwards;
101
+ }
102
+
103
+ .animate-pulse-slow {
104
+ animation: pulseSlow 3s ease-in-out infinite;
105
+ }
106
+
107
+ .delay-100 {
108
+ animation-delay: 0.1s;
109
+ }
110
+ </style>
111
+ </head>
112
+ <body>
113
+ <!-- Navigation -->
114
+ <nav class="bg-[#C75B36] text-white py-4 px-6 shadow-md">
115
+ <div class="container mx-auto flex justify-between items-center">
116
+ <div class="text-2xl font-bold font-serif">The Chumbak Story</div>
117
+ <div class="hidden md:flex space-x-8">
118
+ <a href="#story" class="hover:text-[#3A2921] transition">Our Story</a>
119
+ <a href="#gallery" class="hover:text-[#3A2921] transition">Gallery</a>
120
+ <a href="#testimonials" class="hover:text-[#3A2921] transition">Memories</a>
121
+ <a href="#order" class="hover:text-[#3A2921] transition">Order</a>
122
+ </div>
123
+ <button class="md:hidden text-white">
124
+ <i class="fas fa-bars text-2xl"></i>
125
+ </button>
126
+ </div>
127
+ </nav>
128
+
129
+ <!-- Hero Section -->
130
+ <section class="hero-image min-h-[80vh] flex items-center justify-center text-center px-4 relative overflow-hidden">
131
+ <!-- Floating decorative elements -->
132
+ <div class="absolute top-1/4 left-1/4 w-16 h-16 rounded-full bg-[#C75B36] bg-opacity-20 animate-float-1"></div>
133
+ <div class="absolute bottom-1/3 right-1/4 w-12 h-12 rounded-full bg-[#3A2921] bg-opacity-10 animate-float-2"></div>
134
+ <div class="absolute top-1/3 right-1/3 w-10 h-10 rounded-full bg-[#C75B36] bg-opacity-15 animate-float-3"></div>
135
+
136
+ <div class="max-w-4xl mx-auto bg-white bg-opacity-80 p-8 rounded-xl shadow-lg backdrop-blur-sm transform transition-all duration-500 hover:scale-105">
137
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 text-[#3A2921] animate-fade-in-down">Fridge Magnets Made from the Heart</h1>
138
+ <p class="text-xl md:text-2xl mb-8 text-[#3A2921] animate-fade-in-up delay-100">The Chumbak Story started with a single goal — to turn emotions into tiny pieces of art. Each magnet tells a story — of love, family, memory, or friendship.</p>
139
+ <a href="https://api.whatsapp.com/send/?phone=918368420841&text&type=phone_number&app_absent=0" target="_blank" class="bg-[#C75B36] hover:bg-[#3A2921] text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 inline-block animate-pulse-slow">Make Your Custom Order</a>
140
+ </div>
141
+ </section>
142
+
143
+ <!-- Our Story Section -->
144
+ <section id="story" class="py-20 px-6 bg-[#D9A66F]">
145
+ <div class="container mx-auto max-w-4xl">
146
+ <div class="text-center mb-16">
147
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 text-[#3A2921]">Why We Do What We Do</h2>
148
+ <div class="w-24 h-1 bg-[#C75B36] mx-auto mb-8"></div>
149
+ </div>
150
+
151
+ <div class="flex flex-col md:flex-row items-center gap-10">
152
+ <div class="md:w-1/2">
153
+ <img src="https://images.unsplash.com/photo-1517842645767-c639042777db?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
154
+ alt="Handcrafting magnets"
155
+ class="rounded-xl shadow-lg floating">
156
+ </div>
157
+ <div class="md:w-1/2">
158
+ <p class="text-lg mb-6">It all began with a simple refrigerator door. As a child, I would watch my grandmother carefully arrange photos, notes, and little trinkets on her fridge - each item holding a precious memory. When she passed, those magnets became tangible connections to her love.</p>
159
+ <p class="text-lg mb-6">Years later, when my best friend moved across the country, I wanted to give her something more meaningful than a typical goodbye gift. I created a custom fridge magnet with our favorite photo and a handwritten note on the back. That's when The Chumbak Story was born.</p>
160
+ <p class="text-lg">Today, we handcraft each magnet with the same care and attention we would give to our own memories. Because we believe that the little moments - the everyday joys, the quiet love, the spontaneous laughter - deserve to be celebrated and remembered.</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </section>
165
+
166
+ <!-- Product Gallery -->
167
+ <section id="gallery" class="py-20 px-6 bg-[#f5e9dc]">
168
+ <div class="container mx-auto">
169
+ <div class="text-center mb-16">
170
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 text-[#3A2921]">Memory Gallery</h2>
171
+ <div class="w-24 h-1 bg-[#C75B36] mx-auto mb-8"></div>
172
+ <p class="max-w-2xl mx-auto text-lg">Each Chumbak tells a unique story. Here are some of the memories we've had the honor of preserving.</p>
173
+ </div>
174
+
175
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
176
+ <!-- Magnet 1 -->
177
+ <div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center">
178
+ <img src="https://images.unsplash.com/photo-1518895949257-7621c3c786d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80"
179
+ alt="For Dad's Birthday"
180
+ class="w-full h-64 object-cover rounded-lg mb-4">
181
+ <h3 class="text-xl font-bold mb-2 text-[#3A2921]">For Dad's Birthday</h3>
182
+ <p class="text-[#C75B36]">"His favorite fishing spot, now always with him"</p>
183
+ </div>
184
+
185
+ <!-- Magnet 2 -->
186
+ <div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center">
187
+ <img src="https://images.unsplash.com/photo-1529257414772-1960b7bea4eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
188
+ alt="First Anniversary"
189
+ class="w-full h-64 object-cover rounded-lg mb-4">
190
+ <h3 class="text-xl font-bold mb-2 text-[#3A2921]">First Anniversary</h3>
191
+ <p class="text-[#C75B36]">"The restaurant where we had our first date"</p>
192
+ </div>
193
+
194
+ <!-- Magnet 3 -->
195
+ <div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center">
196
+ <img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80"
197
+ alt="Housewarming Memory"
198
+ class="w-full h-64 object-cover rounded-lg mb-4">
199
+ <h3 class="text-xl font-bold mb-2 text-[#3A2921]">Housewarming Memory</h3>
200
+ <p class="text-[#C75B36]">"The key to our first home together"</p>
201
+ </div>
202
+
203
+ <!-- Magnet 4 -->
204
+ <div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center">
205
+ <img src="https://images.unsplash.com/photo-1527481138388-31827a7c395d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
206
+ alt="Graduation Day"
207
+ class="w-full h-64 object-cover rounded-lg mb-4">
208
+ <h3 class="text-xl font-bold mb-2 text-[#3A2921]">Graduation Day</h3>
209
+ <p class="text-[#C75B36]">"A proud moment frozen in time"</p>
210
+ </div>
211
+
212
+ <!-- Magnet 5 -->
213
+ <div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center">
214
+ <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
215
+ alt="Family Vacation"
216
+ class="w-full h-64 object-cover rounded-lg mb-4">
217
+ <h3 class="text-xl font-bold mb-2 text-[#3A2921]">Family Vacation</h3>
218
+ <p class="text-[#C75B36]">"That perfect sunset we all watched together"</p>
219
+ </div>
220
+
221
+ <!-- Magnet 6 -->
222
+ <div class="magnet-card bg-white p-6 rounded-xl shadow-md text-center">
223
+ <img src="https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
224
+ alt="Best Friends Forever"
225
+ class="w-full h-64 object-cover rounded-lg mb-4">
226
+ <h3 class="text-xl font-bold mb-2 text-[#3A2921]">Best Friends Forever</h3>
227
+ <p class="text-[#C75B36]">"Our inside joke that never gets old"</p>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </section>
232
+
233
+ <!-- Testimonials -->
234
+ <section id="testimonials" class="py-20 px-6 bg-[#D9A66F]">
235
+ <div class="container mx-auto max-w-6xl">
236
+ <div class="text-center mb-16">
237
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 text-[#3A2921]">Memories Shared</h2>
238
+ <div class="w-24 h-1 bg-[#C75B36] mx-auto mb-8"></div>
239
+ <p class="max-w-2xl mx-auto text-lg">Here's what some of our customers say about their Chumbak memories</p>
240
+ </div>
241
+
242
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
243
+ <!-- Testimonial 1 -->
244
+ <div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
245
+ <div class="text-[#C75B36] text-4xl mb-4">"</div>
246
+ <p class="text-lg mb-6">Every morning when I get milk for my coffee, I see the Chumbak my daughter made of our last family vacation. It's the first thing that makes me smile each day.</p>
247
+ <div class="flex items-center">
248
+ <div class="w-12 h-12 rounded-full bg-[#3A2921] mr-4"></div>
249
+ <div>
250
+ <h4 class="font-bold">Sarah K.</h4>
251
+ <p class="text-sm text-[#C75B36]">Mother of two</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Testimonial 2 -->
257
+ <div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
258
+ <div class="text-[#C75B36] text-4xl mb-4">"</div>
259
+ <p class="text-lg mb-6">I gave my husband a Chumbak with our wedding photo for our anniversary. He cried when he saw it, and now it holds up all our important reminders on the fridge.</p>
260
+ <div class="flex items-center">
261
+ <div class="w-12 h-12 rounded-full bg-[#3A2921] mr-4"></div>
262
+ <div>
263
+ <h4 class="font-bold">Michael & Jen</h4>
264
+ <p class="text-sm text-[#C75B36]">Married 5 years</p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Testimonial 3 -->
270
+ <div class="testimonial-card bg-white p-8 rounded-xl shadow-md">
271
+ <div class="text-[#C75B36] text-4xl mb-4">"</div>
272
+ <p class="text-lg mb-6">After my mom passed, my siblings and I each got a Chumbak made from her favorite recipe card. It's like having a little piece of her in our kitchens.</p>
273
+ <div class="flex items-center">
274
+ <div class="w-12 h-12 rounded-full bg-[#3A2921] mr-4"></div>
275
+ <div>
276
+ <h4 class="font-bold">The Thompson Family</h4>
277
+ <p class="text-sm text-[#C75B36]">Keeping memories alive</p>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </section>
284
+
285
+ <!-- Custom Order CTA -->
286
+ <section id="order" class="py-20 px-6 bg-[#3A2921] text-white">
287
+ <div class="container mx-auto max-w-4xl text-center">
288
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Have a Story to Turn into a Chumbak?</h2>
289
+ <p class="text-xl mb-10 max-w-2xl mx-auto">We'll help you turn your memory into something you can hold.</p>
290
+ <a href="https://api.whatsapp.com/send/?phone=918368420841&text&type=phone_number&app_absent=0" target="_blank" class="bg-[#C75B36] hover:bg-[#D9A66F] text-white font-bold py-4 px-12 rounded-full text-lg transition duration-300 inline-block">Make Your Custom Order</a>
291
+
292
+ <div class="mt-16 flex justify-center">
293
+ <div class="w-24 h-24 rounded-full bg-[#C75B36] flex items-center justify-center text-white text-4xl floating">
294
+ <i class="fas fa-heart"></i>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </section>
299
+
300
+ <!-- Footer -->
301
+ <footer class="bg-[#C75B36] text-white py-12 px-6">
302
+ <div class="container mx-auto">
303
+ <div class="flex flex-col md:flex-row justify-between items-center">
304
+ <div class="mb-8 md:mb-0">
305
+ <h3 class="text-2xl font-bold font-serif mb-4">The Chumbak Story</h3>
306
+ <p class="italic">"A memory on your fridge. A smile in your heart."</p>
307
+ </div>
308
+
309
+ <div class="flex flex-col md:flex-row md:space-x-12 space-y-4 md:space-y-0 text-center md:text-left">
310
+ <div>
311
+ <h4 class="font-bold mb-2">Explore</h4>
312
+ <ul class="space-y-1">
313
+ <li><a href="#story" class="hover:text-[#3A2921] transition">Our Story</a></li>
314
+ <li><a href="#gallery" class="hover:text-[#3A2921] transition">Gallery</a></li>
315
+ <li><a href="#testimonials" class="hover:text-[#3A2921] transition">Memories</a></li>
316
+ </ul>
317
+ </div>
318
+
319
+ <div>
320
+ <h4 class="font-bold mb-2">Connect</h4>
321
+ <ul class="space-y-1">
322
+ <li><a href="#" class="hover:text-[#3A2921] transition">Contact Us</a></li>
323
+ <li><a href="#" class="hover:text-[#3A2921] transition">Instagram</a></li>
324
+ <li><a href="#" class="hover:text-[#3A2921] transition">Facebook</a></li>
325
+ </ul>
326
+ </div>
327
+
328
+ <div>
329
+ <h4 class="font-bold mb-2">Legal</h4>
330
+ <ul class="space-y-1">
331
+ <li><a href="#" class="hover:text-[#3A2921] transition">Privacy Policy</a></li>
332
+ <li><a href="#" class="hover:text-[#3A2921] transition">Terms</a></li>
333
+ </ul>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="border-t border-[#D9A66F] mt-12 pt-8 text-center">
339
+ <p>&copy; 2023 The Chumbak Story. All memories preserved.</p>
340
+ </div>
341
+ </div>
342
+ </footer>
343
+
344
+ <script>
345
+ // Simple JavaScript for mobile menu toggle (would be expanded in a real implementation)
346
+ document.querySelector('.md\\:hidden').addEventListener('click', function() {
347
+ // This would toggle a mobile menu in a full implementation
348
+ alert('Mobile menu would open here in a full implementation');
349
+ });
350
+
351
+ // Smooth scrolling for anchor links
352
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
353
+ anchor.addEventListener('click', function (e) {
354
+ e.preventDefault();
355
+
356
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
357
+ behavior: 'smooth'
358
+ });
359
+ });
360
+ });
361
+ </script>
362
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=devdetex/chumbak" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
363
+ </html>