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


#1


https://www.codecademy.com/courses/web-ext/projects/html-css-prj_bass


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:


<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    
    <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="container"> 
    	<div class="row">
    		<div class="col-md-6">
        <img src="https://s3.amazonaws.com/codecademy-content/projects/bass/you.svg" width="450" height="300"/> 
        </div>
        
        <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
</h2>
                <p>Take your music with you everywhere you go. Listen for free for free on any device - mobile, tablet, and your computer.</p>
              </div>
             
             <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>    
      
  </body>
</html>

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;
}
<img src="//codecademy-discourse.s3.amazonaws.com/original/5X/a/6/6/d/a66d5174c7ed0cda0d1d42b89fbc1f6a0788e9c7.png" width="690" height="385">


#2

`<img class="url of image">

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


#5

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.


#6

:joy::joy::joy:

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


#7