Jumbotron font error


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

#22

<!DOCTYPE html>
<html>
 <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
 </head>
  <body>
    <div class="nav">
      <div class="container">

in index html?


#23

Yes, perfect!

Now that we have that sorted we can focus on any problems in the other file.


#24

we have to be of somewhere now and this is getting pretty hopeless thanks for attempting to help me :smile: bye!


#25

Do you understand what we just did with the HTML file there? It won't be hopeless as long as you understand what we are doing.