Cannot find the problem with my code

HTML-CSS
1

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?

Screenshot 2022-06-18 135401
Screenshot 2022-06-18 135401601×505 17.6 KB 

   **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:

2

Hi @caleb52525 ,

Check the code before, you are missing something.

3

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

Thanks for the help!

1 Like
4

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