Hugging Face's logo

Spaces:
Holycanolies123
/
ZV
Running

App Files Community
Holycanolies123 commited on
Commit
5220744
·
verified ·
1 Parent(s): 17e67df

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +341 -19
index.html CHANGED
@@ -1,19 +1,341 @@
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>Zayna & Juan's Award-Winning Beach Bash!</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --color-sky-start: #87CEEB;
11
+ --color-sky-end: #6A5ACD;
12
+ --color-sea-start: #1E90FF;
13
+ --color-sea-end: #00008B;
14
+ --color-sand: #F4A460;
15
+ --color-sunset-glow: #FFD700;
16
+ --color-party-light-1: #FF69B4;
17
+ --color-party-light-2: #00FFFF;
18
+ --color-party-light-3: #ADFF2F;
19
+ --color-text-primary: #FFFFFF;
20
+ --color-text-secondary: #FFD700;
21
+ --color-accent: #FF4500;
22
+ --animation-speed-slow: 20s;
23
+ --animation-speed-medium: 10s;
24
+ --animation-speed-fast: 5s;
25
+ }
26
+
27
+ body {
28
+ margin: 0;
29
+ font-family: 'Montserrat', sans-serif;
30
+ overflow: hidden;
31
+ background: linear-gradient(to bottom, var(--color-sky-start), var(--color-sky-end));
32
+ display: flex;
33
+ justify-content: center;
34
+ align-items: center;
35
+ min-height: 100vh;
36
+ color: var(--color-text-primary);
37
+ position: relative;
38
+ }
39
+
40
+ .beach-party-container {
41
+ width: 100%;
42
+ max-width: 1200px;
43
+ height: 80vh;
44
+ min-height: 500px;
45
+ background: linear-gradient(to bottom, var(--color-sky-end) 0%, var(--color-sea-start) 60%, var(--color-sea-end) 85%, var(--color-sand) 100%);
46
+ border-radius: 20px;
47
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 50px var(--color-sunset-glow);
48
+ position: relative;
49
+ overflow: hidden;
50
+ display: flex;
51
+ flex-direction: column;
52
+ justify-content: flex-end;
53
+ align-items: center;
54
+ animation: containerGlow var(--animation-speed-slow) infinite alternate;
55
+ }
56
+
57
+ @keyframes containerGlow {
58
+ 0% { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 50px var(--color-sunset-glow); }
59
+ 50% { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7), 0 0 70px var(--color-party-light-1); }
60
+ 100% { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 50px var(--color-sunset-glow); }
61
+ }
62
+
63
+ .title {
64
+ font-family: 'Pacifico', cursive;
65
+ font-size: 3.5em;
66
+ text-align: center;
67
+ margin-top: 20px;
68
+ text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
69
+ color: var(--color-text-primary);
70
+ position: absolute;
71
+ top: 5%;
72
+ width: 100%;
73
+ z-index: 10;
74
+ animation: fadeInDown 2s ease-out;
75
+ }
76
+
77
+ .subtitle {
78
+ font-family: 'Montserrat', sans-serif;
79
+ font-size: 1.2em;
80
+ text-align: center;
81
+ margin-top: 10px;
82
+ color: var(--color-text-secondary);
83
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
84
+ position: absolute;
85
+ top: 15%;
86
+ width: 100%;
87
+ z-index: 10;
88
+ animation: fadeInUp 2.5s ease-out;
89
+ }
90
+
91
+ @keyframes fadeInDown {
92
+ from { opacity: 0; transform: translateY(-50px); }
93
+ to { opacity: 1; transform: translateY(0); }
94
+ }
95
+
96
+ @keyframes fadeInUp {
97
+ from { opacity: 0; transform: translateY(50px); }
98
+ to { opacity: 1; transform: translateY(0); }
99
+ }
100
+
101
+ .beach-elements {
102
+ position: absolute;
103
+ width: 100%;
104
+ height: 100%;
105
+ pointer-events: none;
106
+ }
107
+
108
+ .wave {
109
+ position: absolute;
110
+ bottom: 15%;
111
+ left: 0;
112
+ width: 100%;
113
+ height: 50px;
114
+ background: rgba(255, 255, 255, 0.3);
115
+ border-radius: 50%;
116
+ animation: waveFlow var(--animation-speed-medium) infinite linear;
117
+ opacity: 0.7;
118
+ transform: scaleY(0.5);
119
+ }
120
+
121
+ .wave:nth-child(2) {
122
+ bottom: 17%;
123
+ left: 5%;
124
+ width: 90%;
125
+ height: 40px;
126
+ animation-delay: -2s;
127
+ background: rgba(255, 255, 255, 0.2);
128
+ }
129
+
130
+ @keyframes waveFlow {
131
+ 0% { transform: translateX(0) scaleY(0.5); }
132
+ 50% { transform: translateX(-20px) scaleY(0.6); }
133
+ 100% { transform: translateX(0) scaleY(0.5); }
134
+ }
135
+
136
+ .person {
137
+ position: absolute;
138
+ bottom: 20%;
139
+ width: 150px;
140
+ height: 250px;
141
+ background: rgba(255, 255, 255, 0.1);
142
+ border-radius: 50% 50% 0 0 / 100% 100% 0 0;
143
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
144
+ animation: sway var(--animation-speed-fast) infinite alternate;
145
+ display: flex;
146
+ justify-content: center;
147
+ align-items: center;
148
+ font-size: 1.8em;
149
+ font-weight: bold;
150
+ color: var(--color-text-primary);
151
+ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
152
+ border: 2px solid var(--color-text-primary);
153
+ transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
154
+ }
155
+
156
+ .person:hover {
157
+ transform: scale(1.05) translateY(-10px);
158
+ box-shadow: 0 0 30px var(--color-party-light-1), 0 0 50px var(--color-party-light-2);
159
+ }
160
+
161
+ .zayna {
162
+ left: 25%;
163
+ background: linear-gradient(to top, var(--color-party-light-1), rgba(255, 255, 255, 0.1));
164
+ transform-origin: bottom center;
165
+ }
166
+
167
+ .juan {
168
+ right: 25%;
169
+ background: linear-gradient(to top, var(--color-party-light-2), rgba(255, 255, 255, 0.1));
170
+ transform-origin: bottom center;
171
+ animation-delay: -1s;
172
+ }
173
+
174
+ @keyframes sway {
175
+ 0% { transform: rotate(-3deg); }
176
+ 100% { transform: rotate(3deg); }
177
+ }
178
+
179
+ .party-light {
180
+ position: absolute;
181
+ width: 30px;
182
+ height: 30px;
183
+ border-radius: 50%;
184
+ opacity: 0.8;
185
+ animation: flicker var(--animation-speed-fast) infinite alternate, float var(--animation-speed-slow) infinite linear;
186
+ filter: blur(5px);
187
+ }
188
+
189
+ .party-light:nth-child(1) {
190
+ top: 20%; left: 10%; background-color: var(--color-party-light-1);
191
+ animation-delay: 0s;
192
+ }
193
+ .party-light:nth-child(2) {
194
+ top: 30%; right: 15%; background-color: var(--color-party-light-2);
195
+ animation-delay: -1.5s;
196
+ }
197
+ .party-light:nth-child(3) {
198
+ top: 40%; left: 40%; background-color: var(--color-party-light-3);
199
+ animation-delay: -3s;
200
+ }
201
+ .party-light:nth-child(4) {
202
+ top: 15%; right: 5%; background-color: var(--color-party-light-1);
203
+ animation-delay: -4.5s;
204
+ }
205
+ .party-light:nth-child(5) {
206
+ top: 25%; left: 50%; background-color: var(--color-party-light-2);
207
+ animation-delay: -6s;
208
+ }
209
+
210
+ @keyframes flicker {
211
+ 0%, 100% { opacity: 0.8; transform: scale(1); }
212
+ 50% { opacity: 1; transform: scale(1.2); }
213
+ }
214
+
215
+ @keyframes float {
216
+ 0% { transform: translateY(0px) translateX(0px); }
217
+ 25% { transform: translateY(-10px) translateX(5px); }
218
+ 50% { transform: translateY(0px) translateX(0px); }
219
+ 75% { transform: translateY(10px) translateX(-5px); }
220
+ 100% { transform: translateY(0px) translateX(0px); }
221
+ }
222
+
223
+ .confetti-piece {
224
+ position: absolute;
225
+ width: 10px;
226
+ height: 10px;
227
+ background-color: var(--color-accent);
228
+ opacity: 0;
229
+ animation: confettiFall 5s ease-in-out forwards;
230
+ border-radius: 2px;
231
+ }
232
+
233
+ .confetti-piece:nth-child(odd) {
234
+ background-color: var(--color-party-light-1);
235
+ animation-delay: calc(var(--i) * 0.1s);
236
+ left: calc(var(--i) * 5%);
237
+ transform: rotate(calc(var(--i) * 30deg));
238
+ }
239
+ .confetti-piece:nth-child(even) {
240
+ background-color: var(--color-party-light-2);
241
+ animation-delay: calc(var(--i) * 0.15s);
242
+ left: calc(95% - var(--i) * 5%);
243
+ transform: rotate(calc(var(--i) * -30deg));
244
+ }
245
+
246
+ @keyframes confettiFall {
247
+ 0% { transform: translateY(-100px) rotateZ(0deg); opacity: 0; }
248
+ 20% { opacity: 1; }
249
+ 100% { transform: translateY(calc(100vh + 100px)) rotateZ(720deg); opacity: 0; }
250
+ }
251
+
252
+ /* Responsive adjustments */
253
+ @media (max-width: 768px) {
254
+ .title {
255
+ font-size: 2.5em;
256
+ }
257
+ .subtitle {
258
+ font-size: 1em;
259
+ }
260
+ .person {
261
+ width: 100px;
262
+ height: 180px;
263
+ font-size: 1.2em;
264
+ }
265
+ .zayna {
266
+ left: 15%;
267
+ }
268
+ .juan {
269
+ right: 15%;
270
+ }
271
+ .beach-party-container {
272
+ height: 90vh;
273
+ border-radius: 0;
274
+ }
275
+ }
276
+
277
+ @media (max-width: 480px) {
278
+ .title {
279
+ font-size: 1.8em;
280
+ top: 2%;
281
+ }
282
+ .subtitle {
283
+ font-size: 0.8em;
284
+ top: 10%;
285
+ }
286
+ .person {
287
+ width: 80px;
288
+ height: 150px;
289
+ font-size: 1em;
290
+ bottom: 15%;
291
+ }
292
+ .zayna {
293
+ left: 10%;
294
+ }
295
+ .juan {
296
+ right: 10%;
297
+ }
298
+ .beach-elements .wave {
299
+ bottom: 10%;
300
+ height: 30px;
301
+ }
302
+ }
303
+
304
+ </style>
305
+ </head>
306
+ <body>
307
+ <div class="beach-party-container">
308
+ <h1 class="title">Zayna & Juan's Epic Beach Bash!</h1>
309
+ <p class="subtitle">The Award-Winning, Unique, and Absolutely Awesome Celebration!</p>
310
+
311
+ <div class="beach-elements">
312
+ <div class="wave"></div>
313
+ <div class="wave"></div>
314
+ <div class="party-light"></div>
315
+ <div class="party-light"></div>
316
+ <div class="party-light"></div>
317
+ <div class="party-light"></div>
318
+ <div class="party-light"></div>
319
+ </div>
320
+
321
+ <div class="person zayna">Zayna</div>
322
+ <div class="person juan">Juan</div>
323
+
324
+ <!-- Confetti effect -->
325
+ <div class="confetti-container">
326
+ <script>
327
+ const confettiContainer = document.querySelector('.beach-party-container');
328
+ for (let i = 0; i < 50; i++) {
329
+ const confetti = document.createElement('div');
330
+ confetti.className = 'confetti-piece';
331
+ confetti.style.setProperty('--i', i);
332
+ confetti.style.left = Math.random() * 100 + 'vw';
333
+ confetti.style.animationDelay = Math.random() * 5 + 's';
334
+ confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 70%)`;
335
+ confettiContainer.appendChild(confetti);
336
+ }
337
+ </script>
338
+ </div>
339
+ </div>
340
+ </body>
341
+ </html>