littlebird13 commited on
Commit
32681cf
·
verified ·
1 Parent(s): 4f6e8a2

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +336 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: 👁
4
- colorFrom: yellow
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: test
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,336 @@
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>Creative Studio | Welcome</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
+ @keyframes float {
11
+ 0%, 100% {
12
+ transform: translateY(0);
13
+ }
14
+ 50% {
15
+ transform: translateY(-20px);
16
+ }
17
+ }
18
+ .floating {
19
+ animation: float 6s ease-in-out infinite;
20
+ }
21
+ .gradient-text {
22
+ background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
23
+ -webkit-background-clip: text;
24
+ background-clip: text;
25
+ color: transparent;
26
+ }
27
+ .blob {
28
+ filter: blur(60px);
29
+ opacity: 0.7;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-900 text-white overflow-x-hidden">
34
+ <!-- Blob background elements -->
35
+ <div class="fixed -left-40 -top-40 w-80 h-80 rounded-full bg-purple-600 blob"></div>
36
+ <div class="fixed -right-40 bottom-20 w-96 h-96 rounded-full bg-indigo-600 blob"></div>
37
+
38
+ <!-- Navigation -->
39
+ <nav class="relative z-10 py-6 px-6 lg:px-16 flex justify-between items-center">
40
+ <div class="text-2xl font-bold gradient-text">CreativeStudio</div>
41
+ <div class="hidden md:flex space-x-8">
42
+ <a href="#" class="hover:text-purple-400 transition">Home</a>
43
+ <a href="#" class="hover:text-purple-400 transition">Works</a>
44
+ <a href="#" class="hover:text-purple-400 transition">Services</a>
45
+ <a href="#" class="hover:text-purple-400 transition">About</a>
46
+ <a href="#" class="hover:text-purple-400 transition">Contact</a>
47
+ </div>
48
+ <button class="md:hidden text-2xl" id="menu-toggle">
49
+ <i class="fas fa-bars"></i>
50
+ </button>
51
+ </nav>
52
+
53
+ <!-- Hero Section -->
54
+ <section class="relative z-10 px-6 lg:px-16 py-20 md:py-32">
55
+ <div class="max-w-5xl mx-auto text-center">
56
+ <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
57
+ We craft <span class="gradient-text">digital experiences</span> that inspire
58
+ </h1>
59
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-12">
60
+ Our studio combines creativity and technology to build beautiful, functional digital products that people love.
61
+ </p>
62
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
63
+ <button class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full font-semibold hover:shadow-lg hover:shadow-purple-500/20 transition">
64
+ Get Started
65
+ </button>
66
+ <button class="px-8 py-4 border border-gray-700 rounded-full font-semibold hover:bg-gray-800 transition">
67
+ View Portfolio
68
+ </button>
69
+ </div>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- Features Section -->
74
+ <section class="relative z-10 px-6 lg:px-16 py-16 md:py-24 bg-gray-800/30 backdrop-blur-lg rounded-3xl mx-4 md:mx-16 my-12">
75
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
76
+ What we offer
77
+ </h2>
78
+ <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
79
+ <!-- Feature 1 -->
80
+ <div class="bg-gray-800/50 p-8 rounded-2xl hover:bg-gray-800/70 transition transform hover:-translate-y-2">
81
+ <div class="w-16 h-16 rounded-xl bg-indigo-600 flex items-center justify-center mb-6">
82
+ <i class="fas fa-paint-brush text-2xl"></i>
83
+ </div>
84
+ <h3 class="text-xl font-bold mb-3">UI/UX Design</h3>
85
+ <p class="text-gray-300">
86
+ Beautiful, intuitive interfaces designed for seamless user experiences across all devices.
87
+ </p>
88
+ </div>
89
+ <!-- Feature 2 -->
90
+ <div class="bg-gray-800/50 p-8 rounded-2xl hover:bg-gray-800/70 transition transform hover:-translate-y-2">
91
+ <div class="w-16 h-16 rounded-xl bg-purple-600 flex items-center justify-center mb-6">
92
+ <i class="fas fa-code text-2xl"></i>
93
+ </div>
94
+ <h3 class="text-xl font-bold mb-3">Web Development</h3>
95
+ <p class="text-gray-300">
96
+ Custom web applications built with modern technologies for performance and scalability.
97
+ </p>
98
+ </div>
99
+ <!-- Feature 3 -->
100
+ <div class="bg-gray-800/50 p-8 rounded-2xl hover:bg-gray-800/70 transition transform hover:-translate-y-2">
101
+ <div class="w-16 h-16 rounded-xl bg-pink-600 flex items-center justify-center mb-6">
102
+ <i class="fas fa-chart-line text-2xl"></i>
103
+ </div>
104
+ <h3 class="text-xl font-bold mb-3">Digital Strategy</h3>
105
+ <p class="text-gray-300">
106
+ Data-driven strategies to grow your online presence and engage your target audience.
107
+ </p>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Showcase Section -->
113
+ <section class="relative z-10 px-6 lg:px-16 py-16 md:py-24">
114
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
115
+ Our Recent Work
116
+ </h2>
117
+ <p class="text-gray-400 text-center mb-16 max-w-2xl mx-auto">
118
+ Here's a selection of our favorite projects we've completed recently.
119
+ </p>
120
+ <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto" id="projects-container">
121
+ <!-- Projects will be added by JavaScript -->
122
+ </div>
123
+ </section>
124
+
125
+ <!-- Testimonials -->
126
+ <section class="relative z-10 px-6 lg:px-16 py-16 md:py-24 bg-gray-800/30 backdrop-blur-lg rounded-3xl mx-4 md:mx-16 my-12">
127
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">
128
+ What our clients say
129
+ </h2>
130
+ <div class="max-w-4xl mx-auto">
131
+ <div class="relative p-8 md:p-12 bg-gray-800/50 rounded-3xl text-center">
132
+ <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 w-16 h-16 rounded-full overflow-hidden border-4 border-purple-600">
133
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-full h-full object-cover">
134
+ </div>
135
+ <p class="text-xl italic mb-6">
136
+ "Working with CreativeStudio transformed our online presence. Their team delivered beyond our expectations with creative solutions and attention to detail."
137
+ </p>
138
+ <h4 class="font-bold text-lg mb-1">Sarah Johnson</h4>
139
+ <p class="text-gray-400 text-sm">CEO, TechSolutions</p>
140
+ <div class="flex justify-center mt-4 space-x-1">
141
+ <i class="fas fa-star text-yellow-400"></i>
142
+ <i class="fas fa-star text-yellow-400"></i>
143
+ <i class="fas fa-star text-yellow-400"></i>
144
+ <i class="fas fa-star text-yellow-400"></i>
145
+ <i class="fas fa-star text-yellow-400"></i>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </section>
150
+
151
+ <!-- CTA Section -->
152
+ <section class="relative z-10 px-6 lg:px-16 py-20 md:py-32 text-center">
153
+ <div class="max-w-4xl mx-auto bg-gradient-to-r from-indigo-900/50 to-purple-900/50 p-16 rounded-3xl">
154
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to bring your ideas to life?</h2>
155
+ <p class="text-xl text-gray-300 mb-8">Let's create something amazing together.</p>
156
+ <button class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full font-semibold hover:shadow-lg hover:shadow-purple-500/20 transition">
157
+ Start Your Project
158
+ </button>
159
+ </div>
160
+ </section>
161
+
162
+ <!-- Footer -->
163
+ <footer class="relative z-10 px-6 lg:px-16 py-12 border-t border-gray-800">
164
+ <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
165
+ <div>
166
+ <div class="text-2xl font-bold gradient-text mb-4">CreativeStudio</div>
167
+ <p class="text-gray-400">Creating digital experiences that captivate and convert.</p>
168
+ </div>
169
+ <div>
170
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
171
+ <ul class="space-y-2">
172
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
173
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li>
174
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Portfolio</a></li>
175
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
176
+ </ul>
177
+ </div>
178
+ <div>
179
+ <h4 class="text-lg font-semibold mb-4">Services</h4>
180
+ <ul class="space-y-2">
181
+ <li><a href="#" class="text-gray-400 hover:text-white transition">UI/UX Design</a></li>
182
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Web Development</a></li>
183
+ <li><a href="#" class="text-gray-400 hover:text-white transition">App Development</a></li>
184
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Branding</a></li>
185
+ </ul>
186
+ </div>
187
+ <div>
188
+ <h4 class="text-lg font-semibold mb-4">Connect</h4>
189
+ <div class="flex space-x-4">
190
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-indigo-600 transition">
191
+ <i class="fab fa-twitter"></i>
192
+ </a>
193
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-600 transition">
194
+ <i class="fab fa-linkedin"></i>
195
+ </a>
196
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-pink-600 transition">
197
+ <i class="fab fa-instagram"></i>
198
+ </a>
199
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-blue-500 transition">
200
+ <i class="fab fa-facebook"></i>
201
+ </a>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ <div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
206
+ <p>&copy; 2023 CreativeStudio. All rights reserved.</p>
207
+ </div>
208
+ </footer>
209
+
210
+ <!-- Floating elements -->
211
+ <div class="fixed bottom-6 right-6 w-16 h-16 rounded-full bg-indigo-600 flex items-center justify-center shadow-xl hover:shadow-2xl transition floating cursor-pointer" id="chat-button">
212
+ <i class="fas fa-comment-dots text-2xl"></i>
213
+ </div>
214
+
215
+ <!-- Chat window (hidden by default) -->
216
+ <div id="chat-window" class="fixed bottom-24 right-6 w-80 h-96 bg-gray-800 rounded-2xl shadow-2xl hidden flex flex-col border border-gray-700 overflow-hidden">
217
+ <div class="bg-gray-900 px-4 py-3 flex justify-between items-center border-b border-gray-700">
218
+ <h3 class="font-semibold">Live Chat</h3>
219
+ <button id="close-chat" class="text-gray-400 hover:text-white">
220
+ <i class="fas fa-times"></i>
221
+ </button>
222
+ </div>
223
+ <div class="flex-1 p-4 overflow-y-auto" id="chat-messages">
224
+ <div class="mb-4">
225
+ <div class="bg-gray-700 rounded-xl p-3 inline-block max-w-xs">
226
+ <p>Hello! How can we help you today?</p>
227
+ </div>
228
+ <p class="text-xs text-gray-400 mt-1">CreativeStudio Support</p>
229
+ </div>
230
+ </div>
231
+ <div class="p-3 border-t border-gray-700">
232
+ <div class="flex items-center bg-gray-700 rounded-xl px-4 py-2">
233
+ <input type="text" placeholder="Type a message..." class="flex-1 bg-transparent outline-none">
234
+ <button class="ml-2 text-purple-400">
235
+ <i class="fas fa-paper-plane"></i>
236
+ </button>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Mobile menu (hidden by default) -->
242
+ <div id="mobile-menu" class="fixed inset-0 bg-gray-900/90 backdrop-blur-md z-50 flex items-center justify-center hidden">
243
+ <div class="text-center">
244
+ <button id="close-menu" class="absolute top-6 right-6 text-2xl">
245
+ <i class="fas fa-times"></i>
246
+ </button>
247
+ <ul class="space-y-8 text-2xl">
248
+ <li><a href="#" class="hover:text-purple-400 transition">Home</a></li>
249
+ <li><a href="#" class="hover:text-purple-400 transition">Works</a></li>
250
+ <li><a href="#" class="hover:text-purple-400 transition">Services</a></li>
251
+ <li><a href="#" class="hover:text-purple-400 transition">About</a></li>
252
+ <li><a href="#" class="hover:text-purple-400 transition">Contact</a></li>
253
+ </ul>
254
+ </div>
255
+ </div>
256
+
257
+ <script>
258
+ // Project data
259
+ const projects = [
260
+ {
261
+ title: "E-commerce Platform",
262
+ description: "A modern e-commerce solution with seamless checkout experience",
263
+ tags: ["UI/UX", "Web Development"],
264
+ color: "bg-indigo-600"
265
+ },
266
+ {
267
+ title: "Mobile Banking App",
268
+ description: "Secure and intuitive banking application for iOS and Android",
269
+ tags: ["App Design", "Development"],
270
+ color: "bg-purple-600"
271
+ },
272
+ {
273
+ title: "Corporate Website",
274
+ description: "Responsive website with CMS for easy content management",
275
+ tags: ["Web Design", "CMS"],
276
+ color: "bg-pink-600"
277
+ },
278
+ {
279
+ title: "SaaS Dashboard",
280
+ description: "Analytics dashboard with real-time data visualization",
281
+ tags: ["UI/UX", "Data Visualization"],
282
+ color: "bg-blue-600"
283
+ }
284
+ ];
285
+
286
+ // Load projects
287
+ document.addEventListener('DOMContentLoaded', function() {
288
+ const projectsContainer = document.getElementById('projects-container');
289
+
290
+ projects.forEach(project => {
291
+ const projectEl = document.createElement('div');
292
+ projectEl.className = 'flex flex-col rounded-2xl overflow-hidden group cursor-pointer';
293
+ projectEl.innerHTML = `
294
+ <div class="aspect-video ${project.color} flex items-center justify-center text-5xl text-white/30">
295
+ <i class="fas fa-image group-hover:scale-110 transition-transform"></i>
296
+ </div>
297
+ <div class="p-6 bg-gray-800/50 group-hover:bg-gray-800 transition">
298
+ <h3 class="text-xl font-bold mb-2">${project.title}</h3>
299
+ <p class="text-gray-300 mb-4">${project.description}</p>
300
+ <div class="flex flex-wrap gap-2">
301
+ ${project.tags.map(tag => `<span class="text-xs px-3 py-1 rounded-full bg-gray-700">${tag}</span>`).join('')}
302
+ </div>
303
+ </div>
304
+ `;
305
+ projectsContainer.appendChild(projectEl);
306
+ });
307
+
308
+ // Chat toggle
309
+ const chatButton = document.getElementById('chat-button');
310
+ const chatWindow = document.getElementById('chat-window');
311
+ const closeChat = document.getElementById('close-chat');
312
+
313
+ chatButton.addEventListener('click', function() {
314
+ chatWindow.classList.toggle('hidden');
315
+ });
316
+
317
+ closeChat.addEventListener('click', function() {
318
+ chatWindow.classList.add('hidden');
319
+ });
320
+
321
+ // Mobile menu toggle
322
+ const menuToggle = document.getElementById('menu-toggle');
323
+ const mobileMenu = document.getElementById('mobile-menu');
324
+ const closeMenu = document.getElementById('close-menu');
325
+
326
+ menuToggle.addEventListener('click', function() {
327
+ mobileMenu.classList.remove('hidden');
328
+ });
329
+
330
+ closeMenu.addEventListener('click', function() {
331
+ mobileMenu.classList.add('hidden');
332
+ });
333
+ });
334
+ </script>
335
+ <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=littlebird13/test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
336
+ </html>