Delete assets
Browse files- assets/demo.txt +0 -0
- 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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|