Skip to content

Commit 703f8cc

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 88
1 parent e4a0f3f commit 703f8cc

File tree

1 file changed

+94
-0
lines changed

1 file changed

+94
-0
lines changed

‎public/88/index.html‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
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 88/100</title>
7+
</head>
8+
<body>
9+
<main>
10+
<div class="toggle" id="toggle">
11+
<div class="toggle-indicator">
12+
<div class="toggle-indicator-back"></div>
13+
<div class="toggle-indicator-front"></div>
14+
</div>
15+
</div>
16+
</main>
17+
18+
<style>
19+
body {
20+
margin: 0;
21+
overflow: hidden;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
width: 100vw;
26+
height: 100vh;
27+
background-color: #fff;
28+
}
29+
30+
.toggle {
31+
position: relative;
32+
cursor: pointer;
33+
width: 200px;
34+
height: 100px;
35+
outline: 10px solid rgba(235, 235, 235, 1);
36+
outline-offset: -10px;
37+
}
38+
39+
.toggle::before {
40+
content: "";
41+
position: absolute;
42+
top: 0%;
43+
left: 0%;
44+
width: 100px;
45+
height: 100px;
46+
background-color: rgba(235, 235, 235, 1);
47+
}
48+
49+
.toggle-indicator {
50+
position: absolute;
51+
top: 0%;
52+
left: 0%;
53+
width: 100px;
54+
height: 100px;
55+
transform: perspective(2000px);
56+
transform-style: preserve-3d;
57+
transform-origin: center right;
58+
59+
transition: all 0.5s ease-in-out;
60+
}
61+
62+
.toggle-indicator-front,
63+
.toggle-indicator-back {
64+
position: absolute;
65+
top: 0%;
66+
left: 0%;
67+
width: 100px;
68+
height: 100px;
69+
backface-visibility: hidden;
70+
}
71+
72+
.toggle-indicator-front {
73+
background-color: rgba(180, 180, 180, 1);
74+
}
75+
76+
.toggle-indicator-back {
77+
background-color: #000;
78+
transform: rotateY(180deg);
79+
}
80+
81+
.toggle-on .toggle-indicator {
82+
transform: rotateY(180deg);
83+
}
84+
</style>
85+
86+
<script>
87+
const toggle = document.getElementById("toggle");
88+
89+
toggle.addEventListener("click", () => {
90+
toggle.classList.toggle("toggle-on");
91+
});
92+
</script>
93+
</body>
94+
</html>

0 commit comments

Comments
 (0)