Somebody please help im really stuck i think i already have the right code

HTML-CSS
1

Tell us what’s happening:

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 {
  background-color: pink;
  content: "";
  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>
2

what is the exact issue you are facing ? can you elaborate a bit ?

3

What’s the challenge? What issue you are having? The link to the lesson would really be helpful in being able to help you

4

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

Well, basically the challenge wants you to use pseudo elements ::before and ::after. You use :before and :after so it won’t let you pass.

The single-colon syntax was used for both pseudo-classes and pseudo-elements. But in CSS3 the :: replaced the : for pseudo-elements to better distinguish of them.

5

thanks that really helped