Build a Heart Icon - Step 6

HTML-CSS
1

Tell us what’s happening:

I need help with this because I don’t know how to make the color red .

Your code so far

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Heart Icon</title>
  </head>
  <body>

<!-- User Editable Region -->

    <svg width="24" height="24" viewBox="0 0 24 24">
      <path
        d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z"
      ></path>
    <svg>fill red</svg>

<!-- User Editable Region -->

  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build a Heart Icon - Step 6

2

How are you going to find out? What resources can you use?

You’re never going to remember everything and you need to be able to look up resources to find out how to implement all sorts of things.

You can try searching “svg fill color” on a web search engine or you can try looking back through previous lessons.

3

Hi there! For anyone who may be experiencing issues with completing similar challenges. Here’s a quick breakdown of what this challenge is asking you to do:

The heart icon is almost done. You just need to color it red. To do that, set the svg element’s fill attribute to red.

Here is the code that needs to be modified:

code removed by moderator

In the code, there are 2 elements (<svg> and <path>), and each element has one or more attributes. The challenge is to add the fill attribute and the color to the appropriate element.

Hope this helps.

4

hi @sudjinn

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like