<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="csspanda.css">
    <title>CSS Panda</title>
</head>

<body>
    <div class="main-container">

        <div class="left-ear"></div>
        <div class="right-ear"></div>

        <div class="face">

            <div class="left-shy"></div>
            <div class="right-shy"></div>

            <div class="left-spot">
                <div class="left-eye"></div>
            </div>

            <div class="right-spot">
                <div class="right-eye"></div>
            </div>

            <div class="nose">
                <div class="bop-line">
                    <div class="bop-left"></div>
                    <div class="bop-right"></div>
                </div>
            </div>
            <!-- <div class="left-snout"></div> -->


        </div>
    </div>
</body>

</html>
.main-container {
  width: 300px;
  height: 300px;
  border: 3px solid black;
  margin: 0 auto;
  background: turquoise;
  position: relative;
}

.face {
  position: relative;
  width: 200px;
  height: 170px;
  background: white;
 
  margin: auto;
  margin-top: 80px;
  border-radius: 50% 50% 30% 30%;
}

.left-ear {
  width: 50px;
  height: 50px;
  background: black;
  border-radius: 50%;
  border: 20px solid #454545;
  margin-top: 80px;
  float: left;
  margin-left: 30px;
}

.right-ear {
  width: 50px;
  height: 50px;
  background: black;
  border-radius: 50%;
  border: 20px solid #454545;
  margin-top: 80px;
  float: right;
  margin-right: 30px;
}

.left-spot {
  width: 60px;
  height: 80px;
  position: absolute;
  background: black;
  border-radius: 50%;
  margin-top: 40px;
  left: 20px;
  transform: rotate(20deg);
}

.right-spot {
  width: 60px;
  height: 80px;
  position: absolute;
  background: black;
  border-radius: 50%;
  margin-top: 40px;
  right: 20px;
  transform: rotate(-20deg);
}

.left-eye {
  width: 15px;
  height: 15px;
  position: absolute;
  border-radius: 50%;
  background: white;
  margin: 30% 40%;
}

.right-eye {
  width: 15px;
  height: 15px;
  position: absolute;
  border-radius: 50%;
  background: white;
  margin: 30% 40%;
}

.nose {
  width: 30px;
  height: 15px;
  border-radius: 50% 50% 20% 20%;
  background: black;
  position: absolute;
 
  margin-top: 100px;
  left: 100px;
  margin-left: -15px;
}

.bop-line {
  height: 30px;
  border-left: 2px solid black;
  border-right: 2px solid black;
  position: absolute;
  left: 42%;
  margin: 0 auto;

 
}

.bop-left {
  width: 30px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid black;
  position: absolute;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  top: -30px;
  left: -28px;
}

.bop-right {
  width: 30px;
  height: 60px;
  border-radius: 50%;
  border: 4px solid black;
  position: absolute;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  margin-top: -30px;
  right: -28px;
}

.left-shy {
  width: 30px;
  height: 20px;
  background: lightpink;
  border-radius: 50%;
  position: absolute;
  left: 30px;
  top: 110px;
 
}

.right-shy {
  width: 30px;
  height: 20px;
  background: lightpink;
  border-radius: 50%;
  position: absolute;
  right: 30px;
  top: 110px;
 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.