Tribute Page - Build a Tribute Page

HTML-CSS
1

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

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title">Tribute Page</h1>

      <figure id="img-div"> 
        <img id="image"/>
        <figcaption id="img-caption">Mr chukwudi picture</figcaption>
       </figure>
        <p id="tribute-info">My journey as a front-end developer to back-end developer.</p>
        <a id="tribute-link" href="tributepage" target="_blank"></a>

         

     

    </main>

  </body>
</html>

/* file: styles.css */
#image{
  max-width: 100%;
  height: auto;
  display: block;
  justify-content: center;
  align-items: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Hi everyone,

please am almost through with the Tribute Page, but am left with just one answer and I have tried to get it right but am getting more confused. please can anyone help me out with last question?

my code in html & css:

<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tribute Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
      <h1 id="title">Tribute Page</h1>

      <figure id="img-div"> 
        <img id="image"/>
        <figcaption id="img-caption">Mr chukwudi picture</figcaption>
       </figure>
        <p id="tribute-info">My journey as a front-end developer to back-end developer.</p>
        <a id="tribute-link" href="tributepage" target="_blank"></a>

         

     

    </main>

  </body>
</html>

css:

#image{
  max-width: 100%;
  height: auto;
  display: block;
  justify-content: center;
  align-items: center;
}
3

Hi!

What is the last question?

4

Waiting: Your #image should be centered within its parent.

5

Waiting: Your #image should be centered within its parent?

6

Why doesn’t the image have an src value? I’d hazard a guess that the image can’t be centred if there’s no image being displayed.

<img id="image"/>

Also these two css properties will only work on a child element that has a parent element set to display:flex.

justify-content: center;
  align-items: center;
7

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