Cannot find the problem with my code

Tell us what’s happening:
Describe your issue in detail here.

Not sure what is wrong with this step specifically. I’ve actually completed the rest of the challenge, however it doesn’t seem to accept this step for some reason. Does anyone know why?

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8" />
   <link rel="stylesheet" type="text/css" 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="sun"></div>
   <div class="penguin">
     <div class="penguin-head"></div>
     <div class="penguin-body"></div>
   </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: clip;
}

.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;
}

.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: 225px;
}

.sun {
 width: 200px;
 height: 200px;
 background-color: yellow;
 position: absolute;
 border-radius: 50%;
 top: -75px;
 right: -75px;
}

.penguin {
 width: 300px;
 height: 300px;
 margin: auto;
 margin-top: 75px;
 z-index: 4;
 position: relative;
}

.penguin * {
 position: absolute;
}

.penguin-head {
 width: 50%;
	height: 45%;
 background: linear-gradient(
   45deg,
		gray,
		rgb(239, 240, 228)
	);
	border-radius: 70% 70% 65% 65%;
 top: 10%;
 left: 25%;
 z-index: 1;
}

.penguin-body {
 width: 53%;
 height: 45%;
 background: linear-gradient(
   45deg,
		rgb(134, 133, 133) 0%,
		rgb(234, 231, 231) 25%,
		white 67%
	);
 border-radius: 80% 80% 100% 100%;
 top: 40%;
 left: 23.5%;
.penguin-body::before {
 content: "";

}

.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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Step 38

Link to the challenge:

Hi @caleb52525 ,

Check the code before, you are missing something.

Ahhh, thank you! I must’ve backspaced one too many times.

Thanks for the help!

1 Like