html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="sign" onclick="ColorChange()">
<div id="head" class="good">. .</div>
<div id="body" class="good"></div>
<div id="ears"></div>
<div id="ears2"></div>
<div id="rightHand" class="good"></div>
<div id="leftHand" class="good"></div>
<div id="hip" class="good"></div>
<div id="rightLeg" class="good"></div>
<div id="leftLeg" class="good"></div>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#sign {
height:500px;
width:80%;
background-color:rgb(111, 33, 235);
border-radius:50px;
border:12px solid black;
}
#sign > .good {
background-color:rgb(255, 255, 200);
transition:all 2s ease;
position:absolute;
}
#head{
width:140px;
height:140px;
border-radius:50%;
transform:translate(80px, 100px);
justify-content:center;
align-items:center;
display:flex;
font-size:90px;
}
#body{
width:30px;
height:200px;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
function ColorChange() {
const el = document.querySelector("#sign")
for (let ch=0; ch < el.children.length; ch++) {
el.children[ch].classList.toggle("evil")
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run