In CSS Learn More Heading, it keeps on saying I need to adjust my 'Shift', sans-serif


#1

Here is my entire CSS code:

.nav a {
font-weight: bold;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
padding-top: 14px;
text-transform: uppercase;
}
.jumbotron {
background-image: url('https://goo.gl/04j7Nn');
height: 500px;
}

.jumbotron {
color: #fff;
font-size: 20px;
}
.jumbotron {
color: #fff;
font size: 20px;
}
.jumbotron {
font-family: 'Shift',sans-serif;
}
.jumbotron {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift',sans-serif;
font-size: 18px;
font-weight: bold;
}


#2

I am having the exact same problem and my code is identical to yours :frowning:


#3

Those 5 different jumbotron selectors make me think that you've missed a bit of the instructions.

In exercise 4, you should have written one to select the h1 elements in the jumbotron div.

.jumbotron h1 {
  ...
}

In exercise 5, you should have written another one that selects the p elements in the jumbotron div, like this:

.jumbotron p {
  ...
}

In exercise 7, you should have written one to select the entire learn-more div:

.learn-more {
  ...
}

I would recommend revisiting those exercises and get all of your selectors straightened out. That might just solve the problem but in any case, please come back and tell us how it turned out.


#4

I tried to do revisit the exercises you mentioned... the code still will not work. Is there anything else I should attempt to do?


#5

Let's see your updated code.


#6

How does it look?

.nav a {
  font-weight: bold;
  padding-bottom: 14px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 14px;
  text-transform: uppercase;
}

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

.jumbotron h1 {
   color: #fff;
   font-size: 48px;
   font-weight: bold;
}

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

.jumbotron {
    font-family: 'Shift',sans-serif;
}

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

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

#8

This looks much better. We should check your index.html file next.

I should have mentioned this before, but have you looked at this yet?


#9

I haven't looked at my index.html much yet, but here it is:

<!DOCTYPE html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.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>

    <div class="jumbotron">
      <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>

#10

The problem is here:

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
  </head>

You have accidentally removed the link to your main.css file.

Without that link, your index.html file doesn't know that main.css exists. This means that none of your CSS rules are being implemented. You should be able to see that in the web preview window, check your nav items -- are they all uppercase?