Tribute Page - Build a Tribute Page

Hi,
I’m stock here, I cannot see what I’m doing wrong, please any help.

here are 3 conditions that I cannot pass on css, I did two times from scratch the code on html and css and nothing change.

the errors are :

  • Your img element should have a display of block .
  • Your #image should have a max-width of 100% .
  • Your #image should be centered within its parent.

I Didn’t finish the rest but I tried manny things on anything related to img element.
hanks in advance

Your code so far

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>tribute form for Freddy Mercury</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
  <main id="main">
    <h1 id="title">Sir Freddie Mercury</h1>
    <p>The man who changed the music history</p>
    <figure id="img-div">
      <img id="image" src="https://www.udiscovermusic.com/wp-content/uploads/2020/02/Freddie-Mercury-GettyImages-76205456.jpg" alt="Freddie Mercury">
      <figcaption id="img-caption">Photo by Paul Natkin/WireImage</figcaption>
    </figure>    
     <div id="tribute-info">
       <p>The iconic Singer-songwriter, creator of master pieces like “Bohemian Rhapsody”, the thrilling “Killer Queen”, the baroque “Don’t Stop Me Now, the rocking “Crazy Little Thing Called Love” and the golden anthem “We Are the Champions”, amongst so many, born in Stone Town, Zanzibar, with the name of Farrokh Bulsara, on 5 September
1946, Died on 24 November 1991 (aged 45) in Kensington, London, England.</p>
        <p>Here are some fun facts about the emblematic Rockstar and part of his legacy:</p>
          <ul>
            <Li><strong>Mercury spent most of his childhood in India</strong> where he began taking piano lessons at the age of seven while living with relatives.</Li>
            <Li><strong>Freddie Mercury once went by the name “Larry Lurex.</strong>Before landing on the stage name Freddie Mercury, the singer performed under the moniker Larry Lurex. He later said the name was a “personal piss-take” of Gary Glitter, whom Mercury did not care for.</Li>
            <Li><strong>He had a long term relationship with a girl in the early 70's, called Mary Austin</strong>. When he died, he left her most of his money, his house, and his recording loyalties.</Li>
            <Li><strong>His known vocal range was from bass low F(f2) to soprano high F(F6)</strong>. He could belt up to tenor high F(f5) wich is almost four octaves.</Li>
            <Li><strong>Freddie Mercury started writing "Bohemian Rhapsody" in 1968</strong>. That traces the origins of the epic tune to before he joined Queen in 1970. He was still a student at Ealing Art College when he got an idea for a tune he referred to as “The Cowboy Song” because of the Old West feel of the Johnny Cash-like lyric, “Mama, just killed a man.”</Li>

            <Li><strong>Freddie Mercury talked about his HIV disease one day before he died</strong>. He released a statement which read: "Following enormous conjecture in the press, I wish to confirm that I have been tested HIV positive and have AIDS. "I felt it correct to keep this information private in order to protect the privacy of those around me</Li>
          </ul>
        <div id="conclusion">
          <p>In life and in death Fred touched millions with his stage presence and his inclusive vocal style, one that managed to take no prisoners while giving off warmth and intimacy. He was indeed rhapsodic with talent and energy to burn. He died far too early in London, in 1991 aged just 45 but he left behind a true legacy that doesn’t ever diminish.</p>
        </div>   
     </div>
      <footer class="tribute-link">If youre interesting in get more information about Freddie Mercury Biograpghy, visit <a id="tribute-link" href="https://en.wikipedia.org/wiki/Freddie_Mercury" id="tribute-link"target="_blank">Wikipedia/Freddie-Mercurie</a></footer>
  </main>
</body>
</html>

/* file: styles.css */
body{
  background-color: purple;
  font-family: 'PT Sans Narrow', sans-serif;
  padding:0;
  margin:40px;
}

#main{
  background-color: #e2b6b6;
  padding: 30px;
  margin-top: auto;
  text-align: center;
  
}

#title{
  text-align: center;
  margin-bottom: 10px;
  font-size: 50px;
}

#title-desc{
  text-align: center;
  margin-bottom: 50px;
  margin-top: 5px;
}

#img-div{
  border: 3px solid purple;
  padding: 40px;
  align-content: center;
}

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

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Select image element img and then give the css-property display and it’s value block.

I think you have to remove display block from id #image.

In your meta tag there is an error It should be like this

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Thank you Irfan, the code wasn’t the problem, was a missed letter on the code, thanks though.

1 Like
  • A missed letter on the head, I did my code on Replit, and the Css folder had a similar name:

link href=“style.css” rel=“stylesheet” type=“text/css” /

the link for freecodecamp is href=“styles.css”, I missed the “S” on the foldername.

1 Like