Learn More: Heading


#1

Hello!
I've been stuck on this page for a really long time and cannot seem to find the reason why the error code keeps popping up! Oops, try again. Set the font-family of the h3 elements inside <div class="learn-more">..</div> to 'Shift', sans-serif

this is my 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 {
    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;
    {
.learn-more {
    background-color: #f7f7f7;
}
.learn-more h3 {
    font-family: 'Shift', sans-serif;
    font-size: 18px;
    font-weight: bold;
}

and this is my 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="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>

Please help!!! Thank you :smile:


#9

I cannot figure it out! Losing my mind!


#10

The next code has everything. I don't really know about the activities on codecademy, just helping around. I have tested this on a normal browser and it worked. If you copy the parts you need and it still doesn't work, try the code after this one.

<!DOCTYPE html>
<html>
<head>
<style>
.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;
{
.learn-more {
	background-color: #f7f7f7;
}
.learn-more h3 {
	font-family: 'Shift', sans-serif;
	font-size: 18px;
	font-weight: bold;
}
</style>
</head>
<body>
<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>
			<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>
</body>
</html>

Option 2:

<!DOCTYPE html>
<html>
<head>
<style>
.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;
{
.learn-more {
	background-color: #f7f7f7;
}
.learn-more h3 {
	font-family: 'Shift', sans-serif;
	font-size: 18px;
	font-weight: bold;
}
</style>
</head>
<body>
<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>
			<h3 style="font-family: 'Shift', sans-serif;">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 style="font-family: 'Shift', sans-serif;">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 style="font-family: 'Shift', sans-serif;">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>
</body>
</html>

#11

Option 1 has the styling in the <head>, inside <style>. Option 2 defines the styling inside each tag. You can put as much styling as you want on the tag but I recommend it outside.


#12

your .jumbotron p his closing curly bracket (}) is wrong, if i had to take a guess, i would say that is what caused the error


#13

both options will not work, .jumbotron p his closing curly bracket (}) is wrong, which causes the error, no matter if you internal or external stylesheet


#14

Yup, you are right, I didn't notice that.


#15

If I tell you that the problem is with one of your curly braces in your CSS file, does that help?


#16

Please help?????

Here 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 {
  background-image: url('https://goo.gl/04j7Nn');
  height: 500px;
}

.jumbotron h1 {
    color: #fff;
    font-size: 48px;
    font-weight: bold;
}

.jumbotron p {
    color: #fff;
    font-size: 20px;
}

.learn-more h3 {
    font-family: 'Shift',sans-serif; 
    font-weight: bold;
}
   
.learn-more a {
    color:#00b0ff;
}

This is my index.html

<!DOCTYPE html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <style>
div h1 {
font-family: 'Shift', sans-serif;
}
</style>
  </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>

Please I am stuck....I have tried countless ways to answer this section....and it keeps sending me the same reply

Oops, try again. Set the font-family of the h3 elements inside <div class="learn-more">..</div> to 'Shift', sans-serif


#17

Let's look at the <head> ... </head> element.

<head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
        <style>
            div h1 {
                font-family: 'Shift', sans-serif;
            }
        </style>
</head>
  1. Take out that style element. In this course you are adding all of your CSS rules to your main.css file. You are already applying that font-family property that this exercise is looking for in your .learn-more h3 { ... } rule.
  2. You should also add that same font-family rule to your '.jumbotron h1 { ... } rule.
  3. Add another link in the head element, point it to your main.css file. Without that link, you should be able to see that none of your main.css rules are being applied - yes?