Draw Doraemon Using HTML And CSS

Today we are going to draw one of our favorite cartoon characters Doraemon using HTML and CSS, we will use HTML to structure the page and then use CSS to design the look, feel, and color of the page.

Code to draw Doraemon using HTML and CSS

HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Doraemon</title>
  </head>

  <body>
    <h1 class="heading">Doraemon</h1>
    <div class="doraemon">
      <div class="head">
        <div class="face">
          <div class="eye-left">
            <div class="eyeball-left"></div>
          </div>
          <div class="eye-right">
            <div class="eyeball-right"></div>
          </div>

          <div class="nose">
            <div class="nose-inner"></div>
          </div>

          <div class="cheeks"></div>
          <div class="line"></div>

          <div class="mustache">
            <div class="mustache-left1"></div>
            <div class="mustache-left2"></div>
            <div class="mustache-left3"></div>
            <div class="mustache-right1"></div>
            <div class="mustache-right2"></div>
            <div class="mustache-right3"></div>
          </div>
          <div class="smile-left">
            <div class="tongue-left"></div>
          </div>
          <div class="smile-right">
            <div class="tongue-right"></div>
          </div>
        </div>
        <div class="outer-belt">
          <div class="belt">
            <div class="bell">
              <div class="strip"></div>
              <div class="hole"></div>
              <div class="Hline"></div>
            </div>
          </div>
        </div>
        <div class="left-hand">
          <div class="left-circle"></div>
        </div>
        <div class="right-hand">
          <div class="right-circle"></div>
        </div>
        <div class="front-body">
          <div class="stomach">
            <div class="stomach-circle">
              <div class="stomach-smile"></div>
              <div class="eraser"></div>
            </div>
          </div>
        </div>

        <div class="left-foot"></div>
        <div class="right-foot"></div>
      </div>
    </div>
  </body>
</html>

CSS code:

.heading {
  font-size: 3em;
  font-weight: 700;
  margin-top: 50px;
  text-align: center;
  font-family: "Oswald", sans-serif;
  color: #10d7fa;
  font-weight: 900;
}

.doraemon {
  display: flex;
  justify-content: center;
  width: 600px;
  height: 600px;
  margin: auto;
  border: 1px soild black;
  z-index: -1;
}

.head {
  position: relative;
  height: 240px;
  width: 250px;
  border-radius: 50% 50% 60% 60%;
  border: 1.5px solid;
  background-color: #10d7fa;
  padding: 0;
  z-index: 1;
}

.face {
  position: absolute;
  top: 38px;
  left: 13.5px;
  height: 190px;
  width: 220px;
  border-radius: 50% 50% 85% 85%;
  background-color: white;
  border: 1.5px solid;
  z-index: 2;
}

.eye-left,
.eye-right {
  position: absolute;
  top: -38px;
  left: 56px;
  height: 58px;
  width: 52px;
  border-radius: 50%;
  background-color: white;
  border: 1.5px solid;
  z-index: 3;
}

.eye-right {
  top: -38px;
  left: 110px;
}

.eyeball-left,
.eyeball-right {
  position: absolute;
  top: 28px;
  left: 30px;
  height: 6px;
  width: 3px;
  border-radius: 50%;
  background-color: white;
  border: 6px solid;
  z-index: 4;
}

.eyeball-right {
  left: 5px;
}

.nose {
  position: absolute;
  top: 8px;
  left: 94px;
  height: 30px;
  width: 30px;
  background-color: red;
  border-radius: 50%;
  border: 1.5px solid black;
  z-index: 5;
}

.nose-inner {
  position: absolute;
  top: 4px;
  left: 7px;
  height: 12px;
  width: 12px;
  background-color: white;
  border-radius: 50%;
  z-index: 6;
}

.cheeks {
  position: absolute;
  top: 40px;
  left: -7px;
  height: 50px;
  width: 230px;
  border-radius: 75px 75px 135px 135px;
  background-color: white;
  border-left: 1.5px solid;
  border-right: 1.5px solid;
  border-bottom: 1.5px solid;
  z-index: 6;
}

.line {
  position: absolute;
  top: 40px;
  left: 110px;
  height: 30px;
  width: 0px;
  border: 1px solid black;
  z-index: 6;
}

.mustache-left1 {
  position: absolute;
  top: 40px;
  left: 35px;
  width: 50px;
  border-top: 1.5px solid;
  transform: rotate(14deg);
  z-index: 6;
}

.mustache-left2 {
  position: absolute;
  top: 55px;
  left: 35px;
  width: 50px;
  border-top: 2px solid;
  z-index: 6;
}

.mustache-left3 {
  position: absolute;
  top: 70px;
  left: 35px;
  width: 50px;
  border-top: 2px solid;
  transform: rotate(-14deg);
  z-index: 6;
}

.mustache-right1 {
  position: absolute;
  top: 40px;
  left: 135px;
  width: 50px;
  border-top: 2px solid;
  transform: rotate(-14deg);
  z-index: 6;
}

.mustache-right2 {
  position: absolute;
  top: 55px;
  left: 135px;
  width: 50px;
  border-top: 2px solid;
  z-index: 6;
}

.mustache-right3 {
  position: absolute;
  top: 70px;
  left: 135px;
  width: 50px;
  border-top: 2px solid;
  transform: rotate(13deg);
  z-index: 6;
}

.smile-left {
  position: absolute;
  top: 90px;
  left: 28px;
  height: 85px;
  width: 80px;
  background-color: red;
  border-left: 2px solid;
  border-bottom: 3px solid;
  border-radius: 0 0% 0% 120%;
  z-index: 6;
}

.smile-right {
  position: absolute;
  top: 90px;
  left: 107px;
  height: 85px;
  width: 80px;
  background-color: red;
  border-right: 2px solid;
  border-bottom: 3px solid;
  border-radius: 0 0 120% 0%;
  z-index: 6;
}

.tongue-left {
  position: absolute;
  top: 57px;
  left: 45px;
  height: 25px;
  width: 30px;
  background-color: orange;
  border-top: 2px solid;
  border-left: 2px solid;
  border-radius: 50% 50% 0% 100%;
  z-index: 7;
}

.tongue-right {
  position: absolute;
  top: 57px;
  left: 0px;
  height: 25px;
  width: 30px;
  background-color: orange;
  border-top: 2px solid;
  border-right: 2px solid;
  border-radius: 50% 50% 100% 0%;
  z-index: 7;
}

.outer-belt {
  position: absolute;
  top: 225px;
  left: 40px;
  width: 162px;
  border-radius: 0 0 80% 80%;
  border-bottom: 20px solid black;
  z-index: 7;
}

.belt {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 159px;
  border-radius: 0 0 80% 80%;
  border-bottom: 17px solid red;
  z-index: 8;
}

.bell {
  position: absolute;
  top: 3px;
  left: 65px;
  height: 25px;
  width: 25px;
  border: 1.5px solid;
  border-radius: 50%;
  background-color: #f6f208;
  z-index: 9;
}

.strip {
  position: absolute;
  top: 5px;
  left: -1px;
  width: 25px;
  height: 3px;
  border: 1px solid black;
  border-radius: 30%;
  z-index: 10;
}

.hole {
  position: absolute;
  top: 10px;
  left: 9px;
  width: 5px;
  height: 5px;
  border: 1px solid black;
  border-radius: 50%;
  background-color: #665a4c;
  z-index: 10;
}

.Hline {
  position: absolute;
  top: 16px;
  left: 10.9px;
  height: 8px;
  width: 2px;
  border: 0.5px solid BLACK;
  background-color: #665a4c;
  z-index: 10;
}

.left-hand {
  height: 30px;
  position: absolute;
  background-color: #10d7fa;
  width: 100px;
  left: -25px;
  top: 200px;
  transform: rotate(45deg);
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  z-index: 1;
}

.left-circle {
  height: 40px;
  width: 40px;
  position: absolute;
  background-color: white;
  border-radius: 39px;
  border: 1px solid black;
  left: -31px;
  top: -7px;
}

.right-hand {
  height: 30px;
  position: absolute;
  background-color: #10d7fa;
  width: 87px;
  left: 185px;
  top: 242px;
  transform: rotate(35deg);
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  z-index: -1;
}

.right-circle {
  height: 40px;
  width: 40px;
  position: absolute;
  background-color: white;
  border-radius: 39px;
  border: 1px solid black;
  left: 73px;
  top: -7px;
}

.front-body {
  position: absolute;
  background-color: #10d7fa;
  height: 200px;
  width: 200px;
  left: 18px;
  top: 229px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-radius: 30% 30% 50% 50%;
  /* border-radius: 60px; */
  z-index: 2;
}

.stomach-circle {
  position: absolute;
  background-color: white;
  height: 125px;
  width: 150px;
  top: 10px;
  left: 24px;
  border-radius: 30% 30% 50% 50%;
  border: 1px solid black;
  z-index: 4;
}

.stomach-smile {
  border: 1px solid black;
  width: 112px;
  height: 53px;
  position: absolute;
  background-color: white;
  left: 17px;
  top: 48px;
  border-bottom-right-radius: 52px;
  border-bottom-left-radius: 55px;
  z-index: 5;
}

.left-foot {
  height: 38px;
  width: 87px;
  position: absolute;
  background-color: white;
  border: 1px solid black;
  border-radius: 48px;
  top: 406px;
  right: 150px;
  z-index: 1;
}

.right-foot {
  height: 38px;
  width: 87px;
  position: absolute;
  background-color: white;
  border: 1px solid black;
  border-radius: 48px;
  top: 406px;
  left: 140px;
  z-index: 1;
}

.eraser {
  position: absolute;
  top: 140px;
  left: 41px;
  height: 24px;
  width: 62px;
  background-color: #48e6fa;
  border: 1px solid black;
  border-bottom: 0;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  z-index: 6;
}