How To Make Penguin Using Html and Css : 


<!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>How To Make Penguin Using Html and Css </title>
    <style>
      .penguin {
        width: 40vmin;
        height: 50vmin;
        background: #f003;
        border-radius: 100% 100% 100% 100% / 150% 150% 40% 40%;
        border: 0.5vmin solid;
        background:
          radial-gradient(farthest-side at 50% 100%, #0000 99.99%, #000 0) 0 10% / 50.1% 15% no-repeat,
          radial-gradient(farthest-side at 50% 100%, #0000 99.99%, #000 0) 100% 10% / 50.1% 15% no-repeat,
          white;
        box-shadow: inset 0 4vmin 0 1vmin;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .penguin * {
        position: absolute;
        box-sizing: border-box;
      }

      .eye {
        width: 12%;
        aspect-ratio: 1;
        border-radius: 50%;
        left: 35%;
        top: 40%;
        transform: translate(-50%, -50%);
        background:
          radial-gradient(circle at 30% 35%, #fff 15%, #fff0 0),
          radial-gradient(circle at 50% 20%, #fff 8%, #fff0 0),
          black;
      }

      .eye+.eye {
        left: 65%;
      }

      .beak {
        width: 16%;
        height: 6%;
        border: 0.5vmin solid;
        background: orange;
        top: 46%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100% 100% 60% 60% / 100%;
      }

      .cheek {
        width: 14%;
        height: 7%;
        background: red;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        top: 47%;
        left: 30%;
        background:
          repeating-linear-gradient(-60deg, #0000 0 10%, #c008 0 15%),
          #fdd;
        box-shadow: inset 0 0 0.25vmin 0.75vmin #fdd;
      }

      .cheek+.cheek {
        left: 70%;
      }

      .foot {
        width: 25%;
        height: 10%;
        background: black;
        border-radius: 50%;
        bottom: 0;
        left: 25%;
        transform: translate(-50%, 20%) rotate(10deg);
      }

      .foot+.foot {
        left: 75%;
        transform: translate(-50%, 20%) rotate(-10deg);
      }

      .arm {
        width: 15%;
        height: 25%;
        background: black;
        border-radius: 100% / 0 0 200% 200%;
        transform: rotate(50deg);
        clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%);
        top: 40%;
        left: -10%;
      }

      .arm+.arm {
        left: auto;
        right: -10%;
        transform: scaleX(-1) rotate(50deg);
      }
    </style>
  </head>
  <body>
    <div class="penguin">
      <div class="cheek"></div>
      <div class="cheek"></div>
      <div class="eye"></div>
      <div class="eye"></div>
      <div class="beak"></div>
      <div class="foot"></div>
      <div class="foot"></div>
      <div class="arm"></div>
      <div class="arm"></div>
    </div>
  </body>
</html>