Tribute Page - Build a Tribute Page

HTML-CSS
1

I am stuck on the following two issues:

  • Your img element should have a display of block.

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

I don’t understand what is missing from my code to pass these two tests.

My code so far:

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tribute to Betty White</title>
</head>
<body>
	<main id="main">
		<div id="heading" class="center">
		<h1 id="title" class="center">Betty White</h1>
				</div>
		<div id="img-div">
			<img class="center" id=image src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Betty White">
			<div class="center">
			<p id="img-caption" class="font">Betty White looks remarkably like a cat</p><br>
			</div>
		</div>

		    <div id="tribute-info">
      <h2>Here are some of her iconic roles</h2>
      <li><a id="tribute-link" target="_blank" value="link" href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwjBsbaD4_v7AhVIhP0HHd8uAZYQFnoECDIQAQ&url=https%3A%2F%2Fwww.imdb.com%2Fname%2Fnm0924508%2F&usg=AOvVaw0uFFusK_od403S-J6CzIma"> Golden Girls</a> </li>
      <li> Hercules </li>
      <li> Chance of a Lifetime </li>
      <li> Lake Placid </li>
     
      </div>
	</main>
	
</body>
</html>

/* file: styles.css */
#title {
    font-size: 400%;
    width: 60vmax;
  }

.center {
    margin: auto;
    padding: auto;
    text-align: center;
  }

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:107.0) Gecko/20100101 Firefox/107.0

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Maybe 100 is better than 1000?

Also you need to target the img selector to set the display to block.

Also the stylesheet name is wrong?

3

you need to place image in quotation marks " "

4

How do I do that? Isn’t that what the #image {} is doing?

Also, I changed the width to 100% but the system is still not accepting it. Is the max-width: 100% not the right way to do it?

5

Did you fix the stylesheet name as suggested?

6

Yeah, sorry, I think I need new glasses that I missed the -s-. That’s all it took, it’s working now, thanks!

1 Like
7

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