Tribute Page - Build a Tribute Page

HTML-CSS
1

**Hello guys! I am currently doing the"Build a tribute" task. Can please someone help me understand why the image I want to use doesn’t appear on my screen. Thank you!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="main">
<h1 id="title">Cristiano Ronaldo</h1>
<div id="img-div">
 <img id="image" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.goal.com%2Fen-kw%2Fnews%2Ffootballers-around-the-world-ring-in-new-year%2F1ov38hizapjdf13fz8y4ax8lc6&psig=AOvVaw1ozPx4dr0pdISlKVDj5BGQ&ust=1666466710458000&source=images&cd=vfe&ved=0CA0QjRxqFwoTCPiN8LaG8voCFQAAAAAdAAAAABAp" alt="Picture of Cristiano Ronaldo">
</div>   
 </div> 
</body>    
</html>  

/* file: styles.css */
body {
  background-color: black;
  color: white;
  font-family: calibri;
}
img {
  width: 20%;
  height: 20%
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

it doesn’t appear because it is not an image link
(just copy the path to your browser and you can see that no image is shown)

3

Hi! Welcome to the forum!

You need a link with .jpg, .jpeg or .png at the end in the src. This means it is an image file and the image will show up.

Also, this is unrelated to your question, but check your css. You are missing an important piece of coding punctuation. :slight_smile:

img {
  width: 20%;
  height: 20%
}
4

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