Assignment - Create your own cat

Ishoboy · June 22, 2021, 8:41am

Here is my cat:
Screenshot from 2021-06-22 14-42-34

index.html

<html>

    <head>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="cat">
            <div class="ears">
                <div class="ear left_ear"> 
                    <div class="ear left_inside"></div>
                </div>
                    <div class="ear right_ear"> 
                <div class="ear right_inside"></div>
                    </div>
            </div>
            <div id="body">
                <div class="eyes">
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                        <div class="eye">
                       <div class="pupils"></div>
                    </div>
                </div>
                <div class="nose">
                </div>
                <div class="mouth_right"></div>
                <div class="mouth_left"></div>
                <div class="whiskers">
                    <div class="whisker_left1">

                    </div>
                    <div class="whisker_left2">

                    </div>
                    <div class="whisker_left3">

                    </div>
                    <div class="whisker_left4">

                    </div>
                    <div class="whisker_left5">

                    </div>

                    <div class="whisker_right1">

                    </div>
                    <div class="whisker_right2">

                    </div>
                    <div class="whisker_right3">

                    </div>
                    <div class="whisker_right4">

                    </div>
                    <div class="whisker_right5">
                    </div>                
                </div>
                <div class="chin"></div>
                <div class = "belly">

                    <div class="belly_2">

                    </div>
                </div>
                <div class="foot_left">
                </div>
                <div class="foot_right">
                </div>
            </div>
            <div class="body_2">
                <div class="tail">

                </div>
                <div class="tail_end">
                    
                </div>
            </div>

        </div>

        </div>

    </body>
</html>

style.css

#body{
    background-color: rgb(208, 171, 89);
    width: 200px;
    height: 200px;
    border-radius: 65% 65% 56% 56%;
}

.eyes{
    position: relative;
    top: 30px;
    display: flex;
}

.eye{
    background-color: white;
    border-radius: 52%;
    width: 54px;
    height: 54px;
    margin: 23px;
    position: relative;
}

.pupils{
    background-color: rgb(14, 13, 13);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0px;
    position:absolute;
    top: 13px;
    left: 13px;
}

.ears{
    position: relative;
}

.ear{
    border-radius: 90px 0 90px 0;
    background-color: rgb(208, 171, 89);
    height: 100px;
    width: 100px;
    position: absolute;
}

.left_ear{
    left: 0;
    transform: scale(1, -1) rotate(
0deg
);
}

.right_ear{
    left: 90px;
}

.left_inside{
    border-radius: 90% 0 90px 0;
    background-color: #e84d48;
    width: 25px;
    height: 24px;
    position: relative;
    top: 70.5px;
    left: -3px;
    transform: scale(1, -1) rotate( 
117deg
 );
}

.right_inside{
    border-radius: 90% 0 90px 0;
    background-color: #e84d48;
    width: 25px;
    height: 24px;
    top: 7px;
    left: 78px;
    transform: scale(1, -1) rotate( 
312deg
 );
    position: relative;
}

.nose{
    background-color: rgb(235, 217, 214);
    border-radius: 10% 10% 80% 80%;
    position: relative;
    top: -43px;
    margin: 64px;
    width: 23px;
    height: 14px;
    left: 23px;
}

.mouth_right{
    width: 48px;
    height: 13px;
    border: solid 2.5px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/81px 72px 0 0;
    transform: rotate(
-148deg
);
    position: absolute;
    top: 154px;
    left: 99px;
}

.mouth_left{
    width: 47px;
    height: 14px;
    border: solid 2.5px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/81px 72px 0 0;
    transform: rotate(
-215deg
);
    position: absolute;
    top: 155px;
    left: 63px;
}

.whiskers{
    position: relative;
}

.whisker_left1{
    position: relative;
    width: 35px;
    height: 101px;
    border-top: 3.5px solid rgb(0 0 0 / 98%);
    border-top-left-radius: 203px;
    float: right;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -124px;
    left: -170px;
    transform: rotate( 
16deg
 );
}

.whisker_left2{
    position: relative;
    width: 35px;
    height: 104px;
    border-top: 3.5px solid rgb(0 0 0 / 98%);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 102px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -224px;
    left: -109px;
    transform: rotate( 
17deg
 );
}

.whisker_left3{
    position: relative;
    width: 35px;
    height: 104px;
    border-top: 3.5px solid rgb(0 0 0 / 98%);
    /* border-left: 0.5px solid rgb(0 0 0 / 63%); */
    border-top-left-radius: 200px;
    float: left;
    margin-left: 102px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -324px;
    left: -107px;
    transform: rotate( 
13deg
 );
}

.whisker_left4{
    position: relative;
    width: 32px;
    height: 104px;
    border-top: 3.5px solid rgb(0 0 0 / 98%);
    /* border-left: 0.5px solid rgb(0 0 0 / 63%); */
    border-top-left-radius: 200px;
    float: left;
    margin-left: 101px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -423px;
    left: -99px;
    transform: rotate( 
367deg
 );
}

.whisker_left5{
    position: relative;
    width: 37px;
    height: 196px;
    border-top: 3.5px solid rgb(0 0 0 / 98%);
    /* border-left: 0.5px solid rgb(0 0 0 / 63%); */
    border-top-left-radius: 200px;
    float: left;
    margin-left: 104px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -522px;
    left: -94px;
    transform: rotate( 
-4deg
 );
}

.whisker_right1{
    position: relative;
    width: 37px;
    height: 35px;
    border-left: 3.5px solid rgb(0 0 0 / 98%);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -746px;
    left: 60px;
    transform: rotate( 
75deg
 );
}

.whisker_right2{
    position: relative;
    width: 37px;
    height: 35px;
    border-left: 3.5px solid rgb(0 0 0 / 98%);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -775px;
    left: 60px;
    transform: rotate( 
75deg
 );
}

.whisker_right3{
    position: relative;
    width: 37px;
    height: 35px;
    border-left: 3.5px solid rgb(0 0 0 / 98%);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -803px;
    left: 60px;
    transform: rotate( 
75deg
 );
}

.whisker_right4{
    position: relative;
    width: 37px;
    height: 35px;
    border-left: 3.5px solid rgb(0 0 0 / 98%);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -831px;
    left: 59px;
    transform: rotate( 
80deg
 );
}

.whisker_right5{
    position: relative;
    width: 37px;
    height: 35px;
    border-left: 3.5px solid rgb(0 0 0 / 98%);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -860px;
    left: 58px;
    transform: rotate( 
83deg
 );
}

.chin{
    width: 28px;
    height: 6px;
    border: solid 2.5px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/81px 72px 0 0;
    transform: rotate(
179deg
);
    position: absolute;
    top: 170px;
    left: 92px;
}

.belly{
    background-color: rgb(208, 171, 89);
    width: 175px;
    height: 172px;
    border-radius: 60% 62% 17% 20%;
    position: absolute;
    top: 187px;
    left: 21px;
}

.belly_2{
    background-color: rgb(235, 218, 182);
    width: 75px;
    height: 112px;
    border-radius: 68% 64% 0% 7%;
    position: absolute;
    left: 49px;
    top: 61px;
}

.foot_left{
    background-color: grey;
    height: 18px;
    width: 37px;
    position: relative;
    border-radius: 0 0px 10px 10px;
    top: 106px;
    left: 26px;
}

.foot_right{
    background-color: grey;
    height: 18px;
    width: 37px;
    position: relative;
    border-radius: 0 0px 10px 10px;
    top: 89px;
    left: 136px;
}

.body_2{
    background-color: rgb(208, 171, 89);
    height: 128px;
    width: 63px;
    position: relative;
    border-radius: 0 136px 78px 5px;
    top: 21px;
    left: 169px;
}

.tail{
    position: relative;
    width: 106px;
    height: 66px;
    border-top: 3.5px solid rgb(208, 171, 89);
    border-top-left-radius: 105px;
    float: right;
    margin-left: 152px;
    box-shadow: inset 0 -54px 0 rgb(0 0 0 / 0%);
    top: -896px;
    left: 79px;
    transform: rotate( 
153deg
 );
}

.tail_end{
    position: absolute;
    margin-top: 63px;
    margin-left: 130px;
    height: 10px;
    width: 9px;
    border-radius: 50%;
    background-color: rgb(123, 11, 3);
    z-index: 1;
    top: -137px;
    left: -12px;
  }

Mickey_McClimon · June 24, 2021, 8:03pm

awesome bear! looks good

Mickey_McClimon · June 25, 2021, 6:27pm

#body{
    background-color: #00D2BE;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}
.pupils{
    background-color: black;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}
.ears{
    position: relative;
}
.ear{
    border-radius: 90% 0 90% 0;
    background-color: #00D2BE;
    height: 100px;
    width: 100px;
    position: absolute;
}
.left_ear{
    transform: scale(1,-1) rotate(0deg);
    left: 0;
}
.right_ear{
    left: 100px;
}
.nose {
    background-color: black;
    width: 15px;
    height: 20px;
    border-radius: 56%;
    position: absolute;
    top: 80px;
    left: 95px;
}
.right_whiskers1 {
    width: 50px;
    height: .3px;
    background-color: dimgray;
    border: thin 5px #000;
    border-color: #000;
    position: absolute;
    top: 100px;
    left: 150px;
}
.right_whiskers2 {
    width: 50px;
    height: .3px;
    background-color: dimgray;
    border: thin 5px #000;
    border-color: #000;
    position: absolute;
    top: 110px;
    left: 150px;
}
.right_whiskers3 {
    width: 50px;
    height: .3px;
    background-color: dimgray;
    border: thin 5px #000;
    border-color: #000;
    position: absolute;
    top: 120px;
    left: 150px;
}
.left_whiskers1 {
    width: 50px;
    height: .3px;
    background-color: dimgray;
    border: thin 5px #000;
    border-color: #000;
    position: absolute;
    top: 100px;
    left: 0px;
}
.left_whiskers2 {
    width: 50px;
    height: .3px;
    background-color: dimgray;
    border: thin 5px #000;
    border-color: #000;
    position: absolute;
    top: 110px;
    left: 0px;
}
.left_whiskers3 {
    width: 50px;
    height: .3px;
    background-color: dimgray;
    border: thin 5px #000;
    border-color: #000;
    position: absolute;
    top: 120px;
    left: 0px;
}
.chest{
    background-color: #00D2BE;
    width: 150px;
    height: 200px;
    position: absolute;
    z-index:-999;
    left: 35px;
    top: 50px;
    border-radius: 90% 90% 30% 30%
}
.tail{
    background-color: #00D2BE;
    width: 200;
    height: 20px;
    position: absolute;
    z-index:-999;
    left: 73px;
    top: 220px;
    border-radius: 90% 90% 30% 30%
}
.mouth{
    height: 20px;
    width: 30px;
    border: solid;
    border-radius: 100% 100% 100% 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    position: absolute;
    right: 83px;
    top: 110px;
}
  .feet{
    position: absolute;
    display: flex;
  }

  .foot{
    background-color: #292527;
    width: 75px;
    height: 94px;
    border-radius: 40% 50% 40% 50%;
    position: absolute;
    top: 20px;
    left: 66px;
  }

  .inner_foot_small1{
    background-color: rosybrown;
    width: 17px;
    height: 16px;
    border-radius: 20% 80% 20% 80%;
    position: absolute;
    top: 22px;
    left: 6px;
  }
  .inner_foot_small2{
    background-color: rosybrown;
    width: 13px;
    height: 20px;
    border-radius: 80%;
    position: absolute;
    top: 10px;
    left: 26px;
  }
  .inner_foot_small3{
    background-color: rosybrown;
    width: 17px;
    height: 16px;
    border-radius: 80% 20% 80% 20%;
    position: absolute;
    top: 20px;
    left: 43px;
  }
  .inner_foot_small4{
    background-color: rosybrown;
    width: 17px;
    height: 16px;
    border-radius: 20% 80% 20% 80%;
    position: absolute;
    top: 19px;
    left: 6px;
  }
  .inner_foot_small5{
    background-color: rosybrown;
    width: 13px;
    height: 20px;
    border-radius: 80%;
    position: absolute;
    top: 8px;
    left: 26px;
  }
  .inner_foot_small6{
    background-color: rosybrown;
    width: 17px;
    height: 16px;
    border-radius: 80% 20% 80% 20%;
    position: absolute;
    top: 18px;
    left: 42px;
  }

  .inner_foot_big{
    background-color: rosybrown;
    width: 39px;
    height: 44px;
    border-radius: 80%;
    position: absolute;
    top: 38px;
    left: 15px;
    
  }  
   .feet{
    position: absolute;
    display: flex;
  }

  .foot{
    background-color: #292527;
    width: 75px;
    height: 94px;
    border-radius: 40% 50% 40% 50%;
    position: absolute;
    top: 9px;
    left: 45px;
  }

  .inner_foot_small1{
    background-color: rosybrown;
    width: 17px;
    height: 16px;
    border-radius: 20% 80% 20% 80%;
    position: absolute;
    top: 22px;
    left: 6px;
  }
  .inner_foot_small2{
    background-color: rosybrown;
    width: 13px;
    height: 20px;
    border-radius: 80%;
    position: absolute;
    top: 10px;
    left: 26px;
  }
  .inner_foot_small3{
    background-color: rosybrown;
    width: 17px;
    height: 16px;
    border-radius: 80% 20% 80% 20%;
    position: absolute;
    top: 20px;
    left: 43px;
  }
  .inner_foot_small4{
    background-color: rosybrown;
    width: 17px;
    height: 16px;
    border-radius: 20% 80% 20% 80%;
    position: absolute;
    top: 19px;
    left: 6px;
  }
  .inner_foot_small5{
    background-color: rosybrown;
    width: 13px;
    height: 20px;
    border-radius: 80%;
    position: absolute;
    top: 8px;
    left: 26px;
  }
  .inner_foot_small6{
    background-color: rosybrown;
    width: 17px;
    height: 16px;
    border-radius: 80% 20% 80% 20%;
    position: absolute;
    top: 18px;
    left: 42px;
  }

  .inner_foot_big{
    background-color: rosybrown;
    width: 39px;
    height: 44px;
    border-radius: 80%;
    position: absolute;
    top: 38px;
    left: 15px;
    
  }

<html>
    <head>
        <link  rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cat">
            <div class="ears">
                <div class="ear left_ear" style=" 
                transform: scale(1,-1);
                "></div>
                <div class="ear right_ear"
                 style="left: 100px;
                  "></div>
                  </div>
            <div>  
                <div id="body">
                    <div class="eyes">
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                    <div class="nose"></div>
                    <div class="right_whiskers1"></div>
                    <div class="right_whiskers2"></div>
                    <div class="right_whiskers3"></div>
                    <div class="left_whiskers1"></div>
                    <div class="left_whiskers2"></div>
                    <div class="left_whiskers3"></div>
                    <div class="chest"></div>
                <div class="tail"></div>
                <div class="mouth"></div>
                </div>
            </div>
        </div>
    </div>    <div class="feet">
        <div class="foot">
            <div class="inner_foot_small1"></div>
            <div class="inner_foot_small2"></div>
            <div class="inner_foot_small3"></div>
            <div class="inner_foot_big"></div>
        </div>
        <div class="foot">
            <div class="inner_foot_small4"></div>
            <div class="inner_foot_small5"></div>
            <div class="inner_foot_small6"></div>
            <div class="inner_foot_big"></div>
            <div class="feet">
                <div class="foot">
                    <div class="inner_foot_small1"></div>
                    <div class="inner_foot_small2"></div>
                    <div class="inner_foot_small3"></div>
                    <div class="inner_foot_big"></div>
                </div>
                <div class="foot">
                    <div class="inner_foot_small4"></div>
                    <div class="inner_foot_small5"></div>
                    <div class="inner_foot_small6"></div>
                    <div class="inner_foot_big"></div>
    </body>

</html>```

vili · July 3, 2021, 2:53pm

My html code:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cat_face">
            <div class="ears">
               <div class="ear left_ear"></div>               
               <div class="ear right_ear"></div>              
            </div>
            <div class="inner_ears">
              <div class="inner_ear leftEar"></div>               
              <div class="inner_ear rightEar"></div> 
             </div>
            <div id="body">
                <div class="eyes">
                    <div class="eye">
                      <div class="pupils"></div>
                    </div>                  
                    <div class="eye">
                      <div class="pupils"></div>
                    </div>
                </div>
                <div class="nose">
                    <div class="mustaches">
                        <div class="mustache_1"></div>
                        <div class="mustache_2"></div>
                        <div class="mustache_3"></div>
                        <div class="mustache_4"></div>
                        <div class="mustache_5"></div>
                        <div class="mustache_6"></div>
                    </div>
                </div>               
                <div class="mouth"></div>
            </div>
        </div>
       <div class="cat_body">
        <div class="tail"></div>
       </div>
       <div class="tummy">
        <div class="toes">
            <div class="toe_1"></div>
            <div class="toe_2"></div>
            <div class="toe_3"></div>
            <div class="toe_4"></div>
            <div class="toe_5"></div>
            <div class="toe_6"></div>
        </div>
       </div>
       
    </body>
</html>

My css code:

#body{
    background-color: rgb(255, 241, 196);
    width: 200px;
    height: 200px;
    border-radius: 50%; 
}
.eyes{
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}
.pupils{
    background-color: rgb(152, 155, 204);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
}
.ears{
    position: relative;
}
.ear{
   border-radius: 90px 0px 90px 0px;
   background-color: rgb(255, 241, 196);
   height: 100px;
   width: 100px;
   position: absolute;
}
.left_ear{
    transform: scale(1,-1) rotate(0deg);
    left: 0;
}
.right_ear{
    left: 100px;
}
.mouth{
   border-radius: 140px 0px 90px 0px;
   background-color: rgb(224, 109, 109);
   height: 30px;
   width: 30px;
   position: absolute;
   transform: rotate(45deg);
   left: 91px;
   top: 150px;
}
.nose{
   border-radius: 0px 0px 90px 0px;
   background-color: rgb(105, 104, 99);
   height: 21px;
   width: 21px;
   position: absolute;
   left: 95px;
   top: 123px;
   transform: rotate(45deg);
}
.mustaches{
    position: relative;
}

.mustache_1{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(120deg);
    left: 11px;
    top: -5px;
}

.mustache_2{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(133deg);
    left: 17px;
    top: -1px;
}
.mustache_3{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(147deg);
    left: 21px;
    top: 5px;
}

.mustache_4{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(152deg);
    left: -27px;
    top: 33px;

}

.mustache_5{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(140deg);
    left: -23px;
    top: 38px;
}
.mustache_6{
    width: 216%;
    position: absolute;
    height: 3px;
    background: grey;
    transform:  rotate(126deg);
    left: -18px;
    top: 42px;
}
.inner_ears{
    position: relative;
}
.inner_ear{
    border-radius: 0px 0px 0px 45px;
    background-color: grey;
    height: 29px;
    width: 29px;
    position: absolute;
 }
 .leftEar{
    transform: scale(1,-1) rotate(-180deg);
    left: 10px;
    top: 10px;
 }
 .rightEar{
    transform: rotate(0deg);
     left: 160px;
     top: 10px;
 }

.cat_body{
    background-color: rgb(255, 241, 196);
    width: 200px;
    height: 100px;
    border-radius: 25%; 
    margin-top: -7%;
}
.tummy{
    margin-top: -17%;
    margin-left: 16%;
    margin-right: auto;
    height: 30px;
    width: 60px;
    border-radius: 50px 50px 0 0;
    background-color: #F4E7D1;
}
.toes{
    position: relative;
}
.toe_1{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(96deg);
    left: -25px;
    top: 82px;
}

.toe_2{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(96deg);
    left: -32px;
    top: 82px;
}
.toe_3{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(96deg);
    left: -39px;
    top: 82px;
}

.toe_4{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(86deg);
    left: 60px;
    top: 82px;
}

.toe_5{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform: rotate(86deg);
    left: 67px;
    top: 82px;
}
.toe_6{
    width: 50%;
    position: absolute;
    height: 3px;
    background: grey;
    transform:  rotate(86deg);
    left: 74px;
    top: 82px;
}
.tail{
    width: 82px;
    border-radius: 76%;
    margin-top: 10%;
    margin-left: 34%;
    margin-right: auto;
    position: absolute;
    border: 15px solid rgb(255, 241, 196);
    display: inline-block;
    z-index: 0;
}

Maia · July 5, 2021, 5:19am

Shot 0011
Scary cat, in all meanings as possible I tried.

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
<body>
    <div class="cat">
        <div class="ears">
            <div class="ear left_ear"></div>
            <div class="ear right_ear"></div>     
         </div>  
    </div>
    <div id="body">
        <div class="eyes">
        <div class="eye">
            <div class="pupils"></div>
        </div>
        <div class="eye">
            <div class="pupils"></div>
        </div>         
    </div>    
    <div class="mouth">
    <div class="mouth"></div>
    </div>    
</div>
<div class="tail">
    <div id="tail"></div>
    <div id="tail-mask"></div>
       </div>
</body>
</html>type or paste code here

tbody{
    background-color: #6ed0c7;
    width: 200px;
    height: 200px;
    border-radius: 50%;
 }
 .eyes{
     position: relative;
     top: 30px;
     display: flex;
 }
 .eye{
     background-color: white;
     border-radius:  50%;
     width: 50px;
     height: 50px;
     margin: 25px;
     position: relative;
 }
 .pupils{
    background-color: rgb(90, 86, 86);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    top: auto;
    left: auto;
 }
 .ears{
     position: relative;
}
.ear{
    border-radius: 90% 0 90% 0;
    background-color: #6ed0c7;
    height: 100px;
    width: 100px;
    position: absolute;
}
.left_ear{
    transform: scale(1,-1) rotate(0deg);
    left: 0;
}
.right_ear{
    left: 100px;
}
.mouth{
    position: absolute;
    margin-left: 9%;
    height: 80px;
    width: 25px;
    background-color: #554D44;
    clip-path: ellipse(40% 22% at 50% 50%);
    display: inline-block;
    z-index: 6;
}
.tail{
    position: absolute;
    margin-left: 50;
    margin-top: 0px;
    height: 100px;
    width: 100px;
    border: 15px solid #6ed0c7;
    border-radius: 100px;
    display: inline-block;
    z-index: 0;
  }
  
  .tail-mask {
    position: absolute;
    margin-top: 20;
    margin-left: 100px;
    height: 10px;
    width: 60px;
    background-color: #6ed0c7;
    z-index: 0;
  }ype or paste code here

serba · July 6, 2021, 4:07am

My Kitty
myKitty

Here is my code.

myKitty index.html

<html>

    <head>

        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <div class="cat">

            <div id="head">

                <div class="ears">

                    <div class="ear left_ear"></div>

                    <div class="ear right_ear"></div>

                </div>

                <div class="eyes">

                    <div class="eye left_eye">

                        <div class="pupil_left"></div>

                    </div>

                    <div class="eye right_eye">

                        <div class="pupil_right"></div>

                    </div>

                </div>

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

                <div class="mouth">

                    <div class="tongue"></div>

                </div>

            </div>

            <div id="tail">

                <div class="tail_shaft"></div>

                <div class="tail_flick"></div>

            </div>

            <div id="body">

                <div class="belly"></div>

            </div>

            <div id="paws">

                <div class="paw left_paw">

                    <div class="toe-pads">

                        <div class="toe-pad1"></div>

                        <div class="toe-pad2"></div>

                        <div class="toe-pad3"></div>

                    </div>

                    <div class="palm-pad"></div>

                </div>

                <div class="paw right_paw">

                    <div class="toe-pads">

                        <div class="toe-pad1"></div>

                        <div class="toe-pad2"></div>

                        <div class="toe-pad3"></div>

                    </div>

                    <div class="toe-pad"></div>

                    <div class="palm-pad"></div>

                </div>

            </div>

            

        </div>

    </body>

</html>

myKitty style.css

#head{

    background-color: rgb(255, 191, 0);

    width: 200px;

    height: 200px;

    border-radius: 50%;

}

.ears{

    position: relative;

}

.ear{

    border-radius: 90% 0 90% 0;

    background-color: rgb(255, 191, 0);

    height: 100px;

    width: 100px;

    position: absolute;

}

.left_ear{

    transform: scale(1, -1) rotate(0deg);

    left: 0;

}

.right_ear{

    left: 100px;

}

.eyes{

    position: relative;

    top: 30px;

    display: flex;

}

.left_eye{

    background-color: white;

    border-radius: 70% 15% 70% 15%;

    width: 50px;

    height: 50px;

    margin: 25px;

    position: relative;

}

.right_eye{

    background-color: white;

    border-radius: 15% 70% 15% 70%;

    width: 50px;

    height: 50px;

    margin: 25px;

    position: relative;

}

.pupil_left{

    background-color: black;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    position: absolute;

    top: 18px;

    left: 10px;

}

.pupil_right{

    background-color: black;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    position: absolute;

    top: 18px;

    left: 10px;

}

.nose{

    position: relative;

    width: 100px;

    height: 30px;

}

.nose::before,

.nose::after{

    position: absolute;

    content: "";

    left: 100px;

    top: 0px;

    width: 20px;

    height: 30px;

    background: rgb(64, 224, 208);

    border-radius: 50px 50px 0 0;

    transform: rotate(-45deg);

    transform-origin: 0 100%;

}

.nose::after{

    left: 80px;

    transform: rotate(45deg);

    transform-origin: 100% 100%;

}

.mouth{

    background-color: rgb(238, 130, 238);

    width: 80px;

    height: 30px;

    border-radius: 10px 10px 40px 40px;

    position: relative;

    margin: 10px 0 0 60px;

}

.tongue{

    background: rgb(229, 43, 80);

    width: 30px;

    height: 35px;

    border-radius: 20% 20% 40% 40%;

    position: relative;

    top: 12px;

    left: 25px;

}

#body{

    background-color: rgb(255, 191, 0);

    width: 250px;

    height: 250px;

    border-radius: 40% 40% 15% 15%;

}

.belly{

    background-color: rgb(255, 160, 220);

    width: 150px;

    height: 200px;

    border-radius: 45% 45% 40% 40% ;

    margin: 0px 0 0px 50px;

    position: relative;

    top: 25px;

}

#paws{

    position: relative;

    display: flex;

    justify-content: flex-start;

}

.paw{

    background-color: rgb(185, 106, 15);

    border-radius: 50%;

    width: 100px;

    height: 100px;

}

.left_paw{

    margin: -15px 0 0 0;

    padding: 5px;

    position: absolute;

    top: -75px;

    left: 10px;

}

.right_paw{

    margin: -15px 45px 0 0;

    padding: 5px;

    position: absolute;

    top: -75px;

    left: 150px;

}

.toe-pads{

    position: relative;

    display: flex;

}

.toe-pad1{

    background-color: rgb(64, 224, 208);

    border-radius: 50%;

    width: 20px;

    height: 25px;

    position: absolute;

    margin: 15px 0 0 15px;

}

.toe-pad2{

    background-color: rgb(64, 224, 208);

    border-radius: 50%;

    width: 20px;

    height: 25px;

    position: absolute;

    margin: 5px 0 0 40px;

}

.toe-pad3{

    background-color: rgb(64, 224, 208);

    border-radius: 50%;

    width: 20px;

    height: 25px;

    position: absolute;

    margin: 15px 0 0 65px;

}

.palm-pad{

    position: relative;

    width: 100px;

    height: 90px;

}

.palm-pad::before,

.palm-pad::after{

    position: absolute;

    content: "";

    left: 50px;

    top: 48px;

    width: 20px;

    height: 30px;

    background: rgb(64, 224, 208);

    border-radius: 50px 50px 0 0;

    transform: rotate(-45deg);

    transform-origin: 0 100%;

}

.palm-pad::after{

    left: 30px;

    transform: rotate(45deg);

    transform-origin: 100% 100%;

}

#tail{

    position: relative;

}

.tail_shaft{

    background-color: rgb(255, 191, 0);

    width: 190px;

    height: 50px;

    border-radius: 0 55% 38% 0;

    position: absolute;

    top: 188px;

    left: 160px;

}

.tail_flick{

    width: 113px;

    height: 75px;

    border-radius: 50%;

    box-shadow: 36px 7px 0 0 rgb(255, 191, 0);

    position: absolute;

    top: 155px;

    left: 247px;

}

maxs · July 11, 2021, 3:16am

Here’s mine!

Index.html

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cat">
            <div class="ears">
                <div class="ear left_ear"></div>
                <div class="ear right_ear"></div>
            </div>
            <div class="inner_ears">
                <div class="inner left_iear"></div>
                <div class="inner right_iear"></div>
            </div>
            <div id="body">
                <div class="eyes">
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                </div>
                <div class="mandible"></div>
                <div class="nose_and_mouth"></div>
                <div class="cheeks">
                    <div class="cheek"></div>
                    <div class="cheek"></div>
                </div>
                <div class="torso"></div>
                <div class="paws">
                    <div class="paw"></div>
                    <div class="paw"></div>
                </div>
                <div class="tail"></div>
            </div>
        </div>
    </body>
</html>

style.css

#body{
    background-color: rgb(236, 196, 110);
    width: 200px;
    height: 170px;
    border-radius: 50%;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex; /*on same row*/
}
.eye{
    background-color: rgb(33, 177, 20);
    width: 50px;
    height: 40px;
    border-radius: 50%;
    margin: 25px;
}
.pupils{
    background-color: black;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: relative;
    top: 10px;
    left: 10px;
}
.ears{
    position: relative;
    z-index: -2;
}
.ear{
    border-radius: 90% 10% 90% 10%;
    background-color: rgb(236, 196, 110);
    height: 100px;
    width: 100px;
    position: absolute;
    left: 100px;
}
.left_ear{
    transform: scale(1,-1) rotate(0deg);
    left: 0
}
.right_ear{
    left: 100px
}
.inner_ears{
    position: relative;
    top: 5px;
    z-index: -1;
}
.inner{
    border-radius: 90% 10% 90% 10%;
    background-color: rgb(236, 219, 182);
    height: 60px;
    width: 60px;
    position: absolute;
    margin: 3px;
}
.left_iear{
    transform: scale(1,-1) rotate(0deg);
    left: 0
}
.right_iear{
    left: 136px
}
.mandible{
    background-color: rgb(214, 189, 132);
    width: 100px;
    height: 70px;
    border-radius: 40%;
    margin: 50px;
    position: relative;
    top: -45px;
}
.nose_and_mouth{
    background-color: rgb(94, 19, 47);
    width: 50px;
    height: 65px;
    border-radius: 40%;
    margin: 75px;
    position: relative;
    top: -185px;
}
.cheeks{
    position: relative;
    top: -325px;
    display: flex; /*on same row*/
    margin: 50px;
}
.cheek{
    background-color: rgb(243, 224, 170);
    width: 55px;
    height: 60px;
    border-radius: 50%;
    margin: 1px;
}
.torso{
    background-color: rgb(236, 196, 110);
    width: 200px;
    height: 170px;
    border-radius: 35%;
    margin: 0px;
    position: relative;
    top: -385px;
    z-index: -1
}
.paws{
    position: relative;
    top: -490px;
    display: flex; /*on same row*/
    margin: 25px;
}
.paw{
    background-color: rgb(202, 164, 81);
    width: 100px;
    height: 80px;
    border-radius: 40%;
    margin: 25px;
}
.tail{
    background-color: rgb(202, 164, 81);
    width: 140px;
    height: 20px;
    position: relative;
    top: -750px;
    border-radius: 40%;
    z-index: -2;
    margin: 150px;
}

apmfree · July 11, 2021, 5:57pm

css

#head{
    background-color:#eb9414;
    width: 200px;
    height: 200px;
    border-radius: 40% 40% 50% 50%;;
}
.eyes {
    position: relative;
    top: 30px;
    display: flex;
}
.eye {
    background-color:white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}
.inner_ear {
    border-radius: 90% 0 90% 0;
    background-color: #ff7a00;
    height: 50px;
    width: 50px;
    top: 7px;
    position: absolute; 
}
.pupils {
    background-color: black;
    width: 30px;
    height: 27px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 13px;
}
.ears {
    position: relative;
}
.ear {
    border-radius: 90% 0 90% 0;
    background-color: #eb9414;
    height: 100px;
    width: 100px;
    position: absolute; 
}
#body{
    background-color:#eb9414;
    width: 130px;
    height: 120px;
    border-radius: 20% 20% 20% 20%;
    margin-left: 35px;
    margin-top: -20px;
    position: absolute;
}

.mouth_area {
    background-color:white;
    width: 150px;
    height: 70px;
    border-radius: 40% 40% 50% 50%;
    margin-left: 23px;
    margin-top: 10px;
    position: relative;
}
.nose {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid red;
    margin-left:60px;
    margin-top:10px;
    border-radius: 30%;
    position: absolute;
}
.belly {
    background-color:white;
    width: 115px;
    height: 55px;
    border-radius: 50% 50% 40% 40%;
    margin-left: 7px;
    margin-top: 55px;
    position: relative;
}
.feet {
    position: relative;
}
.back_foot {

    width: 40px;
    height: 40px;
    background: #eb9414;
    border-radius: 50%;
    position: absolute;
    margin-top: 80px;
    margin-left: 18px;
    border-style: solid;
    border-width: 5px;
    border-color: #ff7a00;
}
.front_foot {
    width: 40px;
    height: 80px;
    background: #eb9414;
    border-radius: 20% 20% 50% 50%;
    position: absolute;
    margin-top: 30px;
    margin-left: 45px;
    border-style: solid;
    border-width: 5px;
    border-color: #ff7a00;
}
.wiskers {
    position:relative;
    top: 130px;

}
.wisker {
    width: 30px;
    height: 0px;
    border-style: solid;
    border-color: transparent transparent black transparent;
    border-width: 0 0 3px 0;
    position:absolute;
}
.mouths {
    position:relative;
}
.mouth {
    width: 35px;
    height: 15px;
    margin-left: 35px;
    margin-top: 34px;
    border-color: transparent black black black;
    border-style: solid;
    border-width: 3px;
    border-radius: 40% 40% 100% 100%;
    position:absolute;
}
.tail
{
    border-radius: 100% 0 110% 10%;
    background-color: #ff7a00;
    height: 150px;
    width: 50px;
    top: 160px;
    z-index: -1;
    margin-left:140px;
    position: absolute;
}

index

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="cat">
        <div class="ears">
            <div class="ear left_ear" style="z-index:-2; transform: scale(1,-1) rotate(10deg);"></div>
            <div class="ear right_ear" style="z-index:-2; left:100px"></div>  
            <div class="inner_ear left_ear" style="z-index:-1; transform: scale(1,-1) rotate(10deg);"></div>
            <div class="inner_ear right_ear" style="z-index:-1; left:140px"></div>          
        </div>
        <div class = "wiskers">
            <div class = "wisker left_top" style="left:-8px; transform: scale(1,-1) rotate(-15deg);"></div>
            <div class = "wisker right_top" style="left:180px; transform:rotate(-15deg);"></div>
            <div class = "wisker left_middle" style="left:-8px; top:10px; transform: scale(1,-1);"></div>
            <div class = "wisker right_middle" style="top:10px; left:180px;"></div>
            <div class = "wisker left_bottom" style="left:-8px; top:20px; transform: scale(1,-1) rotate(15deg);"></div>
            <div class = "wisker right_bottom" style="top:20px; left:180px; transform:rotate(15deg);"></div>
        </div>

        <div id = "head">
            <div class = "eyes">
                    <div class ="eye">
                        <div class = "pupils"></div>
                    </div>
                    <div class ="eye">
                        <div class = "pupils"></div>
                    </div>
            </div>
            <div class = "mouth_area">
                <div class = "nose"></div>
                <div class="mouths">
                    <div class ="mouth left"></div>
                    <div class ="mouth right" style="left:38px"></div>
                </div>
            </div>
        </div> 
        <div class ="feet">
            <div class = "back_foot left"></div>
            <div class = "back_foot right" style="left:120px"></div>
        </div>
        <div id = "body">
            <div class = "belly"></div>
        </div>
        <div class ="feet">
            <div class = "front_foot left"></div>
            <div class = "front_foot right" style="left:60px"></div>
        </div>
        <div class ="tail" style ="transform:rotate(45deg);"></div>
    </div>
    </body>
</html>

CliffP · July 14, 2021, 7:22am

My ginger kitty cat

index.html

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
        <body>
            <div class="cat">
                    <div class="ears">
                        <div class="ear left_ear">
                            <div class="inner_ear left_inner_ear"></div>
                        </div>
                        <div class="ear right_ear">
                            <div class="inner_ear right_inner_ear"></div>
                        </div>
                    </div>

                        <div id="head">
                            <div class="eyes">
                                <div class="eye">
                                    <div class="pupils"></div>
                                        <div class="reflection"></div>
                                        <div class="smaller_reflection"></div>

                                </div>
                                <div class="eye">
                                    <div class="pupils"></div>
                                        <div class="reflection"></div>
                                            <div class="smaller_reflection"></div>

                                </div>
                            </div>
                            <div class="head_hair">
                                <div class="head_hair_left"></div>
                                <div class="head_hair_middle"></div>
                                <div class="head_hair_right"></div>
                                <div class="head_hair_straight_top"></div>
                            </div>
                            <div class="snout"></div>
                            <div class="nose"></div>
                            <div class="mouth">
                                <div class="mouth_left"></div>
                                <div class="mouth_right"></div>
                            </div>
                            <div class="whiskers">
                                <div class="whisker top_right_whisker"></div>
                                <div class="whisker top_left_whisker"></div>
                                <div class="whisker middle_right_whisker"></div>
                                <div class="whisker middle_left_whisker"></div>
                                <div class="whisker bottom_right_whisker"></div>
                                <div class="whisker bottom_left_whisker"></div>
                            </div>
                        </div>
                    <div class="body">
                        <div class="belly">
                            <div class="paws">
                                <div class="paw left_paw">
                                    <div class="toeline1"></div>
                                    <div class="toeline2"></div>
                                    <div class="toeline3"></div>

                                </div>
                                <div class="paw right_paw">
                                    <div class="toeline1"></div>
                                    <div class="toeline2"></div>
                                    <div class="toeline3"></div>
                                    
                                </div>
                            </div>

                            <div class="feet">
                                <div class="foot left_foot">
                                    <div class="toeline1"></div>
                                    <div class="toeline2"></div>
                                    <div class="toeline3"></div>

                                </div>
                                <div class="foot right_foot">
                                    <div class="toeline1"></div>
                                    <div class="toeline2"></div>
                                    <div class="toeline3"></div>
                                    
                                </div>
                            </div>

                        </div>
                    </div>
                <div class="tail"></div>
                <div class="tail_mask"></div>
                <div class="tail_end"></div>
            </div>
    </body>
</html>

style.css

.ears{
    position: relative;
}
.ear{
    border-radius: 90% 0;
    background-color: rgb(255 193 77);
    height: 100px;
    width: 100px;
    position: absolute;
}
.left_ear{
    transform: scale(1,-1) rotate(-1deg);
}
.right_ear{
    left: 100px;

}
.inner_ear{
    border-radius: 128% 0% 128% 0%;
    background-color: rgb(218 126 157);
    height: 101px;
    width: 100px;
}
.left_inner_ear{
    transform: rotate(0deg);
            top: -14px;
            left: 13px;
    position: relative;
}
.right_inner_ear{
    transform: rotate(0deg) ;
    top: 14px;
    left: -13px;
    position: relative;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
    z-index: 1;
}
.pupils{
    background-color: black;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: 13px;
    left: 12px;
}
.reflection{
    background-color: white;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    position: absolute;
    top: 14px;
    left: 31px;
}
.smaller_reflection{
    background-color: white;
    width: 6px;
    height: 6;
    border-radius: 50%;
    position: absolute;
    top: 25px;
    left: 28px;
}
#head{
    background-color: rgb(255 193 77);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
}
.head_hair_left{
    border-radius: 50% 50% 50% 50%;
    transform: rotate(
21deg
);
    background-color: rgb(216, 128, 14);
    width: 12px;
    height: 29px;
    position: relative;
    top: -98px;
    left: 75px;
}
.head_hair_middle{
    border-radius: 56% 50% 50% 50%;
    background-color: rgb(216, 128, 14);
    width: 14px;
    height: 32px;
    position: relative;
    top: -127px;
    left: 91px;
}
.head_hair_right{
    border-radius: 50% 50% 50% 50%;
    transform: rotate(
-28deg
);
    background-color: rgb(216, 128, 14);
    width: 12px;
    height: 29px;
    position: relative;
    top: -160px;
    left: 110px;
}
.head_hair_straight_top{
    border-radius: 0 0 0 0;
    background-color: rgb(255 193 77);
    width: 39px;
    height: 4px;
    position: relative;
    top: -188px;
    left: 80px;
}
.snout{
    background-color: rgb(253 242 219);
    width: 153px;
    height: 104px;
    border-radius: 262%;
    position: relative;
    top: -103px;
    left: 24px;
}
.nose{
    background-color: #fdf2db;
    width: 0px;
    height: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #ffa6b6;
    border-radius: 50%;
    position: relative;
    top: -198px;
    left: 82px;
}
.mouth{
    position: relative;
    top: 20px;
    left: 20px;
}
.mouth_left{
    width: 27px;
    height: 12px;
    border: solid 4px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 210%/83px 64px 0 0;
    transform: rotate( 
-190deg
 );
    position: absolute;
    top: -214px;
    left: 51px;
}
.mouth_right{
    width: 26px;
    height: 14px;
    border: solid 4px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 204%/83px 64px 0 0;
    transform: rotate( 
-176deg
 );
    position: absolute;
    top: -217px;
    left: 80px;
}
.whiskers{
position: relative;
}
.whisker{
    border-radius: 0 0 0 0;
    background-color: black;
    height: 2px;
    width: 75px;
    position: absolute;
}
.top_right_whisker{
    transform: rotate(
-11deg
);
    top: -210px;
    left: 117px;
}
.top_left_whisker{
    transform: rotate(
11deg
);
    top: -210px;
    left: 11px;
}
.middle_right_whisker{
    transform: rotate( 
-2deg
 );
    top: -201.5px;
    left: 117.5px;
}
.middle_left_whisker{
    transform: rotate(
2deg
);
    top: -201.5px;
    left: 10px;
}
.bottom_right_whisker{
    transform: rotate( 
5deg
 );
    top: -195px;
    left: 117px;
}
.bottom_left_whisker{
    transform: rotate(
-5deg
);
    top: -195px;
    left: 11px;
}
.body{
    background-color: rgb(255 193 77);
    width: 190px;
    height: 163px;
    border-radius: 50%;
    position: relative;
    top: 141px;
    left: 7px;
    z-index: -1;
}
.belly{
    background-color: rgb(253 242 219);
    width: 121px;
    height: 105px;
    border-radius: 50%;
    position: relative;
    top: 53px;
    left: 35px;
    z-index: -1;
}
.paws{
    position: relative;
}
.paw{
    border-radius: 50% 50% 25% 25%;
    background-color: rgb(255 193 77);
    height: 37px;
    width: 47px;
    position: absolute;
}
.left_paw{
    transform: rotate( 
-1deg
 );
    top: 80px;
    left: 14px;
}
.right_paw{
    transform: rotate( 
0deg
 );
    top: 80px;
    left: 65px;
}
.toeline1{
    transform: rotate( 
-92deg
 );
    border: solid 2.5px #000;
    border-color: black transparent transparent;
    border-radius: 84%/46% 72% 0 0;
    height: 6px;
    width: 17px;
    position: relative;
    top: 22px;
    left: 5px;
}
.toeline2{
    border-radius: 0 0 0 0;
    background-color: black;
    height: 18px;
    width: 2px;
    position: relative;
    top: 8px;
    left: 23px;
}
.toeline3{
    transform: rotate( 
85deg
 );
    border: solid 2.5px #000;
    border-color: black transparent transparent;
    border-radius: 84%/46% 72% 0 0;
    height: 6px;
    width: 17px;
    position: relative;
    top: -6px;
    left: 20px;
}
.feet{
    position: relative;
}
.foot{
    border-radius: 50% 50% 25% 25%;
    background-color: rgb(255 193 77);
    height: 37px;
    width: 49px;
    position: absolute;
}
.left_foot{
    transform: rotate( 
-1deg
 );
 top: 73px;
 left: -38px;
}
.right_foot{
    transform: rotate( 
0deg
 );
 top: 70px;
 left: 114px;
}
.tail {
    position: absolute;
    margin-left: 26px;
    margin-top: 40px;
    height: 83px;
    width: 61px;
    border: 22px solid rgb(255 193 77);
    border-radius: 50px;
    display: inline-block;
    top: 99px;
    left: 116px;
    transform: rotate( 
-60deg
 );
    z-index: -3;
  }
  
.tail_mask {
    position: absolute;
    margin-top: 17px;
    margin-left: 112px;
    height: 65px;
    width: 94px;
    background-color: #ffffff;
    top: 118px;
    left: 22px;
    z-index: -2;
  }
.tail_end{
    position: absolute;
    background-color: rgb(255 193 77);
    border-radius: 55%;
    width: 27px;
    height: 27px;
    top: 161.3px;
    left: 212px;
  }

javier_ortiz_mir · July 19, 2021, 3:06pm

hi there, I struggled a little by creating my cat, but here’s my masterpice:

html code:


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Crypto kitties competo</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="cat">
      <div class="ears">
        <div class="ear left_ear"></div>
          <div class="ear left_ear inner_left_ear"></div>
        <div class="ear right_ear"></div>
          <div class="ear right_ear inner_right_ear"></div>
      </div>
      <div id="head" class="">
        <div class="eyes">
            <div class="eye">
              <div class="pupil"></div>
            </div>
            <div class="eye">
              <div class="pupil"></div>
            </div>
        </div>
        <div class="nose"></div>
        <div class="mouth left_mouth"></div>
        <div class="mouth right_mouth"></div>
        <div class="mustache right_mustache m1"></div>
        <div class="mustache right_mustache m2"></div>
        <div class="mustache right_mustache m3"></div>
        <div class="mustache left_mustache m4"></div>
        <div class="mustache left_mustache m5"></div>
        <div class="mustache left_mustache m6"></div>

      </div>
      <div class="body">
      </div>

    </div>


  </body>
</html>

CSS code:

#head {
  background-color: rgb(255, 153, 50);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  z-index: 10;
  margin-left: 100px;

}
.nose{
  background-color: black;
  width: 30px;
  height: 15px;
  border-radius: 20% 20% 50% 50%;
  position: relative;
  left: 85px;
}

.mustache{
  width: 100px;
  height: 0.75px;
  background-color: black;
  position: absolute;
  display: flex;
  margin-left: 100px;
  margin-top: -15px;
}

.mouth{
   height:25px;
   width: 10px;
   border-radius: 150px 0 0 150px;
   border-top: 2px solid #000;
   border-left: 2px solid #000;
   border-bottom: 2px solid #000;
   transform: translate(100px) rotate(-90deg);
   position: absolute;
   display: flex;
   margin-left: 7px;
   margin-top: -10px;
}

.left_mouth{
  margin-left: -18px;
}
.right_mouth{

}

.left_mustache{
  left: -20px;
}

.right_mustache{
  left: 135px;
}

.m1{
  top: 130px;
  transform: rotate(-5deg);
}
.m2{
  top: 140px;
}
.m3{
  top: 150px;
  transform: rotate(5deg);
}
.m4{
  top: 130px;
  transform: rotate(5deg);
}
.m5{
  top: 140px;
}
.m6{
  top: 150px;
    transform: rotate(-5deg);
}

.eyes{
  position: relative;
  top: 30px;
  display: flex;
}

.eye {
  background-color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 25px;
  position: relative;
}
.pupil{
  background-color: black;
  position: absolute;
  width: 25px;
  height: 25px;
  margin: 12px;
  border-radius: 50%;
}

.ears{
  position: relative;
  margin-left: 100px;
}

.ear{
  border-radius: 90% 0 90% 0;
  background-color: rgb(255, 153, 50);
  height: 70px;
  width: 70px;
  position: absolute;
}

.right_ear{
  left: 120px;
  z-index: -10;
}
.left_ear{
  transform: scale(1, -1);
  left: 10px;
  z-index: -10;
}

.inner_right_ear{
  background-color: rgb(204, 102, 0);
  z-index: -5;
  transform: scale(0.8, 0.8);
}

.inner_left_ear{
  background-color: rgb(204, 102, 0);
  z-index: -5;
  transform: scale(0.8, -0.8);
}

.body {
  display: block;
  width: 200px;
  height: 250px;
  background-color: rgb(255, 153, 50);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  margin-left: 100px;
  margin-top: -20px;
}

javier_ortiz_mir · July 19, 2021, 3:10pm

your cat looks amazing

tanu_g · July 24, 2021, 1:35pm

Heya,
Here’s my little kitty.
To check out her genetics click the Link

kitty

Jaka · July 28, 2021, 11:29am

Cyclops cat

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NFT kitty </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cat">
    <div class="cat__ear">
        <div id="leftEar" class="cat__ear--left">
            <div class="cat__ear--left-inside"></div>
        </div>
        <div id="rightEar" class="cat__ear--right">
            <div class="cat__ear--right-inside"></div>
        </div>
    </div>
    <div class="cat__head">
        <div class="cat__head-horn1"></div>
        <div class="cat__head-horn2"></div>
        <div class="cat__eye">
            <div class="cat__eye">
                <span class="pupil"></span>
            </div>
        </div>
        <div class="cat__nose"></div>
        <div class="cat__mouth-contour"></div>
        <div class="cat__mouth-left"></div>
        <div class="cat__mouth-right"></div>
        <div class="cat__whiskers-left"></div>
        <div class="cat__whiskers-right"></div>
    </div>
    <div class="cat__body">
        <div class="cat__chest"></div>
        <div class="cat__chest_inner"></div>
        <div class="cat__paw-left"></div>
        <div class="cat__paw-left_inner"></div>
        <div class="cat__paw-right"></div>
        <div class="cat__paw-right_inner"></div>
        <div class="cat__tail"></div>
    </div>
</div>
</body>
</html>

.cat{
  position: relative;
  margin: auto;
  margin-top: 5%;
  width: 600px;
  height: 420px;
}
.cat__head {
    position: relative;
    width: 230px;
    height: 200px;
    border-left: 40px solid
    border-top: 10px solid transparent;
    border-radius: 50% 50% 45% 45%;
    background: #3dcfdb;
    z-index: 20;
}
.cat__head-horn1 {
    position: absolute;
    height: 60px;
    top: -40px;
    width: 20px;
    left: 80px;
    background: #373737;
    border-radius: 0 0 100% 100%;
    transform: rotate(180deg);
}

.cat__head-horn2 {
    position: absolute;
    height: 60px;
    top: -40px;
    width: 20px;
    left: 120px;
    background: #373737;
    border-radius: 0 0 100% 100%;
    transform: rotate(180deg);
}

.cat__ear {
    position: relative;
}
.cat__ear--left, .cat__ear--right {
    position: absolute;
    top: -0px;
    width: 160px;
    height: 150px;
    border-radius: 100% 0 100% 0;
    background: #3dcfdb;
    justify-content: center;
    align-items: center;
}
.cat__ear--left {
    transform: scale(-1, 1) rotate(170deg);
    left: -14px;
}
.cat__ear--right {
    transform: rotate(170deg);
    left: 94px;
}
.cat__ear--left-inside, .cat__ear--right-inside {
    width: 108px;
    height: 138px;
    border-radius: 90% 0 90% 0;
    background: #e57373;
}
.cat__eye {
    position: absolute;
    top: 10px;
    left: 25px;
    display: flex;
}

.cat__eye span {
    position: absolute;
    top: 41px;
    width: 60px;
    height: 42px;
    background: #373737;
    border-radius: 50%;
    z-index: 200;
}
.cat__eye span::before {
    content: '';
    top: 5px;
    left: 4px;
    position: absolute;
    width: 50px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
}
.cat__eye span::after {
    content: '';
    top: 5px;
    left: 15px;
    position: absolute;
    width: 20px;
    height: 30px;
    border-radius: 50%;
    background: #373737;
}
.cat__eye span.pupil{
    left: 30px;
}

.cat__nose {
    position: absolute;
    top: 115px;
    left: 95px;
    width: 0;
    height: 0;
    border-right: 14px solid rgba(255, 255, 255, 0);
    border-left: 14px solid rgba(255, 255, 255, 0);
    border-top: 18px solid #e57373;
    border-radius: 100%;
    z-index: 100;
}
.cat__mouth-contour {
    position: absolute;
    top: 97px;
    left: 19px;
    background: #fff3e0;
    width: 180px;
    height: 90px;
    border-radius: 55% 55% 60% 60%;
}
.cat__mouth-left, .cat__mouth-right {
    position: absolute;
    top: 120px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 4px solid  #373737;
    border-right: 3px solid rgba(255, 255, 255, 0);
    border-top: 3px solid rgba(255, 255, 255, 0);
    transform: rotate(-45deg);
}
.cat__mouth-left {
    left: 80px;
}
.cat__mouth-right {
    left: 108px;
}
.cat__whiskers-left, .cat__whiskers-right {
    position: absolute;
}
.cat__whiskers-left, .cat__whiskers-right {
    width: 100px;
    height: 5px;
    background: #373737;
}

.cat__whiskers-left {
    top: 130px;
    left: -20px;
    box-shadow: -5px 10px #888888;
    transform: rotate(-20deg);
}
.cat__whiskers-right {
    top: 130px;
    left: 140px;
    box-shadow: 5px 10px #888888;
    transform: rotate(20deg);
}

.cat__body {
    position: relative;
}
.cat__chest {
    position: absolute;
    left: 50px;
    top: -50px;
    width: 200px;
    height: 500px;
    background: #3dcfdb;
    border: 5px solid  transparent;
    border-radius: 50% 50% 40% 40%;
}
.cat__chest_inner {
    content: '';
    position: absolute;
    top: 10px;
    left: 70px;
    width: 88px;
    height: 400px;
    border-radius: 50%;
    background: #fff3e0;
    z-index: 4;
}
.cat__paw-left{
    position: absolute;
    top: 430px;
    width: 30px;
    height: 150px;
    left: 110px;
    border-radius: 100%;
    background: #3dcfdb;
}

.cat__paw-right{
    position: absolute;
    top: 430px;
    width: 30px;
    height: 150px;
    left: 180px;
    border-radius: 100%;
    background: #3dcfdb;

}
.cat__paw-right_inner {
    position: absolute;
    top: 100px;
    left: -103px;
    width: 200px;
    height: 27px;
    background: #3dcfdb;
    border-radius: 100%;
    transform: rotate(-30deg);
    z-index: 4;
}

.cat__paw-left_inner {
    position: absolute;
    top: 150px;
    left: -10px;
    width: 200px;
    height: 27px;
    background: #3dcfdb;
    border-radius: 100%;
    transform: rotate(-30deg);
    z-index: 4;
}

.cat__tail{
    position: absolute;
    top: 375px;
    left: 200px;
    width: 200px;
    height: 27px;
    transform: rotate(-20deg);
    border-radius: 32% 43% 39% 52% / 28% 21% 86% 72%;
	background: #3dcfdb;
    z-index: 1;
}

gregD · August 5, 2021, 6:04pm

my dude
Screenshot 2021-08-05 at 19.00.49
HTML

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cat">
            <div class="ears">
                <div class="ear left_ear">
                    <div class="left_inner_ear"></div>
                </div>
                <div class="ear right_ear">
                    <div class="right_inner_ear"></div>
                </div>
            </div>
            <div class="tail_1"></div>
            <div class="tail_2"></div>
            <div class="body">
                <div class="inner_body"></div>
                <div class="paws">
                    <div class="paw left_paw">
                        <div class="bottom_left_toe"></div>
                        <div class="top_left_toe"></div>
                    </div>
                    <div class="paw right_paw">
                        <div class="bottom_right_toe"></div>
                        <div class="top_right_toe"></div>
                    </div>
                </div>
            </div>
            <div id="head">
                <div class="eyes">
                    <div class="eye">
                        <div class="pupils">
                            <div class="eye_glimmer_big"></div>
                            <div class="eye_glimmer_small"></div>
                        </div>
                    </div>
                    <div class="eye">
                        <div class="pupils">
                            <div class="eye_glimmer_big"></div>
                            <div class="eye_glimmer_small"></div>
                        </div>
                    </div>
                </div>
                <div class="nose"></div>
                <div class="left_mouth"></div>
                <div class="right_mouth"></div>
                <div class="right_whisker_1"></div>
                <div class="right_whisker_2"></div>
                <div class="right_whisker_3"></div>
                <div class="left_whisker_1"></div>
                <div class="left_whisker_2"></div>
                <div class="left_whisker_3"></div>
            </div>
        </div>
       
    </body>

</html>

css

#head{
    background-color: rgba(76, 231, 231, 0.897);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
    left: 30px;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: rgb(221, 226, 226);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}
.pupils{
    background-color: black;
    border-radius: 50%;
    height: 33px;
    width: 33px;
    position: absolute;
    top: 13px;
    left: 13px;
}
.eye_glimmer_big {
    height: 10px;
    width: 10px;
    background-color: white;
    border-radius: 50%;
    position: relative;
    left: 7px;
    top: 9px;
}
.eye_glimmer_small {
    height: 5px;
    width: 5px;
    background-color: white;
    border-radius: 50% 80%;
    position: relative;
    left: 8px;
    top: 9px;
}
.ears{
    position: relative;
    left: 18px;
    
}
.ear{
    border-radius: 75px 0 75px 0;
    background-color: rgba(76, 231, 231, 0.897);
    height: 100px;
    width: 100px;
    position: absolute;
}
.left_ear{
    transform: scale(1, -1);
}
.right_ear{
    left: 100px;
}

.body{
    height: 260px;
    width: 190px;
    background-color: rgba(76, 231, 231, 0.897);
    border-radius: 100% 100% 50% 50%;
    position: absolute;
    top: 160px;
    left: 38px;
   
}
.inner_body{
    height: 200px;
    width: 155px;
    background-color: rgba(198, 209, 209, 0.945);
    position: absolute;
    border-radius: 100% 100% 75% 75%;
    top: 60px;
    left: 17px;
}
.paws{
    position: relative;
    top: 220px;
}
.paw{
    height: 50px;
    width: 80px;
    background-color: rgba(76, 231, 231, 0.897);
    border-radius: 50%;
    position: absolute;

}
.left_paw{
    transform: scale(1, -1);
}
.right_paw{
    left: 110px;
}
.bottom_left_toe{
    position: relative;
    width: 30px;
    height: 10px;
    border: solid 3px;
    border-color: #000 transparent transparent;
    border-radius: 80%/20px 10px 0 0;
    top: 30px;

}

.top_left_toe {
    position: relative;
    width: 30px;
    height: 10px;
    border: solid 3px;
    border-color: #000 transparent transparent;
    border-radius: 80%/20px 10px 0 0;
    transform: scale(1, -1);
    bottom: 12px;
}
.bottom_right_toe{
    position: relative;
    width: 30px;
    height: 10px;
    border: solid 3px;
    border-color: #000 transparent transparent;
    border-radius: 80%/20px 10px 0 0;
    top: 30px;
    left: 43px;
}

.top_right_toe{
    position: relative;
    width: 30px;
    height: 10px;
    border: solid 3px;
    border-color: #000 transparent transparent;
    border-radius: 80%/20px 10px 0 0;
    transform: scale(1, -1);
    bottom: 12px;
    left: 43px;
}
.nose{
    width: 30; 
    height: 20; 
    background-color: black;
    position: relative;
    border-radius: 40% 40% 100% 100%;
    top: 20px;
    left: 85px;
}
.left_mouth{
    position: absolute;
    width: 45px;
    height: 14px;
    border: solid 3px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/80px 70px 0 0;
    transform: rotate(-210deg);
    left: 50px;
    top: 140px;
}
.right_mouth{
    position: absolute;
    width: 45px;
    height: 14px;
    border: solid 3px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/80px 70px 0 0;
    left: 100px;
    top: 140px;
    transform: scale(1, -1);
    transform: rotate(-150deg);
}
.left_inner_ear {
    height: 90px;
    width: 90px;
    background-color: rgba(198, 209, 209, 0.945);
    border-radius: 75px 0 75px 0;
    position: absolute;
    left: 10px;
}
.right_inner_ear {
    height: 90px;
    width: 90px;
    background-color: rgba(198, 209, 209, 0.945);
    border-radius: 75px 0 75px 0;
    position: absolute;
    top: 10px;
    
}
.right_whisker_1{
    position: absolute;
    width: 100px;
    height: 12px;
    border: solid 2px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/50px 60px 0 0;
    left: 130px;
    top: 120px;
    transform: rotate(-10deg);
}
.right_whisker_2{
    position: absolute;
    width: 100px;
    height: 12px;
    border: solid 2px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/50px 60px 0 0;
    left: 130px;
    top: 130px; 
}

.right_whisker_3{
    position: absolute;
    width: 100px;
    height: 12px;
    border: solid 2px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/50px 60px 0 0;
    left: 130px;
    top: 140px; 
    transform: rotate(10deg);
}
.left_whisker_1{
    position: absolute;
    width: 100px;
    height: 12px;
    border: solid 2px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/50px 60px 0 0;
    left: -30px;
    top: 130px; 
}
.left_whisker_2{
    position: absolute;
    width: 100px;
    height: 12px;
    border: solid 2px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/50px 60px 0 0;
    left: -30px;
    top: 140px; 
    transform: rotate(-10deg);
}
.left_whisker_3{
    position: absolute;
    width: 100px;
    height: 12px;
    border: solid 2px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/50px 60px 0 0;
    left: -30px;
    top: 120px; 
    transform: rotate(10deg);
}
.tail_1{
    position: absolute;
    width: 150px;
    height: 100px;
    border: solid 8px rgba(76, 231, 231, 0.897);
    border-color: rgba(76, 231, 231, 0.897) transparent transparent transparent;
    border-radius: 90%/80px 90px 0 0;
    left: 200px;
    top: 280px;
    transform: rotate(-65deg);
}
.tail_2{
    position: absolute;
    width: 75px;
    height: 45px;
    border: solid 8px rgba(198, 209, 209, 0.945) ;
    border-color: rgba(198, 209, 209, 0.945)  transparent transparent transparent;
    border-radius: 220%/80px 70px 0 0;
    transform: rotate(-240deg);
    left: 229px;
    top: 195px;
}

saishet · August 11, 2021, 8:43pm

My cat
Untitled

<html>
<head>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <div class="cat">
        <div class="ears">
            <div class="ear left_ear"></div>
            <div class="ear right_ear"></div>         
        </div>
        <div id="face">
            <div class="eyes">
                <div class="eye">
                    <div class="pupils"></div>
                </div>   
                <div class="eye">
                    <div class="pupils"></div>
                </div>
            </div>
            <div class="nose"></div>
            <div class="mouth"></div>
            <div class="mouth1"></div>
            <div class="beard left_beard"></div>
            <div class="beard right_beard"></div>
            <div class="beard left_beard1"></div>
            <div class="beard right_beard1"></div>
            <div class="beard left_beard2"></div>
            <div class="beard right_beard2"></div>
        </div>
        <div class="stomach">
            <div class="left_leg"></div>
            <div class="right_leg"></div>
            <div class="stomachlayout"></div>
        </div>
        <div class="tail"></div>
    </div>
</body>
</html>

List item

#face{
    background-color: FFB740;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}
.nose{
    background-color: red;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 118px;
    left: 93px;
    position: absolute;
   
}
.mouth{
    border: solid;
    border-color:FFB740;
    width: 20px;
    height: 20px;
    border-bottom-color: black;
    border-right-color: black; 
    border-radius:50%;
    transform: rotate(45deg);
    position: absolute;
    top: 150px;
    left: 77px;
}
.mouth1{
    border: solid;
    border-color:FFB740;
    width: 20px;
    height: 20px;
    border-bottom-color: black;
    border-right-color: black; 
    border-radius:50%;
    transform: rotate(45deg);
    position: absolute;
    top: 150px;
    left: 100px;
}
.beard{
    background-color: black;
    width: 90px;
    height: 1px;
    position: relative;
    
}
.left_beard{
    background-color: black;
    top: 14px;
    right: 5px;
    margin-right: 5px;
}
.right_beard{
    background-color: black;
    left: 120px;
    top: 13px;
}
.left_beard1{
    background-color: black;
    top: 24px;
    right: 5px;
}
.right_beard1{
    background-color: black;
    left: 120px;
    top: 23px;
}
.left_beard2{
    background-color: black;
    top: 34px;
    right: 5px;
    
}
.right_beard2{
    background-color: black;
    left: 120px;
    top: 33px;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}
.pupils{
    background-color: black;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: 10;
    left: 10;
}
.ears{
    position: relative;
}
.ear{
    height: 100px;
    width: 100px;
    background-color: FFB740;
    border-radius:  90% 0 90% 0;
    position: absolute;
}
.left_ear{
    transform: scale(1,-1) rotate(0deg);
}
.right_ear{  
    left: 100px;
}
.stomach{
    height:200px;
    width:200px;
    background-color: FFB740;
    border-radius: 50%;
    position: relative;
    top: -90px;
    z-index: auto;
}
.left_leg{
    background-color: red;
    height: 100px;
    width: 100px;
    border-radius: 70% 40% 70% 40%;
    left: -20px;
    position: absolute;
    top: 90px;
    z-index: -1;
}
.right_leg{
    background-color: red;
    height: 100px;
    width: 100px;
    border-radius: 70% 40% 70% 40%;
    transform: scale(1,-1);
    left: 130px;
    position: absolute;
    top: 90px;
    z-index: -1;
}
.left_hand{
    background-color: red;
    height: 120px;
    width: 40px;
    border-radius: 70% 90% 40% 40%;
    position: absolute;
    top: 110px;
    left: 40px;
}
.right_hand{
    background-color: red;
    height: 120px;
    width: 40px;
    border-radius: 70% 90% 40% 40%;
    position: absolute;
    top: 110px;
    left: 120px;
}
.stomachlayout{
    height:150px;
    width:150px;
    background-color: red;
    border-radius: 50%;
    position: relative;
    top: 30px;
    left: 25px;
    z-index: auto;
}
.tail{
    background-color: red;
    height: 89px;
    width: 201px;
    border-radius: 74% 45% 73% 40%;
    transform: rotate(155deg);
    position: relative;
    left: 151px;
    top: -303px;
    z-index: -1;
}

Kamil37 · August 16, 2021, 12:27am

Hi Guys,

This is my Dog thought it’s gonna be fun to create something bit different so maybe will call it Crypto Doggies

Crypto-Doggie-Updated_2

Heres my code:

<div class = "dog">
                    <div class = "fringe_1"></div>
                    <div class = "fringe_2"></div>
                    <div class = "fringe_3"></div>
                    <div class = "fringe_4"></div>
                    <div class = "fringe_5"></div>
                    <div class = "cheeks"></div>
                    <div class = "chin"></div>
                    <div class = "mouth"></div>
                    <div class = "mouth_2"></div>
                    <div class = "mouth_3"></div>
                    <div class = "tongue_1"></div>
                    <div class = "tongue_2"></div>
                    <div class = "tongue_3"></div>
                    <div class = "tongue_4"></div>
                    <div class = "tongue_5"></div>
                    <div class = "left_cheek"></div>
                    <div class = "right_cheek"></div>
                    <div class = "nose"></div>
                    <div class = "neck"></div>
                    <div class = "body">
                        <div class = "belly"></div>
                    </div>
                    <div class = "left_foot"></div>
                    <div class = "right_foot"></div>
                    <div class = "back_left_foot"></div>
                    <div class = "back_right_foot"></div>
                    <div class = "left_leg"></div>
                    <div class = "right_leg"></div>
    
                    <div class="ears">
                        <div class = "ear left_ear">
                            <div class = "ear left_inner_ear"></div>
                        </div>
                        <div class = "ear left_ear_end"></div>
                        <div class = "ear right_ear">
                            <div class = "ear right_inner_ear"></div>
                        </div>
                        <div class = "ear right_ear_end"></div>
                    </div>
    
                    <div class = "head">
                        <div class = "eyes">
                            <div class = "eye_shade">
                                <div class = "eye">
                                    <div class = "left_inner_eye">
                                        <div class = "left_outer_pupil">
                                            <div class = "pupils">
                                                <div class = "left_inner_pupil"></div>
                                                <div class = "left_inner_pupil_2"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                
                            <div class = "eye_shade">
                                <div class = "eye">
                                    <div class = "right_inner_eye">
                                        <div class = "right_outer_pupil">
                                            <div class = "pupils">
                                                <div class = "right_inner_pupil"></div>
                                                <div class = "right_inner_pupil_2"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>

.dog{
    top: -181px;
    left: -50px;
    position: inherit;
}
.head{
    background-color: rgb(235, 156, 37);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 100px;
    position: relative;
    left: 8px;
    top: 116px;
    z-index: 9;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex;
    justify-content: center;

}
.eye{
    background-color: rgb(207, 129, 12);
    border-radius: 50%;
    width: 50px;
    height: 80px;
    margin: 0px;
    position: absolute;
    top: 3px;
    left: -3px;
}

.eye_shade{
    background-color: black;
    border-radius: 50%;
    width: 46px;
    height: 81px;
    margin: 15px;
    position: relative;
    top: 17px;
    left: 1px;
}

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

.left_outer_pupil{
    background-color: rgb(131 131 244);
    border-radius: 50%;
    width: 31px;
    height: 38px;
    position: absolute;
    margin: 10;
    top: 8px;
    left: -2px;

}

.pupils{
    background-color: black;
    border-radius: 50%;
    width: 23px;
    height: 25px;
    position: absolute;
    margin: 4px;
    top: 2px;
}

.left_inner_pupil{
    background-color: #f8f9fa;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    position: absolute;
    top: 12px;
    left: 1px;
}

.left_inner_pupil_2{
    background-color: #ffffff66;
    border-radius: 50%;
    width: 8px;
    height: 9px;
    position: absolute;
    top: -5px;
    left: 2px;
}

.right_inner_eye{
    background-color: white;
    border-radius: 50%;
    width: 40px;
    height: 60px;
    position: relative;
    top: 17px;
}

.right_outer_pupil{
    background-color: rgb(131 131 240);
    border-radius: 50%;
    width: 31px;
    height: 38px;
    position: absolute;
    margin: 10;
    top: 9px;
    left: -9px;
}

.right_inner_pupil{
    background-color: white;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    position: relative;
    top: 13px;
    left: 17px;
}

.right_inner_pupil_2{
    background-color: #ffffff66;
    border-radius: 50%;
    width: 8px;
    height: 9px;
    position: absolute;
    top: -4px;
    left: 15px;
}

.ears{
    position: relative;
}

.ear{
    border-radius: 90px 40px 70px 10px;
    background-color: rgb(235, 156, 37);
    height: 100px;
    width: 100px;
    position: absolute;
    z-index: 8;
}

.right_ear{
    left: 254px;
    top: 116px;
    transform: rotate(180deg);
}

.right_inner_ear{
    background-color: rgb(237 166 166);
    height: 85px;
    width: 85px;
    left: 2px;
    top: 3px;
    z-index: 9;
}

.right_ear_end{
    top: 130px;
    left: 296px;
    border-radius: 100px 10px 30px 20px;
    transform: scale(1, -1) rotate(310deg);

}

.left_ear{
    transform: scale(1, -1);
    left: 64px;
    top: 113px;
}

.left_inner_ear{
    background-color: rgb(237 166 166);
    height: 85px;
    width: 85px;
    left: 4px;
    top: 1px;
}



.left_ear_end{
    left: 21px;
    top: 131px;
    border-radius: 100px 10px 30px 20px;
    transform: scale(1, -1) rotate(136deg);

}

.cheeks{
    border-radius: 61px 61px 40px 40px;
    background-color: rgb(235, 156, 37);
    height: 99px;
    width: 208px;
    position: absolute;
    top: 209px;
    left: 105px;
    
}

.chin{
    border-radius: 188px 20px 90px 20px;
    background-color: rgb(235, 156, 37);
    height: 140px;
    width: 140px;
    position: absolute;
    top: 220px;
    left: 139px;
    transform: rotate(225deg);
}

.mouth{
    border-radius: 50%;
    background-color: #fcd6a5;
    height: 95px;
    width: 98px;
    position: absolute;
    top: 260px;
    left: 160px;
    z-index: 10;
}

.mouth_2{
    border-radius: 50%;
    background-color: #fcd6a5;
    height: 76px;
    width: 128px;
    position: absolute;
    top: 269px;
    left: 143px;
    z-index: 10;
}

.nose{
    border-radius: 316px 133px 73px 152px;
    background-color: rgb(85, 42, 14);
    height: 40px;
    width: 40px;
    position: absolute;
    top: 251px;
    left: 188px;
    transform: rotate(45deg);
    z-index: 10;
}


.mouth_3{
    border-radius: 35px 0px 85px 0px;
    background-color: rgb(146, 35, 35);
    height: 55px;
    width: 55px;
    position: absolute;
    top: 285px;
    left: 180px;
    transform: rotate(225deg);
    z-index: 10;
}

.tongue_1{
    border-radius: 8px 8px 21px 8px;
    background-color: rgb(237 166 166);
    height: 20px;
    width: 20px;
    position: absolute;
    top: 326px;
    left: 193px;
    transform: rotate(226deg);
    z-index: 10;
}

.tongue_2{
    border-radius: 8px 8px 21px 8px;
    background-color: rgb(237 166 166);
    height: 20px;
    width: 20px;
    position: absolute;
    top: 326px;
    left: 205px;
    transform: rotate(226deg);
    z-index: 10;
}

.tongue_3{
    border-radius: 8px 8px 27px 8px;
    background-color: rgb(237 166 166);
    height: 20px;
    width: 20px;
    position: absolute;
    top: 332px;
    left: 199px;
    transform: rotate(226deg);
    z-index: 10;
}

.tongue_4{
    border-radius: 8px 8px 27px 8px;
    background-color: rgb(237 166 166);
    height: 20px;
    width: 20px;
    position: absolute;
    top: 340px;
    left: 194px;
    transform: rotate(97deg);
    z-index: 10;
}

.tongue_5{
    border-radius: 8px 8px 27px 8px;
    background-color: rgb(237 166 166);
    height: 20px;
    width: 20px;
    position: absolute;
    top: 340px;
    left: 204px;
    transform: rotate(353deg);
    z-index: 10;
}

.left_cheek{
    border-radius: 50px 0px 35px 50px;
    background-color: #ffe2be;
    height: 40px;
    width: 50px;
    position: absolute;
    top: 277px;
    left: 159px;
    z-index: 10;
}

.right_cheek{
    border-radius: 0px 50px 50px 35px;
    background-color: #ffe2be;
    height: 40px;
    width: 50px;
    position: absolute;
    top: 276px;
    left: 208px;
    z-index: 10;
}

.neck{
    background-color: rgb(240 159 38);
    border-radius: 0px;
    width: 107px;
    height: 100px;
    top: 314px;
    left: 155px;
    position: absolute;
    z-index: 6;
}

.body{
    background-color: rgb(240 159 38);
    width: 150px;
    height: 174px;
    border-radius: 130px 125px 0px 0px;
    margin: 100px;
    position: absolute;
    top: 248px;
    left: 33px;
    z-index: 6;
}

.belly{
    background-color: #fcd6a5;
    width: 76px;
    height: 119px;
    border-radius: 45%;
    position: absolute;
    top: 31px;
    left: 39px;
    z-index: 7;
}

.left_foot{
    border-radius: 61px 61px 20px 20px;
    background-color: #f9e2c4;
    height: 38px;
    width: 60px;
    position: absolute;
    top: 519px;
    left: 118px;
    z-index: 7;
}

.right_foot{
    border-radius: 61px 61px 20px 20px;
    background-color: #f9e2c4;
    height: 38px;
    width: 60px;
    position: absolute;
    top: 519px;
    left: 240px;
    z-index: 8;
}

.back_left_foot{
    border-radius: 61px 61px 20px 20px;
    background-color: #e9d4b8;
    height: 38px;
    width: 60px;
    position: absolute;
    top: 512px;
    left: 95px;
    z-index: 2
}

.back_right_foot{
    border-radius: 61px 61px 20px 20px;
    background-color: #e9d4b8;
    height: 38px;
    width: 60px;
    position: absolute;
    top: 512px;
    left: 269px;
    z-index: 2;
}

.left_leg{
    background-color: rgb(235, 156, 37);
    width: 100;
    height: 125;
    border-radius: 130px 125px 50px 215px;
    margin: 100px;
    position: absolute;
    top: 323px;
    left: -20px;
    z-index: 1;
}

.right_leg{
    background-color: rgb(235, 156, 37);
    width: 100;
    height: 125;
    border-radius: 130px 125px 215px 50px;
    margin: 100px;
    position: absolute;
    top: 323px;
    left: 137px;
    z-index: 1;
}

.fringe_1{
    position: absolute;
    width: 55px;
    height: 49px;
    border-top: 19.5px solid rgb(189 118 12);
    border-left: 0.5px solid rgb(189 118 12);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: 85px;
    left: 65px;
    transform: rotate( 
43deg
 );
    z-index: 10;
}

.fringe_2{
    position: absolute;
    width: 46px;
    height: 57px;
    border-top: 25.5px solid rgb(189 118 12);
    border-left: 0.5px solid rgb(189 118 12);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: 101px;
    left: 66px;
    transform: rotate( 
12deg
 );
    z-index: 10;
}

.fringe_3{
    position: absolute;
    width: 47px;
    height: 52px;
    border-top: 22.5px solid rgb(189 118 12);
    border-left: 0.5px solid rgb(189 118 12);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: 120px;
    left: 74px;
    transform: rotate( 
358deg
 );
    z-index: 10;
}

.fringe_4{
    position: absolute;
    width: 64px;
    height: 68px;
    border-top: 24.5px solid rgb(189 118 12);
    border-left: 0.5px solid rgb(189 118 12);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: 75px;
    left: 75px;
    transform: rotate( 
74deg
 );
    z-index: 10;
}

.fringe_5{
    position: absolute;
    width: 67px;
    height: 52px;
    border-top: 21.5px solid rgb(189 118 12);
    border-left: 0.5px solid rgb(189 118 12);
    border-top-left-radius: 200px;
    float: left;
    margin-left: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: 127px;
    left: 86px;
    transform: rotate( 
327deg
 );
    z-index: 10;
}

thecil · August 15, 2021, 10:10pm

That just looks super amazing!!!

Great work man!

Carlos Z

Kamil37 · August 15, 2021, 10:35pm

Thanks man! spend like 3 days making it, I’m glad you like it so much.

jak · August 23, 2021, 5:18pm

Holy cow I am so impressed by the effort people have gone to.
These all look amazing!

Not gonna lie, I was excited to have a laugh and see how ugly everyone’s cats were, but mine is probs the worst

Here he is - his name is Cat Stevens.
Jacks Pussy

His tail blows in the wind, but I mostly roached that inspo from goog

In any case, here’s the code!

index.html

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="cat">
            <div class="ears">
                <div class="ear left_ear">
                    <div class="inner_ear left_inner_ear"></div>
                </div>
                <div class="ear right_ear">
                    <div class="inner_ear right_inner_ear"></div>
                </div>
            </div>
            <div id="head">
                <div class="eyes">
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                </div>
                <div class="nose">
                    <div class="nose_center"></div>
                    <div class="noseholes"></div>
                    <div class="noseholes"></div>
                    <div class="nose_divot"></div>
                </div>
                <div class="whiskers whiskers_left"></div>
                <div class="whiskers whiskers_right"></div>
                <div class="whiskers whiskers_left"></div>
                <div class="whiskers whiskers_right"></div>
                <div class="whiskers whiskers_left"></div>
                <div class="whiskers whiskers_right"></div>
                <div class="mouth">
                    <div class="teeth">
                        <div class="top_teeth top_tooth_left"></div>
                        <div class="top_teeth top_tooth_right"></div>
                        <div class="bottom_teeth">
                            <div class="bottom_tooth_left"></div>
                            <div class="bottom_tooth_left"></div>
                        </div>
                    </div>
                    <div class="tongue"></div>
                </div>
                <div class="chin">
                    <div class="beard"></div>
                </div>
            </div>
            <div class="body">
                <div class="body_center"></div>
            </div>
            <div class="arms">
                <div class="arm left_arm"></div>
                <div class="paws left_paw"></div>
                <div class="arm right_arm"></div>
                <div class="paws right_paw"></div>
            </div>
            <div class="tail">
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
                <span class="tailColor"></span>
            </div>
            <div class="feet">
                <div class="foot left_foot"></div>
                <div class="foot right_foot"></div>
            </div>
        </div>
    </body>
</html>

style.css

#head{
    background-color: rgb(240, 154, 26);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    z-index: 2;
    position: relative;
    left: 30px;
    top: 50px;
}
.eyes{
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 25px;
    position: relative;
}
.pupils{
    background-color: black;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 12px;
}
.ears{
    position: relative;
    left: 30px;
    top: 50px;
}
.ear{
    border-radius: 90% 0 90% 0;
    background-color: rgb(240, 154, 26);
    height: 100px;
    width: 100px;
    position: absolute;
    z-index: 0;
}
.left_ear{
    transform: scale(1, -1) rotate(0deg);
    left: 0;
}
.right_ear{
    left: 100px;
}
.inner_ear{
    border-radius: 90% 0 90% 50%;
    height: 30px;
    width: 30px;
    position: relative;
    background-color: rgb(255, 196, 230);
    z-index: 1;
}
.left_inner_ear{
    transform: scale(1, -1) rotate(270deg);
    top: 60px;
    left: 10px;
}
.right_inner_ear{
    top: 10px;
    left: 60px;
}
.nose{
    width: 50px;
    height: 50px;
    background-color: palevioletred;
    border-radius: 50%;
    z-index: 5;
    position: relative;
    display: flex;
    left: 75px;
    bottom: -3px;
}
.nose_center{
    border: solid 2px rgb(223, 133, 175);
    border-radius: 50%;
    height: 25px;
    position: relative;
    left: 20px;
    z-index: 6;
}
.nose_divot{
    background-color: rgba(240, 154, 26, 0.945);
    border-radius: 50%;
    z-index: 7;
    width: 120px;
    height: 30px;
    position: relative;
    top: 25px;
    right: 15px;
}
.noseholes{
    width: 40px;
    height: 10px;
    z-index: 8;
    margin-left: 5px;
    background-color: black;
    position: relative;
    border-radius: 50%;
    top: 12px;
    left: 5px;
}
.whiskers{
    z-index: 4;
    margin-top: -2px;
    width: 30px;
    height: 2px;
    border: solid 2px black;
    border-color: #000 transparent transparent transparent;
    border-radius: 25%/10px 10px 0 0;
}
.whiskers_left{
    position: relative;
    left: 50px;
    bottom: 30px;
}
.whiskers_right{
    position: relative;
    left: 120px;
    bottom: 35px;
}
.mouth{
    height: 100px;
    width: 100px;
    position: relative;
    display: flex;
}
.teeth{
    position: relative;
    display: flex;
}
.top_teeth{
    z-index: 6;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid whitesmoke;

    position: relative;
    bottom: 30px;
    left: 80px;
}
.tongue {
    z-index: 5;
    position: absolute;
    left: 92px;
    bottom: 100px;
    width: 17px;
    height: 30px;
    border-radius: 10px;
    background: pink;
}
.body{
    z-index: 4;
    background-color: rgb(238, 147, 10);
    width: 250px;
    height: 300px;
    border-radius: 50%;
}
.body_center{
    background-color: whitesmoke;
    width: 150px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    top: 30px;
    left: 50px;
}
.arms{
    position: relative;
    display: flex;
}
.arm{
    z-index: 4;
    margin-top: -2px;
    width: 100px;
    height: 10px;
    border: solid 15px rgb(0, 0, 0);
    border-color: rgb(226 95 228) transparent transparent transparent;
    border-radius: 50%/100px 10px 0 0;
    transform: scale(-1, 1) rotate(0deg);
    position: relative;
    bottom: 200px;
    left: 30px;
}
.left_arm{
    transform: scale(-1, 1) rotate(40deg);
    bottom: 240px;
}
.feet{
    position: relative;
    display: flex;
}
.foot{
    z-index: 4;
    margin-top: -2px;
    margin-left: 10px;
    width: 100px;
    height: 10px;
    border: solid 15px rgb(0, 0, 0);
    border-color: #905c48 transparent transparent transparent;
    border-radius: 50%/100px 10px 0 0;
    position: relative;
    bottom: 50px;
    left: -20px;
}
.left_foot{
    transform: scale(1, 1) rotate(-30deg);
}
.right_foot{
    transform: scale(-1, 1) rotate(-30deg);
}
.tailColor{
    background-color: rgb(240, 154, 26);
}
.tail {
    position: relative;
    translate: rotate(-10deg);
    bottom: 100px;
    left: 150px;
    z-index: 1;
  }
  
  /*Each span creates a circle that extends the tail and animates up and down individually, add more and style with left: +5px and a 0.2s additional delay from the previous to create a longer tail.*/
  
  span {
    z-index: 1;
    position: absolute;
    width: 150px;
    height: 30px;
    border-radius: 50px;
    animation: tailWave 3s infinite ease-in-out;
    
  }
  
  span:nth-child(2){
    left: 5px;
    animation-delay: 0.2s;
  }
  
  span:nth-child(3){
    left: 10px;
    animation-delay: 0.4s;
  }
  
  span:nth-child(4){
    left: 15px;
    animation-delay: 0.6s;
  }
  
  span:nth-child(5){
    left: 20px;
    animation-delay: 0.8s;
  }
  
  span:nth-child(6){
    left: 25px;
    animation-delay: 1s;
  }
  
  span:nth-child(7){
    left: 30px;
    animation-delay: 1.2s;
  }
  
  span:nth-child(8){
    left: 35px;
    animation-delay: 1.4s;
  }
  
  span:nth-child(9){
    left: 40px;
    animation-delay: 1.6s;
  }
  
  span:nth-child(10){
    left: 45px;
    animation-delay: 1.8s;
  }
  
  span:nth-child(11){
    left: 50px;
    animation-delay: 2s;
  }
  
  span:nth-child(12){
    left: 55px;
    animation-delay: 2.2s;
  }
  
  span:nth-child(13){
    left: 60px;
    animation-delay: 2.4s;
  }
  
  span:nth-child(14){
    left: 65px;
    animation-delay: 2.6s;
  }
  
  span:nth-child(15){
    left: 70px;
    animation-delay: 2.8s;
  }
  
  @keyframes tailWave {
      0% {transform:translateY(0px);}
      50% {transform: translateY(-6px);}
      100% {transform:translateY(0px);}
  }

Lane11 · September 11, 2021, 8:10pm

Here is my cat

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="tail"></div>
        <div id="body">
            
            <div class="hands">
                    <div class="hand_paw1L"></div>
                    <div class="hand_paw2L"></div>
                    <div class="hand_paw3L"></div>
                    
                <div class="hand left_hand"></div>
                <div class="hand_pawBigL"></div>
                    <div class="hand_paw1R"></div>
                    <div class="hand_paw2R"></div>
                    <div class="hand_paw3R"></div>
                    
                <div class="hand right_hand"></div>
                <div class="hand_pawBigR"></div>
            </div>

            <div class="legs">
                <div class="leg left_leg">
                    <div class="Paw1L"></div>
                    <div class="Paw2L"></div>
                    <div class="Paw3L"></div>
                    <div class="BigPaw"></div>
                </div>
                <div class="leg right_leg">
                    <div class="Paw1R"></div>
                    <div class="Paw2R"></div>
                    <div class="Paw3R"></div>
                    <div class="BigPawR"></div>
                </div>
            </div>
        </div>

        <div class="ears">
            <div class="ear left_ear">
                <div class="in_earL"></div>
             </div>
             <div class="ear right_ear">
                 <div class="in_earR"></div>
             </div>
        </div>
        
        <div id="face">

            <div class="mouth">

            </div>
                <div class="Right_1st_mustache"></div>
                <div class="Right_2st_mustache"></div>
                <div class="Right_3st_mustache"></div>
                <div class="Left_1st_mustache"></div>
                <div class="Left_2st_mustache"></div>
                <div class="Left_3st_mustache"></div>
        
            <div class="nose"></div>
                <div class="eyes">
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                    
                    <div class="eye">
                        <div class="pupils"></div>
                    </div>
                </div>
        </div>

    </body>
</html>

#face{
    width: 95px;
    height: 87px;
    background-color: rgb(146, 145, 139);    
    border-radius: 50%;
    position: absolute;
}

.eye{
    width: 27px;
    height: 15px;
    background-color: rgb(245, 3, 3); 
    border-radius: 56%;
    margin: 11px;
    position: relative;
    
}

.eyes{
    position: relative;
    top: 5px;
    display: flex;
}

.pupils{
    width: 7px;
    height: 15px;
    background-color: rgb(0, 0, 0); 
    border-radius: 60%;
    left: 10px;
    position: absolute;
}

.ears{
    position: absolute;
    
}

.ear{
    width: 34px;
    height: 40px;
    background-color: rgb(146, 145, 139);
    border-radius: 62% 10% 62% 10%;
    position: absolute;
    left: 35px;
}

.left_ear{
    transform: scale(1,-1);
    left: 3px;
    position: absolute;

}

.right_ear{
    left: 57px;
}

.in_earL{
    width: 19px;
    height: 17px;
    background-color: rgb(97, 68, 34);
    border-radius: 62% 10% 62% 10%;
    position: relative;
    top: 18px;
    left: 4px;
    
}

.in_earR{
    width: 19px;
    height: 17px;
    background-color: rgb(97, 68, 34);
    border-radius: 62% 10% 62% 10%;
    position: relative;
    transform: scale(1);
    left: 11px;
    top: 5px;
}


.nose{
    width: 10px;
    height: 10px;
    background-color: rgb(133, 102, 67); 
    border-radius: 50%;
    position: absolute;
    top: 47px;
    display: flex;
    left: 44px;
}

.Right_3st_mustache{
    width: 24px;
    height: 2px;
    background-color: rgb(14, 11, 11);
    left: 35px;
    position: relative;
    top: 55px;
    border-radius: 18% 18% 54% 42%;
    left: 54px;
    transform: rotateZ(22deg);      
}

.Right_2st_mustache{
    width: 24px;
    height: 2px;
    background-color: rgb(14, 11, 11);
    left: 35px;
    position: relative;
    top: 52px;
    border-radius: 18% 18% 54% 42%;
    left: 55px;
    transform: rotateZ(9deg);
}

.Right_1st_mustache{
    width: 24px;
    height: 2px;
    background-color: rgb(14, 11, 11);
    left: 35px;
    position: relative;
    top: 49px;
    border-radius: 18% 18% 54% 42%;
    left: 55px;
    transform: rotateZ(-3deg);
}

.Left_3st_mustache{
    width: 24px;
    height: 2px;
    background-color: rgb(14, 11, 11);
    left: 35px;
    position: relative;
    top: 49px;
    border-radius: 18% 18% 54% 42%;
    left: 20px;
    transform: rotateZ(-21deg);
}

.Left_2st_mustache{
    width: 24px;
    height: 2px;
    background-color: rgb(14, 11, 11);
    left: 35px;
    position: relative;
    top: 46px;
    border-radius: 18% 18% 54% 42%;
    left: 19px;
    transform: rotateZ(-9deg);
}

.Left_1st_mustache{
    width: 24px;
    height: 2px;
    background-color: rgb(14, 11, 11);
    left: 35px;
    position: relative;
    top: 43px;
    border-radius: 18% 18% 54% 42%;
    left: 19px;
    transform: rotateZ(3deg);
}

.mouth{
        height:7px;
        width: 20px;
        position: absolute;
        border-bottom: 2px solid black;
        border-left: 2px solid black;
        border-right: 2px solid black;
        top: 65px;
         left: 38px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
}

#body{
    width: 60px;
    height: 77px;
    background-color: rgb(146, 145, 139);
    top: 88px;
    left: 27px;
    position: absolute;
    border-radius: 31%;
}

.hands{
    position: relative;   
}

.hand{
    width: 29px;
    height: 22px;
    background-color: rgb(146, 145, 139);
    position: absolute;
    border-radius: 53%;
}

.left_hand{
    right: 50px;
    top: 11px;
    transform: scale(1,-1) rotate(-30deg);
}

.right_hand{
    left: 50px;
    top: 11px;
    transform: scale(1,-1) rotate(30deg);
}

.hand_paw1L{
    width: 5px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    transform: rotate( 
-19deg);
    top: 9px;
    left: -16px;
}

.hand_paw2L{
    width: 5px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    transform: rotate( 
126deg);
    top: 13px;
    left: -20px;
}

.hand_paw3L{
    width: 5px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    transform: rotate( 
78deg);
    top: 19px;
    left: -20px;
}

.hand_paw1R{
    width: 4px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    transform: scaleY(1.5) rotate( 
74deg);
    top: 9px;
    left: 72px;
}

.hand_paw2R{
    width: 4px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    transform: rotate( 
55deg);
    top: 13px;
    left: 76px;
}

.hand_paw3R{
    width: 4px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    transform: rotate( 
94deg);
    top: 19px;
    left: 76px;
}

.hand_pawBigL{
    width: 10px;
    height: 14px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 50%;
    transform: rotate( 
-54deg);
    top: 14px;
    left: -12px;
}

.hand_pawBigR{
    width: 10px;
    height: 14px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 50%;
    transform: scale(1,-1)rotate( 
-61deg);
    top: 14px;
    left: 62px;
}

.tail{
    width: 46px;
    height: 5px;
    background-color: rgb(97, 68, 34);
    position: relative;
    border-radius: 29%;
    left: 57px;
    top: 128px;
    transform: scale(1,-1) rotate(
24deg);

}

.legs{
    position: relative; 
}

.leg{
    width: 27px;
    height: 25px;
    background-color: rgb(146, 145, 139);
    position: absolute;
    border-radius: 41%;
}

.left_leg{
    left: -3px;
    top: 59px;
    transform: scale(1,-1) rotate(0deg);
}

.right_leg{
    right: -6px;
    top: 59px;
    transform: scale(1,-1) rotate(0deg);
}

.Paw1L{
    width: 4px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    top: 15px;
    left: 5px;
}

.Paw2L{
    width: 4px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    top: 15px;
    left: 11px;
}

.Paw3L{
    width: 4px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    top: 15px;
    left: 17px;
}

.BigPaw{
    width: 12px;
    height: 11px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 43%;
    top: 2px;
    left: 7px;
}

.Paw1R{
    width: 4px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    top: 15px;
    left: 6px;
}

.Paw2R{
    width: 4px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    top: 15px;
    left: 12px;
}

.Paw3R{
    width: 4px;
    height: 6px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 68%;
    top: 15px;
    left: 18px;
}

.BigPawR{
    width: 12px;
    height: 11px;
    background-color: rgb(116, 115, 109);
    position: absolute;
    border-radius: 43%;
    top: 2px;
    left: 8px;
}