Inside the head element add the link element for the custom font: Unit3/6


#1

Aufgabenstellung
Use a custom-font.

1) 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.
2) In main.css, inside the .jumbotron h1 selector, set font-family to 'Shift', sans-serif

I guess I have troubles to put that link into the right spot.

My html-Code

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

My 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;
        font-family: 'Shift', sans-serif;
    }
    .jumbotron p {
    color: #fff;
    font-size: 20px;
    }

Thanks for helping.

Second Problem: Unit3/9
1) Make a new CSS rule that selects the h3 element inside <div class="learn-more">..</div>
2) Set font-family to 'Shift', sans-serif
3) Set the font-size to 18px
4) Set the font-weight to bold

html-code

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

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

Maybe my problems are similar. It's both with fonts.


#2

The shift.css link looks perfect. The problem is likely the link to font.css. There is no file by that name available to us in this exercise.

The problem with your second exercise is that you have removed the link to main.css. Without that none of your CSS rules are being applied. You should be able to see evidence of that in your web preview window.


#3

The shift.css link looks perfect. The problem is likely the link to font.css. There is no file by that name available to us in this exercise.

(But I just copied the link given in the exercise...)
-> Sorry, I missunderstood. I'm no english native speaker.
When the missing link is the problem, how could I complete the exercise?

The problem with your second exercise is that you have removed the link to main.css. Without that none of your CSS rules are being applied. You should be able to see evidence of that in your web preview window.

Thanks, I could fix that with your help. :wink:


Index.html FONT LINK
#4

You should delete:

<link href="font.css" rel="stylesheet">

Index.html FONT LINK
#5

I've got everything in place yet...........It's always placement or something needs deleting...Already tried deletion tactic. Need a visual since there's isn't one present.


#6

Inside the head is the perfect title because it's in my HEAD...........The text is straight but same error message. What the correct posture for the material.


#7

I'm Stuck with add the link element for the custom font.. I've tried all the proposed answers that I've seen ....NOTHING but the same error message.
No need to continue if it's wrong and 0 answers
How is this constructed? I've changed it upon request I'm leaving it alone before I totally lose my place


#8

When you are ready, we'll troubleshoot this systematically.

The first thing that I would like to see is the <head> ... </head> element.

If you need it: How to post code in this forum.