Learn CSS Transforms by Building a Penguin - Step 64

penguine step 64, stuck there**
penguine #64 stuck
//
.blush.left {
width: 15%;
height: 10%;
background-color: pink;
}
.blush.right {
width: 15%;
height: 10%;
background-color: pink;
}
penguin step 64, stuck there
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 class="face left"></div>
       <div class="face right"></div>
       <div class="chin"></div>
       <div class="eye left">
         <div class="eye-lid"></div>
       </div>
       <div class="eye right">
         <div class="eye-lid"></div>
       </div>
       <div class="blush right"></div>
      <div class="blush left"></div>
      </div>
   
     <div class="penguin-body"></div>
   </div>

   <div class="ground"></div>
 </body>
</html>
/* file: styles.css */
:root {
 --penguin-face: 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: var(--penguin-face);
 border-radius: 70% 70% 60% 60%;
 top: 15%;
}

.face.left {
 left: 5%;
}

.face.right {
 right: 5%;
}

.chin {
 width: 90%;
 height: 70%;
 background-color: var(--penguin-face);
 top: 25%;
 left: 5%;
 border-radius: 70% 70% 100% 100%;
}

.eye {
 width: 15%;
 height: 17%;
 background-color: black;
 top: 45%;
 border-radius: 50%;
}

.eye.left {
 left: 25%;
}

.eye.right {
 right: 25%;
}

.eye-lid {
 width: 150%;
 height: 100%;
 background-color: var(--penguin-face);
 top: 25%;
 left: -23%;
 border-radius: 50%;


.blush.left {
 width: 15%;
 height: 10%;
 background-color: pink;
}
.blush.right {
 width: 15%;
 height: 10%;
 background-color: pink;
}


.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 (X11; CrOS x86_64 14816.99.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

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

Link to the challenge:

You need for this step just .blush eslector, why did you create something more?

html requests 2 div elements
div 1 class=‘blush left’
div2 class=‘blush right’

Are we talking about step 64? Just double checking

yes # 63 complicates # 64 though
.blush {
gives me this:

Hint

You should give .blush a width of 15%, found undefined.

I need to see your code for the whole .blush selector.

When replying to this post, press ctrl-e. You will see how to make code look like:

this
`type or paste .blush {
  width: 15%;
  height: 10%;
  background-color: pink;
}code here`

The above is good stuff, well done. I think maybe you accidentally changed other parts of code. Tests may fail because of such occasions.

Try to reset the step and just do what you did. Let me know if it will not work

It worked thank you.
I did not do that before as I thought it would undo all steps before#64.
it only undoes 1 step - Perfect !
Thank you, that was my last little thing to fix for certification. Extra thanks.

You know, for certification you need just complete 5 certification projects, you don’t need to pass every step for every section)

ooops now i know, thanks more. tc.