freeCodeCamp.org

Whats wrong with my code?
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page`

<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title id="title">Kurt</title>
  <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <main id="main">
      <h1 id="title">Kurt Cobain</h1>
      <p>February 20, 1967 / April 5, 1994</p>
      <figure img="img-div">
        <img id="image" src="https://super.abril.com.br/wp-content/uploads/2018/07/5669c76e82bee174ca0258eekurt_cobain_58555.jpeg?quality=90&strip=info&resize=850,567">
        <figcaption id="img-caption">Google</figcaption>
        </figure>
        <section id="tribute-info">
          <h3 id="headline">Resume</h3>
          <p>Kurt Donald Cobain (February 20, 1967 – c. April 5, 1994) was an American singer, songwriter and artist.[1] He was the guitarist, lead vocalist and primary songwriter of the rock band Nirvana. Through his angst-fueled songwriting and anti-establishment persona, Cobain's compositions widened the thematic conventions of mainstream rock. He was heralded as a spokesman of Generation X and is considered one of the most influential musicians in the history of alternative rock.
            <a id="tribute-link" href="https://en.wikipedia.org/wiki/Kurt_Cobain" target="_blank">Wikipedia Entry</a>
          </p>
          </section>
          </main>
          </body>
          </html>
html {
 font-size: 10px;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Helvetica Neue', Arial, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #333;
  margin: 0;
}

h1 {
  font-size: 4rem;
  margin-bottom: 0;
}

@media (max-width: 460px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }
}

h2 {
  font-size: 3.25rem;
}

a {
  color: #477ca7;
}

a:visited {
  color: #74638f;
}

#main {
  margin: 30px 8px;
  padding: 15px;
  border-radius: 5px;
  background: #eee;
}

@media (max-width: 460px) {
  #main {
    margin: 0;
  }
}

img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

#img-div {
  background: white;
  padding: 10px;
  margin: 0;
}

#img-caption {
  margin: 15px 0 5px 0;
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}

#headline {
  margin: 50px 0;
  text-align: center;
}



blockquote {
  font-style: italic;
  max-width: 545px;
  margin: 0 auto 50px auto;
  text-align: left;
}

We need to be able to see your HTML and CSS in order to help you. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

sorry, tanks for your answer but i have to "\" in every line?

Sorry, I don’t know that that means? If you want help, we’ll need to see your code. Follow my instructions above to paste it in here.

i understand that, but i dont understand how to wrap my code. You have said to use back ticks, for me is "" over the tab, and should i do that for every code line?

I don’t think you are quite reading my instructions correctly:

  1. On a line by itself type three back ticks
  2. Underneath that line of back ticks paste in your code
  3. On a separate line below all of your code type three more back ticks

I don’t know what to tell you about the location of the back tick key on your keyboard. It looks like a single quote but instead of leaning forward, it leans backwards.

Also, you don’t need to wrap your code. We will get a horizontal scroll bar if necessary. That is fine.

Thanks a lot, i was not understanding it clear. Many thanks for your help. I havent passed the html doc type and that

the only erros that appear to me are:
Your #img-div , #image , #img-caption , #tribute-info , and #tribute-link should all be descendants of #main .

You should have a figure or div element with an id of img-div .

Your #image should be a descendant of #img-div .

Your #img-caption should be a descendant of #img-div .

These sound like pretty straight forward issues to fix. Just make the changes the tests are asking for. But again, we can’t really help you unless we can see your HTML.

Hi! I’ve used my moderator powers to format your post for you. The HTML and CSS should be easily readable now.

Instead of backticks you can highlight the pasted code, then press the button that looks like this </>.

The gif below gives a visual demonstration of this and the backtick method.

Thank you, i am new to this so i miss some knowledge.

Now you can see it, the MOD helped a lot.

You need to start going through your HTML very closely and finding the errors. I’ll give you the first one for free:

<figure img="img-div">

There is no img attribute. I’m pretty sure you meant id. :slight_smile:

Another thing you can do is run your HTML through a validator which will find a lot of these types of errors for you.

W3C HMTL validator

Thanks a lot for the help, i cannot thank your kindness.