[CSS] 농구공 들고있는 진국이 그리기

0. 목표

 - 농구공 들고 있는 진국이 그리기

1. html

<div class="waba">  
  <div class="body">
    <div class="body1"></div>
    <div class="body2"></div>
  </div>
  
  <div class="face">

  <div class="nose">
    <div class="rectangle"></div>
    <div class="circle1"></div>
    <div class="circle2"></div> 
  </div>
  
  <div class="eye">
    <div class="left">
      <div class="rectangle"></div>
      <div class="circle1"></div>
      <div class="circle2"></div> 
    </div>
    <div class="right">
      <div class="rectangle"></div>
      <div class="circle1"></div>
      <div class="circle2"></div>   
    </div>     
  </div>  

  <div class="mouth"></div>
  <div class="basketball"></div>
  <div class="arm">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="text">
    <font size="100px" face="arial black">
    WA
    </font>
  </div>
</div>

2. css

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #d0ddf8;
}

.waba {
  position: relative;
  margin: 50px auto;
  width: 400px;
  height: 400px;
}

.waba .body .body1{ 
  position: absolute; 
  bottom: -350px;
  left: 75px;
  width: 250px; 
  height: 250px; 
  background: #00CCCB;
}

.waba .body .body2{ 
  position: absolute; 
  top: 400px;
  left: 50px;
  width: 300px; 
  height: 150px; 
  /* border-radius: 100%; */
  border-top-right-radius: 150px;
  border-top-left-radius: 150px;
  background: #00CCCB;
}

.waba .face{ 
  position: absolute; 
  top: 120px;
  left: 25px;
  width: 350px; 
  height: 350px; 
  border-radius: 100%;
  background: #ffffff;
}

.waba .nose .rectangle{ 
  position: absolute; 
  top: 180px;
  left: 155px;
  width: 20px; 
  height: 10px;
  background: #000000;
}

.waba .nose .circle1{ 
  position: absolute; 
  top: 180px;
  left: 155px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.waba .nose .circle2{ 
  position: absolute; 
  top: 170px;
  left: 155px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.waba .eye .left .circle1{ 
  position: absolute; 
  top: 125px;
  left: 90px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.waba .eye .left .circle2{ 
  position: absolute; 
  top: 135px;
  left: 90px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.waba .eye .left .rectangle{ 
  position: absolute; 
  top: 135px;
  left: 90px;
  width: 20px; 
  height: 10px;
  background: #000000;
}

.waba .eye .right .circle1{ 
  position: absolute; 
  top: 125px;
  left: 220px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.waba .eye .right .circle2{ 
  position: absolute; 
  top: 135px;
  left: 220px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.waba .eye .right .rectangle{ 
  position: absolute; 
  top: 135px;
  left: 220px;
  width: 20px; 
  height: 10px;
  background: #000000;
}

.waba .mouth{ 
  position: absolute; 
  top: 250px;
  left: 155px;
  width: 25px; 
  height: 25px; 
  border-radius: 100%;
  background: #000000;
}

.waba .basketball{ 
  position: absolute; 
  top: 350px;
  left: 75px;
  width: 200px; 
  height: 200px; 
  border-radius: 100%;
  background: #ff6602;
}

.waba .arm .left{ 
  position: absolute; 
  top: 410px;
  left: 30px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #ffffff;
}

.waba .arm .right{ 
  position: absolute; 
  top: 410px;
  left: 270px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #ffffff;
}

.waba .text{ 
  position: absolute; 
  top: 410px;
  left: 135px;
  width: 100px; 
  height: 100px; 
  border-radius: 100%;
}

3. 완성