Skip to content

Commit 65ce1d3

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 92
1 parent 504b7c6 commit 65ce1d3

File tree

1 file changed

+143
-0
lines changed

1 file changed

+143
-0
lines changed

‎public/92/index.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
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 90/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="switch" id="switch">
12+
<div class="rect rect-o-1"></div>
13+
<div class="rect rect-o-2"></div>
14+
<div class="rect rect-o-3"></div>
15+
<div class="rect rect-o-4"></div>
16+
17+
<div class="rect rect-f-1-1"></div>
18+
<div class="rect rect-f-1-2"></div>
19+
<div class="rect rect-f-1-3"></div>
20+
<div class="rect rect-f-2-1"></div>
21+
<div class="rect rect-f-2-2"></div>
22+
<div class="rect rect-f-2-3"></div>
23+
</div>
24+
</main>
25+
26+
<style>
27+
body {
28+
margin: 0;
29+
overflow: hidden;
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
min-height: 100vh;
34+
background-color: #000;
35+
}
36+
37+
.switch {
38+
position: relative;
39+
cursor: pointer;
40+
height: 100px;
41+
aspect-ratio: 17/5;
42+
43+
transition: all 0.5s ease-in-out;
44+
}
45+
46+
.rect {
47+
position: absolute;
48+
background-color: #fff;
49+
transition: all 0.5s ease-in-out;
50+
width: 20px;
51+
height: 20px;
52+
}
53+
54+
.rect-o-1 {
55+
top: 0px;
56+
left: 20px;
57+
width: 60px;
58+
}
59+
.rect-o-2 {
60+
top: 20px;
61+
left: 80px;
62+
height: 60px;
63+
}
64+
.rect-o-3 {
65+
top: 80px;
66+
left: 20px;
67+
width: 60px;
68+
}
69+
.rect-o-4 {
70+
top: 20px;
71+
left: 0px;
72+
height: 60px;
73+
}
74+
75+
.rect-f-1-1 {
76+
top: 0px;
77+
left: 120px;
78+
width: 100px;
79+
}
80+
.rect-f-1-2 {
81+
top: 40px;
82+
left: 120px;
83+
width: 80px;
84+
}
85+
.rect-f-1-3 {
86+
top: 0px;
87+
left: 120px;
88+
height: 100px;
89+
}
90+
91+
.rect-f-2-1 {
92+
top: 0px;
93+
left: 240px;
94+
width: 100px;
95+
}
96+
.rect-f-2-2 {
97+
top: 40px;
98+
left: 240px;
99+
width: 80px;
100+
}
101+
.rect-f-2-3 {
102+
top: 0px;
103+
left: 240px;
104+
height: 100px;
105+
}
106+
107+
.switch-on {
108+
aspect-ratio: 11/5;
109+
}
110+
111+
.switch-on .rect-f-1-1 {
112+
top: 20px;
113+
left: 140px;
114+
width: 20px;
115+
}
116+
.switch-on .rect-f-1-2 {
117+
left: 160px;
118+
width: 20px;
119+
}
120+
121+
.switch-on .rect-f-2-1 {
122+
top: 60px;
123+
left: 180px;
124+
width: 20px;
125+
}
126+
.switch-on .rect-f-2-2 {
127+
left: 160px;
128+
width: 20px;
129+
}
130+
.switch-on .rect-f-2-3 {
131+
left: 200px;
132+
}
133+
</style>
134+
135+
<script>
136+
const switchElement = document.getElementById("switch");
137+
138+
switchElement.addEventListener("click", () => {
139+
switchElement.classList.toggle("switch-on");
140+
});
141+
</script>
142+
</body>
143+
</html>

0 commit comments

Comments
 (0)