html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="div1"
onclick="HeadColorChange(),BodyColorChange(),RHCCh(),LHCCh(),HCCh(),RLCCh(),LLCCh()">
<div class ="head". .> </div>
<div class ="body"></div>
<div class ="ears2"></div>
<div class ="right hand"></div>
<div class ="left hand"></div>
<div class ="hood"></div>
<div class ="right leg"></div>
<div class ="left leg"></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
body {
}
.div1{
width:80%;
height:500px;
background-color:rgb(111,33,235);
border-radius:50px;
border:12px solid black;
transition:all 2s ease;
}
.head{
width:140px;
height:140px;
border-radius:50%;
background-color:rgb(222,225,200);
position:absolute ;
transform:translate(80px , 100px);
transition:all 2s ease;
justify-content:center;
align-items:center;
display:flex;
font-size:90px;
}
.body{
width:300px;
height:200px;
background-color:rgb{225,225,200};
Enter to Rename, Shift+Enter to Preview
js
js
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
function HeadColorChange(){
var c= document.querySelector(".head")
c.classList.toggle("headcss")
}
function BodyColorChange(){
var b= document.querySelector(".body")
b.classList.toggle("bodycss")
}
function RHCCh(){
var r= document.querySelector(".RightHand")
r.classList.toggle("RHcss")
}
function LHCCh(){
var l= document.querySelector(".LeftHand")
l.classList.toggle("LHcss")
}
function HCCh(){
var h= document.querySelector(".Hood")
h.classList.toggle("hoodcss")
}
function RLCCh(){
var i= document.querySelector(".RightLeg")
i.classList.toggle("RLcss")
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run