Hugging Face's logo

Spaces:
chchchadzilla
/
a-i
Running

App Files Community
chchchadzilla commited on
Commit
f1c731a
·
verified ·
1 Parent(s): e919669

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +555 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: A I
3
- emoji: 📚
4
- colorFrom: red
5
- colorTo: indigo
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: a-i
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: green
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,555 @@
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>ArtGal.com | Where Young Artists Shine</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=Comic+Neue:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #FF9BD2; /* Bubblegum pink */
14
+ --secondary: #7BD3F7; /* Sky blue */
15
+ --accent: #F7DB6A; /* Sunny yellow */
16
+ --dark: #5F6F94; /* Deep blue */
17
+ --pop: #FF6D60; /* Coral */
18
+ }
19
+
20
+ body {
21
+ font-family: 'Comic Neue', cursive;
22
+ background-color: #FFF9F9;
23
+ color: #333;
24
+ overflow-x: hidden;
25
+ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z' fill='%23FF9BD2'/%3E%3Cpath d='M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z' fill='%237BD3F7'/%3E%3Cpath d='M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z' fill='%23F7DB6A'/%3E%3C/svg%3E"), auto;
26
+ }
27
+
28
+ h1, h2, h3 {
29
+ font-family: 'Comic Neue', cursive;
30
+ font-weight: 700;
31
+ }
32
+
33
+ .btn-rainbow {
34
+ background: linear-gradient(90deg,
35
+ #FF9BD2 0%,
36
+ #FFB7B7 20%,
37
+ #FFD6A5 40%,
38
+ #F7DB6A 60%,
39
+ #7BD3F7 80%,
40
+ #B5F8FE 100%);
41
+ background-size: 200% auto;
42
+ animation: rainbow 1.5s linear infinite;
43
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
44
+ transition: all 0.3s ease;
45
+ }
46
+
47
+ @keyframes rainbow {
48
+ 0% { background-position: 0% center; }
49
+ 100% { background-position: 200% center; }
50
+ }
51
+
52
+ .art-card {
53
+ transition: all 0.3s ease;
54
+ transform-style: preserve-3d;
55
+ border-radius: 20px;
56
+ overflow: hidden;
57
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
58
+ }
59
+
60
+ .art-card:hover {
61
+ transform: translateY(-10px) rotate(2deg) scale(1.05);
62
+ box-shadow: 0 15px 30px rgba(0,0,0,0.2);
63
+ }
64
+
65
+ .art-card::before {
66
+ content: '';
67
+ position: absolute;
68
+ top: 0;
69
+ left: 0;
70
+ right: 0;
71
+ bottom: 0;
72
+ background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
73
+ opacity: 0;
74
+ transition: opacity 0.3s ease;
75
+ }
76
+
77
+ .art-card:hover::before {
78
+ opacity: 1;
79
+ }
80
+
81
+ .emoji-float {
82
+ animation: float 3s ease-in-out infinite;
83
+ }
84
+
85
+ @keyframes float {
86
+ 0% { transform: translateY(0px); }
87
+ 50% { transform: translateY(-15px); }
88
+ 100% { transform: translateY(0px); }
89
+ }
90
+
91
+ .bounce {
92
+ animation: bounce 2s infinite;
93
+ }
94
+
95
+ @keyframes bounce {
96
+ 0%, 100% { transform: translateY(0); }
97
+ 50% { transform: translateY(-10px); }
98
+ }
99
+
100
+ .spin {
101
+ animation: spin 10s linear infinite;
102
+ }
103
+
104
+ @keyframes spin {
105
+ 0% { transform: rotate(0deg); }
106
+ 100% { transform: rotate(360deg); }
107
+ }
108
+
109
+ .pulse {
110
+ animation: pulse 2s infinite;
111
+ }
112
+
113
+ @keyframes pulse {
114
+ 0% { transform: scale(1); }
115
+ 50% { transform: scale(1.05); }
116
+ 100% { transform: scale(1); }
117
+ }
118
+
119
+ .confetti {
120
+ position: absolute;
121
+ width: 10px;
122
+ height: 10px;
123
+ background-color: var(--pop);
124
+ opacity: 0;
125
+ }
126
+
127
+ .social-icon {
128
+ transition: all 0.3s ease;
129
+ transform-style: preserve-3d;
130
+ }
131
+
132
+ .social-icon:hover {
133
+ transform: rotate(10deg) scale(1.2);
134
+ filter: drop-shadow(0 0 5px rgba(255,109,96,0.5));
135
+ }
136
+
137
+ .nav-link {
138
+ position: relative;
139
+ }
140
+
141
+ .nav-link::after {
142
+ content: '';
143
+ position: absolute;
144
+ width: 0;
145
+ height: 3px;
146
+ bottom: -5px;
147
+ left: 0;
148
+ background-color: var(--pop);
149
+ transition: width 0.3s ease;
150
+ border-radius: 3px;
151
+ }
152
+
153
+ .nav-link:hover::after {
154
+ width: 100%;
155
+ }
156
+
157
+ .positive-message {
158
+ animation: pulse 2s infinite;
159
+ background: linear-gradient(90deg, #FF9BD2, #7BD3F7);
160
+ -webkit-background-clip: text;
161
+ background-clip: text;
162
+ color: transparent;
163
+ }
164
+
165
+ .gradient-text {
166
+ background: linear-gradient(90deg, #FF9BD2, #7BD3F7, #F7DB6A, #FF6D60);
167
+ -webkit-background-clip: text;
168
+ background-clip: text;
169
+ color: transparent;
170
+ background-size: 300% auto;
171
+ animation: gradientText 5s linear infinite;
172
+ }
173
+
174
+ @keyframes gradientText {
175
+ 0% { background-position: 0% center; }
176
+ 100% { background-position: 100% center; }
177
+ }
178
+
179
+ .sticker {
180
+ position: absolute;
181
+ width: 80px;
182
+ height: 80px;
183
+ background-size: contain;
184
+ background-repeat: no-repeat;
185
+ z-index: 10;
186
+ pointer-events: none;
187
+ }
188
+ </style>
189
+ </head>
190
+ <body class="overflow-x-hidden">
191
+ <!-- Floating Emojis -->
192
+ <div class="sticker emoji-float" style="top:10%; left:5%; font-size:50px;">🎨</div>
193
+ <div class="sticker emoji-float bounce" style="top:30%; right:5%; font-size:60px; animation-delay:0.5s;">✨</div>
194
+ <div class="sticker emoji-float" style="top:70%; left:8%; font-size:45px; animation-delay:1s;">🖌️</div>
195
+ <div class="sticker emoji-float" style="top:50%; right:10%; font-size:55px; animation-delay:1.5s;">🌈</div>
196
+
197
+ <!-- Header -->
198
+ <header class="bg-white shadow-sm sticky top-0 z-50">
199
+ <div class="container mx-auto px-6 py-3">
200
+ <div class="flex items-center justify-between">
201
+ <div class="flex items-center">
202
+ <div class="w-14 h-14 rounded-full bg-gradient-to-br from-[#FF9BD2] to-[#7BD3F7] flex items-center justify-center mr-3 spin">
203
+ <i class="fas fa-palette text-white text-2xl"></i>
204
+ </div>
205
+ <h1 class="text-3xl font-bold gradient-text">ArtGal.com</h1>
206
+ </div>
207
+ <nav class="hidden md:flex space-x-8 items-center">
208
+ <a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Gallery</a>
209
+ <a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Young Artists</a>
210
+ <a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Challenges</a>
211
+ <a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Learn</a>
212
+ <a href="#" class="nav-link text-lg text-[#5F6F94] hover:text-[#FF6D60]">Shop</a>
213
+ </nav>
214
+ <div class="flex items-center space-x-4">
215
+ <button class="btn-rainbow text-white px-5 py-2 rounded-full font-bold text-lg">
216
+ <i class="fas fa-user-astronaut mr-2"></i> Join Free
217
+ </button>
218
+ <button class="md:hidden text-[#5F6F94] text-2xl">
219
+ <i class="fas fa-bars"></i>
220
+ </button>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </header>
225
+
226
+ <!-- Hero Section -->
227
+ <section class="relative bg-gradient-to-br from-[#FFF0F5] to-[#E6F9FF] py-20 overflow-hidden">
228
+ <div class="absolute top-0 left-0 w-full h-full opacity-20">
229
+ <div class="absolute top-20 left-10 w-40 h-40 rounded-full bg-[#FF9BD2] blur-xl"></div>
230
+ <div class="absolute top-1/2 right-20 w-60 h-60 rounded-full bg-[#7BD3F7] blur-xl"></div>
231
+ <div class="absolute bottom-10 left-1/2 w-80 h-80 rounded-full bg-[#F7DB6A] blur-xl"></div>
232
+ </div>
233
+ <div class="container mx-auto px-6 relative z-10">
234
+ <div class="flex flex-col md:flex-row items-center">
235
+ <div class="md:w-1/2 mb-10 md:mb-0">
236
+ <h2 class="text-5xl md:text-6xl font-bold mb-6 gradient-text">Create. Share. <span class="emoji-float inline-block">✨</span> Inspire.</h2>
237
+ <p class="text-xl text-[#5F6F94] mb-8">The happiest place for Gen Alpha artists to showcase their work, get inspired, and connect with other young creators!</p>
238
+ <div class="flex flex-wrap gap-4">
239
+ <button class="btn-rainbow text-white px-8 py-4 rounded-full font-bold text-lg">
240
+ <i class="fas fa-rocket mr-2"></i> Start Creating
241
+ </button>
242
+ <button class="border-2 border-[#FF6D60] text-[#FF6D60] px-8 py-4 rounded-full font-bold text-lg hover:bg-[#FFF0F0] transition">
243
+ <i class="fas fa-star mr-2"></i> Featured Artists
244
+ </button>
245
+ </div>
246
+ <div class="mt-8 flex items-center">
247
+ <div class="flex -space-x-2">
248
+ <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-12 h-12 rounded-full border-2 border-white">
249
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full border-2 border-white">
250
+ <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-12 h-12 rounded-full border-2 border-white">
251
+ <img src="https://randomuser.me/api/portraits/men/76.jpg" class="w-12 h-12 rounded-full border-2 border-white">
252
+ </div>
253
+ <p class="ml-4 text-[#5F6F94]"><span class="font-bold text-[#FF6D60]">10,000+</span> young artists creating daily!</p>
254
+ </div>
255
+ </div>
256
+ <div class="md:w-1/2 flex justify-center relative">
257
+ <div class="relative">
258
+ <div class="w-72 h-96 md:w-96 md:h-[500px] bg-white rounded-3xl shadow-xl overflow-hidden art-card">
259
+ <img src="https://images.unsplash.com/photo-1579783902614-a3fb39268b5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1450&q=80"
260
+ alt="Young artist painting" class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
261
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
262
+ <p class="text-white text-sm">Featured Artist: <span class="font-bold">Mia, Age 9</span></p>
263
+ <h3 class="text-white text-xl font-bold mt-1">"My Colorful Dreams"</h3>
264
+ </div>
265
+ </div>
266
+ <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-[#F7DB6A] rounded-2xl shadow-lg overflow-hidden art-card rotate-6">
267
+ <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80"
268
+ alt="Digital art" class="w-full h-full object-cover">
269
+ </div>
270
+ <div class="absolute -top-10 -left-10 w-24 h-24 bg-[#FF6D60] rounded-2xl shadow-lg overflow-hidden art-card -rotate-6 flex items-center justify-center">
271
+ <span class="text-white text-4xl">🎨</span>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </section>
278
+
279
+ <!-- Featured Young Artists -->
280
+ <section class="py-16 bg-white">
281
+ <div class="container mx-auto px-6">
282
+ <div class="text-center mb-12">
283
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Meet Our Young Artists <span class="emoji-float inline-block">🌟</span></h2>
284
+ <p class="text-[#5F6F94] max-w-2xl mx-auto text-lg">These amazing kids are changing the art world one colorful creation at a time!</p>
285
+ </div>
286
+
287
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
288
+ <!-- Artist 1 -->
289
+ <div class="bg-gradient-to-br from-[#FFE6F0] to-[#E6F7FF] rounded-2xl overflow-hidden shadow-lg art-card p-6 text-center">
290
+ <div class="w-24 h-24 mx-auto rounded-full border-4 border-white shadow-md overflow-hidden mb-4">
291
+ <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
292
+ alt="Young artist" class="w-full h-full object-cover">
293
+ </div>
294
+ <h3 class="text-xl font-bold text-[#5F6F94] mb-1">Emma, 10</h3>
295
+ <p class="text-[#FF6D60] mb-3">Digital Illustrator</p>
296
+ <p class="text-[#5F6F94] text-sm mb-4">"I love creating magical creatures and fantasy worlds!"</p>
297
+ <div class="flex justify-center space-x-2">
298
+ <span class="bg-[#FF9BD2] text-white text-xs px-2 py-1 rounded-full">Digital</span>
299
+ <span class="bg-[#7BD3F7] text-white text-xs px-2 py-1 rounded-full">Fantasy</span>
300
+ <span class="bg-[#F7DB6A] text-white text-xs px-2 py-1 rounded-full">Colorful</span>
301
+ </div>
302
+ <button class="mt-4 bg-white text-[#FF6D60] border border-[#FF6D60] px-4 py-1 rounded-full text-sm font-bold hover:bg-[#FF6D60] hover:text-white transition">
303
+ View Art
304
+ </button>
305
+ </div>
306
+
307
+ <!-- Artist 2 -->
308
+ <div class="bg-gradient-to-br from-[#FFF0E6] to-[#F0FFE6] rounded-2xl overflow-hidden shadow-lg art-card p-6 text-center">
309
+ <div class="w-24 h-24 mx-auto rounded-full border-4 border-white shadow-md overflow-hidden mb-4">
310
+ <img src="https://images.unsplash.com/photo-1503454537195-29dc400eb5cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
311
+ alt="Young artist" class="w-full h-full object-cover">
312
+ </div>
313
+ <h3 class="text-xl font-bold text-[#5F6F94] mb-1">Liam, 8</h3>
314
+ <p class="text-[#FF6D60] mb-3">Clay Sculptor</p>
315
+ <p class="text-[#5F6F94] text-sm mb-4">"I make funny monsters and creatures from my imagination!"</p>
316
+ <div class="flex justify-center space-x-2">
317
+ <span class="bg-[#FF9BD2] text-white text-xs px-2 py-1 rounded-full">Sculpture</span>
318
+ <span class="bg-[#7BD3F7] text-white text-xs px-2 py-1 rounded-full">3D</span>
319
+ <span class="bg-[#F7DB6A] text-white text-xs px-2 py-1 rounded-full">Funny</span>
320
+ </div>
321
+ <button class="mt-4 bg-white text-[#FF6D60] border border-[#FF6D60] px-4 py-1 rounded-full text-sm font-bold hover:bg-[#FF6D60] hover:text-white transition">
322
+ View Art
323
+ </button>
324
+ </div>
325
+
326
+ <!-- Artist 3 -->
327
+ <div class="bg-gradient-to-br from-[#E6FFF9] to-[#E6ECFF] rounded-2xl overflow-hidden shadow-lg art-card p-6 text-center">
328
+ <div class="w-24 h-24 mx-auto rounded-full border-4 border-white shadow-md overflow-hidden mb-4">
329
+ <img src="https://images.unsplash.com/photo-1519682337058-a94d519337bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
330
+ alt="Young artist" class="w-full h-full object-cover">
331
+ </div>
332
+ <h3 class="text-xl font-bold text-[#5F6F94] mb-1">Sophia, 11</h3>
333
+ <p class="text-[#FF6D60] mb-3">Watercolor Painter</p>
334
+ <p class="text-[#5F6F94] text-sm mb-4">"Nature inspires me to create beautiful landscapes!"</p>
335
+ <div class="flex justify-center space-x-2">
336
+ <span class="bg-[#FF9BD2] text-white text-xs px-2 py-1 rounded-full">Painting</span>
337
+ <span class="bg-[#7BD3F7] text-white text-xs px-2 py-1 rounded-full">Nature</span>
338
+ <span class="bg-[#F7DB6A] text-white text-xs px-2 py-1 rounded-full">Detailed</span>
339
+ </div>
340
+ <button class="mt-4 bg-white text-[#FF6D60] border border-[#FF6D60] px-4 py-1 rounded-full text-sm font-bold hover:bg-[#FF6D60] hover:text-white transition">
341
+ View Art
342
+ </button>
343
+ </div>
344
+
345
+ <!-- Artist 4 -->
346
+ <div class="bg-gradient-to-br from-[#FFE6F7] to-[#F7E6FF] rounded-2xl overflow-hidden shadow-lg art-card p-6 text-center">
347
+ <div class="w-24 h-24 mx-auto rounded-full border-4 border-white shadow-md overflow-hidden mb-4">
348
+ <img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80"
349
+ alt="Young artist" class="w-full h-full object-cover">
350
+ </div>
351
+ <h3 class="text-xl font-bold text-[#5F6F94] mb-1">Noah, 9</h3>
352
+ <p class="text-[#FF6D60] mb-3">Comic Artist</p>
353
+ <p class="text-[#5F6F94] text-sm mb-4">"I draw superheroes and their amazing adventures!"</p>
354
+ <div class="flex justify-center space-x-2">
355
+ <span class="bg-[#FF9BD2] text-white text-xs px-2 py-1 rounded-full">Drawing</span>
356
+ <span class="bg-[#7BD3F7] text-white text-xs px-2 py-1 rounded-full">Comics</span>
357
+ <span class="bg-[#F7DB6A] text-white text-xs px-2 py-1 rounded-full">Action</span>
358
+ </div>
359
+ <button class="mt-4 bg-white text-[#FF6D60] border border-[#FF6D60] px-4 py-1 rounded-full text-sm font-bold hover:bg-[#FF6D60] hover:text-white transition">
360
+ View Art
361
+ </button>
362
+ </div>
363
+ </div>
364
+
365
+ <div class="text-center mt-12">
366
+ <button class="btn-rainbow text-white px-8 py-3 rounded-full font-bold text-lg">
367
+ <i class="fas fa-users mr-2"></i> Meet More Artists
368
+ </button>
369
+ </div>
370
+ </div>
371
+ </section>
372
+
373
+ <!-- Weekly Challenge -->
374
+ <section class="py-16 bg-gradient-to-r from-[#FFF0F5] to-[#F0F9FF]">
375
+ <div class="container mx-auto px-6">
376
+ <div class="flex flex-col md:flex-row items-center">
377
+ <div class="md:w-1/2 mb-10 md:mb-0">
378
+ <div class="bg-[#FF6D60] text-white text-sm font-bold px-4 py-1 rounded-full inline-block mb-4">
379
+ <i class="fas fa-bolt mr-1"></i> This Week's Challenge
380
+ </div>
381
+ <h2 class="text-4xl font-bold mb-6 gradient-text">"Draw Your Dream Pet" <span class="emoji-float inline-block">🐾</span></h2>
382
+ <p class="text-lg text-[#5F6F94] mb-8">What would your ultimate pet look like? A rainbow unicorn? A dragon-puppy hybrid? Get creative and show us your dream pet! The most imaginative entries get featured on our homepage.</p>
383
+ <div class="flex flex-wrap gap-4">
384
+ <button class="btn-rainbow text-white px-8 py-3 rounded-full font-bold text-lg">
385
+ <i class="fas fa-upload mr-2"></i> Submit Your Art
386
+ </button>
387
+ <button class="border-2 border-[#5F6F94] text-[#5F6F94] px-8 py-3 rounded-full font-bold text-lg hover:bg-white transition">
388
+ <i class="fas fa-trophy mr-2"></i> Past Winners
389
+ </button>
390
+ </div>
391
+ </div>
392
+ <div class="md:w-1/2 flex justify-center">
393
+ <div class="relative">
394
+ <div class="w-full max-w-md bg-white rounded-3xl shadow-xl overflow-hidden art-card">
395
+ <img src="https://images.unsplash.com/photo-1588943211346-0908a1fbde2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
396
+ alt="Child drawing" class="w-full h-full object-cover">
397
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
398
+ <p class="text-white text-sm">Last Week's Winner: <span class="font-bold">Olivia, Age 8</span></p>
399
+ <h3 class="text-white text-xl font-bold mt-1">"My Robot Best Friend"</h3>
400
+ </div>
401
+ </div>
402
+ <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-[#F7DB6A] rounded-2xl shadow-lg overflow-hidden art-card rotate-6 flex items-center justify-center">
403
+ <span class="text-4xl">🏆</span>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </section>
410
+
411
+ <!-- Comments Section -->
412
+ <section class="py-16 bg-white">
413
+ <div class="container mx-auto px-6">
414
+ <div class="text-center mb-12">
415
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Art Love <span class="emoji-float inline-block">💖</span></h2>
416
+ <div class="bg-gradient-to-r from-[#FFE6F0] to-[#E6F7FF] inline-block px-8 py-3 rounded-full mb-4">
417
+ <p class="text-lg font-bold positive-message"><i class="fas fa-heart text-[#FF6D60] mr-2"></i> This is a happy place - only kind comments allowed!</p>
418
+ </div>
419
+ <p class="text-[#5F6F94] max-w-2xl mx-auto text-lg">Our young artists work hard on their creations. Share some encouragement!</p>
420
+ </div>
421
+
422
+ <div class="max-w-3xl mx-auto">
423
+ <!-- Comment Form -->
424
+ <div class="bg-gradient-to-br from-[#F0F9FF] to-[#FFF0F5] rounded-2xl shadow-md p-6 mb-8 art-card">
425
+ <h3 class="text-xl font-bold text-[#5F6F94] mb-4">Spread Some Art Love <span class="text-[#FF6D60]">💌</span></h3>
426
+ <form>
427
+ <div class="mb-4">
428
+ <textarea class="w-full px-4 py-3 border border-[#FF9BD2] rounded-2xl focus:outline-none focus:ring-2 focus:ring-[#7BD3F7] focus:border-transparent"
429
+ rows="4" placeholder="What do you love about this artwork?"></textarea>
430
+ </div>
431
+ <div class="flex flex-col sm:flex-row justify-between items-center">
432
+ <div class="flex items-center mb-4 sm:mb-0">
433
+ <input type="checkbox" id="positive" class="mr-2 h-5 w-5 text-[#FF6D60] rounded focus:ring-[#FF6D60]">
434
+ <label for="positive" class="text-[#5F6F94]">I promise this is a nice comment!</label>
435
+ </div>
436
+ <button type="submit" class="btn-rainbow text-white px-6 py-2 rounded-full font-bold">
437
+ <i class="fas fa-paper-plane mr-2"></i> Send Love
438
+ </button>
439
+ </div>
440
+ </form>
441
+ </div>
442
+
443
+ <!-- Comments List -->
444
+ <div class="space-y-6">
445
+ <!-- Comment 1 -->
446
+ <div class="bg-gradient-to-r from-[#FFF0F0] to-white rounded-2xl shadow-md p-6 art-card comment-box">
447
+ <div class="flex items-start mb-4">
448
+ <div class="w-12 h-12 rounded-full bg-[#FF9BD2] flex items-center justify-center mr-4">
449
+ <i class="fas fa-user text-white text-xl"></i>
450
+ </div>
451
+ <div>
452
+ <h4 class="font-bold text-[#5F6F94]">ArtFan200</h4>
453
+ <div class="flex items-center text-[#FFD166] text-sm mb-1">
454
+ <i class="fas fa-star"></i>
455
+ <i class="fas fa-star"></i>
456
+ <i class="fas fa-star"></i>
457
+ <i class="fas fa-star"></i>
458
+ <i class="fas fa-star"></i>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ <p class="text-[#5F6F94] mb-4">"The colors in this painting make me so happy! It's like looking at a rainbow explosion. You're so talented!"</p>
463
+ <div class="flex justify-between text-sm text-[#7BD3F7]">
464
+ <span>On "Sunset Dreams" by Maya, 9</span>
465
+ <div class="flex space-x-4">
466
+ <button class="hover:text-[#FF6D60]"><i class="fas fa-heart mr-1"></i> 24</button>
467
+ <button class="hover:text-[#FF6D60]"><i class="fas fa-hands-helping mr-1"></i> Encourage</button>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Comment 2 -->
473
+ <div class="bg-gradient-to-r from-[#F0FFF9] to-white rounded-2xl shadow-md p-6 art-card comment-box">
474
+ <div class="flex items-start mb-4">
475
+ <div class="w-12 h-12 rounded-full bg-[#7BD3F7] flex items-center justify-center mr-4">
476
+ <i class="fas fa-user-astronaut text-white text-xl"></i>
477
+ </div>
478
+ <div>
479
+ <h4 class="font-bold text-[#5F6F94]">CreativeKid101</h4>
480
+ <div class="flex items-center text-[#FFD166] text-sm mb-1">
481
+ <i class="fas fa-star"></i>
482
+ <i class="fas fa-star"></i>
483
+ <i class="fas fa-star"></i>
484
+ <i class="fas fa-star"></i>
485
+ <i class="fas fa-star-half-alt"></i>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ <p class="text-[#5F6F94] mb-4">"Wow! Your sculpture looks like it could come to life any minute. The details are amazing! How did you make the scales look so real?"</p>
490
+ <div class="flex justify-between text-sm text-[#7BD3F7]">
491
+ <span>On "Dragon Friend" by Leo, 10</span>
492
+ <div class="flex space-x-4">
493
+ <button class="hover:text-[#FF6D60]"><i class="fas fa-heart mr-1"></i> 18</button>
494
+ <button class="hover:text-[#FF6D60]"><i class="fas fa-hands-helping mr-1"></i> Encourage</button>
495
+ </div>
496
+ </div>
497
+ </div>
498
+
499
+ <!-- Comment 3 -->
500
+ <div class="bg-gradient-to-r from-[#FFF0F9] to-white rounded-2xl shadow-md p-6 art-card comment-box">
501
+ <div class="flex items-start mb-4">
502
+ <div class="w-12 h-12 rounded-full bg-[#F7DB6A] flex items-center justify-center mr-4">
503
+ <i class="fas fa-user-ninja text-white text-xl"></i>
504
+ </div>
505
+ <div>
506
+ <h4 class="font-bold text-[#5F6F94]">HappyArtist</h4>
507
+ <div class="flex items-center text-[#FFD166] text-sm mb-1">
508
+ <i class="fas fa-star"></i>
509
+ <i class="fas fa-star"></i>
510
+ <i class="fas fa-star"></i>
511
+ <i class="fas fa-star"></i>
512
+ <i class="fas fa-star"></i>
513
+ </div>
514
+ </div>
515
+ </div>
516
+ <p class="text-[#5F6F94] mb-4">"This comic made me laugh so hard! Your characters are hilarious and the story is awesome. Can't wait to see more adventures!"</p>
517
+ <div class="flex justify-between text-sm text-[#7BD3F7]">
518
+ <span>On "Super Squirrel" by Noah, 9</span>
519
+ <div class="flex space-x-4">
520
+ <button class="hover:text-[#FF6D60]"><i class="fas fa-heart mr-1"></i> 32</button>
521
+ <button class="hover:text-[#FF6D60]"><i class="fas fa-hands-helping mr-1"></i> Encourage</button>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </div>
526
+
527
+ <div class="text-center mt-8">
528
+ <button class="border-2 border-[#5F6F94] text-[#5F6F94] px-8 py-3 rounded-full font-bold text-lg hover:bg-white transition">
529
+ <i class="fas fa-comment-dots mr-2"></i> Load More Happy Comments
530
+ </button>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </section>
535
+
536
+ <!-- Social Media Section -->
537
+ <section class="py-16 bg-gradient-to-br from-[#FFF0F5] to-[#E6F9FF]">
538
+ <div class="container mx-auto px-6">
539
+ <div class="text-center mb-12">
540
+ <h2 class="text-4xl font-bold mb-4 gradient-text">Join Our Art Family <span class="emoji-float inline-block">👨‍👩‍👧‍👦</span></h2>
541
+ <p class="text-[#5F6F94] max-w-2xl mx-auto text-lg">Follow us for daily art inspiration, challenges, and features of our amazing young artists!</p>
542
+ </div>
543
+
544
+ <div class="flex flex-wrap justify-center gap-8 mb-12">
545
+ <a href="#" class="social-icon w-20 h-20 rounded-2xl bg-white shadow-lg flex items-center justify-center text-3xl text-[#FF9BD2] hover:text-[#FF6D60]">
546
+ <i class="fab fa-instagram"></i>
547
+ </a>
548
+ <a href="#" class="social-icon w-20 h-20 rounded-2xl bg-white shadow-lg flex items-center justify-center text-3xl text-[#7BD3F7] hover:text-[#5F6F94]">
549
+ <i class="fab fa-tiktok"></i>
550
+ </a>
551
+ <a href="#" class="social-icon w-20 h-20 rounded-2xl bg-white shadow-lg flex items-center justify-center text-3xl text-[#F7DB6A] hover:text-[#FF9BD2]">
552
+ <i class="fab fa-youtube"></i>
553
+ </a>
554
+ <a href="#" class="social-icon w-20 h-20 rounded-2xl bg-white shadow-lg flex items-center justify-center text-3xl text-[#FF6D60] hover:text-[#7BD3F
555
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Make me a really cool looking web application or website that's based on tailwind and CSS and HTML that is flashy with animations and showcases artwork for purchase that has a comment section and can connect to social media and the whole theme should be personal art showcase where people leave only nice comments no mean comments and it should say that everywhere and everything should be on fire just kidding scratch the fire part I think that's good what colors what colors Make them in cry baby blue for the theme of the page and have the cursors have effects that have trails on them and make the buttons radio buttons that have gradients that that that Chase around its own tail around the buttons in a rainbow color and have unicorns shooting rainbows out of their horns nope actually don't do that Don't do any of that that was a test okay let's see if you even know what I'm talking about
2
+ Make the website called artgal.com and make it a lot more a lot more cheerful and appealing especially to young people make it really favorable towards generation alpha artists now