Tribute Page - Build a Tribute Page

Tell us what’s happening:
Describe your issue in detail here.
Your #img-div , #image , #img-caption , #tribute-info , and #tribute-link should all be descendants of #main
What it means ? thanks

Your code so far

<!-- file: index.html -->
<style>
body { background-color: black;
color: white;
font-family: calibri; } 
#img-caption { width: 400px; }
#img { max-width: 100% ;
height: auto;
display: block;}
</style>


<main id="main">
<h1 id="title">Vegeta - the true underdog</h1>
<div id="img-div"> </div>
  <a id="tribute-link" target="_blank" href="https://www.youtube.com/watch?v=0ODnkwFEnWY">
  <img id="image" src="https://www.google.com/search?q=vegeta&rlz=1C5CHFA_enFR939FR940&sxsrf=ALiCzsbLWNRw76Kq582LA6A0EJYfWmp2_Q:1667928450900&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjnls7WjZ_7AhWNgM4BHYsbDwcQ_AUoAXoECAEQAw&biw=1920&bih=1001&dpr=1#imgrc=3LZhTdOi5fmKoM" alt="Picture of Vegeta" width="204" height="204">
</a>https://www.youtube.com/watch?v=0ODnkwFEnWY
<fiqcaption > Vegeta is a symbol, that in hard times, you can become stronger and make something out of yourself. It will be humiliating and shitty at first, but eventually, you will be a power to be rockened with. </fiqcaption>
</main>

<p id="tribute-info"><b> Vegeta Attributes: </b>
<ul>
<li>Resilience </li>
<li> Fearlessness</li>
<li> Persistence </li>
  </ul>
</p>
</main>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Try removing this url in the middle of nowhere.

Also I see two closing tags for main.
You should only have one.

it still not working

Please post your new code with the code within a code formatting block

Your #img-div , #image , #img-caption , #tribute-info , and #tribute-link should all be descendants of #main

Descendants are child (or grandchild etc) elements of a parent element. In practice, this means that child elements are nested inside the parent elements.

<div class="parent">
  <p class="child">I am a descendant</p>
</div>

So, all it means in this exercise is that your main element opening and closing tags should enclose all of the other elements listed above.

Vegeta - the true underdog

Picture of Vegeta https://www.youtube.com/watch?v=0ODnkwFEnWY Vegeta is a symbol, that in hard times, you can become stronger and make something out of yourself. It will be humiliating and shitty at first, but eventually, you will be a power to be rockened with.

Vegeta Attributes:

  • Resilience
  • Fearlessness
  • Persistence

It means that all of the elements you’ve listed should be wraped within the main tag.

Your img tag doesn’t link to an image but a video and you have a stray YouTube link floating in the middle of your code too.
Also, you’ve spelled figcaption with a q (instead of g).

It still not working

It still not working i m block

Your #img-div , #image , #img-caption , #tribute-info , and #tribute-link should all be descendants of #main .
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<main id="main">
<style>
body { background-color: black;
color: white;
font-famili: calibri; } 
#img-caption { width: 400px; }
#image { max-width: 100% ;
height: auto;
display: block;}


</style>

<h1 id="title">Vegeta - the true underdog</h1>

<div id="img-div"> 
  <a id="tribute-link" target="_blank" href="https://www.google.com/search?q=vegeta&rlz=1C5CHFA_enFR939FR940&sxsrf=ALiCzsbDe4wpHzOrV1h_wqRYVAYYoxevEA:1668005048457&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjP_pWDq6H7AhVU3IUKHUb6D4AQ_AUoAXoECAEQAw&biw=1920&bih=1001&dpr=1#imgrc=Ick_fduHM4v3uM&lns=W251bGwsbnVsbCxudWxsLG51bGwsbnVsbCxudWxsLG51bGwsIkVrY0tKREEyTW1ZeU5EWmxMV1kwTXpBdE5EUXdZaTA0TXpFNUxXWmpNV1prTmpZek9ERTFOaElmWTE5R00ybE1SMDk2UW1OaE5FbGhORUZXWjJGWFdVRnFaazkwZGxKb1p3PT0iLG51bGwsbnVsbCxudWxsLDEsbnVsbCxbbnVsbCxudWxsLFswLDAsMTAwMDAwLDEwMDAwMF0sbnVsbCw1XSxudWxsXQ==">
  <img id="image" src="https://www.google.com/search?q=vegeta&rlz=1C5CHFA_enFR939FR940&sxsrf=ALiCzsbLWNRw76Kq582LA6A0EJYfWmp2_Q:1667928450900&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjnls7WjZ_7AhWNgM4BHYsbDwcQ_AUoAXoECAEQAw&biw=1920&bih=1001&dpr=1#imgrc=3LZhTdOi5fmKoM" alt="Picture of Vegeta" width="204" height="204">
</a>
<figcaption > Vegeta is a symbol, that in hard times, you can become stronger and make something out of yourself. It will be humiliating and shitty at first, but eventually, you will be a power to be rockened with. </figcaption>

</div>

<p id="tribute-info"><b> Vegeta Attributes: </b>
<ul>
<li>Resilience </li>
<li> Fearlessness</li>
<li> Persistence </li>
  </ul>
</p>
</main>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Hi there! Can you please specify your problems?

I dont understand what it means :
Your #img-div , #image , #img-caption , #tribute-info , and #tribute-link should all be descendants of #main

Please don’t create duplicate topics for the same challenge. I’ve merged your duplicates.

please move the css code above to your styles.css file and write a link element to link between the styles.css and the index.html

After that, and with respect to your question:

This would be your #main element’s opening tag.
Somewhere in the middle between this tag and the matching closing tag you must create the required elements with the required ids.
(this would make them “descendants” of #main)

Thanks i understand now

1 Like