I don't know why an image isn't showing in the 'Responsive Web Design Project 1'

I’ve tried inserting the image in different ways and it still isn’t working. How do I get this image to show up in the html window (i’ve tried the css window too).

Here is my code:

<main id="main">
  <title>Volodomyr Zelenskyy</title>
  <div id="img-div">
    <img src="/Projects/Vol.jpg" alt="Picture of Ukraine president">
  <div class="item1"><h1>A Tribute to Volodymyr Zelenskyy</h1></div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>

And here is my CSS window:

body {
  font-family: system-ui;
  background-color: gray;
  width: 100%;

h1 {
  text-align: center;
  color: white;
#main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;

    "header header header"
    "advert content content"
    "footer footer footer";

#img-div {
  background-color: pink;
  color: white; 


.item1 {
  grid-area: header;
  background-color: salmon;

.item2 {
  grid-area: advert;
  background-color: purple;

.item3 {
  grid-area: content;
  background-color: blue;

.item4 {
  grid-area: footer; 
  background-color: orange;

Where is your code? Somewhere like codepen or in a IDE like VS Code, running on your localhost?

In the “Responsive Web Design”, “Projects” page there is a link to CodePen.io.

My code is in there.

I figured it out. I upgraded to pro with CodePen.io and how I can upload and use images.

I’ve upgraded to Pro for the same reasons. Sometimes you can put an image on your CodePen website from another url, but it is much harder to modify it. I like being able to download the image, and resize or scale it in the GIMP, then upload it to my Asset page.

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