<div class="face">
  <div class="mouth"></div>
  <div class="eye-section">
    <div class="left-eye"></div>
    <div class="right-eye"></div>
    </di>
</div>



body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}


.face {
  background-color: #fcba03;
  width: 400px;
  height: 400px;
  border-radius: 100%;
}

.mouth {
  position: absolute;
  background-color: #4f2103;
  width: 215px;
  height: 90px;
  border-radius: 7px 7px 100px 100px;
  top: 250px;
  left: 90px;
}


.eye-section {
  
/*   added border just to see the eye section */
/*   border: solid red 2px; */
  
  width: 285px;
  height: 100px;
  position: absolute;
  left: 60px;
  top: 70px;
}

.left-eye, .right-eye {
  background-color: #4f2103;
  width: 52px;
  height: 60px;
  border-radius: 50px;
  position: absolute;
  top: 25px;
}

.right-eye {
  right: 20px;
}

.left-eye::before, .right-eye::before {
  content: "";
  display: block;
  background-color: white;
  width: 23px;
  height: 23px;
  border-radius: 100px;
  position: absolute;
  top: 20px;
  left: 10px
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.