Tribute Page - Build a Tribute Page

Hello,

I am doing the Tribute Page of the HTMLand stuck at:

  • Your img element should have a display of block.
  • Your #image should have a max-width of 100%.
    *Your #image should be centered within its parent.
    I have them . What is it talking about?

Other problems I have is:

  • the H1 wouldn’t turn uppercase and
    none of the element would be centered.
    Could you please help me? Thannks so much.

<!-- file: index.html -->
<!document html>
<html lang="en">
  <head>
    <link rel="stylesheet" href=<styles.css">
    <meta name="viewport" content="width=device-width; initial-scale=1"
  </head>

  <body>
    <header>
      <p id="title" >Dr. Norman Borlaug</p>
    </header>
    
    <main id="main">
      <figure id="img-div" >
      <img id="image" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg">
      <figcaption id="img-caption">Who saved a billion lives</figcaption>  
      </figure>
       <p id="tribute-info">Source: Google</p>
      <a href="" id="tribute-link" target="_blank">More</a>
    </main>
/* file: styles.css */
img, #image {
  max-width: 100%;
  height: auto;
  
  display: block
}

body {
  text-align: center;
 justify-content:center
}

#title {
text-transform:uppercase;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0

Challenge Information:

Tribute Page - Build a Tribute Page

Welcome to the forum @bekle

Use the rel attribute on how code the href.

Alternatively, copy the link element between the project description and tests.

Happy coding

1 Like

Hey @bekle , Your stylesheet have to be in order for example:

html{
}

body{
}

main{
}

img{
}

in this order everything in your page happen just like the html is build.

also you have like 2 or more lines of code in your css without the closing ; you need to fix this for your code to work properly and in your html the doctype html, should be writing like this. <!DOCTYPE html>
and one more thing you’re not tagging your stylesheet because you have some things blocking your quotations to the link.

and lastly to center an image you dont use justify-content; or text-align; this elements are use to center blocks like div and texts to center an image you need to uses margin All this things your should know by now if your taking a exam. you should not ask question to compete this if you have a question or you dont undestand something you can google it to get the definition of elements or propetys that you dont know how to use yet. or you can go back in to your previews practicen and re-do it so make sure that your getting what your doing. we can help you with anything you need help, exemp the text.

hope you understud and dont get fustrated about this. remeber it takes time to learn how to code.
Be well and enjoy conding…

1 Like

Thank you for taking time to write me a long reply. I deleted the > after the href in Link and had auto margin for the #image.

Had you not said the difference of text-align and Justify-content, I would have not known. Seriously some Google articles even said text-align can be used for picture? Maybe the more I’m learning, the more I’m returning.

Thank you very much for your encouragement. Sometimes I do feel like giving up. There is so much ahead to learn…

1 Like

this is wrong, you have a < when you should have a "

Yes, you are right. I blame it on the small code box that I have to work with = P Just kidding, I was reading between the lines of my disorganizing code. Thanks very much for pointing out.