Step 75 - Building a Penguin

Step 75 - Learn CSS Transforms by building a penguin
Having trouble with step 75, it’s telling me:
" If you look closely, the heart emoji is slightly different. This is because some of the character’s properties were overridden by the font-weight style of bold.

Fix this, by targeting the div with the heart emoji, and setting its font-weight to its original value."

: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 {
  width: 15%;
  height: 10%;
  background-color: pink;
  top: 65%;
  border-radius: 50%;
}

.blush.left {
  left: 15%;
}

.blush.right {
  right: 15%;
}

.beak {
  height: 10%;
  background-color: orange;
  border-radius: 50%;
}

.beak.top {
  width: 20%;
	top: 60%;
	left: 40%;
}

.beak.bottom {
  width: 16%;
  top: 65%;
  left: 42%;
}

.shirt:not("💜");
{
  font: bold 25px Helvetica, sans-serif; 
}





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

I’ve tried .shirt:not(:purple_heart:) but that doesn’t seem to work, no idea where to go from here.

Please edit your post and add your code and the step link

I’ve edited the post to add code and the link.

This is wrrong we can’t use emojis and things like that to target elements in css, and they ask you to target the div of the heart and :not() is for targeting every element and the not the element inside ()

For example we want to target the <span> inside the <div>

<div>
  <span>Text here</span>
  <p>Text here<p>
</div>
Here we target the span inside the div
div span {
color: blue;
}

Here we target the p inside the div
div p {
color: red;
}
1 Like

Got it fixed, thanks for the help!