Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
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.

These are my errors. I do not know why.

Your code so far

<!-- file: index.html -->
<main id='main'>
  <title id="title"> Tribute Page</title>
  <figure id="img-div">
    <img id='image'/>
  <div id="img-caption">Text</div>
  </figure>
  <div id='tribute-info'> Text</div>
  <a id='tribute-link' href='https://www.youtube.com/watch?v=rfkyKtDeiZU' target="_blank">Link</a>
</main>



/* file: styles.css */
#image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page

2

It doesn’t look like you have linked your stylesheet to the html document

Pay close attention to the note left on the challenge page here

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

3

Thanks so much! I will try it out!

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.