Help with Jumbotron Fonts


#1

Could someone please render me some assistance with Jumbotron: Fonts, Here is my index.html code:











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


And here is my main.css code:

.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 h1 {
color: #fff;
font-size: 48px;
font-weight: bold;
}
.jumbotron p {
color: #fff;
font-size: 20px;
}

And this is the exercise:

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

Nothing that I do works, please help!!!!


#2

Look at this source to explain how to fix your text to look like code.


#3

Also, it says in the instructions to set font-family to shift, sans-serif. Yet your jumbotron h1 tag still doesn't have that written anywhere in it.

You need to add the font-family: 'Shift' sans-serif; to your code. or am I wrong?


#4

lolman you're absolutely correct!!! But it's still not working....here is my revised codes:
.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 h1 {
color: #fff;
font-size: 48px;
font-weight: bold;
font-family: 'Shift" sans-serif;
}
.jumbotron p {
color: #fff;
font-size: 20px;

and here is my index.html:












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


still not working. HELP!!!


#5

Found it,

it's ( 'Shift', sans-serif )

Need a comma.


#6

I'm on Make a website, css styling, Jumbotron: Fonts, lesson six


#7

Thank you for your assistance lolman, your help gave me a different error message, and I was able to figure the problem out. Thanks!!!!!


#8

3 posts were split to a new topic: Jumbotron: Fonts - I don't understand what's wrong with my css code