Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en>
  <head>
<meta charset="utf-8">
<link rel='stylesheet' href='styles.css'>
<title id='title'> a tribute page of Omgba Bissogo</title>
</head>
<body>
 <main id='main'>
    <h1> Omgba Bissogo</h1>
    <p>A great resistance fighter, leader of the Ewondo tribe in Cameroon</p>
  <figure id='img-div'>
    <img id='image' src='https://www.facebook.com/visiterlecamerounavecmoi/posts/2489125597892372/'></img>
 <figcaption id='img-caption'>Omgba Bissogo (c. 1855 – 1896) 
   </figcaption>   
  </figure>
<div id='tribute-info'>Omgba Bissogo was an <a id='tibute-link' target='_blank' href='https://en.wikipedia.org/wiki/Beti-Pahuin_peoples'>Ewondo</a> <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Tribal_chief'>tribal chief</a> and warrior who, during the colonial period in <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Cameroon'>Cameroon</a> in 1895, led a rebellion against German forces present in Cameroon.Omgba Bissogo was the head of the Ewondo Mvog Ottou sublineage. Bissogo and his army won their initial battles against the Germans.This was the first <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Germany'>German</a> defeat on Cameroonian soil. However, the Germans responded with a brutal strike against the Mvog Ottou tribe even committing crimes against civilians. Bissogo was betrayed and arrested thanks to one of his numerous wives who revealed his cache to the Germans. He was immediately put in jail in the German station in Jaunde (present-day <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Yaound%C3%A9'>Yaoundé</a>) and beheaded. This defeat and the brutality of the German response would later have a great impact on the future Powermount Chief of the Ewondo and Bene <a id='tribute-link' target='_blank' href='https://www.bonaberi.com/article.php?aid=7'>Charles Atangana</a> who in his book <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Jaunde-Texte_von_Karl_Atangana_und_Paul_Messi'>Jaunde Texte</a> talks about the fallen hero. Even today the tales praising Omgba Bissogo's fierceness and courage against the German invaders are part of the <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Beti_people'>Beti</a> folklore.
</main>
<h2>References</h2>
<hr/>
<div id='tribute-info'></div>
<li>Ahanda, Marie-Thérèse Assiga (2003): "Charles Atangana". Bonaberi.com. Accessed 30 October 2006.</li>
<li>Ahanda, Marie-Thérèse Assiga (30 July 1997). "Memorandum sur l'oeuvre de Charles Atangana et historique du château". Accessed 4 November 2006.</li>
<hr/>
<img id='image' src='https://en.wikipedia.org/wiki/File:Logocam.png#/media/File:Flag-map_of_Cameroon.svg'</img>
This article about a Cameroonian politician is a <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Wikipedia:Stub'>stub</a>. You can help by expanding it
</body>



/* file: styles.css */
img { display: block; }
body { padding: 1em; }
.img-div { background: white; }
.img-caption {
			font-family: sans-serif;
			font-size: 32px;
			margin-left: 20%; }
.image { height: auto ; max-width: 100% ; display: block; }
p {
			font-family: sans-serif;
			margin-bottom: 2em; 
		}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

please i have some problem with the images i want to put on my code

4

Hello @josephomgba93 !

I am not sure if the problem is due to the image being hosted in Facebook.

I also noticed that there is a closing tag for the img here. However, img are self closing and do not require a closing tag. A mistake any of us could make.

1 Like
5

ok…it is the only image i have obout the subject :drooling_face:

6

even when i self closing img it don’t take

8

Your src is pointing to a webpage url not an image which is why it doesnt work

1 Like
9

ok @anon42932716 i found another image. thanks

1 Like
10

@Cody_Biggs that’s fine thanks :smile:

1 Like
12

I found an good image. But the css code is not work… :worried:

13

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en>
  <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='styles.css'>
<title id='title'> a tribute page of Omgba Bissogo</title>
</head>
<body>
 <main id='main'>
    <h1> Omgba Bissogo</h1>
    <p>A great resistance fighter, leader of the Ewondo tribe in Cameroon</p>
  <figure id='img-div'>
    <img id='image' alt='Omgba Bissogo' alt='premiere image' class='image1' src='https://pbs.twimg.com/media/FC2E528UcAE9RJT.jpg' />
 <figcaption id='img-caption'>Omgba Bissogo (c. 1855 – 1896) 
   </figcaption>   
  </figure>
<div id='tribute-info' class='justified-text'>Omgba Bissogo was an <a id='tibute-link' target='_blank' href='https://en.wikipedia.org/wiki/Beti-Pahuin_peoples'>Ewondo</a> <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Tribal_chief'>tribal chief</a> and warrior who, during the colonial period in <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Cameroon'>Cameroon</a> in 1895, led a rebellion against German forces present in Cameroon.Omgba Bissogo was the head of the Ewondo Mvog Ottou sublineage. Bissogo and his army won their initial battles against the Germans.This was the first <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Germany'>German</a> defeat on Cameroonian soil. However, the Germans responded with a brutal strike against the Mvog Ottou tribe even committing crimes against civilians. Bissogo was betrayed and arrested thanks to one of his numerous wives who revealed his cache to the Germans. He was immediately put in jail in the German station in Jaunde (present-day <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Yaound%C3%A9'>Yaoundé</a>) and beheaded. This defeat and the brutality of the German response would later have a great impact on the future Powermount Chief of the Ewondo and Bene <a id='tribute-link' target='_blank' href='https://www.bonaberi.com/article.php?aid=7'>Charles Atangana</a> who in his book <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Jaunde-Texte_von_Karl_Atangana_und_Paul_Messi'>Jaunde Texte</a> talks about the fallen hero. Even today the tales praising Omgba Bissogo's fierceness and courage against the German invaders are part of the <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Beti_people'>Beti</a> folklore.
</main>
<h2>References</h2>
<hr/>
<div id='tribute-info'></div>
<li>Ahanda, Marie-Thérèse Assiga (2003): "Charles Atangana". Bonaberi.com. Accessed 30 October 2006.</li>
<li>Ahanda, Marie-Thérèse Assiga (30 July 1997). "Memorandum sur l'oeuvre de Charles Atangana et historique du château". Accessed 4 November 2006.</li>
<hr/>
<img id='image' alt='deuxieme image' class='image2' src='https://seekflag.com/app/uploads/2021/11/Flag-of-Cameroonian-03-1.svg' />
This article about a Cameroonian politician is a <a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Wikipedia:Stub'>stub</a>. You can help by expanding it
</body>



/* file: styles.css */
img { display: block; }
body { font-family: 'Arial', sans-serif ;  margin:0 ; padding:0 ;         background-color: #f8f8f8 ; }
figcaption {
			font-family: sans-serif; text-align: center;  }
.image { height: auto ; max-width: 100% ; display: block; }
p {
			font-family: sans-serif;
			margin-bottom: 2em;	}
figure { border: 1px solid #333; padding: 5px; }
img:last-of-type { width: 10px; }
.justified-text { text-align: justify; } 
.image2 { width: 50px; hight: auto; }

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

14

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

15

hello! i have a problem with the .image in css code. the display, max-width does not work.

16

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