Learn CSS Transforms by Building a Penguin - Step 23

HTML-CSS
1

Tell us what’s happening:

I’ve been trying to do this code for a while, but no matter what I put it’s not going through at all, I keep getting this message - You should give .back-mountain a top property of 225px, but found 255px.

What am I doing wrong? Tried googling it and everything, but nothing pops up. I’ve even tried it on another browser too in case that was the problem but still nothing changed

Your code so far

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

  <body>
    <div class="left-mountain"></div>
    <div class="back-mountain"></div>
    <div class="penguin"></div>
    <div class="ground"></div>
  </body>
</html>

/* 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: hidden;
}

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


/* User Editable Region */

.back-mountain {
  width: 300px;
  height: 300px;
  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
  position: absolute;
  z-index: 1;
  transform: rotate(45deg);
  left: 110px;
  top: 255px;
}

/* User Editable Region */


.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;
  margin-top: -58px;
}

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Mobile/15E148 Safari/604.1

Challenge Information:

Learn CSS Transforms by Building a Penguin - Step 23

2

Welcome back to the forum @Pixelbitbybit

You should give .back-mountain a top property of 225px, but found 255px.

You are asked to use a value of two hundred and twenty five.

You give a value of two hundred and fifty five.

Happy coding

1 Like
4

Hiiii!!

(Ignore my other reply, how embarrassing) thanks for the reply! I’ll try this solution now and see if it works

5

Hiiii!!

(Ignore my other reply, how embarrassing) thanks for the reply! I’ll try this solution now and see if it works

Edit: it worked! 2x embarrassed, I’m really blind as a bat :smiling_face_with_tear:

1 Like