Create a More Complex Shape Using CSS and HTML....JT

HTML-CSS
1

Tell us what’s happening:

For some reason the code informs me to change the border-radius to 50% “heart::after” yet when I do it it states that it hasn’t been changed. Someone help please?!

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: yellow;
  border-radius: 25%;
  position: absolute;
  width: 70px;
  height: 50px;
  top: -50px;
  left: 5px;
}
</style>
<div class = "heart"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.183 Safari/537.36 Vivaldi/1.96.1147.64.

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

2

If that is all the assignment says, that could be confusing. The border-radius declaration has no effect when an element has no border declaration. So add a border to your pseudo classes.

1 Like
3

Hi @Thompsonj89

I noticed you have altered the properties inside .heart::before
Do not alter anything, just add what the instruction says else it won’t pass the challenge

Reset your code and just add what the instruction says, you will clear it

1 Like
4

Thank you this worked perfectly.