Tribute Page - Build a Tribute Page

HTML-CSS
1

I been working on this Tribute Page, but I don’t know what’s wrong .

I can’t pass these steps

  1. Your img element should have a display of block .

  2. Your #image should have a max-width of 100% .

  3. Your #image should be centered within its parent.

Your code so far

<!-- 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>Manabu Tsuchiya</title>
  <link rel="stylesheet" href="style.css"
</head>
<body>
  <main id="main">
    <h1 id="title">Manabu Tsuchiya</h1>
    <h3 class="tittle">The architect</h3>
    <div class="img-container" id="img-div">
      <img 
      class="manabu-image" 
      id="image" 
      src="/Users/okadaatsuko/Desktop/freecodecamp/IMG_2042.jpeg" 
      alt="manabu"
      />
      <div class="caption" id="img-caption">Manabu Tsuchiya, he designs buildings, he desighs our life
      </div>
    </div>

    <div class="life">
    <p class="life-header bold">Here's a time line of Manabu Tsuchiya's life:</p>
<ul id="tribute-info">
  <li><b>1987</b>-Born in Tsukuba, Ibaraki</li>
  <p></p>
  <li><b>1999</b>-He started playing the guitar</li>
  <p></p>
  <li><b>2002</b>-He played the guitar in a band called "play on"</li>
  <p></p>
  <li><b>2007</b>-He went to Seattle for study </li>
  <p></p>
  <li><b>2011</b>-He came back to Japan and started studying for to be a architect</li>
  <p></p>
  <li><b>2011</b>-He started his carrer as an architect</li>
  <p></p>
  <li><b>2022</b>-He became a licensed architect in Japan</li>
</ul>
</div>

<div>
<p>If you have time, you should check more about his work on his 
    <a href="https://www.instagram.com/mnb_design_a/" id="tribute-link" target="_blank">instagram post</a>.
  </p>
  </div>
  </main>
</body>
</html>

/* file: styles.css */
* {
  padding: 0;
  margin: 0;
}

h1 {
  font-family: Arial;
  padding: 20px;
}

h3{
  font-size: 20px;
  margin: 10px;
  padding: 10px;
}



h2 {
  text-align: center;
}


body {
  background-color: #d6d6c2;
  text-align: center;
}

.img-container {
 margin: auto;
 padding: 30px;
 background-color: white;
}

.manabu-image {
  object-fit: contain;
  border-radius: 10px;
  max-width: 100%;
  display: block;
  height: auto;
  margin: auto;
}

.caption {
  padding-top: 5px;
}

.life {
  text-align: left;
  padding: 30px 70px;
  max-width: 600px;
  margin: 10px auto;
}

.life-header {
font-size: 20px;
font-family: Arial;
padding: 30px;
}

.bold {
  font-weight: bold;
}

li {
  margin: 20px;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Welcome to the forum @atk.822

The href attribute value for the file name needs a s at the end.

The link element also needs a closing angular bracket.

Happy coding

1 Like
3

Thanks Teller! I passed :blush:

1 Like
4

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