prithivMLmods commited on
Commit
cbf0c84
·
verified ·
1 Parent(s): 4c740e1

Delete assets

Browse files
Files changed (2) hide show
  1. assets/demo.txt +0 -0
  2. assets/index.html +0 -304
assets/demo.txt DELETED
File without changes
assets/index.html DELETED
@@ -1,304 +0,0 @@
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>Hamster Running in a Wheel</title>
7
- <style>
8
- /* Paste the CSS styles here */
9
- .wheel-and-hamster {
10
- --dur: 1s;
11
- position: relative;
12
- width: 12em;
13
- height: 12em;
14
- font-size: 14px;
15
- }
16
-
17
- .wheel,
18
- .hamster,
19
- .hamster div,
20
- .spoke {
21
- position: absolute;
22
- }
23
-
24
- .wheel,
25
- .spoke {
26
- border-radius: 50%;
27
- top: 0;
28
- left: 0;
29
- width: 100%;
30
- height: 100%;
31
- }
32
-
33
- .wheel {
34
- background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
35
- z-index: 2;
36
- }
37
-
38
- .hamster {
39
- animation: hamster var(--dur) ease-in-out infinite;
40
- top: 50%;
41
- left: calc(50% - 3.5em);
42
- width: 7em;
43
- height: 3.75em;
44
- transform: rotate(4deg) translate(-0.8em,1.85em);
45
- transform-origin: 50% 0;
46
- z-index: 1;
47
- }
48
-
49
- .hamster__head {
50
- animation: hamsterHead var(--dur) ease-in-out infinite;
51
- background: hsl(30,90%,55%);
52
- border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
53
- box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
54
- 0.75em -1.55em 0 hsl(30,90%,90%) inset;
55
- top: 0;
56
- left: -2em;
57
- width: 2.75em;
58
- height: 2.5em;
59
- transform-origin: 100% 50%;
60
- }
61
-
62
- .hamster__ear {
63
- animation: hamsterEar var(--dur) ease-in-out infinite;
64
- background: hsl(0,90%,85%);
65
- border-radius: 50%;
66
- box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
67
- top: -0.25em;
68
- right: -0.25em;
69
- width: 0.75em;
70
- height: 0.75em;
71
- transform-origin: 50% 75%;
72
- }
73
-
74
- .hamster__eye {
75
- animation: hamsterEye var(--dur) linear infinite;
76
- background-color: hsl(0,0%,0%);
77
- border-radius: 50%;
78
- top: 0.375em;
79
- left: 1.25em;
80
- width: 0.5em;
81
- height: 0.5em;
82
- }
83
-
84
- .hamster__nose {
85
- background: hsl(0,90%,75%);
86
- border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
87
- top: 0.75em;
88
- left: 0;
89
- width: 0.2em;
90
- height: 0.25em;
91
- }
92
-
93
- .hamster__body {
94
- animation: hamsterBody var(--dur) ease-in-out infinite;
95
- background: hsl(30,90%,90%);
96
- border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
97
- box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
98
- 0.15em -0.5em 0 hsl(30,90%,80%) inset;
99
- top: 0.25em;
100
- left: 2em;
101
- width: 4.5em;
102
- height: 3em;
103
- transform-origin: 17% 50%;
104
- transform-style: preserve-3d;
105
- }
106
-
107
- .hamster__limb--fr,
108
- .hamster__limb--fl {
109
- clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
110
- top: 2em;
111
- left: 0.5em;
112
- width: 1em;
113
- height: 1.5em;
114
- transform-origin: 50% 0;
115
- }
116
-
117
- .hamster__limb--fr {
118
- animation: hamsterFRLimb var(--dur) linear infinite;
119
- background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
120
- transform: rotate(15deg) translateZ(-1px);
121
- }
122
-
123
- .hamster__limb--fl {
124
- animation: hamsterFLLimb var(--dur) linear infinite;
125
- background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
126
- transform: rotate(15deg);
127
- }
128
-
129
- .hamster__limb--br,
130
- .hamster__limb--bl {
131
- border-radius: 0.75em 0.75em 0 0;
132
- clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
133
- top: 1em;
134
- left: 2.8em;
135
- width: 1.5em;
136
- height: 2.5em;
137
- transform-origin: 50% 30%;
138
- }
139
-
140
- .hamster__limb--br {
141
- animation: hamsterBRLimb var(--dur) linear infinite;
142
- background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
143
- transform: rotate(-25deg) translateZ(-1px);
144
- }
145
-
146
- .hamster__limb--bl {
147
- animation: hamsterBLLimb var(--dur) linear infinite;
148
- background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
149
- transform: rotate(-25deg);
150
- }
151
-
152
- .hamster__tail {
153
- animation: hamsterTail var(--dur) linear infinite;
154
- background: hsl(0,90%,85%);
155
- border-radius: 0.25em 50% 50% 0.25em;
156
- box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
157
- top: 1.5em;
158
- right: -0.5em;
159
- width: 1em;
160
- height: 0.5em;
161
- transform: rotate(30deg) translateZ(-1px);
162
- transform-origin: 0.25em 0.25em;
163
- }
164
-
165
- .spoke {
166
- animation: spoke var(--dur) linear infinite;
167
- background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
168
- linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
169
- }
170
-
171
- /* Animations */
172
- @keyframes hamster {
173
- from, to {
174
- transform: rotate(4deg) translate(-0.8em,1.85em);
175
- }
176
-
177
- 50% {
178
- transform: rotate(0) translate(-0.8em,1.85em);
179
- }
180
- }
181
-
182
- @keyframes hamsterHead {
183
- from, 25%, 50%, 75%, to {
184
- transform: rotate(0);
185
- }
186
-
187
- 12.5%, 37.5%, 62.5%, 87.5% {
188
- transform: rotate(8deg);
189
- }
190
- }
191
-
192
- @keyframes hamsterEye {
193
- from, 90%, to {
194
- transform: scaleY(1);
195
- }
196
-
197
- 95% {
198
- transform: scaleY(0);
199
- }
200
- }
201
-
202
- @keyframes hamsterEar {
203
- from, 25%, 50%, 75%, to {
204
- transform: rotate(0);
205
- }
206
-
207
- 12.5%, 37.5%, 62.5%, 87.5% {
208
- transform: rotate(12deg);
209
- }
210
- }
211
-
212
- @keyframes hamsterBody {
213
- from, 25%, 50%, 75%, to {
214
- transform: rotate(0);
215
- }
216
-
217
- 12.5%, 37.5%, 62.5%, 87.5% {
218
- transform: rotate(-2deg);
219
- }
220
- }
221
-
222
- @keyframes hamsterFRLimb {
223
- from, 25%, 50%, 75%, to {
224
- transform: rotate(50deg) translateZ(-1px);
225
- }
226
-
227
- 12.5%, 37.5%, 62.5%, 87.5% {
228
- transform: rotate(-30deg) translateZ(-1px);
229
- }
230
- }
231
-
232
- @keyframes hamsterFLLimb {
233
- from, 25%, 50%, 75%, to {
234
- transform: rotate(-30deg);
235
- }
236
-
237
- 12.5%, 37.5%, 62.5%, 87.5% {
238
- transform: rotate(50deg);
239
- }
240
- }
241
-
242
- @keyframes hamsterBRLimb {
243
- from, 25%, 50%, 75%, to {
244
- transform: rotate(-60deg) translateZ(-1px);
245
- }
246
-
247
- 12.5%, 37.5%, 62.5%, 87.5% {
248
- transform: rotate(20deg) translateZ(-1px);
249
- }
250
- }
251
-
252
- @keyframes hamsterBLLimb {
253
- from, 25%, 50%, 75%, to {
254
- transform: rotate(20deg);
255
- }
256
-
257
- 12.5%, 37.5%, 62.5%, 87.5% {
258
- transform: rotate(-60deg);
259
- }
260
- }
261
-
262
- @keyframes hamsterTail {
263
- from, 25%, 50%, 75%, to {
264
- transform: rotate(30deg) translateZ(-1px);
265
- }
266
-
267
- 12.5%, 37.5%, 62.5%, 87.5% {
268
- transform: rotate(10deg) translateZ(-1px);
269
- }
270
- }
271
-
272
- @keyframes spoke {
273
- from {
274
- transform: rotate(0);
275
- }
276
-
277
- to {
278
- transform: rotate(-1turn);
279
- }
280
- }
281
- </style>
282
- </head>
283
- <body>
284
- <!-- Paste the HTML markup here -->
285
- <div aria-label="Orange and tan hamster running in a metal wheel" role="img" class="wheel-and-hamster">
286
- <div class="wheel"></div>
287
- <div class="hamster">
288
- <div class="hamster__body">
289
- <div class="hamster__head">
290
- <div class="hamster__ear"></div>
291
- <div class="hamster__eye"></div>
292
- <div class="hamster__nose"></div>
293
- </div>
294
- <div class="hamster__limb hamster__limb--fr"></div>
295
- <div class="hamster__limb hamster__limb--fl"></div>
296
- <div class="hamster__limb hamster__limb--br"></div>
297
- <div class="hamster__limb hamster__limb--bl"></div>
298
- <div class="hamster__tail"></div>
299
- </div>
300
- </div>
301
- <div class="spoke"></div>
302
- </div>
303
- </body>
304
- </html>