Tribute Page - Build a Tribute Page

HTML-CSS
1

What i am doing wrong ??

  • Your img element should have a display of block.

  • #image should have a max-width of 100%.

  • #image should be centered within its parent.

Your code so far

<!-- file: index.html -->
<!DOCTYPLE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, inital-scale=1.0" />
  <title>Dr. Norman Borlaug</title>
  <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <header>
    <div>
      <h1 id="title">Dr. Norman Borlaug</h1>
      <p> The Man who save a billion lives</p>
   </div>
   </header>
   <main id="main">
    
     <div class="img-div" id="img-div"> 

       <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" id="image" ></img>

       
      

       <br/>
       <figcaption name="img-caption" id="img-caption"class="img-div"><strong>Dr. Norman Borlaug</strong>, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
       </div>

       <div class="information">

         <h2 id="tribute-info">Here's a time line of Dr. Borlaug's life:</h2>
         <label>
           <ul>
             <li><strong>1914</strong> - Born in Cresco, Iowa</li>
             <li><strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
             <li><strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."
</li>
             <li><strong>1937</strong> - Finishes university and takes a job in the US Forestry Service</li>
           </ul>
           </label>
         </div>

    

     <footer>
       <address>
         If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Norman_Borlaug" id="tribute-link" target="_blank">Wikipedia entry.</a>
         </address>
       </footer>
        </main>
  </body>
  </html>


/* file: styles.css */



#image{             
   display: block;
  height: auto;
  max-width: 100%;
  align-items: center;
}

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 Edg/116.0.1938.76

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

Hello!
Could you please post the complete CSS code, so we can see if something else is causing the issues for you with the code?
You can post either with ``` on each side of the complete code, or by using the < /> preformatted on this textarea at the top.

1 Like
3

that the complete CSS code as that all is required to complete this project

1 Like
5

The correct link is:

href = "styles.css"
6

ohhhh got it now.
thank you!

7

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