Recipe-page || Pure HTML & CSS

Removing a / from the src attribute before assets likely solved the problem of loading an image because it changed the path resolution behaviour in HTML.

Make sure to check your Github as i made a Pull request

When you specify a path in the src attribute of an img tag without a leading /, the browser interprets it as a relative path. By removing the /, you made the path relative to the current page's URL instead of an absolute path.

• For example, if your page URL is https://www.example.com/recipes/omelette.html and the original src attribute was src="/assets/images/image-omelette.jpeg", the browser would look for the image at https://www.example.com/assets/images/image-omelette.jpeg.
• By removing the leading / and having src="assets/images/image-omelette.jpeg", the browser now looks for the image relative to the current page's URL, resulting in https://www.example.com/recipes/assets/images/image-omelette.jpeg.

So, removing the / changed the path resolution to be relative to the current page, which likely resolved the issue of the image not loading.

Congradulations with the challenge!

With the image you just need to change a path. You have this now <img id ="img" width ="602px" height="100%" position="absolute" src="/assets/images/image-omelette.jpeg" alt="Burger logo">. And the only thing to change is a dot. Like this: <img id ="img" width ="602px" height="100%" position="absolute" src="./assets/images/image-omelette.jpeg" alt="Delightful omlette you will have">

Also, it would be much easier for you to use a little bit more semantic markup, and learn positioning techniques. Try with this one to make something like:

<main> <article> <the rest of the code> </article> </main>

then you can give the main a display of grid and place-items: center. And your article will be perfectly centerd all the time! You then can add a padding inside the main to give some air at the top and bottom;

You can even go further and give a display grid to the article. With this you will not have to position the image absolut.

So, learn more about semantics, grid, flex and semantic classes naming and you will very soon succeed!

Good luck on your way