File tree Expand file tree Collapse file tree 1 file changed +76
-0
lines changed
Expand file tree Collapse file tree 1 file changed +76
-0
lines changed Original file line number Diff line number Diff line change 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 >
You can’t perform that action at this time.
0 commit comments