Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Hello,
I am currently in Tribute Page Certification project. I used img element and linked index.html with styles.css. But CSS is not being applied. What is the problem?

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>Ibn Sina-Tribute Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="title">
      <h1>Ibn Sina (Avicenna)</h1>
    </header>
    <main id="main">
      <div id="img-div">
        <img src="https://tile.loc.gov/image-services/iiif/service:gdc:gdcwdl:wd:l_:09:71:8:wdl_09718:A5_0004_2/full/pct:100/0/default.jpg" id="image">
      </div>
    </main>
  </body>
</html>

/* file: styles.css */
#image{
  width: 40%;
  max-width: 60%;
  height: auto;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

Hello!

A second quotation mark is missing in the viewport meta.

3

Thanks for your suggestion. I have typed the missing quotation mark, but the issue is still there.

4

Adding the quotation mark does solve the issue. Can you reset the project then run the corrected code?

5

I did reset the entire project and re-typed the code again, but the issue still persists.
The code after resetting the project:

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ibn Sina-Tribute Page</title>
  </head>
  <body>
    <header id="title">
      <h1>Ibn Sina (Avicenna)</h1>
    </header>
    <main id="main">
      <div id="img-div">
        <img src="https://tile.loc.gov/image-services/iiif/service:gdc:gdcwdl:wd:l_:09:71:8:wdl_09718:A5_0004_2/full/pct:100/0/default.jpg" id="image">
      </div>
    </main>
  </body>
</html>

/*styles.css*/
*{
  box-sizing: border-box;
}
#img-div #image{
  width: 40%;
}
6

Link your CSS and HTML files.

7

You should see either a figure or a div element with an id of img-div

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

You should see an element with a corresponding id=“tribute-info”, which contains textual content describing the subject of the tribute page

You should see an a element with a corresponding id=“tribute-link”, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab

You need to to have all the required elements with the required attributes and values.

8

Thanks everyone for your assistance. Unfortunately, I did not link HTML file with stylesheet. Although I linked before resetting the project and it was not working. But now it is good.
Again, thanks a lot.

9

You have correctly linked your css with your html. I think css is linked but the styles you are applying on image are not correct.

width:40%;
max-width:60%;

These properties are not used like this. Here, you are saying that the image width is 40% of the body and maximum it can go upto 60% of the body. The point is that if the width is 40% , it never gonna be 60%. So 40% width is always used here. You cannot use relatives values in both properties.

Solution:
You can write something like width is 40% and give max width in px.

Width:40%;
max-width:500px;

Here you are saying that the image is 40% of body but it can only grow upto 500 px of width.

1 Like
10

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