Tribute Page - Build a Tribute Page

HTML-CSS
1

Hi! When I run the test, it tells me that I have not met the first two requirements:

  1. You should have a “main” element with an “id” of “main”.
  2. Your “#img-div”, “#image”, “#img-caption”, “#tribute-info”, and “#tribute-link” should all be descendants of “#main”.

My code passes all of the other requirements except for these two. Not sure what I did wrong, please help!
Thank you!

Your code so far

<!-- file: index.html -->

<!DOCTYPE html>
<html lang="eng">
<body>
<head>
  <link rel="stylesheet" href="styles.css"/>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Tribute Page for Saint Oscar Romero/>
    <title>Saint Oscar Romero</title>
</head>

<main id="main">
  <h1 id="title">Saint Oscar Romero</h1>
  <h4>"The ones who have a voice must speak for those who are voiceless" - Oscar Romero</h4>
  <figure id="img-div">
    <img id="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU7lCOd9PcJ7JDOZiXxcipoAv_ZICzL2Hs5w&usqp=CAU" alt="Saint Oscar Romero delivering the homily">
    <figcaption id="img-caption">Saint Oscar Romero delivering the homily</figcaption>
</figure>

    <h3 id="tribute-info">St. Oscar Romero's Life</h3>
        <ul>
          <li><strong>1917</strong> - Oscar Romero is born in Ciudad Barrios, El Salvador</li>
          <br>
          <li><strong>1930</strong> - He begins to attend junior seminary</li>
          <br>
          <li><strong>1942</strong> - Romero becomes ordained as a priest, and begins his work with the poor</li>
          <br>
          <li><strong>1970</strong> - On June 21, he becomes a bishop</li>
          <br>
          <li><strong>1974</strong> - Violence and human rights violations by the El Salvadorian government are increasing</li>
          <br>
          <li><strong>1977</strong> - Oscar Romero becomes archbishop of El Salvador and begins speaking out against the violence</li>
          <br>
          <li><strong>1980</strong> - During Mass, the El Salvadorian army open fired into the church and killed 30 people, including Archbishop Oscar Romero</li>
          <br>
          <li><strong>2018</strong> - Saint Oscar Romero becomes canonised on October 14</li>
        </ul>
  
<label id="footer"><strong>Learn more about Saint Oscar Romero <a href="https://www.bbc.co.uk/religion/re/3todiefor_osc_time.pdf" value="link" id="tribute-link" target="_blank">here</strong></a></label>
</main>
    
</body>
</html>

/* file: styles.css */

body {
  color: #664229;
  background: #f5efe8;
  font-family: Serif, sans-serif;
}

h1{
background:#e5d3b3;
text-align: center;
height: 60px;
padding-top: 30px;
padding-bottom: 0;
}

h4{
  text-align: center;
padding-top: 0;
}

img {
  max-width: 100%;
  height: auto;
  border: 50px;
  display: block;
}

label {
  text-align: center;
}

#footer {
background:#e5d3b3;
text-align: center;
width: 100%;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hi @leebee2101 !

Welcome to the forum!

You have have some errors in your html which are preventing you from passing the tests.

first issue is here

the body element should be below the head section.

you are missing quotes here

you have syntax errors here

the closing anchor tag should go before the closing strong tag

once you fix those errors, then it should pass

2 Likes
3

Hello!

Here you have not wrapped your content in quotaton marks which is causing a problem. It seems as if you have forgotten it.
And your body opening tag should come after your head

1 Like
4

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