Assignment - Create your own cat

Following assignment instructions in the video create a cat with custom features and share your cats and code below.

#Not a CSS expert but a makeshift cat```

        <div id="body">
            <div class="face">
                <div class="ears">
                    <div class="ear left_ear"></div>
                    <div class=" ear right_ear"></div>
                </div>
                <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="mustaches">
                    <div class="mustache mustache_left"></div>
                    <div class="mustache mustache_right"></div>
                </div>
                <div class="mouth"></div>
            </div>

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

#body{
    background-color: rgb(250, 160, 125);
    width: 400px;
    height: 400px;
}

.face{
    background-color: rgba(250, 246, 125);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: absolute;
        left: 100px;
}

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

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

.pupil{
    background-color: black;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin: 12px;
    position: absolute;
        left: 0px;
        top:0px;
}

.nose{
    background-color: black;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    position: relative;
    left: 90px;
}

.mustaches{
    position: relative;
}

.mustache{
    height: 20px;
    width: 25;
    border: solid;
    border-radius: 0% 0% 100% 100%;
    border-top: none;
    border-left: none;
    position: absolute;
}

.mustache_left{
    left: 76px;
}
.mustache_right{
    transform: scale(-1,1);
    left: 102px;
}

.mouth{
    height: 20px;
    width: 30px;
    border: solid;
    border-radius: 100% 100% 100% 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    position: relative;
    left: 87px;
    top: 10px;
}


.curved{
    width: 50px;
    height: 40px;
    border: solid;
    border-radius: 100% 100% 90% 90%;
    position: absolute;
        left: 75px;
        top: 70px;
    border-bottom: none;
}


.ears{
    position: relative;
}

.ear{
    background-color: rgba(250, 246, 125);
    border-radius: 90% 0% 90% 0%;
    width: 100px;
    height: 100px;
    position: absolute;
}

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

.right_ear{
    left: 100px;
}


.chest{
    background-color: rgba(250, 246, 125);
    width: 200;
    height: 200px;
    position: absolute;
    left: 100px;
    top: 195px;
    border-radius: 90% 90% 10% 10%
}

.tail{
    background-color: rgba(250, 246, 125);
    width: 200;
    height: 20px;
    position: absolute;
    left: 173px;
    top: 365px;
}

Finally done ooof, that was much more work than i thought, i was superbored at first but at the end i got the hang of it and i would not say that i was enjoying it xD, but at least i was more focused on the project and not in how boring it was xp .

Cat html
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="Cat">
            <div class="tail"></div>
            <div class="legs">
                <div class="leg left_leg"></div>
                <div class="leg right_leg" style="
                    left: 130px;
                "></div>
            </div>
            <div class="catsbody">
                <div class="tummy"></div>
                <div class="arms">
                    <div class="arm right_arm">
                        <div class="paw right_paw"></div>
                            <div class="fingers right_fingers"></div>
                    </div>
                    <div class="arm left_arm" style="
                     right: 95px;
                    ">
                        <div class="paw left_paw" style="
                        right: 7px;
                        ">
                            <div class="fingers left_fingers" style="
                                top: 3px;
                                left: 10px;
                            "></div>
                    </div>
                        
                    </div>
                </div>
            </div>
        </div>
            <div class="head"> 
                <div class="ear left_ear" style="
                    left: 110px;
                ">
                    <div class="insides left_inside"></div>
                </div>
                <div class="ear right_ear" style="
                    transform: scale(-1,1);
                    ">
                    <div class="insides right_inside"></div>
                </div>
            
            <div class="catsFace"> 
                <div class="foreHead">
                    <div class="lines line1" style="
    left: 110px;
    transform: rotate(10deg);
    top: 2px;
"></div>
                    <div class="lines line2" style="
    left: 81px;
    transform: rotate(-10deg);
    top: 2px;
"></div>
                    <div class="lines line3"></div>
                </div>
                <div class="patch left_patch" style="
                    left: 119px;
                    transform: scale(-1,1);"> 
                </div>
                <div class="patch right_patch"></div>

                <div class="eyes">
                    <div class="eye left_eye" style="
                        left: 120px;
                    ">
                        <div class="pupils left_pupil" style="
                        left: 5px;
                        ">
                            <div class="iris left_iris">
                                <div class="shine left_shine"></div>
                                <div class="shine2 left_shine2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="eye right_eye" style="
                        left: 30px;
                    ">
                        <div class="pupils right_pupil" style="
                        left: 10px;
                        ">
                            <div class="iris right_iris">
                                <div class="shine right_shine"></div>
                                <div class="shine2 right_shine2"></div>
                            </div>
                        </div>
                    </div> 

                </div>
                <div class="leftwhiskers">
                    <div class="whiskyL left_whisk1" style="
                        top: 122px;
                        transform: rotate(-5deg);
                   "></div>
                    <div class="whiskyL left_whisk2"></div>
                    <div class="whiskyL left_whisk3" style="
                       top: 138px;
                       transform: rotate(5deg);
                    "></div>
                </div>
                <div class="rightwhiskers">
                   <div class="whiskyR right_whisk1" style="
                       top: 122;
                       transform: rotate(5deg);
                    "></div>
                    <div class="whiskyR right_whisk2"></div>
                    <div class="whiskyR rigth_whisk3" style="
                       top: 138;
                       transform: rotate(-5deg);
                    "></div>
                </div>

                <div class="barba">

                    <div class="mouth">
                        <div class="lips right_lip" style="
                            transform: scale(-1,1);
                        "></div>
                        <div class="lips leftt_lip" style="
                            left: 39px;
                            top: -20px;
                        "></div>
                        <div class="nose"></div>

                    </div>

                </div> 
                    

            </div>

        </div>

        </div>
         
    </body>
</html>

Cat css
.head{
    width: 250px;
    height: 250px;
    position:relative;
    top:-130
}
.ear{
    border-radius: 70% 10% 50% 30%;
    background-color: rgb(20 20 20 / 1);
    height: 100px;
    width: 100px;
    position:absolute;
    left:5;
}
.insides{
    border-radius: 70% 10% 50% 30%;
    background-color: rgb(254 255 248 / 40%);
    height: 40px;
    width: 40px;
    position:absolute;
    left:53;
    top:6;
}
 .catsFace{
    background-color: rgb(20 20 20 / 1);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position:absolute;
    left:10;
    top:10;
}
.patch{
    position:absolute;
    background-color: rgb(150 0 0/80%);
    border-radius: 15% 45% 45% 55%;
    width: 60px;
    height: 50px;
    top:61;
    left:25;
}
.lines {
    position:absolute;
    background-color: rgb(20 20 20);
    border-radius: 25% 25% 65% 65%;
    width: 10px;
    height: 40px;
    left:96;
}
.eyes{
    position:relative;
    top: 55; 
    display:flex;

}
.eye{
    border: solid 2px;
    border-color: rgb(20 20 20 / 1);
    position: absolute;
    background-color: rgb(245 222 222);
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.pupils{
    position: absolute;
    background-color: rgb(27, 9, 9);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    top: 10;
}
.iris {
    border: solid 1px;
    border-color: rgb(20 20 20 / 35%);
    position: absolute;
    background-color:rgb(150 0 0 );
    border-radius: 50%;
    width: 13px;
    height: 25px;
    left:10;
    top:6;
  }
  .shine {
    position: absolute;
    background-color:rgb(255 255 255 / 77%);
    border-radius: 50%;
    width: 4px;
    height: 7px;
    left:11;
    top:8;
  }
  .shine2 {
    position: absolute;
    background-color:rgb(255 255 255 / 85%);
    border-radius: 50%;
    width: 3px;
    height: 4px;
    left:8;
    top:15;
  }
.barba {
    position: relative;
    background-color:rgb(240 220 220 / 0%);
    border-radius: 40% 40% 50% 50%;
    width: 150px;
    height: 85px;
    left:26;
    top:110;
  }
.nose{
    border:solid 2px;
    border-color: rgb(197 2 2 / 39%);
    background-color:rgb(255 120 120 );
    height:13px;
    width: 20px;
    position:relative;
    border-radius:30% 30% 79% 79%; 
    top:-50; 
    left:64;
}
.lips {
    width: 28px;
    height: 20px;
    border: solid 4px rgb(255, 255, 255);
    border-color: #fbfbfb00 rgb(150 0 0) rgb(150 0 0);
    border-radius:  50% 50% 60% 60%;
    position:relative;
    top:8;
    left:75;
  }
  .whiskyL {
    position:absolute;
    flex: 1 1;
    border-bottom: 5px solid rgb(110 0 0);
    width:75px;
    margin: auto;
    top:130;
    left:133  
}
.whiskyR {
    position:absolute;
    flex: 1 1;
    border-bottom: 5px solid rgb(110 0 0);
    width:75px;
    margin: auto;
    top:130;
    right:132; 
}
  .catsbody {
    background-color: rgb(20 20 20 / 1);
    width: 150px;
    height: 150px;
    border-radius: 30% 30% 40% 40%;
    position:relative;
    left:31;
    top:195;  
  }
  .tummy{
    width:80px;
    height: 100px;
    border-radius: 70% 70% 70% 70%;
    background-color:rgb(90 0 0);
    position:absolute;
    top:40;
    left:37; 
  }
  .arms{
    position:absolute;
    display:flex;
  }
  .arm {
    position: relative;
    background-color: rgb(20 20 20);
    border: solid 3px;
    border-color:rgb(35 15 15 / 0%) rgb(202 0 0 / 30%);
    width: 33px;
    height: 95px;
    border-radius: 15% 15% 40% 40%;
    margin:53;
    right:44;
  }
  .paw {
    position:relative;
    background-color: rgb(150 0 0);
    border: solid 2px;
    border-color: rgb(20 20 20/ 50%);
    width: 43px;
    height: 30px;
    border-radius: 60% 60% 40% 40%;
    top:80;
    right:7;
  }
  .fingers {
    width: 15px;
    height: 22px;
    border: solid 4px rgb(255 255 255);
    border-color: rgb(20 20 20 / 0%) rgb(20 20 20 / 35%) rgb(80 70 40 / 0%);
    border-radius:  60px 60px 30px 30px;
    position:relative;
    top:51;
    left:5;
  }
  .legs{
    position:relative;
  }
  .leg {
    width:50px;
    height:30px;
    border: solid 2px;
    border-color: rgb(20 20 20);
    background-color:rgb(150 0 0);
    border-radius: 50% 50% 30% 30%;
    position: absolute;
    top: 320;
    left: 29; 
  }
  .tail {
    width:28px;
    height: 70px;
    border-radius: 70% 70% 70% 70%;
    background-color:rgb(20 20 20);
    position:absolute;
    top:260;
    left:180;
    transform:rotate(45deg);
  }

btw the cats name is Rossonero B)

Here comes my cat, but I think in the end this project gonna be named CryptoBears, as it more looks like a bear to me. What do you all think?
cryptoBear

Here’s the code to the CryptoBear:

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="zeichnung links"></div></div>
            <div class="ear right_ear" style="left: 100px; transform: scale(1,-1);"><div class="zeichnung rechts"></div></div>
        </div>
        <div id="catHead">
            <div class="catEyes">
                <div class="eye"><div class="pupils"></div></div>  
                        
                <div class="eye"><div class="pupils"></div></div>
                <div class="nose"></div>
                <div class="mouth"></div>
                <div class="lip"></div>
            </div>
        </div>
        <div class="catBody"></div>
        <div class="catArms left up">
            <div class="catFingers"></div>
            <div class="catFingers" style="left: 17px;"></div>
            <div class="catFingers" style="left: 34px;"></div>
            <div class="pawCenter"></div>

           
            
        </div>
        <div class="catArms right up" style="left: 165px" >
            <div class="catFingers"></div>
            <div class="catFingers" style="left: 17px;"></div>
            <div class="catFingers" style="left: 34px;"></div>
            <div class="pawCenter" ></div>
        </div>
       
        <div class="catArms left down" style="top: 300px">
            <div class="catFingers"></div>
            <div class="catFingers" style="left: 17px;"></div>
            <div class="catFingers" style="left: 34px;"></div>
            <div class="pawCenter" ></div>
        </div>
        <div class="catArms right down" style="left: 165px; top: 300px" >
            <div class="catFingers leftUpOne"></div>
            <div class="catFingers leftUpTwo" style="left: 17px;"></div>
            <div class="catFingers leftUpThree" style="left: 34px;"></div>
            <div class="pawCenter rightDown" ></div>
        </div>
        <div class="belly"></div>
        <div class="tail"></div>

            
        </div>
          </div>

    </div>
    

</body>
</html>
style.css
#catHead {
    background-color: #c18900;
    width: 200px;
    height: 200px;
    border-radius: 59% 55% 66% 66%;
}

.ear{
    border-radius: 21px 70px 12px 70px;
    background-color: #c18900;
    height: 100px;
    width: 100px;
    position: absolute;
}


.catEyes {
    position: relative;
    top: 30px;
    display: flex;
}
.eye{
    background-color: rgb(219 231 255); 
    border-radius: 50%;
    width: 66px;
    height: 44px;
    margin: 25px;
    position: relative;
    
}
.pupils{
    background-color: black;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    position: absolute;
    top: 7px;
    left: 8px;
}

.nose{
    background-color: black;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    position: absolute;
    top: 96px;
    left: 84px;
    z-index: 1;
}
.mouth{
    background-color: #000000;
    position: absolute;
    left: 46px;
    top: 132px;
    height: 30px;
    width: 108px;
    border-radius: 50%
}
.lip{
    background-color: #c18900;
    position: absolute;
    left: 51px;
    top: 124px;
    height: 30px;
    width: 96px;
    border-radius: 50%;
}

.tail {
    background-color: #c18900;
    width: 38px;
    height: 37px;
    border-radius: 50%;
    position: absolute;
    top: 389px;
    left: 92px;
    z-index: -2;
  }
  


.ears{
    position: relative;
}

.zeichnung{
    border-radius: 90% 0 84% 0;
    background-color: #caa036;
    height: 100px;
    width: 100px;
    position: absolute;
}
.catBody{
    background-color: #caa036;
    border-radius: 75px 75px 70px 70px;
    width: 170px;
    height: 255px;
    position: absolute;
    top: 150;
    left: 25px;
    z-index: -1;
}
.catArms{
    background-color: #c18900;
    width: 50px;
    height: 54px;
    border-radius: 15px 15px 25px 25px;
    position: absolute;
    z-index: 1;
}
.catFingers{
    background-color: #956b00;
    width: 16px;
    height: 20px;
    border-radius: 126px;
    position: absolute;
    z-index: 1;
}

.pawCenter{
    background-color: #956b00;
    width: 31px;
    height: 27px;
    border-radius: 126px;
    position: absolute;
    top: 22px;
    left: 9px;
    z-index: 1;
}
.belly{
    background-color: #f5c13d;
    width: 94px;
    height: 167px;
    border-radius: 51px;
    position: absolute;
    left: 65px;
    top: 217px;
}

So here is what I whipped up, not a CSS expert and also just wanted to get some experience without going into all the details. The whiskers are inspired by some code I found online.

<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 class="cat_tail"></div>
            <div class="cat_body"></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="whiskers"></div>
                <div class="paws">
                    <div class="left_back_paw"></div>
                    <div class="right_back_paw"></div>
                    <div class="left_front_paw"></div>
                    <div class="right_front_paw"></div>
                </div>
            </div>
        </div>   
    </body>
</html>

and the css:

.cat{
    position: absolute;
    left: 50px;
    width: 250px;
}

.cat_tail{
    position: absolute;
    top: 300;
    background-color: rgb(169, 135, 26);
    border-radius: 50%;
    left: 160;
    width: 80px;
    height: 200px;
    transform-origin: right center;
    transform: rotate(59deg);
}

.cat_body{
    position: absolute;
    top: 159;
    background-color: rgb(206, 167, 41);
    border-radius: 50%;
    left: -25;
    width: 250px;
    height: 300px;
}

#face{
    position: absolute;
    background-color: rgb(223, 181, 46);
    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;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 10px;
    left: 10px;

}

.ears{
    position: relative;
}

.ear{
    position: absolute;
    border-radius: 90% 0 90% 0;
    background-color: rgb(223, 181, 46);
    height: 100px;
    width: 100px;
}

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

.right_ear{
    left: 105px;
}

.inner_ear{
    position: relative;
    background-color: rgb(139, 108, 5);
    border-radius: 90% 0 90% 0;
    height: 80px;
    width: 80px;

}

.left_inner_ear{
    top: 15;
    left: 5px;
}

.right_inner_ear{
    left: 15px;
    top: 5;
}

.nose{
    background-color: rgb(139, 108, 5);
    border-radius: 10% 10% 80% 80%;
    width: 30px;
    height: 30px;
    left: 60;
    top: -20px;
    margin: 25px;
    position: relative;
}

.mouth{
    background-color: white;
    border-radius: 80% 80% 90% 90%;
    width: 60px;
    height: 20;
    left: 45;
    top: -30px;
    margin: 25px;
    position: relative;
}

.whiskers {
    content: '';
    width: 50%;
    height: 8px;
    position: absolute;
    bottom: 25%;
    left: 25%;
    transform-style: preserve-3d;
    perspective: 60px;
    }
.whiskers::before {
    content: '';
    position: absolute;
    top: -10;
    height: 100%;
    width: 35%;
    border: 2px solid black;
    border-left: none;
    border-right: none;
    right: 100%;
    transform-origin: right center;
    transform: rotateY(70deg) rotateZ(-10deg);
    }
.whiskers::after {
    content: '';
    position: absolute;
    top: -10;
    height: 100%;
    width: 35%;
    border: 2px solid black;
    border-left: none;
    border-right: none;
    left: 100%;
    transform-origin: left center;
    transform: rotateY(-70deg) rotateZ(10deg);
    }


  .left_front_paw{
    position: absolute;
    border-radius: 50%;
    background-color: rgb(223, 181, 46);
    height: 250px;
    width: 50px;
    left: 150px;
  }

  .right_front_paw{
    position: absolute;
    border-radius: 50%;
    background-color: rgb(223, 181, 46);
    height: 250px;
    width: 50px;
  }

  .right_back_paw{
    position: absolute;
    border-radius: 50%;
    background-color: rgb(169, 135, 26);
    height: 50px;
    width: 70px;
    top: 420px;
    left: 20px;
  }

  .left_back_paw{
    position: absolute;
    border-radius: 50%;
    background-color: rgb(169, 135, 26);
    height: 50px;
    width: 70px;
    top: 420px;
    left: 100px;
  }
  

My cat:

Screenshot 2021-04-13 at 12.10.21
html:

<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <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">
            <div class = "inner-tail"></div>
        </div>

        <div id = "body">

            <div class = "cat">

                <div class= "head-pattern">
                    <div class = "pattern"></div>
                    <div class = "pattern2"></div>

                </div>
                <div class = "eyes">
                    <div class = "eye">
                        <div class = "pupils">
                            <div class = "inner-eyes-big"></div>
                            <div class = "inner-eyes-small"></div>
                        </div>
                    </div>
                    <div class = "eye">
                        <div class = "pupils">
                            <div class = "inner-eyes-big"></div>
                            <div class = "inner-eyes-small"></div>
                        </div>
                    </div>
                </div>
                <div class = "belly"></div>
                <div class = "mouth"></div>
                <div class = "whiskers">
                    <div class = "whisker1"></div>
                    <div class = "whisker2"></div>
                    <div class = "whisker3"></div>
                    <div class = "whisker4"></div>
                    <div class = "whisker5"></div>
                    <div class = "whisker6"></div>
                </div>
                <div class = "feet">
                    <div class = "foot-left">
                        <div class = "toe"></div>
                        <div class = "toe"></div>
                        <div class = "toe"></div>
                    </div>
                    <div class = "foot-right">
                        <div class = "toe"></div>
                        <div class = "toe"></div>
                        <div class = "toe"></div>
                    </div>
                </div>

                
                <div class = "mouth-left"></div>
                <div class = "mouth-right"></div>
                <div class = "nose"></div>
                <div class = "chin"></div>
            </div>

        </div>
            
    </body>
</html>

css:

#body{
    background-color: rgb(145, 76, 76);
    width: 200px;
    height: 300px;
    border-radius: 52% 52% 17% 20%;
    position: relative;
    
    
}

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

.eye{
    background-color: rgb(196, 196, 84);
    width: 53px;
    height: 32px;
    border-radius: 141%;
    margin: 30px;
    position: relative;
    
}

.pupils{
    background-color: rgb(0, 0, 0);
    width: 30;
    height: 30;
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    top: 1px;
    left: 5px;
}

.inner-eyes-big{
    background-color: blanchedalmond;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 7px;
}

.inner-eyes-small{
    background-color: blanchedalmond;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    top: 13px;
    left: 5px;
}


.ears{
    position: absolute;
}

.ear{
    
    border-radius: 90% 0% 90% 0%;
    background-color: rgb(145, 78, 40);
    width: 100px;
    height: 100px;
    position: absolute;
    
}

.left-ear{
    transform: scale(1, -1);
    left: 0px;
    
}

.right-ear{
    left: 100px;
    
}

.left-inner-ear{
    border-radius: 100% 0% 100% 0%;
    background-color: rgb(68, 66, 64);
    width: 90px;
    height: 90px;
    position: relative;
    top: -4.5px;
    left: 14px;
    
    
}
.right-inner-ear{
    border-radius: 100% 0% 100% 0%;
    background-color: rgb(68, 66, 64);
    width: 90px;
    height: 90px;
    position: relative;
    top: 15px;
    left: -5px;
}

.whiskers{
    position: relative;
    
}
.whisker1{
    position: relative;
    width: 63px;
    height: 59px;
    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: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -17px;
    left: 27px;
    transform: rotate(-159deg);
}
.whisker2{
    position: relative;
    width: 63px;
    height: 59px;
    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: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -88px;
    left: 23px;
    transform: rotate( -171deg);
}
.whisker3{
    position: relative;
    width: 63px;
    height: 59px;
    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: 100px;
    box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);
    top: -147px;
    left: 26px;
    transform: rotate( -167deg);
}
.whisker4{
    position: relative;
    width: 63px;
    height: 59px;
    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: -213px;
    left: -88px;
    transform: rotate(-460deg);
}
.whisker5{
    position: relative;
    width: 63px;
    height: 59px;
    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: -263px;
    left: -93px;
    transform: rotate(-113deg);
}
.whisker6{
    position: relative;
    width: 63px;
    height: 59px;
    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: -327px;
    left: -91px;
    transform: rotate(-106deg);
}


.tail {
    background-color: coral;
    position: absolute;
    width: 75px;
    height: 149px;
    border-radius: 85% 4% 60% 12%;
    margin: 0px;
    transform: rotate(45deg);
    top: 177px;
    left: 200px;
}

.inner-tail{
    background-color: rgb(51 32 25);
    position: absolute;
    width: 29px;
    height: 103px;
    border-radius: 48% 55% 50%;
    margin: 0px;
    transform: rotate(9deg);
    top: 44px;
    left: 31px;
}

.mouth-right{
    width: 47px;
    height: 14px;
    border: solid 2.5px #000;
    border-color: #000 transparent transparent transparent;
    border-radius: 220%/81px 72px 0 0;
    transform: rotate(-126deg);
    position: absolute;
    top: 110px;
    left: 86px;
}
.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(-233deg);
    position: absolute;
    top: 109px;
    left: 59px;
}
.nose{
    background-color: black;
    position: absolute;
    width: 15px;
    height: 15px;
    border-top-right-radius: 10px;
    transform: rotate(135deg);
    left: 90px;
}

.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(180deg);
    position: absolute;
    top: 136px;
    left: 82px;
}

.feet{
    position: relative;
}

.foot-left{
    background-color: rgb(145, 76, 76);
    width: 50px;
    height: 100px;
    border-radius: 28px 28px 25px 25px;
    position: absolute;
    top: 139px;
    left: 25px;
    transform: rotate(170deg);
}

.foot-right{
    background-color: rgb(145, 76, 76);
    width: 50px;
    height: 100px;
    border-radius: 28px 28px 25px 25px;
    position: absolute;
    top: 137px;
    left: 126px;
    transform: rotate(190deg);
}

.belly{
    background-color: rgb(219, 190, 168);
    width: 120;
    height: 150px;
    border-radius: 52% 52% 17% 20%;
    position: absolute;
    top: 150px;
    left: 38px;
}

.mouth{
    background-color: rgb(219, 190, 168);
    width: 74px;
    height: 78px;
    border-radius: 52% 52% 52% 52%;
    position: absolute;
    top: 87px;
    left: 61px;
}

.head-pattern{
    position: absolute;
    display: block;
    width: 51px;
    height: 57px;
    background-color: rgb(99, 30, 30);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    top: 0px;
    left: 74px;
}
/* .pattern{
    position: absolute;
    display: block;
    width: 31px;
    height: 57px;
    background-color: rgb(165, 74, 74);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    top: 0px;
    left: 10px;
    transform: rotate(180deg);
} */

1 Like

Pretty cat! Like it.

1 Like