Applied Visual Design: Create a More Complex Shape

I finished this lesson but keep getting errors. So I copied the code directly from the video, and I am still getting errors! The errors are claiming that things not done even though they are. I even cleared my browser history, and tried a different browser, but no luck. Is there a problem with this lesson? Thanks.

They have rigid metrics for these test. So it may even look the same as in example, couple pixels off and there’s an error in tests … Plus video may be using different version of the tests…

1 Like

Could someone please provide me with an answer? I have done all I can and have done the things the page is claiming are not done? Thanks.

Still a problem. Any help possible please?
Error message: The background-color property of the heart::after selector should be pink.
My code: .heart:after {
background-color: pink;
Error message: The content of the heart::before selector should be an empty string.
My code: .heart:before {
content: “”;

I can’t really say much without looking at your code.

Make a codepen, let’s see what you got.

my code:

<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>

What is a code pen? I copied the code below. Cheers

I figured out the problem: heart:before and heart:after should be heart::before and heart::after.