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

What is your hint or solution suggestion?

.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; }

Challenge: Create a More Complex Shape Using CSS and HTML

Link to the challenge:

1 Like

Welcome, Arewaloluwa.

Thank you, for your guide post contribution. I have taken your suggestions and included them in the following guide post:

For future contributions, please include all of the necessary code to pass the challenge.

Also, when you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

We look forward to your further contribution.