Basic cat. Ugly one but took me a while

Ethereum Dapp Programming
#1

this is my own cat
HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width>, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style2.css">
</head>
<body>
    <div class="face">
        <div class="ears">
            <div class="ear-r">
                <div class="inner-r"></div>
            </div>
            <div class="ear-l">
                <div class="inner-l"></div>
            </div>
        </div>
        <div class="eyes">
            <div class="eye">
                <div class="pupil"></div>
            </div>
            <div class="eye">
                <div class="pupil"></div>
            </div>
        </div>
        <div class="mouth">
            <div class="mline1"></div>
            <div class="mline2"></div>
        </div>
        <div class="nose"></div>
        <div class="whiskers">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
            <div class="line4"></div>
        </div>
        <div class="mark1"></div>
        <div class="mark2"></div>
        <div class="mark3"></div>
        
    </div>
    <div class="torso">
        <div class="tail"></div>
        <div class="paw1">
            <div class="pline1"></div>
            <div class="pline2"></div>
        </div>
        <div class="paw2">
            <div class="pline3"></div>
            <div class="pline4"></div>
        </div>

    </div>   
</body>
</html>type or paste code here

CSS


body {
    height: auto;
    width: auto;
    background-color: beige;
}

.face {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: burlywood;
    position: absolute; 
}
.mark1,.mark2,.mark3 {
    background-color: black;
    width: 10px;
    left: 50%;
    top: 0;
    position: absolute;
    border-radius: 40%;
}
.mark1 { 
    height: 20px;
    left: 50%;   
}
.mark2 { 
    height: 15px;
    left: 47%;   
}
.mark3{ 
    height: 15px;
    left: 53%;   
}


.eyes {
    position: relative;
    top: 53px;
    display: flex;
    justify-content: space-around;    
}

.eye {
    top: 10px;
    position: relative;
    border-style: solid black;
    border-radius: 50%;
    background-color: white;
    width: 38px;
    height: 38px;
}

.pupil {
    border-radius: 50%;
    background-color: black;
    width: 20px;
    height: 20px;
    top: 8px;
    right: 8px;
    position: absolute;
}

.ears {
    position:relative;
    
}

.ear-l, .ear-r {
    border-radius:90% 0 90% 0;
    background-color: burlywood;
    height: 100px;
    width: 100px;
    position: absolute;
    

}

.ear-l {
    transform: scale(1,-1);
}

.ear-r {
    left: 100px;
}
.inner-r {
    width: 25px;
    height: 30px;
    position: absolute;
    background-color: pink;
    left: 65px;
    top: 7px;
    border-radius: 0% 92% 31% 60% / 0% 60% 31% 92%   ;
    transform: rotate(86deg);
      
}
.inner-l {
    width: 25px;
    height: 30px;
    position: absolute;
    background-color: pink;
    right: 65px;
    top: 60px;
    border-radius: 0% 92% 31% 60% / 0% 60% 31% 92%    ;
    transform: rotate(262deg);
    
}


.nose {
    background-color: black;
    position: absolute;
    border: solid 1px rgb(59, 30, 30);
    border-radius: 40%;
    height: 16px;
    width: 35px;
    box-shadow: 5px 3px 15px black;
    top: 112px;
    left: 82px;
}

.mouth {
    position: absolute;
    top: 120px;
    left: 72px;
    width: 55px;
    height: 40px;
}
.mline1, .mline2 {
    width: 25px;
    height: 25px;
    position: absolute;
    border-bottom: 3px solid black ;
}
.mline1 {
    border-left:3px solid black;
    border-bottom-left-radius: 50%;
    right: 0;
}
.mline2 {
    border-right:3px solid black;
    border-bottom-right-radius: 50%;
    left: 0;
}
.line1,.line2,.line3,.line4 {
    width: 38px;
    height: 2px;
    background-color: black;
    position: absolute;
}
.line1{
    top: 120px;
    right: 22px;
    transform:rotate(-5deg);
}
.line2{
    top: 130px;
    left: 22px;
    transform:rotate(-5deg);
}
.line3{
    top: 130px;
    right: 22px;
    transform:rotate(5deg); 
}
.line4{
    top: 120px;
    left: 22px;
    transform:rotate(5deg);
}
.torso {
    background-color: burlywood;
    width: 210px;
    height: 250px;
    top: 180px;
    left:60px;
    position: absolute;
    border-radius: 10% 50% 10% 0% / 10% 50% 10% 0% ;
}
.paw1, .paw2 {
    background-color: burlywood;
    height: 20px;
    width: 20px;
    position: absolute;
    border-radius: 0 0 10px 10px;
    bottom: -15px;
}
.paw2 {
    left: 40%;
}
.tail {
    background-color: burlywood;
    height: 15px;
    width: 100px;
    left: 90%;
    bottom: 0px;
    position: absolute;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    
}
.pline1,.pline2,.pline3,.pline4 {
    width: 1px;
    height: 10px;
    background-color: black;
    position: absolute;
    bottom: 1px;
}
.pline1 {
    left: 30%;
}
.pline2 {
    left: 60%;
}
.pline3 {
    left: 30%;
}
.pline4 {
    left: 60%;
}
type or paste code here
1 Like