CSS Styling Step 6 Jumbotron: Fonts


#1

@albionsrefuge
I would like to reach out to you personally due to the fact that i am encountering problems and am being confused. i would just like to show you what i have seen so that you can outrightly explain.

ALL HTML CODE:
taken from index.html

<!DOCTYPE html>
<html>
  <head>
  <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link href="main.css" rel="sty>sheet">
  </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>

all of Css code:
From main.css

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

Tutorial states the following:
Great! The text inside the large feature section stands out.

Let's make the h1 text stand out more by changing its font. Custom fonts can be loaded from CSS, like this:

<!DOCTYPE html>
<html>
  <head>
     <link href="font.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
  </head>
  ...
</html>

Inside the head element are two link elements. The order of these link elements matters.

The browser first sees the link for the custom font font.css, and makes the font available to use in the page.
Next the browser sees the link for main.css. Since the browser now knows about the custom font, we can use it from main.css to style elements.
Instructions
In index.html inside the head element add this link element: <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">. This is a CSS file that loads up the custom font for use in the page.
In main.css, inside the .jumbotron h1 selector, set font-family to 'Shift', sans-serif

After i have done so, i get a error message like so:

Oops, try again. Set the font-family of the h1 element inside <div class="jumbotron">..</div> to 'Shift', sans-serif

assistance would be helpful
:slightly_smiling:


#2

Hi you just forgot to put ";" after font-size:48px and font-weight:bold


#3

This is exactly what I would say! :slightly_smiling: