Tribute Page - Build a Tribute Page

Hi! I am currently stuck in this one.

At first, I used this code:

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

… but it didn’t work so I used the below instead. Still, it’s not working. Not sure why it gives an error message.

Here’s the full code:

<!DOCTYPE html>
<html lang= "en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Andre Braugher</title>
	<link rel="stylesheet" href="/style.css">
</head>
<body>
	<main id="main">
		<h1 id="title">Andre Braugher</h1>
  	<div id="main">
			<div id="img-div">
				<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/9/99/JeorgeBennettWatsonWilliamstown-cropped.jpg" alt="Andre Braugher">
    	<div id="img-caption">Andre Braugher, 2023</div>
    	</div>
	<p id="tribute-info">Andre Keith Braugher was an American actor known for his roles as Detective Frank Pembleton in the NBC police drama series Homicide: Life on the Street and Captain Raymond Holt in the Fox/NBC police comedy series Brooklyn Nine-Nine.</p>
	<a id="tribute-link" href="https://en.wikipedia.org/wiki/Andre_Braugher" target="_blank">Learn more</a>
  </div>
</main>
</body>
</html>
body {
  font-family: Helvetica, san-serif;
  margin: 0;
  padding: 0;
}

#main {
  max-width: 900px;
  margin: 0 auto;
  padding: 25px;
}

#title {
  text-align: center;
  font-size: 3em;
}

#img-div {
  text-align: center;
}

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

#img-caption {
  font-style: italic;
  margin-top: 10px;
}

#tribute-info {
  margin-top: 25px;
}

#tribute-link {
  display: block;
  text-align: center;
  margin-top: 25px;
}

please post all your code so we can see it, both html and css

Done. I already updated my post.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

it’s ./styles.css, not the path you are using

1 Like