Jumbotron font error


#1

everything seems to be sound this is the error I am getting:
Oops, try again. Set the font-family of the h1 element inside <div class="jumbotron">..</div> to 'Shift', sans-serif

Here is my HTML code:

<!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>

and my CSS code:

.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;

#3

You've deleted the link to your main.css file. Without that, none of your CSS rules are being applied.

Don't forget about step 2:

In main.css, inside the .jumbotron h1 selector, set font-family to 'Shift', sans-serif


#4

what is the difference between them - the links?


#5

Do you mean between shift.css and main.css?


#6

no whoops I mean font .css and main.css


#7

Have a look at your main.css file -- see all of the CSS rules that you have been writing so far?

Have a look at the shift.css file (follow the link with your browser) -- it has information about the Shift font that we want to include in our page.


#8

.jumbotron {
background-image: url('https://goo.gl/04j7Nn');
height: 500px;
}
.jumbotron h1 {
color:#fff
font-size:48px;
font-weight:bold;
font-family:'Shift', sans-serif
}
.jumbotron p {
color:#fff;
font-size:20px;


#9

Okay, well, font.css was just an example. This project doesn't have a file called font.css for us to use.


#10

I am pretty sure there were 2 links what is the difference?


#11

Yes there should be two links, one to main.css and one to shift.css.

One contains the CSS rules that you are writing and one contains information about the font called Shift.


#12

this ism my currant "index.HTML":

<!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>

and css.

.jumbotron {
  background-image: url('https://goo.gl/04j7Nn');
  height: 500px;
}
.jumbotron h1 {
     color:#fff
    font-size:48px
    font-weight:bold
    font-family:'Shift' sans-serif
}
.jumbotron p {
    color:#fff;
    font-size:20px;

could you tell me what to do next? I have had a look at text file and I do not know what to do with it or what to do next


#13

How to post code in this forum.


#14

and I am on step 6 in this project.


#15

You must make sure that the link to your main.css file is present. Without that, none of your CSS rules are being applied.

In your .jumbotron h1 { ... }, all of the semicolons are missing.


#16

done that still doesn't accept it


#17

Show me again :smile:


#18

html code:

<!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>

css code:

.jumbotron {
  background-image: url('https://goo.gl/04j7Nn');
  height: 500px;
}
.jumbotron h1 {
     color:#fff;
    font-size:48px;
    font-weight:bold;
    font-family:'Shift' sans-serif;
}
.jumbotron p {
    color:#fff;
    font-size:20px;

#19

You are really resisting adding the main.css link! :smile:

Put it in here:

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

Put it after the shift.css link.


#20

this what you mean?

.jumbotron h1 {
     color:#fff;
    font-size:48px;
    font-weight:bold;
    font-family:'Shift'<head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css"rel="stylesheet">
 </head> sans-serif;

:rage: if it isn't!


#21

Oh dear, not quite. This is what I mean:

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