<html>
<head>
<title>MY PANDA</title>
</head>
<body>
<div id="wrapContainer">
<div id="lear">
<div id="innerearl"></div>
</div>
<div id="rear">
<div id="innerearr"></div>
</div>
<div id="face">
<div id="outerl">
<div id="innerCL">
<div id="blueL">
<div id="innerB">
</div>
<div id="black">
<div id="glare"></div>
<div id="gSmall"></div>
</div>
</div>
</div>
</div>
<div id="outerr">
<div id="innerCR">
<div id="blueR">
<div id="innerBR">
</div>
<div id="blackR">
<div id="glareR"></div>
<div id="gSmallR"></div>
</div>
</div>
</div>
</div>
<div id="nose"></div>
<div id="bridge"></div>
<div id="mouth"></div>
</div>
</div>
</body>
</html>body {
background: hsla(157, 93%, 62%, 1);
background: linear-gradient(90deg, hsla(157, 93%, 62%, 1) 0%, hsla(208, 89%, 72%, 1) 100%);
background: -moz-linear-gradient(90deg, hsla(157, 93%, 62%, 1) 0%, hsla(208, 89%, 72%, 1) 100%);
background: -webkit-linear-gradient(90deg, hsla(157, 93%, 62%, 1) 0%, hsla(208, 89%, 72%, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#42f8b2", endColorstr="#79bcf7", GradientType=1);
}
#wrapContainer {
position: absolute;
width: 500px;
height: 400px;
top: 90px;
left: 150px;
}
#lear {
width: 166px;
height: 160px;
background-color: black;
position: absolute;
border-radius: 50%;
top: 1px;
left: -107px;
}
#rear {
width: 166px;
height: 160px;
background-color: black;
position: absolute;
border-radius: 50%;
top: 1px;
left: 330px;
}
#innerearl {
width: 110px;
height: 108px;
background-color: rgb(51, 48, 48);
position: absolute;
border-radius: 50%;
top: 28px;
left: 32px;
}
#innerearr {
width: 110px;
height: 108px;
background-color: rgb(51, 48, 48);
position: absolute;
border-radius: 50%;
top: 28px;
left: 21px;
}
#outerl {
border-radius: 53% 47% 84% 16% / 52% 46% 54% 48%;
background-color: black;
position: absolute;
top: 58px;
left: 69px;
width: 100px;
height: 150px;
}
#outerr {
border-radius: 53% 47% 14% 86% / 52% 46% 54% 48%;
background-color: black;
position: absolute;
top: 58px;
right: 71px;
width: 100px;
height: 150px;
}
#innerCL {
position: absolute;
width: 80px;
height: 100px;
background-color: white;
top: 28px;
left: 12px;
border-radius: 50%;
}
#innerCR {
position: absolute;
width: 80px;
height: 100px;
background-color: white;
top: 28px;
right: 12px;
border-radius: 50%;
}
#face {
width: 400px;
height: 350px;
border-radius: 50%;
background-color: white;
position: relative;
}
#blueL {
position: absolute;
width: 60px;
height: 80px;
background-color: #0F305B;
top: 13px;
left: 3px;
border-radius: 50%;
animation-name: eyeMovement;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
@keyframes eyeMovement {
to {
left: 20px;
}
}
#blueR {
position: absolute;
width: 60px;
height: 80px;
background-color: #0F305B;
top: 13px;
right: 21px;
border-radius: 50%;
animation-name: eyeMovement2;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
}
@keyframes eyeMovement2 {
to {
right: 2px;
}
}
#innerB {
position: absolute;
width: 54px;
height: 60px;
background-color: #7FB4BE;
top: 19px;
right: 3px;
border-radius: 50%;
filter: blur(3px);
-webkit-filter: blur(3px);
}
#innerBR {
position: absolute;
width: 54px;
height: 60px;
background-color: #7FB4BE;
top: 19px;
left: 3px;
border-radius: 50%;
filter: blur(3px);
-webkit-filter: blur(3px);
}
#black {
position: absolute;
width: 51px;
height: 60px;
background-color: black;
top: 12px;
left: 10px;
border-radius: 50%;
}
#blackR {
position: absolute;
width: 51px;
height: 60px;
background-color: black;
top: 13px;
right: 10px;
border-radius: 50%;
}
#glare {
background-color: white;
width: 17px;
border-radius: 50%;
height: 16px;
top: -4px;
left: -3px;
position: absolute;
filter: blur(1px);
-webkit-filter: blur(1px);
}
#glareR {
background-color: white;
width: 17px;
border-radius: 50%;
height: 16px;
top: -4px;
left: 7px;
position: absolute;
filter: blur(1px);
-webkit-filter: blur(1px);
}
#glareR {
background-color: white;
width: 17px;
border-radius: 50%;
height: 16px;
top: -4px;
left: 7px;
position: absolute;
filter: blur(1px);
-webkit-filter: blur(1px);
}
#gSmall {
background-color: white;
width: 8px;
border-radius: 50%;
height: 9px;
top: 39px;
left: 42px;
position: absolute;
filter: blur(2px);
-webkit-filter: blur(2px);
}
#gSmallR {
background-color: white;
width: 8px;
border-radius: 50%;
height: 9px;
top: 39px;
left: 42px;
position: absolute;
filter: blur(2px);
-webkit-filter: blur(2px);
}
#nose {
width: 69px;
height: 55px;
background-color: black;
border-radius: 54% 46% 46% 54% / 30% 30% 70% 70%;
top: 194px;
left: 163px;
position: absolute;
}
#mouth {
position: absolute;
background-color: black;
width: 95px;
height: 50px;
border-radius: 7px 7px 100px 100px;
top: 289px;
left: 150px;
}
#bridge {
width: 5px;
height: 45px;
background-color: black;
top: 248px;
left: 196px;
position: absolute;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.