Help with 6/10 - make a website: CSS Styling


#1

this is my 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>

this is my main.CSS

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

What am I doing wrong? this instructions are:
01. In index.html inside the head element add this link element: . This is a CSS file that loads up the custom font for use in the page.
02. In main.css, inside the .jumbotron h1 selector, set font-family to 'Shift', sans-serif

but when I click Save & Submit it says:
Oops, try again. Set the font-family of the h1 element inside

..
to 'Shift', sans-serif

Need Help!!


#2

Hi oldphones,

You are missing the link to your main.css file. Without that, none of your CSS rules are active. You should be able to see that in your web preview window.


#3

how would I add the link to the main.css file?


#4

never mind! I managed to figure it out! Thank you!!


#5

That's great, good work, saves me some typing :smile:


#6

How do you figure it out? I think I linked main.css but there is same message of yours.


#7

Hi @gigajumper97473,

Do you know for sure that you've linked your main.css file or do you only think you have? If you show me your whole head element then I can confirm your links.


#8

Thank you for reacting.
It's weird. I submitted code by my laptop yesterday. There is message 'Oops, try again. Set the font-family of the h1 element inside'
Today, I just submitted same code by my company's desktop. It passes..!


#9

same to me, it appears 'Oops, try again. Set the font-family of the h1 element inside''. My code is right (i hope haha), i dont understand why its not working. :frowning:


#10

how did you manage to figure it out? I'm still confused!


#11

If you want someone to have a look, copy/paste these two things:
- all of the head element
- all of the main.css file


#12

Index.html

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

Main.css

   

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

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

#13

Where did the link to your main.css go? Without that link, none of your CSS rules are being processed. You must be able to see that in your web preview window?


#14

I found the solution!

I was replacing the link "<link href="main.css" rel="stylesheet">" for <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">..

But it's not to replace, it's to add. I just did and the code was accept.

Thx for help.


#15