Help needed- Making a person picture using HTML and CSS

HTML-CSS
1

Hello everyone,
I am making a person using HTML and CSS inspired by “Penguin” in the curriculum. Now I am stuck in the right hand of a person. Please review my code and help me why the right arm is not displaying in the output.

Codepen link. https://codepen.io/mustajab/pen/OwWZVp

Code

CSS code

      .man {
        --man-skin: gray;
        --man-belly: orange;
        --man-eye: black;

        position: relative;
        margin:auto;
        margin-top: 5%;
        display: block;
        width: 200px;
        height:500px;

    }

    .man-top {


        top: 10%;
        left: 25%;
        background: var(--man-skin, black);
        width: 50%;
        height:30%;
        border-radius: 60% 60% 70% 70%;

    }

    .man-bottom {
        top: 40%;
        left: 23.5%;
        background: var(--man-skin,black);
        width: 70%;
        height: 40%;
        border-radius: 20% 20% 20% 20%;
    }

    .right-hand {
        top: 0%;
        left: -5%;
        background: var(--penguin-skin);
        width:30%;
        height: 60%;
        border-radius: 10% 10% 10% 10%;
        transform: rotate(45deg);
        z-index: -1;
    }

    .man * {
        position: absolute;
    }

HTML Code

 <div class="man">
    <div class="man-top">
        <div class="cheek"></div>
        <div class="belly"></div>
        <div class="right-eye"></div>
        <div class="left-eye"></div>
    </div>
    <div class="man-bottom">
        <div class="right-hand"></div>
        <div class="left-hand"></div>
        <div class="right-feet"></div>
        <div class="left-feet"></div>
    </div>

</div>

Thanks in advance

2

Please paste your code

3

Ok @shimphillip I am editing the post

4

I didn’t review your code but I just added these two lines to your right-hand css

      border: 1px red solid;
      background-color: black;

and that made it show up.

I think I saw you use black a few times but without success so if it was me I would go back and review that
1- i am declaring the variables correctly
2- I know how to use them (eg. I used them successfully in a background-color for eg)

These are all the ideas I have for now.

1 Like
5

Thanks @hbar1st. I have marked it as answer.