HTML CSSS Tribute page topic I made mistake 1,2,6,7,16,17,18,19 and I checked is correct but the freecodecamp shows wrong?

HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Tribute Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 0;
      background: #f4f4f4;
      color: #333;
      text-align: center;
    }

    #main {
      padding: 20px;
    }

    h1 {
      margin-top: 20px;
    }

    #img-div {
      background: white;
      padding: 10px;
      margin: 20px auto;
      max-width: 600px;
    }

#image {
  max-width: 100%;
  height: auto;
  display: block; 
}

    #img-caption {
      margin-top: 10px;
    }

    #tribute-info {
      max-width: 700px;
      margin: 0 auto;
      text-align: left;
    }

    ul {
      text-align: left;
      padding-left: 20px;
    }

    a {
      color: #007bff;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    footer {
      margin-top: 40px;
    }
  </style>
</head>

<body id="main">
     <main id="main">
  <h1 id="title">Dota 2</h1>
  <p>PC Multiplayer Online Battle Arena game genre</p>

  <div id="img-div">
   <img src="https://i.ibb.co/gbzB9KYk/dota2-social.jpg" alt="dota2-social" border="0">
    <figcaption id="img-caption">First officially published 2003 in Blizzard company game named Warcraft being played by online or offline under custom game</figcaption>
  </div>

  <section id="tribute-info">
    <h2>Here's a timeline of Dota history as researched on wikipedia</h2>
    <ul>
      <li><strong>2003</strong> - First released using Warcraft III TFT PC game World Editor</li>
      <li><strong> October 13, 2010</strong> - Official announcement of Dota 2</li>
      <li><strong>2011–2013</strong> - Beta phase</li>
      <li><strong>July 9, 2013</strong> - Official release date</li>
    </ul>
    <p>
      If you want to learn more about this genius game developer hisotry, read more on
      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Dota" target="_blank">Wikipedia</a>.
    </p>
  </section>

  <footer>
    <p>Made for freeCodeCamp Tribute Page Project</p>
  </footer>
  </main>
</body>

</html>
2

Please talk about which tests are failing (the contents of the test, not the number) and the debugging you’ve tried. Thanks

3

Sorry, I dont understand…

4

You wrote

Tribute page mistake 1,2,6,7,16,17,18,19, I need help please

Please say what “1,2,6,7,16,17,18,19” means with words and talk about how you tried to fix these issues.

5

good day sir, these are the cross marked mistakes shown below:

  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.
  3. You should have an img element with an id of image .
  4. Your #image should be a descendant of #img-div .
  5. Your img element should have a display of block .
  6. Your #image should have a max-width of 100%.
  7. Your #image should have a height of auto.
  8. Your #image should be centered within its parent.
6

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  • What is the requirement of the first failing test?
  • Check the related User Story and ensure it’s followed precisely.
  • What line of code implements this?
  • Are there any errors or messages in the console?

If this does not help you solve the problem, please reply with answers to these questions.

8

Oh I made some mistake, forgot to put image=“id” hahaha

1 Like
12
Tribute Page of Dota 2 body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background: #f4f4f4; color: #333; text-align: center; } 
#main {
  padding: 20px;
}

h1 {
  margin-top: 20px;
}

#img-div {
  background: white;
  padding: 10px;
  margin: 20px auto;
  max-width: 600px;
}

#image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

#img-caption {
  margin-top: 10px;
}

#tribute-info {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

ul {
  text-align: left;
  padding-left: 20px;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  margin-top: 40px;
}

Dota 2

PC Multiplayer Online Battle Arena PC game

dota2-social First officially published 2003 in Warcraft III using Map Editor

Here's a timeline of Dota history as researched on wikipedia

  • 2003 - First released using Warcraft III TFT Map Editor
  • October 13, 2010 - Official announcement of DOTA 2
  • 2011–2013 - Beta phase
  • July 9, 2013 - Valve company officially published DOTA 2

If you want to learn more about this awesome game history, read more on Wikipedia.

Made for freeCodeCamp Tribute Page Project

what went wrong on 1. You should have a main element with an id of main .?

13

Please edite your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

14

Oh okay sir respecfully, anyway I passed the test already. Thank for the support ya..hahaha I feel proud of myself and happy.

1 Like
15

good job! Now you know how to share code the next time you need to do so though

1 Like