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?
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:
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