Skip to content

Commit 504b7c6

Browse files
Added Day 91
1 parent 5ffb523 commit 504b7c6

File tree

1 file changed

+76
-0
lines changed

1 file changed

+76
-0
lines changed

public/91/index.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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: #000;
25+
}
26+
27+
.switch {
28+
position: relative;
29+
cursor: pointer;
30+
width: 80px;
31+
height: 80px;
32+
border-radius: 100px;
33+
background-color: #000;
34+
outline: 10px solid #fff;
35+
overflow: hidden;
36+
37+
transition: all 0.5s ease-in-out;
38+
}
39+
40+
.switch-inner {
41+
position: absolute;
42+
top: 10px;
43+
left: 10px;
44+
width: 60px;
45+
height: 60px;
46+
border-radius: 100px;
47+
background-color: transparent;
48+
outline: 10px solid #fff;
49+
outline-offset: -10px;
50+
scale: 0;
51+
transition: all 0.5s ease-in-out;
52+
}
53+
54+
.switch-on {
55+
scale: 1.25;
56+
background-color: #fff;
57+
border-radius: 0%;
58+
outline: 10px solid transparent;
59+
}
60+
61+
.switch-on .switch-inner {
62+
outline: 10px solid #000;
63+
border-radius: 0%;
64+
scale: 1;
65+
}
66+
</style>
67+
68+
<script>
69+
const switchElement = document.getElementById("switch");
70+
71+
switchElement.addEventListener("click", () => {
72+
switchElement.classList.toggle("switch-on");
73+
});
74+
</script>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)