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

HTML-CSS
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>
  <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>
</main>

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;
  grid-template-areas:

    "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;
}
2

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

3

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

My code is in there.

4

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

5

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.

6

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