Tribute Page in Projects

Tell us what’s happening:
I am failing in one test case that is–

1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Your code so far

<html>

<head>

<title id="title">

</title>

</head>

<br>

<main id="main">

    <header>

    <br>

    <center>

    <h1>Dr. Norman Borlaug</h1>

    <h5>The man who saved a billion lives</h5>  

    </center>

    </header>

    <div id="img-div">

        <img id="image" src="C:\Users\91954\Downloads\freeCodeCamp\Tribute Page\tribute-page-image.jpg"/>

        <br> <br>

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

        </figcaption>

        <br>

    </div>

    

    <article id="tribute-info">

      <br><br><br>

      <h3>Here's a time line of Dr. Borlaug's life:</h3>

      <li>

        <b>1914</b> - Born in Cresso, lowa

      </li>

      <br>

      <li>

        <b>1933</b> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration" 

      </li>

      <br> 

      <li>

        <b>1935</b> - 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>

      <br>

      <li>

        <b>1937</b> - Finishes University and takes a job in the US Forestry Service

      </li>

      <br>  

      <li>

        <b>1938</b> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.  

      </li>

      <br>

      <li>

        <b>1941</b> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.  

      </li>

      <br>

      <li>

        <b>1942</b> - Receives a Ph.D. in Genetics and Plant Pathology 

      </li>

      <br> 

      <li>

        <b>1944</b> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major cllimate on Earth 

      </li>

      <br> 

      <li>

        <b>1945</b> - Discovers a way to grown wheat twice each season, doubling wheat yields  

      </li>

      <br>

      <li>

        <b>1953</b> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat  

      </li>

      <br>

      <li>

        <b>1962</b> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population  

      </li>

      <br>

      <li>

        <b>1970</b> - receives the Nobel Peace Prize  

      </li>

      <br>

      <li>

        <b>1983</b> - helps seven African countries dramatically increase their maize and sorghum yields  

      </li>

      <br>

      <li>

        <b>1984</b> - becomes a distinguished professor at Texas A&M University  

      </li>

      <br>

      <li>

        <b>2005</b> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."  

      </li>

      <br>

      <li>

        <b>2009</b> - dies at the age of 95<br>  

      </li>

      <br>

    </article>

    <p align="center">"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress."

    <br><br>

    -- Indian Prime Minister Manmohan Singh   

    </p>

    <br>

    <p align="center">To know more about this incredible human being, you should read his 

    <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry.</a>

    </p>

    <br><br>

</main>

</html>
<style>

    #main {

    background: silver;

    border-radius: 10px;

    }

    #img-div {

        background-color: white;

        --padding: 0px 50px 0px 50px;;

        --margin-left: auto;

        --margin-right: auto; 

        --display: block;

        width: 90%;

        height: auto;        

        display: inline-block;

        padding: auto;

           

    }

    #image {

        --display: block;

        --width: 100%;

        --height: auto;

        --max-width: 625px;

        --text-align: center;

        width: 100%;

        height: auto; 

        max-width: none;      

        display: inline-block;

        padding: 0px 20px 0px 20px;

        

    }

    #img-caption {

        margin: auto;

        text-align: center;

        padding: 0px 30px 0px 30px;

        

    }

    #tribute-info {

        padding: 0px 90px 0px 90px;

        

    }

</style>

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

Please post a link to your pen. It’s much easier to help that way.

On a side note, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue.

  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

You’ve only posted the first line from the failing error message.

EDIT: I noticed a couple of things about your code;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Do not use style tags in CSS. It will cause issues. The CSS editor in codepen is like having a stylesheet. You would not put HTML tags in a stylesheet. They are only used in the head element in HTML and only when using internal styling. Your styling should be external.

On a side note, do not try and replicate the sample projects. The instructions say yours should be ‘functionally similar’ and ‘give it your own personal style’.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thanks for these tips!
These are really helpful :grinning:

<head>
<title id="title">
</title>
</head>
<br>

<main id="main">
    <header>
    <br>
    <center>
    <h1>Dr. Norman Borlaug</h1>
    <h5>The man who saved a billion lives</h5>  
    </center>
    </header>
    <div id="img-div">
        <img id="image" src="C:\Users\91954\Downloads\freeCodeCamp\Tribute Page\tribute-page-image.jpg"/>
        <br> <br>
        <figcaption id="img-caption">Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>       
        </figcaption>
        <br>
    </div>
    
    <article id="tribute-info">
      <br><br><br>
      <h3>Here's a time line of Dr. Borlaug's life:</h3>
      <li>
        <b>1914</b> - Born in Cresso, lowa
      </li>
      <br>
      <li>
        <b>1933</b> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration" 
      </li>
      <br> 
      <li>
        <b>1935</b> - 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>
      <br>
      <li>
        <b>1937</b> - Finishes University and takes a job in the US Forestry Service
      </li>
      <br>  
      <li>
        <b>1938</b> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.  
      </li>
      <br>
      <li>
        <b>1941</b> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and other applied science.  
      </li>
      <br>
      <li>
        <b>1942</b> - Receives a Ph.D. in Genetics and Plant Pathology 
      </li>
      <br> 
      <li>
        <b>1944</b> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent wheat - including different varieties for each major cllimate on Earth 
      </li>
      <br> 
      <li>
        <b>1945</b> - Discovers a way to grown wheat twice each season, doubling wheat yields  
      </li>
      <br>
      <li>
        <b>1953</b> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat  
      </li>
      <br>
      <li>
        <b>1962</b> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population  
      </li>
      <br>
      <li>
        <b>1970</b> - receives the Nobel Peace Prize  
      </li>
      <br>
      <li>
        <b>1983</b> - helps seven African countries dramatically increase their maize and sorghum yields  
      </li>
      <br>
      <li>
        <b>1984</b> - becomes a distinguished professor at Texas A&M University  
      </li>
      <br>
      <li>
        <b>2005</b> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."  
      </li>
      <br>
      <li>
        <b>2009</b> - dies at the age of 95<br>  
      </li>
      <br>
    </article>

    <p align="center">"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and scientific vision can make to human peace and progress."
    <br><br>
    -- Indian Prime Minister Manmohan Singh   
    </p>
    <br>
    <p align="center">To know more about this incredible human being, you should read his 
    <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry.</a>
    </p>
    <br><br>

</main>
</html>


<style>
    #main {
    background: silver;
    border-radius: 10px;
    }

    #img-div {
        background-color: white;
        padding: 0px 100px 0px 100px;;
        --margin-left: auto;
        --margin-right: auto; 
        --display: block;
                
        
           
    }

    #image {
        --display: block;
        --width: 100%;
        --height: auto;
        --max-width: 625px;
        --text-align: center;
        width: 100%;
        height: auto; 
        max-width: none;
        display: inline-block;
        
        
    }

    #img-caption {
        margin: auto;
        text-align: center;
        padding: 0px 30px 0px 30px;
        
    }

    #tribute-info {
        padding: 0px 90px 0px 90px;
        
    }
</style>```

@singh.ums, is there a reason you’re posting your code again?
Better if you posted a link to your pen.

Again, read then entire error message. It says

The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Try using the "max-width" style property : expected 'none' to not equal 'none'
AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'

And once again, get rid of the style tags in CSS. They do not belong there.

sorry for sending this code again but I am writing my code in VS Code that’s why…
Now, here is the link…
https://codepen.io/singh_ums/pen/yLMpZPo

pls suggest me how to pass this last test case, tried but didn’t get what is the problem :expressionless:

Do you have a question?

It’s okay that you write your code in VS Code. You’ll have to post it live when submitting to FCC. Codepen is a good choice for when just starting out.
Your code now passes all the tests. Good job.

A couple of things.

  • The image is hosted on your computer. You cannot upload an image to the free version of codepen. You can search and find places that will host your image for free and use that URL in codepen. Alternately, you can find an image of Musk by doing a search and using that URL.
  • Once again, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

On a side note, if you’d like to get feedback on your project you can open a new topic in the #project-feedback subforum.

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