cow css

.cow {
        width: 300px;
        height: 400px;
        position: relative;
        top: -300px;
        left: 40%;
        z-index: 10;
    }
    .head {
        width: 200px;
        height: 100px;
        position: relative;
        left: -100px;
        top: -40px;
    }
    .head-left {
        width: 70px;
        height: 90px;
        border-radius: 50%;
        background-color: rgb(20,20,20);
        position: relative;
        left: 140px;
        top: -75px;
        z-index: 11;
    }
    .head-right {
        width: 120px;
        height: 100px;
        border-radius: 50%;
        background-color: white;
        position: relative;
        left: 140px;
        top: -170px;
        z-index: 9;
    }
    .nose {
        width: 150px;
        height: 70px;
        background-color: rgb(254,203,233);
        position: relative;
        top: -170px;
        left: 25px;
        border-radius: 50px;
        z-index: 12;
    }
    .nose-left {
        width: 45px;
        height: 17px;
        background-color: black;
        position: relative;
        top: 25px;
        left: 10px;
        border-radius: 50%;
        transform: rotate(-70deg);
        z-index: 14;
    }
    .nose-right {
        width: 45px;
        height: 17px;
        background-color: black;
        position: relative;
        top: 10px;
        left: 90px;
        border-radius: 50%;
        transform: rotate(70deg);
        z-index: 14;
    }
    .ear-left {
        width: 55px;
        height: 27px;
        background-color: black;
        position: relative;
        top: -60px;
        left: 15px;
        border-radius: 50%;
        z-index: 10;
    }
    .ear-right {
        width: 55px;
        height: 27px;
        background-color: black;
        position: relative;
        top: -90px;
        left: 125px;
        border-radius: 50%;
        z-index: 8;
    }
    .eye-left {
        width: 10px;
        height: 20px;
        background-color: black;
        position: absolute;
        top: -40px;
        left: 65px;
        border-radius: 50%;
        z-index: 18;
    }
    .dot-eye {
        width: 5px;
        height: 5px;
        background-color: white;
        border-radius: 50%;
        position: relative;
        top: 5px;
        left: 2px;
    }
    .eye-right {
        width: 10px;
        height: 20px;
        background-color: black;
        position: absolute;
        top: -40px;
        left: 125px;
        border-radius: 50%;
        z-index: 18;
    }
    .health {
        width: 135px;
        height: 100px;
        background-color: white;
        position: relative;
        top: -200px;
        left: 30px;
        border-radius: 50%;
        overflow: hidden;
        z-index: 9;
    }
    .scarf {
        width: 85px;
        height: 50px;
        background-color: rgb(208,9,9);
        position: relative;
        left: 25px;
        top: -10px;
        border-radius: 50%;
        z-index: 10;
    }
    .h-1 {
        width: 85px;
        height: 50px;
        background-color: black;
        position: relative;
        left: -25px;
        top: -30px;
        border-radius: 50%;
        transform: rotate(-70deg);
        z-index: 9;
    }
    .h-2 {
        width: 85px;
        height: 50px;
        background-color: black;
        position: relative;
        left: 85px;
        top: -60px;
        border-radius: 50%;
        transform: rotate(-50deg);
        z-index: 9;
    }
    .bell {
        width: 100px;
        height: 100px;
        position: relative;
        top: -115px;
        left: 15px;
        z-index: 17;
    }
    .bell-1 {
        width: 6px;
        height: 6px;
        position: relative;
        border-radius: 50%;
        border: 4px solid rgb(203,182,29);
        left: 45px;
        top: -1px;
        z-index: 17;
    }

    .bell-2 {
        width: 40px;
        height: 35px;
        background-color: rgb(234,213,60);
        position: relative;
        border-radius: 50%;
        left: 32px;
        top: -7px;
        z-index: 9;
    }

    .bell-3 {
        width: 15px;
        height: 15px;
        background-color: rgb(213,192,39);
        position: relative;
        border-radius: 50%;
        left: 43px;
        top: -17px;
        z-index: 0;
    }
    .foot {
        width: 90px;
        height: 30px;
        position: absolute;
        /* background: red; */
        top: 110px;
        left: 50px;
        display: flex;
        justify-content: space-between;
    }
    .foot-left {
        width: 35px;
        height: 30px;
        background-color: white;
        border-bottom: 8px solid rgb(49,49,49);
    }
    .foot-right {
        width: 35px;
        height: 30px;
        background-color: white;
        border-bottom: 8px solid rgb(49,49,49);
    }

<div class="cow">
            <div class="ear-left"></div>
            <div class="ear-right"></div>
            <div class="eye-left"><div class="dot-eye"></div></div>
            <div class="eye-right"><div class="dot-eye"></div></div>
            <div class="head">
                <div class="head-left"></div>
                <div class="head-right"></div>
            </div>
            <div class="nose">
                <div class="nose-left"></div>
                <div class="nose-right"></div>
            </div>
            <div class="health">
                <div class="scarf"></div>
                <div class="h-1"></div>
                <div class="h-2"></div>
                <div class="bell">
                    <div class="bell-1"></div>
                    <div class="bell-2"></div>
                    <div class="bell-3"></div>
                </div>
            </div>
            <div class="foot">
                <div class="foot-left"></div>
                <div class="foot-right"></div>
            </div>
        </div>