Basic CSS with FreeCodeCamp
<style>
:root {
--penguin-size: 300px;
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
}
@media (max-width: 350px) { :root { --penguin-size:200px; --penguin-skin:black; / Only change code below this line /
/ Only change code above this line / } }
.penguin { position: relative; margin: auto; display: block; margin-top: 5%; width: var(--penguin-size, 300px); height: var(--penguin-size, 300px); }
.right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; }
.left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; }
.belly { top: 60%; left: 2.5%; background: var(--penguin-belly, white); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; }
.penguin-top { top: 10%; left: 25%; background: var(--penguin-skin, gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; }
.penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; }
.right-hand { top: 5%; left: 25%; background: var(--penguin-skin, black); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(130deg); z-index: -1; animation-duration: 3s; animation-name: wave; animation-iteration-count: infinite; transform-origin:0% 0%; animation-timing-function: linear; }
@keyframes wave { 10% { transform: rotate(110deg); } 20% { transform: rotate(130deg); } 30% { transform: rotate(110deg); } 40% { transform: rotate(130deg); } }
.left-hand { top: 0%; left: 75%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; }
.right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; }
.left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; }
.right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; }
.left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; }
.sparkle { top: 25%; left:-23%; background: white; width: 150%; height: 100%; border-radius: 50%; }
.blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; }
.blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; }
.beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; }
.beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; }
body { background:#c6faf1; }
.penguin * { position: absolute; }</style><div class="penguin"> <div class="penguin-bottom"> <div class="right-hand"></div> <div class="left-hand"></div> <div class="right-feet"></div> <div class="left-feet"></div> </div> <div class="penguin-top"> <div class="right-cheek"></div> <div class="left-cheek"></div> <div class="belly"></div> <div class="right-eye"> <div class="sparkle"></div> </div> <div class="left-eye"> <div class="sparkle"></div> </div> <div class="blush-right"></div> <div class="blush-left"></div> <div class="beak-top"></div> <div class="beak-bottom"></div> </div></div>