Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I have used visual studio code to verify. The preview window does not reflect the black background colors specified by the css. I had a color for my img-div selector at one point just to see the area in which the container space was taking.

In addition to the color not displaying in the preview. I have made multiple arrangements to the #id and content selectors from using flex. Functionally the code will not pass nor center in free code camp. HOWEVER, I was able to do so on my live server in VS Code.

*At minimum, the max-width and display-block are typed verbatim and should be passed in the run test. Yet, They are still not passing. I think that perhaps there is an issue with the tribute page.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title id="Role Model">Page Title</title>
  <link rel="stylesheet" href="tribute.css" />
  <style></style>

  <body>
    <main id="main">
      <div id="title">Decribe subject of the tribute page i.e. jack black
      </div>
      
      <div id="img-div">

        <img id="image" src="https://media.distractify.com/brand-img/1qowZKPGH/0x0/jack-black-retiring-jumping-1576121712450.jpg" alt="test"></img>
         
      <div id="img-caption">this is a caption</div>
      </div>
      
      <section id="tribute-info">
        
        <p><a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Jack_Black">put stuff below</a></p>
     </section>

    </main>
  </body> 
</html>



/* file: styles.css */
body{
    background-color:black;}


#img-div{
align-content:center;
}

#image{max-width:100%;
justify-content:center;}


img{display:block;}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Your issue is here

the file name has to be styles.css because that is the name used in the online editor
once you change that then it will pass

3

Thank you very much!!! I started the project in VS Code and used that to name the file. Its amazing how many small things can just keep you stuck. Thank you for taking the time out of your day to help me.

I am concurrently doing FreeCodeCamp as well as a bootcamp by TrueCoders.

Sincerely,

Corey Schroeder

1 Like
4

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