Skip to content

Commit 5ffb523

Browse files
Added Day 90
1 parent fbb7808 commit 5ffb523

File tree

1 file changed

+72
-0
lines changed

1 file changed

+72
-0
lines changed

public/90/index.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
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="switch-inner"></div>
13+
</div>
14+
</main>
15+
16+
<style>
17+
body {
18+
margin: 0;
19+
overflow: hidden;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
min-height: 100vh;
24+
background-color: #fff;
25+
}
26+
27+
.switch {
28+
position: relative;
29+
cursor: pointer;
30+
width: 100px;
31+
height: 100px;
32+
border-radius: 30px;
33+
background-color: transparent;
34+
outline: 10px solid #000;
35+
outline-offset: -10px;
36+
overflow: hidden;
37+
}
38+
39+
.switch-inner {
40+
position: absolute;
41+
top: calc(50% - 30px);
42+
left: calc(50% - 30px);
43+
width: 60px;
44+
height: 60px;
45+
border-radius: 12px;
46+
background-color: #000;
47+
opacity: 0;
48+
transform-origin: center center;
49+
transform: scale(2) rotate(135deg);
50+
transition: all 0.5s ease-in-out;
51+
}
52+
53+
.switch:hover .switch-inner {
54+
opacity: 0.2;
55+
}
56+
57+
.switch-on .switch-inner,
58+
.switch-on:hover .switch-inner {
59+
opacity: 1;
60+
transform: scale(1) rotate(0deg);
61+
}
62+
</style>
63+
64+
<script>
65+
const switchElement = document.getElementById("switch");
66+
67+
switchElement.addEventListener("click", () => {
68+
switchElement.classList.toggle("switch-on");
69+
});
70+
</script>
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)