CSS styling: 6 jumbotron fonts


#1

This what my HTML looks like:

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

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

I cant figure out what i am doing wrong :S
Hope somebody can help me


#2

That link is bad. If you try to follow it you will see that it leads to an error. Double check that and let me know if using the correct link solves the problem.


#3

I'm in the same boat. But I just copy and pasted the link provided in the tutorial? But my code looks like yours and it won't accept it as well.


#4

Hi @dbanks1984, to troubleshoot this exercise, I need to see two things:

  1. all of the head element
  2. all of the main.css file

#5

I figured it out.

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

you need to take it out of this part and make a new entry alone from this one:

.jumbotron h1 {
font-family: 'Shift',sans-serif}

I appreciate the offer to help! Good to know there are people out there who care!


#6

I'm glad that you passed the exercise, but I must say that what you did should not make a difference unless there is something wrong earlier, like a missing bracket, colon or semicolon.


#7

You're missing a semi-colon right here..
font-family: 'Shift',sans-serif;


#8

Why do we need a new element? Aren't we manipulating the same information? Is it simply because the exercise asks us too?


#9

@kyleloskutoff, @jeroeh, @jamesthedoor, @dbanks1984, @algrfalls10,

Read
= http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page
to understand that it is possible,
due to
=down-load-issues=,
=cpu-power-for-parsing=
or
=swapping-because-of-memory-shortage=
that you run into some difficult to explain situations


#10

My problem is solved :smile:
I didn't had a s on the end of the link so it didn't worked