Tribute Page - Build a Tribute Page

HTML-CSS
1

Please help me! My brain is about to explode! I can’t complete this task: Your #img-caption should not be empty. I found another post on the same issue but still couldn’t figure out what is wrong with my code. I tried both h2 and figcaption instead of p element, but nothing worked.

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title id="title">Antoni Gaudí's projects</title>
   <link rel="stylesheet" href="styles.css" />
   </head>


   <body>
     <main id="main">
   <header>
         <div id="img-div" class="img-div">
<h1>Antoni Gaudí</h1>
<p class="in-title">Years of delivering his magnificent projects</p>
<div id="img-caption">
<img src="https://i.insider.com/5ec6c30119182455423b3f55?width=1136&format=jpeg" id="image" alt="Sagrada Família inside">
</div>
<p id="img-caption" class="after-photo">He may not have created a hundred buildings, but all his creations are true works of art.</p>
</div>
     </header>

Link to the challenge:

2

Hi!

You can have multiple css classes with the same value, however you cannot have multiple id elements with the same value. A given id value can only be used once.

Correct

<div id=“dog”></div>

<h1>hello</h1>

Incorrect

<div id=“dog”></div>

<h1 id=“dog”>hello</h1>

You should only have one element with the id of img-caption.

1 Like
4

Hi! Thanks for the hint, I kept the id=“img-caption” only in the Div element, however I still can’t complete the task as it says that my #img-caption should not be empty.

5

Please show me your updated code and I’ll take a look. :slight_smile:

7

Hi! Sorry for the late reply. Please see code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title id="title">Antoni Gaudí's projects</title>
    <link rel="stylesheet" href="styles.css" />
    </head>


    <body>
      <main id="main">
    <header>
          <div id="img-div" class="img-div">
<h1>Antoni Gaudí</h1>
<p class="in-title">Years of delivering his magnificent projects</p>
<div id="img-caption">
 <img src="https://i.insider.com/5ec6c30119182455423b3f55?width=1136&format=jpeg" id="image" alt="Sagrada Família inside">
 </div>
<p class="after-photo">He may not have created a hundred buildings, but all his creations are true works of art.</p>
</div>
      </header>
8

The instructions say

Within the #img-divelement, you should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in #img-div

<div id="img-div" class="img-div">
<h1>Antoni Gaudí</h1>
<p class="in-title">Years of delivering his magnificent projects</p>
<div id="img-caption">
 <img src="https://i.insider.com/5ec6c30119182455423b3f55?width=1136&format=jpeg" id="image" alt="Sagrada Família inside">
 </div>
<p class="after-photo">He may not have created a hundred buildings, but all his creations are true works of art.</p>
</div>

Where is the textural content in the img-caption in your code?

1 Like
10

Finally! It took me a long time to realize that I just needed to write something right after opening of the div element. I thought the text in the p element would be enough since it’s inside the div and that’s what was requested in this task. Thank you for patiently guiding me towards the solution!

1 Like
11

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