Skip to content

Commit 62bb1e5

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 85
1 parent d9c9b98 commit 62bb1e5

File tree

1 file changed

+129
-0
lines changed

1 file changed

+129
-0
lines changed

‎public/85/index.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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 85/100</title>
7+
</head>
8+
<body>
9+
<main>
10+
<div class="pendulum pendulum-left"></div>
11+
<div class="pendulum pendulum-1"></div>
12+
<div class="pendulum pendulum-2"></div>
13+
<div class="pendulum pendulum-3"></div>
14+
<div class="pendulum pendulum-right"></div>
15+
</main>
16+
17+
<style>
18+
body {
19+
margin: 0;
20+
overflow: hidden;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
width: 100vw;
25+
height: 100vh;
26+
background-color: #000;
27+
}
28+
29+
.pendulum {
30+
position: fixed;
31+
top: 0%;
32+
width: 50px;
33+
height: 50%;
34+
transform-origin: top center;
35+
}
36+
37+
.pendulum::before {
38+
content: "";
39+
position: absolute;
40+
top: 0%;
41+
left: 50%;
42+
transform: translate(-50%, 0%);
43+
width: 2px;
44+
height: 100%;
45+
background-color: rgba(40, 40, 40, 1);
46+
}
47+
48+
.pendulum::after {
49+
content: "";
50+
position: absolute;
51+
top: 100%;
52+
left: 50%;
53+
transform: translate(-50%, -50%);
54+
width: 50px;
55+
height: 50px;
56+
background-color: #fff;
57+
border-radius: 25px;
58+
}
59+
60+
.pendulum-left {
61+
left: 50%;
62+
transform: translate(-250%, 0%);
63+
rotate: 10deg;
64+
65+
animation: pendulum-left-animation 2s infinite;
66+
}
67+
68+
.pendulum-1 {
69+
left: 50%;
70+
transform: translate(-150%, 0%);
71+
}
72+
73+
.pendulum-2 {
74+
left: 50%;
75+
transform: translate(-50%, 0%);
76+
}
77+
78+
.pendulum-3 {
79+
left: 50%;
80+
transform: translate(50%, 0%);
81+
}
82+
83+
.pendulum-right {
84+
left: 50%;
85+
transform: translate(150%, 0%);
86+
87+
animation: pendulum-right-animation 2s infinite;
88+
}
89+
90+
@keyframes pendulum-left-animation {
91+
0% {
92+
rotate: 0deg;
93+
animation-timing-function: ease-out;
94+
}
95+
25% {
96+
rotate: 10deg;
97+
animation-timing-function: ease-in;
98+
}
99+
50% {
100+
rotate: 0deg;
101+
animation-timing-function: ease-out;
102+
}
103+
100% {
104+
rotate: 0deg;
105+
animation-timing-function: ease-out;
106+
}
107+
}
108+
109+
@keyframes pendulum-right-animation {
110+
0% {
111+
rotate: 0deg;
112+
animation-timing-function: ease-out;
113+
}
114+
50% {
115+
rotate: 0deg;
116+
animation-timing-function: ease-out;
117+
}
118+
75% {
119+
rotate: -10deg;
120+
animation-timing-function: ease-in;
121+
}
122+
100% {
123+
rotate: 0deg;
124+
animation-timing-function: ease-out;
125+
}
126+
}
127+
</style>
128+
</body>
129+
</html>

0 commit comments

Comments
 (0)