Broken lesson?- Create a More Complex Shape Using CSS and HTML

HTML-CSS
1

Tell us what’s happening:
This lesson seems broken. It keeps telling me to make my background-color pink.

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 (iPad; CPU OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/72.0.3626.101 Mobile/15E148 Safari/605.1

2

Your code looks right to me, but even diff is telling me there’s a difference. You might have zero-width characters in there somehow, but I don’t spot them in my editor (emacs).

15d14
<   background-color: pink;
16a16
>   background-color: pink;

When I typed in the solution by hand however, the tests passed. All I can suggest is you reload and try the challenge again. If it still doesn’t pass, try it from a desktop web browser instead of your iPad

3

Try on desktop and chrome.