Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
I don’t know why my image won’t edit in freeCodeCamp, but it will in replit. Is there anything I can do to fix this for the Tribute Page?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/style.css">
</head>

<body>
    <main id="main">
        <h1 id="title">Steve Jobs</h1>
        <h3>The Man who Created a Revolutionary Company Called Apple and invented a new perspective towards hand-held tech.</h3>
        <div id="img-div">
            <img id="image" src="https://live.staticflickr.com/6220/6216457030_2cf0aff09d_z.jpg">
 
        <div id="img-caption">This is the man, Steve Jobs.</div>
       </div>
        <div id="tribute-info">Steve Jobs, (born February 24, 1955, San Francisco, California, U.S.—died October 5, 2011, Palo Alto, California), cofounder of Apple Computer, Inc. (now Apple Inc.), and a charismatic pioneer of the personal computer era.
            <a id="tribute-link" href="https://www.britannica.com/biography/Steve-Jobs" target="_blank">Learn more</a>
        </div>
    </main>
</body>

</html>




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

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Welcome to the community @ethanhong110 !
Thank you for including the problem along with the code.

It appears there is a small typing error in the href value of styles.css. The s is missing at the end.

It will prevent the css from following through because it is not connected.

I hope this helps you.

Happy coding!

1 Like
4

Thank you! Just figured it out!

1 Like
5

Were you able to pass the step now?

I noticed the img element was not added to the CSS file, and a few other changes need to be made.

But, I am thinking from your post that maybe you have passed the step.

If not, please let us know on this post?

We are here to help each other progress on our coding journeys.

Happy coding!

1 Like
6

Yep! I was able to pass the step. I did a little debugging by comparing it to my prior projects and finally figured it out:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Steve Jobs</title>
   <link rel="stylesheet" href="styles.css">
   <body>
    <main id="main">
        <h1 id="title">Steve Jobs</h1>
        <h3>The Man who Created a Revolutionary Company Called Apple and invented a new perspective towards hand-held tech.</h3>
        <div id="img-div">
            <img id="image" src="https://live.staticflickr.com/6220/6216457030_2cf0aff09d_z.jpg">
            <figcaption id="img-caption">This is the man, Steve Jobs.</div>
       </div>
        <div id="tribute-info">Steve Jobs, (born February 24, 1955, San Francisco, California, U.S.—died October 5, 2011, Palo Alto, California), cofounder of Apple Computer, Inc. (now Apple Inc.), and a charismatic pioneer of the personal computer era.
            <a id="tribute-link" href="https://www.britannic target="_blank">Learn more</a>
        </div>
    </main>
</body>

</html>


body {
  margin: 0;
  font-family: Helvetica;
  background: #f5f6f7;
}

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

Tysm!

2 Likes
8

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