6. Jumbotron: Oops, try again. Inside the head element add the link element for the custom font


#1

I have been struggling with this one for a while now and I can't understand what I am doing wrong. This are my Index.html and main.css

<html>
  <head>
   <link href="font.css" rel="stylesheet">
<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">
        <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>

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

#2

Hi try to put a , between 'Shift' and sans-serif

'Shift', sans-serif

#3

Hi, thanks for replying. I just did as you said. But I am still receiving "Oops, try again. Inside the head element add the link element for the custom font"


#4

Try to change font.css to Main. css in the <head>


#5

... but there already is a main.css there


#7

Thanks wizmarco! I finally managed to solve it!

And thank you everyone for replying and helping.


#8

@wizmarco, you were on the right track. Next time you can suggest to just remove the font.css file because it was only an example not an actual file that is available for us to use. :green_heart: