Build a Tribute Page-help with image and run the test

Tell us what’s happening:

Hi, i am in the midst of the tribute page project, I almost finished the html and css in here .Firstly, I am unable to view the image in the codepen output, secondly, I am unable to run the test, so, how do i share my output?

Your code so far

Your browser information:

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

What do you mean that you can’t run the tests?

You can share the link to your codepen to share your code

in the bottom left corner there is a run test suite in which I am supposed to see the response of my test outcome if I am passing or failing but I am unable to see the test suite result part as it is half hidden inside the codepen folder. Plus I am only able to see a broken picture in my image output for the test as you can see in the shared folder. I tried sharing my codepen output here but this page is not allowing me to do so, saying I need to use this community forum for quite some more time in order to unlock the feature of sharing folders. thanks/meera,

It is not possible to help you with the tribute page if you don’t link your pen here

Post ithe link to the codepen surrounded by backticks (you can use the </> button in the post editor)

<>/pen/NoPXPN</> I tried that too but it does not work, so sad

Mahatma Gandhi

<div>The man who led India to Independence</div>
 <div id="img-div">
   <figure>
     <img id="image" src="https://photos.google.com/photo/AF1QipN0bSu0-c9nHcgxsb6CmaeibQfdEckO_K9IzHQs"  class="center">
     <figcaption id="img-caption">Mahatma Gandhi with family</figcaption>
   </figure
  </div>

The above code is from my test suite codepen where the image is coming as a broken image in the output

img needs an “alt” and /figure needs an “>” for starters.

Next problem?

@Jerami is right on those two pieces of missing code in your HTML.

Your pen does test fine though. There’s a green hamburger menu in the upper left corner of the screen that your web page. When you click it, it opens the test suite. Just make sure you choose “Tribute Page” from the drop down or else you’ll be testing for a different project and it’ll tell you you’re failing more than you think.
So far, you’re only failing one, which is making sure your page is responsive (but make sure you fix the other two things in your code too).

Also, I’d center your timeline’s header and take away your bullet points in your timeline. The years that you added in bold are basically bullet points themselves.

Hope that helped!

That is not what I meant. There is a button that looks like </> in the code editor that you can use to add backticks around your text, it is not an html tag…

https://photos.google.com/photo/AF1QipN0bSu0-c9nHcgxsb6CmaeibQfdEckO_K9IzHQs

If I try to open this url on my browser I get a 404 error, there is a typo or you need to use something else

thanks, noted with thanks

yes, managed to find that green hamburger now and it is showing that i passed all the ten in the green bar even though I still cannot get rid of the broken image, so how do i fix that now

Mahatma Gandhi

<div>The man who led India to Independence</div>
 <div id="img-div">
      <img id="image" src="https://photos.google.com/photo/AF1QipN0bSu0-c9nHcgxsb6CmaeibQfdEckO_K9IzHQs" alt= "From Gandhi album">
     <div id="img-caption">Mahatma Gandhi with family</div>
 </div

Finally managed to do it!

Mahatma Gandhi with Charkha
</div I made the mistake of not inserting an image with a jpg thats why it was coming broken in my code pen but not its coming, you may check my code above..thanks
Mahatma Gandhi with Charkha
</div

Can do now, thanks to you too