<!DOCTYPE html>
<html>
  <head>
    <title>Practice</title>
  </head>
 <body>
   <div class = "container">
     <div class = "cat">
       <div class = "face">
         <div class = "ear-1">
           <div class = "inner-1"></div>
         </div>
         <div class = "ear-r">
           <div class = "inner-2"></div>
         </div>
         <div class = "eye-1">
           <div class = "eyeball"></div>
         </div>
         <div class = "eye-r">
           <div class = "eyeball"></div>
           </div>
         <div class = "nose">
           <div class = "l1"></div>
           <div class = "l2"></div>
         </div>
       </div>
       <div class = "body">
         <div class = "paw-1"></div>
         <div class = "paw-2"></div>
         <div class = "tail"></div>
       </div>
       <div class = "shadow"></div>
     </div>
   </div>
 </body>
</html> 
body{
  padding: 0;
  margin: 0;
  background-color: #a205;
}
.container{
  height: 500px;
  width: 350px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
  z-index: -1;
}
.cat{
  position: relative;
  top: 150px;
  left: 50px;
}
.face{
  background-color: #33292b;
  height: 100px;
  width: 150px;
  border-radius: 30px;
}
.ear-1,.ear-r{
  width: 0;
  height: 0;
  border-bottom: 50px solid #33292b;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: relative;
  z-index: -1;
}
.ear-1{
  bottom: 35px;
  transform: rotate(-30deg);
}
.ear-r{
  bottom: 85px;
  left: 110px;
  transform: rotate(30deg);
}
.inner-1{
  width: 0;
  height: 0;
  border-bottom: 50px solid #d36149;
  border-left: 25px solid transparent;
  right: 25px;
  position: relative;  
}
.inner-2{
  width: 0;
  height: 0;
  border-bottom: 50px solid #d36149;
  border-right: 25px solid transparent;
  position: relative;
}
.eye-1,.eye-r{
  background-color: #d2873b;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: relative; 
}
.eye-1{
  bottom: 75px;
  left: 30px;
}
.eye-r{
  bottom: 105px;
  left: 90px;
}
.eyeball{
  background-color: #262626;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  position: relative;
  top: 3px;
  left: 3px;
}
.nose{
  height: 0;
  width: 0;
  border-top: 8px solid #d36149;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: relative;
  bottom: 110px;
  left: 68px;  
}
.l1,.l2{
  background-color: #d36149;
  height: 8px;
  width: 1px;
  position: relative;
}
.l1{
  transform: rotate(45deg);
  right: 4px;
  bottom: 1.5px;  
}
.l2{
  transform: rotate(-45deg);
  bottom: 10px;
  left: 3px;  
}
.body{
  background-color: #33292b;
  height: 120px;
  width: 150px;
  position: relative;
  left: 30px;
  border: 5px;
  border-radius: 0 65px 0 0;
}
.paw-1,.paw-2{
  background-color: #33292b;
  height: 10px;
  width: 22px;
  position: relative;
  border-radius: 0 0 10px 10px;
}
.paw-1{
  top: 120px;
}
.paw-2{
  top: 110px;
  left: 50px;
}
.tail{
  background-color: #33292b;
  width: 100px;
  height: 20px;
  position: relative;
  top: 80px;
  left: 100px;
  border-radius: 0 20px 20px 0;
}
.shadow{
  background-color: rgba(8,8,8,0.05);
  height: 30px;
  width: 150px;
  border-radius: 50%;
  position: relative;
  bottom: 15px;
  left: 20px;
  z-index: -1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.