Learn CSS Transforms by Building a Penguin - Step 16

Hello i dont see where the mistake is. i always get this error message.

You should give .left-mountain a transform property.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <div class="left-mountain"></div>
    <div class="penguin"></div>
    <div class="ground"></div>
/* file: styles.css */
body {
  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow: clip;

.left-mountain {
  width: 300px;
  height: 300px;
  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
  position: absolute;
  transform: skew(0deg 44deg);


.penguin {
  width: 300px;
  height: 300px;
  margin: auto;
  margin-top: 75px;

.ground {
  width: 100vw;
  height: 400px;
  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
  z-index: 3;
  position: absolute;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0

Challenge: Learn CSS Transforms by Building a Penguin - Step 16

Link to the challenge:

Hey Davidino, nice to see you again. Look at your other CSS rules, and see how you separate them? You are giving skew two values, but you need to separate them the degrees by using something. If not then it looks like skew is using one big value. Check the background to see for a hint

1 Like

thank you ! Yes i am now eager to learn!

1 Like

Awesome! Keep it going!

Do you offer classes?

I dont do anything like that. I suggest going through the curriculum, and asking questions on the forum when you get stuck. Also google is a developer best friend

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.