6/10 Font Issue Remains


#1
.jumbotron h1 {
color:#fff;
font-size: 48px;
font-weight: bold;
font-family: Shift, sans-serif;}

Hello-Any suggestions as to why this is generating the error:
"Oops, try again. Set the font-family of the h1 element inside <div class="jumbotron">..</div> to 'Shift', sans-serif". Any suggestions would be appreciated. Thank you.


#2

I would like to see the <head> ... </head> element, there may be a typing mistake in the shift.css link.


#3

I got totally the same problem here.

Followings is the code of "Index.html." ( I removed the "<" to show the code).

Could someone help me on it!

Thank you

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


#4


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







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



#5

Now we can see that you have managed to lose your link to the main.css file. Your .html page is not processing any of your CSS code now -- do you see that in your web preview?


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

Is this what it should look like? I added it in and have the same error. I appreciate your help.


#7

Yes, that part is perfect now. If you are still seeing an error we must look elsewhere.

Could you post all of your CSS code? We are looking for missing or extra: {}, ; or :


#8
.nav a {color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding-bottom: 14px;
padding-left: 10px;
padding-right: 10px;
padding-top: 14px;
text-transform: uppercase;}
.jumbotron{
height: 500px;}
background-image: url('https://goo.gl/04j7Nn');
.jumbotron h1 {
color:#fff;
font-size: 48px;
font-weight: bold;
font-family: Shift, sans-serif;}
.jumbotron p {
color: #fff;
font-size: 20px;}

#9

Ahhh, that is really squished ... let it breath a bit :smile:

Make it easy on yourself, you'll spot the problems quicker that way. Try these tips:
- put a blank line between each CSS rule
- put each property/value pair on a line by itself
- put the closing } on a line by itself

Those are all personal choice, but they help my eye/brain communication.

Example

selector { 
    property: value;
    property: value;
}

selector {
   property: value;
}

You have one misplaced curly bracket. Let me know if you can't find it.


#10

the background image in outside of the jumbotron class. This might help.

Also it helps if you format the code like this:

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

.jumbotron h1 {
 ...... so on!

this will help with finding errors


#11

it should be

  font-family: 'Shift', sans-serif;}

this should fix your problem.


#12

Thank you! I will take your suggestion and incorporate it into future learning. As this is my first attempt at this I find myself being perhaps overly cautious and not adding spaces, etc for the fear of "breaking" something. I appreciate the help. After several days due to yours and @cloudrunner68456 suggestion I having finally passed level 6. Thank you both.


#13

your more than welcome.

don't forget to close the ticket (tag as solved)


#14
I'm getting the same error and mine looks to be perfect. please give me a hand! Here is what my CSS looks like.

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

#15

I agree that it looks perfect. We'll need to look elsewhere for the problem. What does your <head> ... </head> look like? Maybe you have a missing or extra link element or maybe there is a type in one of them?


#16

It's not letting me post what my head looks like.


#18





#19

On the editor's toolbar, there is a button that looks like </>. Select all of your code and then click that button.


#20

I fixed the problem (took your advice on the spelling error) I had "h1" spelled with the letter "l" instead of number "1". Thanks for your help and sorry about the mess above.


#21

I did not post any questions but I thank and appreciate you for you and everyone who takes the time to help us newbies! As a note to CodeAcademy for us beginners, they say paste it one way and then someone in these forums has to show the correct formatting. It makes it frustrating at times and leads to so many of us getting stuck on what should be an easy section. No hate for CA though, they provide this awesome resource for FREE and open up so many doors for those who would not otherwise have the resources. God bless them and everyone here devoting their time to help.