Innovation Cloud .main img


#1

I can't for the life of me get the svg to shrink to its proper size (as in the finished project). What am I doing wrong? Here's
what my project looks like so far...



my stylesheet:

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

.container {
    margin: 0 auto;
    max-width: 940px;
    padding: 0 10px;
}

/* Header */
.header {
  height: 900px;
  text-align: center;
  background-color: black;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg);
}

.btn {
  color: white;
  background: black;
  border: 2px solid black;
  text-decoration: none;

  
}  

.header .container {
    position: relative;
    top: 200px;
}

.header h1 {
    font-size: 80px;
    line-height: 100px; 
    margin-top: 0;
    margin-bottom: 80px;
  color: white;
}

@media (min-width:850px) {
    .header h1 {
        font-size: 120px;
    }
}

.header p {
    font-weight: 500;
    letter-spacing: 8px;
    margin-bottom: 40px;
    margin-top: 0;
  color: white;
  font-size: 20px
}

.btn:hover {
    background: #117bff;
    cursor: pointer; 
    transition: background .5s;  
}


/* Nav */
.nav ul li {
    list-style: none;
    margin: 0 auto; 
    padding: 30px 0;
    text-align: center;
  text-decoration: none;
  background: white;
  display: inline-block;
  color: black;
  
}


.nav {
  text-align: center;
  text-decoration: none;
  display: inline;
  background: blue;
  
}


/* Main */
.main .container {
    margin: 80px auto;
  color: white;
  text-align: center;
  
}


.main img {
    float: left;
  display: inline-block;

  
}


/* Jumbotron */
.jumbotron {
    height: 600px; 
    text-align: center;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg);
  margin: auto;
  
  
}

.jumbotron .container {
    position: relative;
    top: 250px;
  width: 500px;
}


/* Footer */
.footer { 
    font-size: 14px;
  background: black;
  height: 20px;
  
}

/* Media Queries */
@media (max-width: 500px) {
  .header h1 {
    font-size: 50px;
    line-height: 64px;
  }

  .main .jumbotron {
    padding: 0 100px;
    margin: auto;
  }

    
.jumbotron h1 {
  color: white;
  
  
}

and my html:

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
    <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
       <h1>Welcome</h1>
        <p>So, you want to be part of the greatest conference on the planet?</p>                          
        <a href="#" class="btn">Learn More</a>
      </div>
    </div>
    <div class="nav">
      <div class="container">
        <ul>
          <a href="#"><li>Register</li></a>
          <a href="#"><li>Schedule</li></a>
          <a href="#"><li>Sponsors</li></a>
          <a href="#"><li>About</li></a>
          <a href="#"><li>Contact</li></a>
        </ul>   
        
      </div>
    </div>
    <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg"/>
    <div class="main">
      <div class="jumbotron">
      <div class="container">
        <h1>What are you waiting for?!</h1>
        <a href="#" class="btn">JOIN</a>
        

        <h2>The Innovation Cloud Conference</h2>
        <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
        <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
         <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
  </div>
   </div>
    </div>
    <div class="footer">
      <p>&copy 2016</p>
    </div>

    
  </body>
</html>

I apologize for the long post, but I would really like some insight from the codecademy pros. Any help will be greatly appreciated.
Thanks in advance,
W3RD!


#2

I don't know if there is a more "official" way that you're supposed to do it, but I just resized the image.


#3

Thanks for the reply. I thought about resizing the image, but I know that's not what they did to the file... I looked up the source file and found that instead of resiszing the image and then adding it to the html, they wrote:

 <div class="main">
       <div class="container">
       <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" height="128" width="196"/>

It's crazy how you could do one thing in so many different ways!

Thanks again, @devace24788, I really appreciate it.
W3RD!