Code Newbie CSS Art pt2

Hello everyone!

Here is a quick tutorial on another static CSS image I created a few weeks ago. I hope to show more CSS images that are responsive soon. But I'm currently learning Node.js and that is taking all my time!

1) HTML:

<div class="container">
      <div class="robothead">
        <div class="ear"></div>
        <div class="antenna"></div>
        <div class="face">
          <div class="eyes">
            <div class="pupil"></div>
          </div>
          <div class="mouth"></div>
        </div>
      </div>
      <div class="body">
        <div class="neck"></div>
        <div class="torso"></div>
      </div>
</div>

2) CSS:

* {
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #defff9;
}

.container {
  background-color: #f6393c;
  position: relative;
  width: 500px;
  height: 500px;
  top: 40px;
  left: 30px;
  border-radius: 50%;
  overflow: hidden;
}

.robothead {
  background-color: #bbbbbb;
  position: relative;
  width: 50%;
  height: 50%;
  top: 160px;

  border-radius: 20px;
}

.ear {
  background-color: #ff8c00;
  position: absolute;
  width: 30px;
  height: 60px;
  border-radius: 6px;
  top: 80px;
  left: -30px;
}

.ear::after {
  content: "";
  background-color: #ff8c00;
  position: absolute;
  width: 30px;
  height: 60px;
  border-radius: 6px;
  left: 280px;
}

.antenna {
  position: relative;
  background-color: #ff8c00;
  width: 60px;
  height: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  bottom: 20px;
}

.antenna::before {
  content: "";
  position: absolute;
  background-color: #ff8c00;
  width: 14px;
  height: 20px;
  bottom: 19px;
  left: 23px;
}

.antenna::after {
  content: "";
  position: absolute;
  background-color: #ff8c00;
  width: 30px;
  height: 30px;
  bottom: 37px;
  left: 15px;
  border-radius: 50%;
}

.face {
  position: relative;
  /* border: 1px solid white; */
  width: 200px;
  height: 200px;
}

.eyes {
  position: absolute;
  background-color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 40px;
  left: 8px;
}

.eyes::after {
  content: "";
  position: absolute;
  background-color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  left: 118px;
}

.pupil {
  position: absolute;
  background-color: black;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 30px;
  left: 20px;
}

.pupil::after {
  content: "";
  position: absolute;
  background-color: black;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  left: 106px;
  z-index: 1;
}

.mouth {
  position: absolute;
  border-top: 3px solid black;
  width: 150px;
  height: 10px;
  bottom: 30px;
  left: 25px;
}

.body {
  position: relative;
  top: 160px;
}

.neck {
  position: relative;
  width: 20px;
  height: 80px;
  background-color: #bbbbbb;
}

.torso {
  position: relative;
  background-color: #bbbbbb;
  width: 140px;
  height: 70px;
  border-radius: 20px;
  bottom: 50px;
}

.torso::after {
  content: "";
  position: absolute;
  background-color: #ff8c00;
  width: 40px;
  height: 20px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  left: 50px;
}

Live view of the code and image here!

I hope you like this little guy. I thought he was adorable. He's not perfect and I'm still working on my CSS and CSS art skills. The next few images will be even better. I want to build up to creating single-div CSS images. Please share resources and links to your own CSS art.

In my previous post, I share lots of resources for getting started in CSS art check it out here!