Learn CSS Transforms by Building a Penguin - Step 54

Tell us what’s happening:
I’m not sure if I’m doing something wrong here… Can anybody tell me what I did wrong?

   **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="sun"></div>
   <div class="penguin">
     <div class="penguin-head">
       <div class="face left"></div>
       <div class="face right"></div>
       <div class="chin"></div>
     </div>
     <div class="penguin-body"></div>
   </div>

   <div class="ground"></div>
 </body>
</html>
/* file: styles.css */
--penguin-face:root{
 background-color: white;
}

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

.face {
 width: 60%;
 height: 70%;
 background-color: white;
 border-radius: 70% 70% 60% 60%;
 top: 15%;
}

.face.left {
 left: 5%;
}

.face.right {
 right: 5%;
}

.chin {
 width: 90%;
 height: 70%;
 background-color: white;
 top: 25%;
 left: 5%;
 border-radius: 70% 70% 100% 100%;
}

.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: "";
 position: absolute;
 width: 50%;
 height: 45%;
 background-color: gray;
 top: 10%;
 left: 25%;
 border-radius: 0% 0% 100% 100%;
 opacity: 70%;
}

.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/104.0.5112.102 Safari/537.36 Edg/104.0.1293.70

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

Link to the challenge:

Almost get it, you’re right with the root just a bit messed up with they syntax
please visit the link below and see the example.

Hope this will help. Happy coding

Thank you for letting me know.

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