Skip to content

Commit 92fdd4c

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 86
1 parent 62bb1e5 commit 92fdd4c

1 file changed

Lines changed: 137 additions & 0 deletions

File tree

‎public/86/index.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
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>Day 86/100</title>
7+
</head>
8+
<body>
9+
<main>
10+
<div class="cubes">
11+
<div class="cube cube-1" id="cube-1"></div>
12+
<div class="cube cube-2" id="cube-2"></div>
13+
<div class="cube cube-3" id="cube-3"></div>
14+
<div class="cube cube-4" id="cube-4"></div>
15+
<div class="cube cube-5" id="cube-5"></div>
16+
<div class="cube cube-6" id="cube-6"></div>
17+
</div>
18+
19+
<style>
20+
body {
21+
margin: 0;
22+
overflow: hidden;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
width: 100vw;
27+
height: 100vh;
28+
background-color: #000;
29+
}
30+
31+
.cubes {
32+
display: flex;
33+
}
34+
35+
.cube {
36+
width: 50px;
37+
height: 50px;
38+
outline: 3px solid #fff;
39+
outline-offset: -3px;
40+
border-radius: 8px;
41+
}
42+
43+
.cube-1 {
44+
opacity: 0;
45+
background-color: #fff;
46+
}
47+
48+
.cube-2 {
49+
opacity: 0;
50+
width: 25px;
51+
}
52+
53+
.cube-3 {
54+
opacity: 0;
55+
width: 25px;
56+
}
57+
58+
.cube-4 {
59+
opacity: 0;
60+
}
61+
62+
.cube-5 {
63+
opacity: 0;
64+
width: 100px;
65+
}
66+
67+
.cube-6 {
68+
opacity: 0;
69+
background-color: #fff;
70+
}
71+
72+
@keyframes fade-in {
73+
0% {
74+
opacity: 0;
75+
}
76+
100% {
77+
opacity: 1;
78+
}
79+
}
80+
81+
@keyframes move-in-left {
82+
0% {
83+
opacity: 0;
84+
transform: translateX(-20vw);
85+
}
86+
100% {
87+
opacity: 1;
88+
transform: translateX(0%);
89+
}
90+
}
91+
92+
@keyframes move-in-right {
93+
0% {
94+
opacity: 0;
95+
transform: translateX(20vw);
96+
}
97+
100% {
98+
opacity: 1;
99+
transform: translateX(0%);
100+
}
101+
}
102+
</style>
103+
104+
<script>
105+
const cube1 = document.getElementById("cube-1");
106+
const cube2 = document.getElementById("cube-2");
107+
const cube3 = document.getElementById("cube-3");
108+
const cube4 = document.getElementById("cube-4");
109+
const cube5 = document.getElementById("cube-5");
110+
const cube6 = document.getElementById("cube-6");
111+
112+
cube4.style.animation = "fade-in 1s ease-in-out";
113+
cube4.style.opacity = 1;
114+
setTimeout(() => {
115+
cube3.style.animation = "move-in-left 1s ease-in-out";
116+
cube3.style.opacity = 1;
117+
setTimeout(() => {
118+
cube5.style.animation = "move-in-right 1s ease-in-out";
119+
cube5.style.opacity = 1;
120+
setTimeout(() => {
121+
cube2.style.animation = "move-in-left 1s ease-in-out";
122+
cube2.style.opacity = 1;
123+
setTimeout(() => {
124+
cube6.style.animation = "move-in-right 1s ease-in-out";
125+
cube6.style.opacity = 1;
126+
setTimeout(() => {
127+
cube1.style.animation = "move-in-left 1s ease-in-out";
128+
cube1.style.opacity = 1;
129+
}, 1000);
130+
}, 1000);
131+
}, 1000);
132+
}, 1000);
133+
}, 1000);
134+
</script>
135+
</main>
136+
</body>
137+
</html>

0 commit comments

Comments
 (0)