Jumbotron 3/10 background-image troubles!


#1

Hi!

I'm a little bit stuck on page 3/10.

No matter what I do I seem to get the message: "Oops, try again. Set the background-image to url('https://goo.gl/04j7Nn')"

Here's my code so far in the main CSS.

.nav a{
    color: #5a5a5a;
    font-size:  11px;
    font-weight: bold;
    padding-top:  14px;
    padding-bottom: 14px;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
}

.jumbotron {
    background-image: url('https://goo.gl/04j7Nn');
    height: 500px;
}

Any help would be so appreciated! :smile:


#2

had same problem earlier. do this:
.jumbotron {
height: 500 px;
background-image: bla bla;
.nav a {
and so on. do not copy and paste this in.


#3

thanks for your help but it's still not working! I'm sure I'm doing something really obvious wrong

I've swapped it around like in your example to read like this, but the same error message is still popping up! Argh!

.jumbotron {
background-image:url('https://goo.gl/04j7Nn');
height: 500px;
}

.nav a{
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
text-transform: uppercase;
}


#4

just an idea - should there be some reference to jumotron in my index.html code?

I don't think there is in mine, could that be the problem?


#5

think it is bugs. its not working in the lessons farther down either.


#6

Is there a trick to get past it if there's a bug?


#7

Your CSS is perfect.

Try either of these:

  • reload/refresh the web page
  • use the Reset Code button

#8

Ahhh thank you! I think it's my HTML that is the problem.

Should my jumbotron div look different?

<div class ="jumbotron">
</div>

<html>
  <head>
    <link href="main.css" rel="stylesheet">
  </head>
  
  <body>
    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="#">Airbnb logo</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    
      <div class="container">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
      </div>
    </div> 

    <div class="learn-more">
      <div>
        <div>
            <div>
            <h3>Travel</h3>
            <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
            <p><a href="#">See how to travel on Airbnb</a></p>
          </div>
          <div>
            <h3>Host</h3>
            <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
            <p><a href="#">Learn more about hosting</a></p>
          </div>
          <div>
            <h3>Trust and Safety</h3>
            <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
            <p><a href="#">Learn about trust at Airbnb</a></p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

#9

Yes it should.

It should not be empty and stuck up above what are supposed to be the beginning lines of your HTML document.

Your very first lines should look like this:

<!DOCTYPE html>
<html>
  <head>

I see that you have most of the code that is supposed to be in the jumbotron down here:

      <div class="container">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
      </div>
    </div>

#10

im suck on this can u explain it for me please


#11

I think I can, but you need to tell me exactly what it is that you are having doubts about.


#12

i figured it out now im just having trouble with number 6 jumbotron: fonts


#13

Could I get you to start a new thread for that then?

Post all of your CSS code,
The exercise number,
And your error message.


#14

idk how tho im still a little new at this


#15

I see your dilemma, there doesn't seem to be a link to start a new thread on this page.

Change over to http://discuss.codecademy.com/c/make-a-website/web-beginner-en-4lw13 and then you'll see the + New Topic button.