Hugging Face's logo

Spaces:
MansoorSarookh
/
firstexperience
Running

App Files Community
MansoorSarookh commited on
Commit
39587d5
·
verified ·
1 Parent(s): 10ebb64

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +390 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Firstexperience
3
- emoji: 🐨
4
- colorFrom: pink
5
  colorTo: gray
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: firstexperience
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,390 @@
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>AI Assistant | Your Intelligent Helper</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
12
+ }
13
+ .card-hover {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .card-hover:hover {
17
+ transform: translateY(-8px);
18
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
19
+ }
20
+ .typewriter {
21
+ overflow: hidden;
22
+ border-right: .15em solid #6366f1;
23
+ white-space: nowrap;
24
+ margin: 0 auto;
25
+ letter-spacing: .15em;
26
+ animation:
27
+ typing 3.5s steps(40, end),
28
+ blink-caret .75s step-end infinite;
29
+ }
30
+ @keyframes typing {
31
+ from { width: 0 }
32
+ to { width: 100% }
33
+ }
34
+ @keyframes blink-caret {
35
+ from, to { border-color: transparent }
36
+ 50% { border-color: #6366f1; }
37
+ }
38
+ .floating {
39
+ animation: floating 3s ease-in-out infinite;
40
+ }
41
+ @keyframes floating {
42
+ 0% { transform: translateY(0px); }
43
+ 50% { transform: translateY(-15px); }
44
+ 100% { transform: translateY(0px); }
45
+ }
46
+ .glow {
47
+ box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="min-h-screen bg-gray-50 font-sans antialiased">
52
+ <!-- Header with animated gradient -->
53
+ <header class="gradient-bg text-white shadow-xl relative overflow-hidden">
54
+ <div class="absolute inset-0 opacity-20">
55
+ <div class="absolute top-0 left-0 w-64 h-64 rounded-full bg-purple-300 mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
56
+ <div class="absolute top-0 right-0 w-64 h-64 rounded-full bg-pink-300 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
57
+ <div class="absolute bottom-0 right-0 w-64 h-64 rounded-full bg-blue-300 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
58
+ </div>
59
+ <div class="container mx-auto px-6 py-16 relative z-10">
60
+ <div class="flex flex-col md:flex-row items-center justify-between">
61
+ <div class="mb-10 md:mb-0 md:w-2/3">
62
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight">Your Personal <span class="text-indigo-200">AI Assistant</span></h1>
63
+ <p class="text-xl md:text-2xl opacity-90 mb-6">Intelligent, helpful, and always available</p>
64
+ <button id="tryMeBtn" class="bg-white text-indigo-600 px-8 py-3 rounded-full font-semibold hover:bg-indigo-50 transition-all duration-300 transform hover:scale-105 shadow-lg">
65
+ Try Me Now <i class="fas fa-arrow-right ml-2"></i>
66
+ </button>
67
+ </div>
68
+ <div class="w-48 h-48 md:w-64 md:h-64 rounded-full bg-white bg-opacity-20 flex items-center justify-center border-4 border-white border-opacity-30 floating">
69
+ <i class="fas fa-robot text-7xl md:text-8xl text-white"></i>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </header>
74
+
75
+ <!-- Floating chat button -->
76
+ <div id="chatBtn" class="fixed bottom-8 right-8 w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center text-white text-2xl shadow-xl cursor-pointer transform hover:scale-110 transition-transform duration-300 glow hidden">
77
+ <i class="fas fa-comment-dots"></i>
78
+ </div>
79
+
80
+ <!-- Main Content -->
81
+ <main class="container mx-auto px-6 py-16">
82
+ <!-- Introduction Section -->
83
+ <section class="mb-20">
84
+ <div class="text-center mb-12">
85
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Meet Your New <span class="text-indigo-600">AI Companion</span></h2>
86
+ <div class="w-24 h-1 bg-indigo-500 mx-auto mb-6"></div>
87
+ <p class="text-gray-600 max-w-3xl mx-auto text-lg">
88
+ I'm not just a program—I'm your intelligent partner ready to assist with any task, answer any question,
89
+ and help you be more productive and creative.
90
+ </p>
91
+ </div>
92
+
93
+ <div class="bg-white rounded-2xl shadow-xl p-8 mb-12 relative overflow-hidden">
94
+ <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-indigo-500 to-purple-500"></div>
95
+ <div class="flex flex-col md:flex-row items-center">
96
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
97
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">Why Choose Me?</h3>
98
+ <ul class="space-y-4">
99
+ <li class="flex items-start">
100
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
101
+ <i class="fas fa-bolt text-indigo-600"></i>
102
+ </div>
103
+ <span class="text-gray-700">Instant responses to your questions</span>
104
+ </li>
105
+ <li class="flex items-start">
106
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
107
+ <i class="fas fa-infinity text-indigo-600"></i>
108
+ </div>
109
+ <span class="text-gray-700">Vast knowledge across countless topics</span>
110
+ </li>
111
+ <li class="flex items-start">
112
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
113
+ <i class="fas fa-clock text-indigo-600"></i>
114
+ </div>
115
+ <span class="text-gray-700">Available 24/7 whenever you need help</span>
116
+ </li>
117
+ <li class="flex items-start">
118
+ <div class="bg-indigo-100 p-2 rounded-full mr-4">
119
+ <i class="fas fa-brain text-indigo-600"></i>
120
+ </div>
121
+ <span class="text-gray-700">Continuously learning and improving</span>
122
+ </li>
123
+ </ul>
124
+ </div>
125
+ <div class="md:w-1/2 bg-gray-50 rounded-xl p-6 border border-gray-200">
126
+ <div class="typewriter text-xl font-mono text-indigo-600 mb-4">
127
+ How can I help you today?
128
+ </div>
129
+ <div class="bg-white rounded-lg p-4 shadow-sm mb-4">
130
+ <p class="text-gray-700 italic">"Explain quantum computing like I'm 5 years old"</p>
131
+ </div>
132
+ <div class="bg-indigo-50 rounded-lg p-4 shadow-sm">
133
+ <p class="text-gray-800">Quantum computing is like having a magical box that can look at all your toys at once, instead of one at a time like regular computers!</p>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- Features Section -->
141
+ <section class="mb-20">
142
+ <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">What I Can Do For You</h2>
143
+
144
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
145
+ <!-- Card 1 -->
146
+ <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover">
147
+ <div class="bg-indigo-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto">
148
+ <i class="fas fa-lightbulb text-indigo-600 text-2xl"></i>
149
+ </div>
150
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Creative Brainstorming</h3>
151
+ <p class="text-gray-600 text-center">
152
+ Generate ideas for projects, names, stories, or anything else you need creative input on.
153
+ </p>
154
+ </div>
155
+
156
+ <!-- Card 2 -->
157
+ <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover">
158
+ <div class="bg-blue-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto">
159
+ <i class="fas fa-code text-blue-600 text-2xl"></i>
160
+ </div>
161
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Code Assistance</h3>
162
+ <p class="text-gray-600 text-center">
163
+ Explain concepts, debug code, suggest improvements, or generate code in multiple languages.
164
+ </p>
165
+ </div>
166
+
167
+ <!-- Card 3 -->
168
+ <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover">
169
+ <div class="bg-purple-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto">
170
+ <i class="fas fa-book text-purple-600 text-2xl"></i>
171
+ </div>
172
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Learning & Education</h3>
173
+ <p class="text-gray-600 text-center">
174
+ Break down complex topics, create study guides, or quiz you on any subject.
175
+ </p>
176
+ </div>
177
+
178
+ <!-- Card 4 -->
179
+ <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover">
180
+ <div class="bg-pink-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto">
181
+ <i class="fas fa-pen-fancy text-pink-600 text-2xl"></i>
182
+ </div>
183
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Content Creation</h3>
184
+ <p class="text-gray-600 text-center">
185
+ Write emails, articles, social media posts, poems, and more tailored to your needs.
186
+ </p>
187
+ </div>
188
+
189
+ <!-- Card 5 -->
190
+ <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover">
191
+ <div class="bg-green-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto">
192
+ <i class="fas fa-chart-line text-green-600 text-2xl"></i>
193
+ </div>
194
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Productivity Boost</h3>
195
+ <p class="text-gray-600 text-center">
196
+ Help with planning, organization, time management, and decision making.
197
+ </p>
198
+ </div>
199
+
200
+ <!-- Card 6 -->
201
+ <div class="bg-white rounded-2xl shadow-lg p-8 transition-all duration-300 card-hover">
202
+ <div class="bg-yellow-100 w-16 h-16 rounded-xl flex items-center justify-center mb-6 mx-auto">
203
+ <i class="fas fa-globe text-yellow-600 text-2xl"></i>
204
+ </div>
205
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-4">Language Support</h3>
206
+ <p class="text-gray-600 text-center">
207
+ Translate text, explain grammar, or help with language learning in multiple languages.
208
+ </p>
209
+ </div>
210
+ </div>
211
+ </section>
212
+
213
+ <!-- Testimonials -->
214
+ <section class="mb-20">
215
+ <h2 class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-12">What People Say</h2>
216
+
217
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
218
+ <div class="bg-white p-8 rounded-2xl shadow-lg border-t-4 border-indigo-500">
219
+ <div class="flex items-center mb-4">
220
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
221
+ <i class="fas fa-user text-indigo-600"></i>
222
+ </div>
223
+ <div>
224
+ <h4 class="font-bold text-gray-800">Sarah K.</h4>
225
+ <p class="text-gray-500 text-sm">Web Developer</p>
226
+ </div>
227
+ </div>
228
+ <p class="text-gray-600 italic">
229
+ "This AI has saved me countless hours debugging code. It explains concepts clearly and suggests solutions I wouldn't have thought of."
230
+ </p>
231
+ <div class="flex mt-4 text-yellow-400">
232
+ <i class="fas fa-star"></i>
233
+ <i class="fas fa-star"></i>
234
+ <i class="fas fa-star"></i>
235
+ <i class="fas fa-star"></i>
236
+ <i class="fas fa-star"></i>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="bg-white p-8 rounded-2xl shadow-lg border-t-4 border-indigo-500">
241
+ <div class="flex items-center mb-4">
242
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
243
+ <i class="fas fa-user text-indigo-600"></i>
244
+ </div>
245
+ <div>
246
+ <h4 class="font-bold text-gray-800">Michael T.</h4>
247
+ <p class="text-gray-500 text-sm">Student</p>
248
+ </div>
249
+ </div>
250
+ <p class="text-gray-600 italic">
251
+ "As a student, this has been invaluable for understanding complex topics. It breaks things down in ways that make sense to me."
252
+ </p>
253
+ <div class="flex mt-4 text-yellow-400">
254
+ <i class="fas fa-star"></i>
255
+ <i class="fas fa-star"></i>
256
+ <i class="fas fa-star"></i>
257
+ <i class="fas fa-star"></i>
258
+ <i class="fas fa-star-half-alt"></i>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="bg-white p-8 rounded-2xl shadow-lg border-t-4 border-indigo-500">
263
+ <div class="flex items-center mb-4">
264
+ <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
265
+ <i class="fas fa-user text-indigo-600"></i>
266
+ </div>
267
+ <div>
268
+ <h4 class="font-bold text-gray-800">Lisa M.</h4>
269
+ <p class="text-gray-500 text-sm">Content Creator</p>
270
+ </div>
271
+ </div>
272
+ <p class="text-gray-600 italic">
273
+ "I use this daily for content ideas and drafts. It's like having a creative partner who's always available with fresh perspectives."
274
+ </p>
275
+ <div class="flex mt-4 text-yellow-400">
276
+ <i class="fas fa-star"></i>
277
+ <i class="fas fa-star"></i>
278
+ <i class="fas fa-star"></i>
279
+ <i class="fas fa-star"></i>
280
+ <i class="fas fa-star"></i>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </section>
285
+
286
+ <!-- CTA Section -->
287
+ <section class="gradient-bg text-white rounded-3xl shadow-2xl p-12 text-center">
288
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Experience AI Assistance?</h2>
289
+ <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
290
+ Start your journey with an intelligent assistant that's available anytime, anywhere.
291
+ </p>
292
+ <button id="startNowBtn" class="bg-white text-indigo-600 px-10 py-4 rounded-full font-bold text-lg hover:bg-indigo-50 transition-all duration-300 transform hover:scale-105 shadow-xl">
293
+ Start Now <i class="fas fa-arrow-right ml-2"></i>
294
+ </button>
295
+ </section>
296
+ </main>
297
+
298
+ <!-- Footer -->
299
+ <footer class="bg-gray-800 text-white py-12">
300
+ <div class="container mx-auto px-6">
301
+ <div class="flex flex-col md:flex-row justify-between items-center">
302
+ <div class="mb-6 md:mb-0">
303
+ <div class="flex items-center">
304
+ <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
305
+ <i class="fas fa-robot"></i>
306
+ </div>
307
+ <span class="text-xl font-bold">AI Assistant</span>
308
+ </div>
309
+ <p class="text-gray-400 mt-2">Your intelligent partner for all tasks</p>
310
+ </div>
311
+ <div class="flex space-x-6">
312
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
313
+ <i class="fab fa-twitter text-xl"></i>
314
+ </a>
315
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
316
+ <i class="fab fa-github text-xl"></i>
317
+ </a>
318
+ <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
319
+ <i class="fab fa-linkedin text-xl"></i>
320
+ </a>
321
+ </div>
322
+ </div>
323
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
324
+ <p>&copy; 2023 AI Assistant. All rights reserved.</p>
325
+ </div>
326
+ </div>
327
+ </footer>
328
+
329
+ <!-- Simple Chat Modal -->
330
+ <div id="chatModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
331
+ <div class="bg-white rounded-2xl w-full max-w-md mx-4 overflow-hidden">
332
+ <div class="bg-indigo-600 text-white p-4 flex justify-between items-center">
333
+ <h3 class="font-bold text-lg">AI Assistant</h3>
334
+ <button id="closeChatBtn" class="text-white hover:text-indigo-200">
335
+ <i class="fas fa-times"></i>
336
+ </button>
337
+ </div>
338
+ <div class="p-4 h-64 overflow-y-auto bg-gray-50">
339
+ <div class="flex mb-4">
340
+ <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
341
+ <i class="fas fa-robot text-indigo-600"></i>
342
+ </div>
343
+ <div class="bg-white p-3 rounded-lg shadow-sm max-w-xs">
344
+ <p>Hello! How can I help you today?</p>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ <div class="p-4 border-t border-gray-200">
349
+ <div class="flex">
350
+ <input type="text" placeholder="Type your message..." class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
351
+ <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition-colors">
352
+ <i class="fas fa-paper-plane"></i>
353
+ </button>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <script>
360
+ // Show chat button when "Try Me" is clicked
361
+ document.getElementById('tryMeBtn').addEventListener('click', function() {
362
+ document.getElementById('chatBtn').classList.remove('hidden');
363
+ document.getElementById('chatModal').classList.remove('hidden');
364
+ });
365
+
366
+ // Show chat modal when chat button is clicked
367
+ document.getElementById('chatBtn').addEventListener('click', function() {
368
+ document.getElementById('chatModal').classList.remove('hidden');
369
+ });
370
+
371
+ // Close chat modal
372
+ document.getElementById('closeChatBtn').addEventListener('click', function() {
373
+ document.getElementById('chatModal').classList.add('hidden');
374
+ });
375
+
376
+ // Start Now button also shows chat
377
+ document.getElementById('startNowBtn').addEventListener('click', function() {
378
+ document.getElementById('chatBtn').classList.remove('hidden');
379
+ document.getElementById('chatModal').classList.remove('hidden');
380
+ });
381
+
382
+ // Close modal when clicking outside
383
+ document.getElementById('chatModal').addEventListener('click', function(e) {
384
+ if (e.target === this) {
385
+ this.classList.add('hidden');
386
+ }
387
+ });
388
+ </script>
389
+ <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=MansoorSarookh/firstexperience" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
390
+ </html>