Tribute Page - Build a Tribute Page

Tell us what’s happening:
I believe I have everything the tests require but a few are not passing. I’ve tried alternative solutions and googled the issues but every answer I come across seems to be congruent with what I already have. My solutions are also affecting my text & img in the preview screen so I know the CSS file is at least talking to the index.html file as expected.

Here are the tests that aren’t currently passing:
Failed:Your #img-div, #image, #img-caption, #tribute-info, and #tribute-link should all be descendants of #main.

  • You should have an img element with an id of image.

  • Failed:Your #image should be a descendant of #img-div.

  • Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.

  • Failed:Your #image should have a height of auto.

  • Failed:Your #image should be centered within its parent.

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>James Blake Tribute</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <main id="main">
        <div class="banner">
          <h1>James Blake</h1>
          <p class="title" id="title">Innovative electronic musician pushing boundaries in his field</p>
        </div>
        <figure id="img-div">
          <img id="img" src="https://donmclean.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-11-at-6.41.37-AM-1080x675.png" alt="james blake in the studio">
          <figcaption id="img-caption">Creating in the studio</figcaption>
        </figure>
        <div class="tribute-info" id="tribute-info">
          <h2>Album Releases</h2>
          <ol>
            <li>CMYK <em>2010</em></li>
            <li>James Blake <em>2011</em></li>
            <li>Overgrown <em>2012</em></li>
            <li>The Colour in Anything <em>2014</em></li>
            <li>Assume Form <em>2020</em></li>
            <li>Friends That Break Your Heart <em>2021</em></li>
          </div>
          <br>
        <div id="footer">
          <label id="artist-homepage">Find out more on James Blake <a id="tribute-link" target="_blank" href="https://www.jamesblakemusic.com/">Official Site</a></label>
        </div>
    </main>
  </body>
</html>

```html
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>James Blake Tribute</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <main id="main">
        <div class="banner">
          <h1>James Blake</h1>
          <p class="title" id="title">Innovative electronic musician pushing boundaries in his field</p>
        </div>
        <figure id="img-div">
          <img id="img" src="https://donmclean.com/wp-content/uploads/2019/07/Screen-Shot-2019-07-11-at-6.41.37-AM-1080x675.png" alt="james blake in the studio">
          <figcaption id="img-caption">Creating in the studio</figcaption>
        </figure>
        <div class="tribute-info" id="tribute-info">
          <h2>Album Releases</h2>
          <ol>
            <li>CMYK <em>2010</em></li>
            <li>James Blake <em>2011</em></li>
            <li>Overgrown <em>2012</em></li>
            <li>The Colour in Anything <em>2014</em></li>
            <li>Assume Form <em>2020</em></li>
            <li>Friends That Break Your Heart <em>2021</em></li>
          </div>
          <br>
        <div id="footer">
          <label id="artist-homepage">Find out more on James Blake <a id="tribute-link" target="_blank" href="https://www.jamesblakemusic.com/">Official Site</a></label>
        </div>
    </main>
  </body>
</html>
/* file: styles.css */
h1 {
  color: #800080;
}

img {
  display: block;
  align-items: center; 
  max-width: 100%;
  height: auto;
  padding: 0 20px; 
}

figcaption, .title {
  color: #301934;
}

main, footer {
  text-align: center;
}

body {
  background-color: #e6e6fa;
}

.tribute-info {
  background-color: #800080;
  color: #ffffff;
  border-radius: 10px;
  padding: 15px;
}

Your browser information:

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

Challenge: {{challengeTitle}} Tribute Page - Build a Tribute Page

Link to the challenge:

HI @Emi9 !

Welcome to the forum!

You have a couple of issues.

No.1:
The test is looking for an id of image but you wrote this instead

No.2:
I wouldn’t try to center your image using padding and align items.
you should either use the margin property to center it.

Once I fixed those things, then it passed for me

Wow of course it was a typo haha. I fixed both issues and everything passed. Thank you so much for taking the time to respond!

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