Hugging Face's logo

Spaces:
BladePTK
/
campbento-bliss
Running

App Files Community
BladePTK commited on
Commit
ba08e0a
·
verified ·
1 Parent(s): 0e08bc0

Create beautiful original web site to sell camping products, has to be an original design with bento style landing page

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +259 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Campbento Bliss
3
- emoji: 😻
4
- colorFrom: indigo
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: CampBento Bliss 🏕️
3
+ colorFrom: green
4
+ colorTo: gray
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://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,260 @@
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>CampBento Bliss | Premium Camping Gear</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: '#3B82F6',
16
+ secondary: '#10B981',
17
+ }
18
+ }
19
+ }
20
+ }
21
+ </script>
22
+ <style>
23
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
24
+ * {
25
+ font-family: 'Inter', sans-serif;
26
+ }
27
+ .bento-grid {
28
+ display: grid;
29
+ gap: 1.5rem;
30
+ grid-template-columns: repeat(12, 1fr);
31
+ grid-auto-rows: minmax(200px, auto);
32
+ }
33
+ .bento-item {
34
+ border-radius: 1.5rem;
35
+ overflow: hidden;
36
+ transition: all 0.3s ease;
37
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
38
+ }
39
+ .bento-item:hover {
40
+ transform: translateY(-5px);
41
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
42
+ }
43
+ .gradient-bg {
44
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
49
+ <!-- Navigation -->
50
+ <nav class="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 transition-colors duration-300">
51
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
52
+ <div class="flex justify-between h-16">
53
+ <div class="flex items-center">
54
+ <div class="flex-shrink-0 flex items-center">
55
+ <i data-feather="compass" class="h-8 w-8 text-primary"></i>
56
+ <span class="ml-2 text-xl font-bold text-gray-900 dark:text-white">CampBento Bliss</span>
57
+ </div>
58
+ </div>
59
+ <div class="hidden md:flex items-center space-x-8">
60
+ <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">Tents</a>
61
+ <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">Sleeping Gear</a>
62
+ <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">Cooking</a>
63
+ <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">Lighting</a>
64
+ <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-primary transition-colors">Deals</a>
65
+ </div>
66
+ <div class="flex items-center space-x-4">
67
+ <button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
68
+ <i data-feather="moon" class="hidden dark:block"></i>
69
+ <i data-feather="sun" class="block dark:hidden"></i>
70
+ </button>
71
+ <button class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
72
+ <i data-feather="shopping-cart"></i>
73
+ </button>
74
+ <button class="md:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
75
+ <i data-feather="menu"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ </nav>
81
+
82
+ <!-- Hero Section -->
83
+ <section class="relative gradient-bg text-white py-20">
84
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
85
+ <div class="text-center">
86
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">Adventure Awaits in Every Box</h1>
87
+ <p class="text-xl md:text-2xl mb-8 opacity-90">Curated camping gear bundles for your next outdoor escape</p>
88
+ <button class="bg-white text-primary px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
89
+ Explore Collections
90
+ </button>
91
+ </div>
92
+ </div>
93
+ </section>
94
+
95
+ <!-- Bento Grid Section -->
96
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
97
+ <div class="bento-grid">
98
+ <!-- Featured Tents -->
99
+ <div class="bento-item bg-white dark:bg-gray-800 col-span-12 md:col-span-8 row-span-2 p-6">
100
+ <div class="h-full flex flex-col justify-between">
101
+ <div>
102
+ <span class="inline-block bg-primary text-white px-3 py-1 rounded-full text-sm font-medium">Featured</span>
103
+ <h2 class="text-2xl font-bold mt-4 text-gray-900 dark:text-white">Premium Tents & Shelters</h2>
104
+ <p class="text-gray-600 dark:text-gray-300 mt-2">Weather-resistant designs for ultimate comfort</p>
105
+ </div>
106
+ <img src="http://static.photos/outdoor/640x360/1" alt="Premium Tent" class="mt-4 rounded-xl w-full h-48 object-cover">
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Seasonal Offer -->
111
+ <div class="bento-item bg-secondary text-white col-span-12 md:col-span-4 p-6">
112
+ <div class="h-full flex flex-col justify-between">
113
+ <div>
114
+ <span class="inline-block bg-white text-secondary px-3 py-1 rounded-full text-sm font-medium">Limited Time</span>
115
+ <h2 class="text-2xl font-bold mt-4">Summer Camping Sale</h2>
116
+ <p class="opacity-90 mt-2">Up to 40% off select gear</p>
117
+ </div>
118
+ <button class="mt-4 bg-white text-secondary px-4 py-2 rounded-full font-semibold self-start hover:bg-gray-100 transition-colors">
119
+ Shop Now
120
+ </button>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Sleeping Gear -->
125
+ <div class="bento-item bg-white dark:bg-gray-800 col-span-12 md:col-span-4 p-6">
126
+ <img src="http://static.photos/nature/640x360/2" alt="Sleeping Gear" class="w-full h-32 object-cover rounded-xl mb-4">
127
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white">Sleep Systems</h3>
128
+ <p class="text-gray-600 dark:text-gray-300 mt-2">Bags, pads, and hammocks for restful nights</p>
129
+ </div>
130
+
131
+ <!-- Cooking Equipment -->
132
+ <div class="bento-item bg-white dark:bg-gray-800 col-span-12 md:col-span-4 p-6">
133
+ <img src="http://static.photos/food/640x360/3" alt="Cooking Gear" class="w-full h-32 object-cover rounded-xl mb-4">
134
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white">Camp Kitchen</h3>
135
+ <p class="text-gray-600 dark:text-gray-300 mt-2">Portable stoves and cookware sets</p>
136
+ </div>
137
+
138
+ <!-- Testimonials -->
139
+ <div class="bento-item bg-gray-100 dark:bg-gray-700 col-span-12 md:col-span-6 p-6">
140
+ <div class="flex items-center mb-4">
141
+ <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-current"></i>
142
+ <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-current"></i>
143
+ <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-current"></i>
144
+ <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-current"></i>
145
+ <i data-feather="star" class="h-5 w-5 text-yellow-400 fill-current"></i>
146
+ </div>
147
+ <p class="text-gray-700 dark:text-gray-300 italic">"The gear from CampBento transformed our family camping trips. Everything we need in one perfectly curated box!"</p>
148
+ <p class="mt-4 font-semibold text-gray-900 dark:text-white">- Sarah M.</p>
149
+ </div>
150
+
151
+ <!-- Lighting -->
152
+ <div class="bento-item bg-white dark:bg-gray-800 col-span-12 md:col-span-3 p-6">
153
+ <i data-feather="zap" class="h-8 w-8 text-primary mb-4"></i>
154
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white">Lighting Solutions</h3>
155
+ <p class="text-gray-600 dark:text-gray-300 mt-2">Lanterns, headlamps, and camp lights</p>
156
+ </div>
157
+
158
+ <!-- Newsletter -->
159
+ <div class="bento-item bg-primary text-white col-span-12 md:col-span-3 p-6">
160
+ <h3 class="text-xl font-bold mb-4">Stay Adventurous</h3>
161
+ <p class="opacity-90 mb-4">Get exclusive deals and camping tips</p>
162
+ <div class="flex">
163
+ <input type="email" placeholder="Your email" class="flex-1 px-3 py-2 rounded-l-lg text-gray-900">
164
+ <button class="bg-secondary px-4 py-2 rounded-r-lg font-semibold hover:bg-green-500 transition-colors">
165
+ <i data-feather="send"></i>
166
+ </button>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Adventure Essentials -->
171
+ <div class="bento-item bg-white dark:bg-gray-800 col-span-12 md:col-span-6 p-6">
172
+ <div class="flex items-center justify-between">
173
+ <div>
174
+ <h3 class="text-xl font-bold text-gray-900 dark:text-white">Adventure Essentials</h3>
175
+ <p class="text-gray-600 dark:text-gray-300 mt-2">Navigation tools and safety gear</p>
176
+ </div>
177
+ <img src="http://static.photos/travel/200x200/4" alt="Adventure Gear" class="w-20 h-20 object-cover rounded-xl">
178
+ </div>
179
+ </div>
180
+ </div>
181
+ </main>
182
+
183
+ <!-- Footer -->
184
+ <footer class="bg-gray-800 text-white py-12">
185
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
186
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
187
+ <div>
188
+ <div class="flex items-center mb-4">
189
+ <i data-feather="compass" class="h-6 w-6 text-primary"></i>
190
+ <span class="ml-2 text-lg font-bold">CampBento Bliss</span>
191
+ </div>
192
+ <p class="text-gray-400">Your trusted partner for outdoor adventures since 2024</p>
193
+ </div>
194
+ <div>
195
+ <h4 class="font-semibold mb-4">Shop</h4>
196
+ <ul class="space-y-2 text-gray-400">
197
+ <li><a href="#" class="hover:text-white transition-colors">Tents</a></li>
198
+ <li><a href="#" class="hover:text-white transition-colors">Sleeping Gear</a></li>
199
+ <li><a href="#" class="hover:text-white transition-colors">Cooking</a></li>
200
+ <li><a href="#" class="hover:text-white transition-colors">Lighting</a></li>
201
+ </ul>
202
+ </div>
203
+ <div>
204
+ <h4 class="font-semibold mb-4">Support</h4>
205
+ <ul class="space-y-2 text-gray-400">
206
+ <li><a href="#" class="hover:text-white transition-colors">Contact Us</a></li>
207
+ <li><a href="#" class="hover:text-white transition-colors">Shipping Info</a></li>
208
+ <li><a href="#" class="hover:text-white transition-colors">Returns</a></li>
209
+ <li><a href="#" class="hover:text-white transition-colors">FAQ</a></li>
210
+ </ul>
211
+ </div>
212
+ <div>
213
+ <h4 class="font-semibold mb-4">Connect</h4>
214
+ <div class="flex space-x-4">
215
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
216
+ <i data-feather="facebook"></i>
217
+ </a>
218
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
219
+ <i data-feather="instagram"></i>
220
+ </a>
221
+ <a href="#" class="text-gray-400 hover:text-white transition-colors">
222
+ <i data-feather="twitter"></i>
223
+ </a>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
228
+ <p>&copy; 2024 CampBento Bliss. All rights reserved.</p>
229
+ </div>
230
+ </div>
231
+ </footer>
232
+
233
+ <script>
234
+ // Theme toggle functionality
235
+ const themeToggle = document.getElementById('theme-toggle');
236
+ const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
237
+
238
+ themeToggle.addEventListener('click', () => {
239
+ if (document.documentElement.classList.contains('dark')) {
240
+ document.documentElement.classList.remove('dark');
241
+ localStorage.setItem('theme', 'light');
242
+ } else {
243
+ document.documentElement.classList.add('dark');
244
+ localStorage.setItem('theme', 'dark');
245
+ }
246
+ });
247
+
248
+ // Check for saved theme preference or respect OS preference
249
+ if (localStorage.getItem('theme') === 'dark' ||
250
+ (!localStorage.getItem('theme') && prefersDarkScheme.matches)) {
251
+ document.documentElement.classList.add('dark');
252
+ } else {
253
+ document.documentElement.classList.remove('dark');
254
+ }
255
+
256
+ // Initialize Feather Icons
257
+ feather.replace();
258
+ </script>
259
+ </body>
260
  </html>