Tribute Page - Build a Tribute Page

Tell us what’s happening:

i thing i did everything they asked me to but it shows errors. shows errors for things that are already written so im confused what it wants more from me.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meat charset="utf-8">
    <meta name="viewport" content="width=device-width"> 
    <title> Eiichiro Oda </title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body background="https://static.animecorner.me/2023/03/one-piece-wano-visual.jpg">
      <main id="main">
        <h1 id="title"> Eiichiro Oda </h1>
        <div id="img-div">
         
          <img id="image" src="https://cdn.myanimelist.net/images/voiceactors/2/74096.jpg">
          <figcaption id="img-caption">The one true anime legend... ODAAAAAAA </figcaption> 
            </div> 
            <div class="tribute-info" id="tribute-info"> Brief intro about Oda: 
              <ul> 
                <li> born in <strong> 1975</strong>
                <li> Japanese anime artist</li>
                <li> created the best anime of all time <strong> One Piece</strong> </li>
                <li> sold more than 520 million copies worldwide</li>
                <li><strong>One piece</strong> is considered to be the best selling manga of all time</li> 
                <li> He is very well knwon for his great forshadowing and story telling </li>
                </ul>
                </div> 
<a id="tribute-link" href="https://onepiece.fandom.com/wiki/Eiichiro_Oda" target="_blank"> OdaEiichiro</a>
<div>
  This man right here created the best and most thought out story of all time and needs to get the recognistion he deserves. 
  </div>
  </main>
  </body>
  </html>

/* file: styles.css */
img {
  display: block;
  max-width: 100%;
  min-width: 25%;
height: auto;
padding-left: auto;
padding-bottom: 50px;
margin-left: auto;
margin-right: auto;
}

body {
  font-family: arial;
  color: black;
  font-size: 20px;
}
 
.tribute-info {
  padding-top: 15px;
  border: solid;
  border-color: #3f3f;
}

figcaption {
  color:yellow;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

Post your issue here. What errors are showing in the text console?

Here are some corrections and improvements to your HTML code:

  1. <meat charset="utf-8"> should be <meta charset="utf-8">.
  2. It’s better to put the <title> tag inside the <head> section.
  3. <figcaption> should be placed inside the <figure> element along with the <img> tag.
  4. Close the <li> tags properly by adding </li>.
  5. You can add a closing </ul> tag after the list items.
  6. Fix the spelling of “known” in the tribute information.
  7. Add a closing </head> tag after the <title> tag.
  8. Add a closing </html> tag at the end of the document.

Here’s the corrected HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width"> 
  <title>Eiichiro Oda</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body background="https://static.animecorner.me/2023/03/one-piece-wano-visual.jpg">
  <main id="main">
    <h1 id="title">Eiichiro Oda</h1>
    <div id="img-div">
      <figure>
        <img id="image" src="https://cdn.myanimelist.net/images/voiceactors/2/74096.jpg">
        <figcaption id="img-caption">The one true anime legend... ODAAAAAAA</figcaption> 
      </figure>
    </div> 
    <div class="tribute-info" id="tribute-info"> Brief intro about Oda: 
      <ul> 
        <li>born in <strong>1975</strong></li>
        <li>Japanese anime artist</li>
        <li>created the best anime of all time <strong>One Piece</strong></li>
        <li>sold more than 520 million copies worldwide</li>
        <li><strong>One Piece</strong> is considered to be the best selling manga of all time</li> 
        <li>He is very well known for his great foreshadowing and storytelling</li>
      </ul>
    </div> 
    <a id="tribute-link" href="https://onepiece.fandom.com/wiki/Eiichiro_Oda" target="_blank">OdaEiichiro</a>
    <div>
      This man right here created the best and most thought out story of all time and needs to get the recognition he deserves. 
    </div>
  </main>
</body>
</html>

These corrections should make your HTML code valid and improve its structure.

Your CSS code looks mostly fine, but there are a couple of improvements and corrections that can be made:

  1. When specifying the border color, make sure to include the color format, such as #3f3f3f, not just #3f3f.
  2. In the figcaption selector, the color value should be specified with a color format such as #ffff00 for yellow.

Here’s the corrected CSS code:

img {
  display: block;
  max-width: 100%;
  min-width: 25%;
  height: auto;
  padding-left: auto;
  padding-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
}

body {
  font-family: Arial, sans-serif; /* Use a comma-separated list of fallback fonts */
  color: black;
  font-size: 20px;
}
 
.tribute-info {
  padding-top: 15px;
  border: solid;
  border-color: #3f3f3f; /* Specify the color format */
}

figcaption {
  color: #ffff00; /* Specify the color format for yellow */
}

With these adjustments, your CSS code should work as expected.

1- You should have a figure or div element with an id of img-div .
2- Your #img-caption should not be empty.
3- Your #tribute-link should have a target attribute set to _blank .
only these 3 even tho i can see that i typed all of em?

Hi @FaisalAjmi

Your code passes.
Save the code to your computer, then reset the step and try again. If that doesn’t work, refresh the page, disable dark mode, disable ad blockers. Or, use another browser.
If the above steps do not work, you may need to restart the computer.

Happy coding

Post your modified html code here now. I can’t see your computer screen.
@FaisalAjmi

Bro he is didn’t doing a challenge step, he’s working on a certification project of responsive web designing.