Skip to content

Commit 8a2a235

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 44-46
1 parent 63b7f0e commit 8a2a235

4 files changed

Lines changed: 546 additions & 0 deletions

File tree

‎public/44/index.html‎

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
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+
<link rel="icon" href="/assets/icon.png" />
7+
<title>Day 44/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="upload-container">
12+
<div class="uploading">
13+
<div class="pixel-1"></div>
14+
<div class="pixel-2"></div>
15+
<div class="pixel-3"></div>
16+
<div class="pixel-4"></div>
17+
<div class="pixel-5"></div>
18+
</div>
19+
<div class="upload-text">UPLOADING</div>
20+
</div>
21+
</main>
22+
23+
<style>
24+
@font-face {
25+
font-family: "SpaceMono";
26+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
27+
font-weight: 700;
28+
}
29+
30+
body {
31+
margin: 0;
32+
overflow: hidden;
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
width: 100vw;
37+
height: 100vh;
38+
background-color: #000;
39+
}
40+
41+
.upload-container {
42+
display: flex;
43+
flex-direction: column;
44+
justify-content: center;
45+
align-items: center;
46+
gap: 20px;
47+
}
48+
49+
.upload-text {
50+
color: #fff;
51+
font-family: "SpaceMono", monospace;
52+
font-weight: 700;
53+
font-size: 32px;
54+
}
55+
56+
.uploading {
57+
position: relative;
58+
width: 100px;
59+
height: 100px;
60+
margin-bottom: 20px;
61+
display: flex;
62+
justify-content: center;
63+
align-items: center;
64+
}
65+
66+
.pixel-1,
67+
.pixel-2,
68+
.pixel-3,
69+
.pixel-4,
70+
.pixel-5 {
71+
width: 20%;
72+
height: 20%;
73+
background-color: #fff;
74+
}
75+
76+
.pixel-1 {
77+
position: absolute;
78+
top: 40%;
79+
left: 0%;
80+
81+
animation: pixel-1-animation 5s ease-in-out infinite 1.25s;
82+
}
83+
84+
@keyframes pixel-1-animation {
85+
0% {
86+
top: 40%;
87+
left: 0%;
88+
}
89+
12.5% {
90+
top: 60%;
91+
left: 20%;
92+
}
93+
25% {
94+
top: 20%;
95+
left: 20%;
96+
}
97+
37.5% {
98+
top: 20%;
99+
left: 60%;
100+
}
101+
50% {
102+
top: 60%;
103+
left: 60%;
104+
}
105+
62.5% {
106+
top: 60%;
107+
left: 20%;
108+
}
109+
75% {
110+
top: 40%;
111+
left: 0%;
112+
}
113+
100% {
114+
top: 40%;
115+
left: 0%;
116+
}
117+
}
118+
119+
.pixel-2 {
120+
position: absolute;
121+
top: 20%;
122+
left: 20%;
123+
124+
animation: pixel-2-animation 5s ease-in-out infinite 1.25s;
125+
}
126+
127+
@keyframes pixel-2-animation {
128+
0% {
129+
top: 20%;
130+
left: 20%;
131+
}
132+
12.5% {
133+
top: 20%;
134+
left: 20%;
135+
}
136+
25% {
137+
top: 20%;
138+
left: 60%;
139+
}
140+
37.5% {
141+
top: 60%;
142+
left: 60%;
143+
}
144+
50% {
145+
top: 60%;
146+
left: 20%;
147+
}
148+
62.5% {
149+
top: 20%;
150+
left: 20%;
151+
}
152+
75% {
153+
top: 20%;
154+
left: 20%;
155+
}
156+
100% {
157+
top: 20%;
158+
left: 20%;
159+
}
160+
}
161+
162+
.pixel-3 {
163+
position: absolute;
164+
top: 20%;
165+
left: 60%;
166+
167+
animation: pixel-3-animation 5s ease-in-out infinite 1.25s;
168+
}
169+
170+
@keyframes pixel-3-animation {
171+
0% {
172+
top: 20%;
173+
left: 60%;
174+
}
175+
12.5% {
176+
top: 20%;
177+
left: 60%;
178+
}
179+
25% {
180+
top: 60%;
181+
left: 60%;
182+
}
183+
37.5% {
184+
top: 60%;
185+
left: 20%;
186+
}
187+
50% {
188+
top: 20%;
189+
left: 20%;
190+
}
191+
62.5% {
192+
top: 20%;
193+
left: 60%;
194+
}
195+
75% {
196+
top: 20%;
197+
left: 60%;
198+
}
199+
100% {
200+
top: 20%;
201+
left: 60%;
202+
}
203+
}
204+
205+
.pixel-4 {
206+
position: absolute;
207+
top: 40%;
208+
left: 80%;
209+
210+
animation: pixel-4-animation 5s ease-in-out infinite 1.25s;
211+
}
212+
213+
@keyframes pixel-4-animation {
214+
0% {
215+
top: 40%;
216+
left: 80%;
217+
}
218+
12.5% {
219+
top: 60%;
220+
left: 60%;
221+
}
222+
25% {
223+
top: 60%;
224+
left: 20%;
225+
}
226+
37.5% {
227+
top: 20%;
228+
left: 20%;
229+
}
230+
50% {
231+
top: 20%;
232+
left: 60%;
233+
}
234+
62.5% {
235+
top: 60%;
236+
left: 60%;
237+
}
238+
75% {
239+
top: 40%;
240+
left: 80%;
241+
}
242+
100% {
243+
top: 40%;
244+
left: 80%;
245+
}
246+
}
247+
248+
.pixel-5 {
249+
position: absolute;
250+
top: 0%;
251+
left: 40%;
252+
height: 120%;
253+
254+
animation: pixel-5-animation 5s ease-in-out infinite 1.25s;
255+
}
256+
257+
@keyframes pixel-5-animation {
258+
0% {
259+
top: 0%;
260+
height: 120%;
261+
opacity: 100%;
262+
}
263+
12.5% {
264+
top: -40%;
265+
height: 0%;
266+
opacity: 0%;
267+
}
268+
62.5% {
269+
top: 140%;
270+
height: 0%;
271+
opacity: 0%;
272+
}
273+
75% {
274+
top: 0%;
275+
height: 120%;
276+
opacity: 100%;
277+
}
278+
100% {
279+
top: 0%;
280+
height: 120%;
281+
opacity: 100%;
282+
}
283+
}
284+
</style>
285+
</body>
286+
</html>

0 commit comments

Comments
 (0)