Create a More Complex Shape Using CSS and HTML pink?

HTML-CSS
1

Tell us what’s happening:
it is not recognizing pink as the background-color.

Your code so far


<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg) ;
}
.heart::after {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 25px;
}
.heart::before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class = "heart"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html/

2

can anyone tell me where this code is wrong? The error I get is “The background-color property of the heart::after selector should be pink.”

3

Is there a error you are getting or msg about what does not pass? It works for me on an iPad with Firefox.

4

Sometimes the cookies need to be cleared. Sign in again in incognito mode or another browser and try it. The code looks right.

5

THANK YOU, THANK YOU, THANK YOU!! Signing in incognito mode (never done that so I had to look it up) worked!! Next time I’ll shut down and re-boot so I don’t have to bug people for help. I was going bonkers trying to figure it out. Muchas, muchas gracias!