Build a Tribute Page- image not loading

Build a Tribute Page- image not loading
0

#1

Tell us what’s happening:

i have tried several times to add an image to my tribute page but unfortunately the image is refusing to load.

Your code so far

<main>
<style>
h1{font-size: 50px;
color: green;}
h2{font-family: lobster;
font-size: 30px;}
#li{font-size: 30px;}
</style>
<h1> Mad.Beatrice Ama Mirekuah Gyimah</h1>
<h2> The most caring mum I could ever have </h2>
<img src="https://ibb.co/i83Vdz" alt="I and my mum">
<p> Here's a timeline of Ajasco's life </p>
<ul>
<li>1954-Born in Obo Kwahu</li>
<li>1972-Completed middle school</li>
<li>1978-Got married to Mr.Daniel Gyimah, a college graduate whois also from Obo Kwahu, and settles with him in Pra-River</li>
<li>1979-Gave birth to first child and subsequently had eight children in all-5 boys and 3 girls</li>
<li>1990-Moves from the village in and joins the husband in Donkorkrom in the Afram Plains District,where she subsequently gave birth to the last three of her children</li>
<li>2000-Again moves with the husband to a town called "Princess Town" in the Western Region of Ghana. She regularly had to travell back to Donkorkrom since since three of her kids had been left behind</li>
<li>2003-Finally gets baptized as one pf Jehova's Witnessess after years of study.</li>
<li>April,2004- Unfortunately,husband looses job and thus moves with the whole family back to the village in Pra-River,where there start a new life as farmers. Despite her ill health,she still supports the husband in this new phase of their life. Also,she starts selling bread as a retailer in other to raise some extra income for the family</li>
<li>November,2007-After few months of illness,husband dies,living her with children to take care of. Though difficult and not having much formal education to be able to secure formal employment,she continues farming with two of her children still living with her in the village untill September 2010 when she finslly decides to move to a much bigger town in other her children can further their education,and also improve on her lot in life</li>
<li>2010- Upon arriving in the city-Nkawkaw-she starts a pure water selling business with her children. She does this untill 2013 when her health deteriorated and thus prevented her from being able to continue with the sachet water selling business. She sells, her deep freezer and diverts to petty trading in food items</li>
</ul>
<div class="li"></div>
</main>

Your browser information:

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

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


#2

Your img tag must have a src atribute containing an url pointing to an external resource. Be aware that imgs on imgur doas not work in codepen


#3

Can you post the link to your codepen please?


#4

file:///C:/Users/KAY/Desktop/Project%201.html


#5

my image attribute does have an src attribute and and alt attribute too. am sorry i dnt quite get your last statement please


#6

You need to put your project on Codepen.io We can not access your local file.


#7

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

You have specified a url of https://ibb.co/i83Vdz for the img src, but that url is a webpage containing an image and not the url of the actual image. To get the url of the image, right mouse click and select copy image address and use that as the img src.

https://image.ibb.co/emikBK/20180414_160543.jpg


#8

Use this url for your image

https://image.ibb.co/emikBK/20180414_160543.jpg

#9

your image tag should read

<img src="https://image.ibb.co/emikBK/20180414_160543.jpg" alt="I and my mum" >

The src property was trying to access the page the image was on before and not the image itself.


#10

oohk thanks very much. now the problem is that the image is so huge that it has covered almost the entire window


#11

just resize the images with

width
height

#12

You need to review the previous lesson on how to make images responsive.

https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-principles/make-an-image-responsive/


#13

ok. thankks once again


#14

ok.thanks. ive got it now