B-a-s-s project - Image not showing

<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/web-ext/projects/html-css-prj_bass

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
Hi there,

So I’m at section 4 of the Bass project, I have created my 3 supporting sections with their corresponding images, however, my image for supporting-3 is not showing. I am just seeing an empty box. I have reviewed my code several times now and I cannot understand why I’m not able to see this image.

The image link is as follows as shows fine in my browser window.
https://s3.amazonaws.com/codecademy-content/projects/bass/connect.svg

Please see my code below and screenshot as attached, and please help and advise. Thanking you :slight_smile:

```
<div class="jumbotron">
  <div class="container">
    <div class="header">
    	
      <div class="row">
        <div class="col-md-3">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/bass/logo.svg" class="logo" width="106" height="75"/>
        </div>
    		
        <div class="col-md-9">
          <ul class="pull-right">
            <li><a href="#">Features</a></li>
            <li><a href="#" class="btn btn-default">Download</a></li>
          </ul>
        </div>
    
      </div>
    </div>
    
    <div class="main">
      <div class="row">
        <div class="col-md-7">
          
          <h1>Turn Up The Bass</h1>
          
          <p>From the newest releases to classic albums, we have the best music for you to enjoy.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="supporting-1">
    <div class="col-md-6">
      <h2>Music Just for You</h2>
      <p>Listen to your favorite artists and albums, and make playlists of your favorite songs. Get recommendations based on your tastes to discover new music.</p>
    </div>

	</div>
</div>
</div>  

<div class="supporting-2">
<div class="container">
       <div class="row">
					<div class="col-md-6">
            <h2>Listen Everywhere

Take your music with you everywhere you go. Listen for free for free on any device - mobile, tablet, and your computer.

         <div class="col-md-6">
           <img src="https://s3.amazonaws.com/codecademy-content/projects/bass/everywhere.svg" width="450" height="300"/>
         </div>

			</div>
</div>
</div>   
<div class="supporting-3">
  <div class="container">
       <div class="row">
					<div class="col-md-6">
            <img class="https://s3.amazonaws.com/codecademy-content/projects/bass/connect.svg" width="450" height="300"/>
         </div>
         
         <div class="col-md-6">
           <h2>Connect with Others</h2>
           <p>Find the right songs for the right occassions. Let your friends know what you're listening to, and connect with others who share the music you love.</p>
         </div>

			 </div>
</div>
</div>    

html, body {
background-color: rgb(22, 23, 24);
margin: 0;
padding: 0;
}

/Jumbotron/
.jumbotron {
height: 560px;
background: url(https://s3.amazonaws.com/codecademy-content/projects/bass/bg.jpg) no-repeat center center;
background-size: cover;
}

.jumbotron img {
vertical-align: middle;
}

.btn-default {
background: rgb(255, 0, 61);
color: #FFF;
}

.pull-right {
float: right;
}

/Header/
.header li {
display: inline-block;
margin-left: 13px;
margin-top: 40px;
}

/Main/
.main {
color: #FFF;
}

/Supporting/
.supporting-1 {
color: #FFF;
}

.supporting-2 {
color: #FFF;
}

.supporting-3 {
color: #FFF;
}

<do not remove the three backticks above>
`<img class="url of image">

class to tell <img> what the source of the image is?

Thanks.

I’ve been using <img src="url of image"> all along, why in this case would <img class="url of image"> be more appropriate?

Thanks again.

:joy::joy::joy:

I get what you mean now, I had been using “class” instead of “src”…thanks.