8. Learn More: Heading - need help!


#1

Can someone help me please with Learn More: Heading? :persevere:


#2












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



#3
.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
}
<div class="learn-more">
.jumbotron h3 {
color: #fff;
font-family:'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
</div>

#4

What do I do?!?!?!?!


#5

For one thing, you are going to have to remove the HTML code that you added to your CSS file. These bits:

Do you really mean to select h3 elements in the jumbotron div? Is that what this exercise is asking for?


#6

I think so. I don't know exactly.


#7

This is what it says Learn More: Heading
Nice! Next, let’s make the h3 text stand out more by changing the font.

In index.html, inside

..
are the h3 elements we want to style.

Therefore, we can select this element in CSS like this:

.learn-more h3 {
...
}
Instructions
Make a new CSS rule that selects the h3 element inside

..

Set font-family to 'Shift', sans-serif
Set the font-size to 18px
Set the font-weight to bold

#8

Okay good, so it doesn't want you to select anything in the jumbotron. What it wants is your h3 elements in the learn-more. You will need to change your selector to match that.


#9

So like what? :sweat:


#12

Wait so it wants my

< h3> Host </ h3>?


#13

Well, yes, it wants you to select that h3 element.

You showed me this code:

.jumbotron h3 {
    color: #fff;
    font-family:'Shift', sans-serif;
    font-size: 18px;
    font-weight: bold;
}

There you selected the h3 elements in your jumbotron div. BUT the exercise is not asking for that, it is asking for the h3 elements in your learn-more.

Do you see what you need to change now? -- it's just one word


#14

Maybe tomorrow???????????


#15

3 posts were split to a new topic: 8. Learn More: Heading - need help!