3: Jumbotron Problems


#1

Can somebody look at this code: This is main.css

    .nav a {
      color: #5a5a5a;
      font-size: 11px;
      font-weight: bold;
      padding: 14px 10px;
      text-transform: uppercase;
    }
    
    .jumbotron {
      background-image:url('http://goo.gl/04j7Nn');
      height: 500px;
    }
    
    .jumbotron h1 {
      color: #fff;
      font-size: 48px;  
      font-family: 'Shift', sans-serif;
      font-weight: bold;
    }
    
    .jumbotron p {
      font-size: 20px;
      color: #fff;
    }
    
    .learn-more {
      background-color: #f7f7f7;
    }
    
    .learn-more h3 {
      font-family: 'Shift', sans-serif;
      font-size: 18px;
      font-weight: bold;
    }
    
    .learn-more a {
      color: #00b0ff;
    }

    .nav li {
        display: inline;

    .jumbotron .container {
            position = relative;
            top = 100px;
    }

    }

#2

You have one of your curly braces in the wrong place. Can you see it now?


#3

Not really. Do I have too many curly braces, or... How is it in the wrong place. Is everything else fine?


#4

Can you see that you have two } at the bottom of your file? One of those belongs with .jumbotron .container, but what about the other one? If you start looking at your other CSS rules you will see that .nav li is missing its }.

I haven't tried your code out but it looks okay. Let me know if you still have a problem.


#5

Sorry, but I still don't get it...


#6

That CSS rule is missing its }.


#7

Okay, here is the full code as of currently:

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

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

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}
.jumbotron .container {
    position = relative;
    top = 100px;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}
.nav li {
    display: inline;
}

#8

That looks perfect.

If you are still getting an error:

  • maybe the browser is stuck - try reloading/refreshing the webpage
  • maybe the exercise is stuck - try the Reset Code button and then paste your code back in.

#9

I did the reset one! IT WORKED!!!!! Thank you!