help

Question

I really don't understand what i me doing wrong i need to ad the google font to the first level headings h1 but keep getting error

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans|Lato' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <style type=text/css>
      h1 {
font-family: 'Lato', sans-serif;
}
    </style>
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

css/main.css

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

Answer 1 · 2016-02-02T16:05:54Z

February 2, 2016 4:05pm

Hey Harpreet,

your code is actually perfectly fine. I think it's just not passing the challenge because the challenge wants you to change the h1's font-family in the external main.css file. So you just have to switch the tab and add the line you already wrote in your internal stylesheet there.

And you also made a small mistake in your internal stylesheet because you forgot to write quotes around the type attribute's value "text/css".

h1 {
    font-family: 'Lato', sans-serif;
}

Answer 2 · 2016-02-02T20:05:03Z

February 2, 2016 8:05pm

wow thanks so much I did not even see the tab for main.css thanks a lot

Welcome to the Treehouse Community

Looking to learn something new?

harpreet (jasmijn) kaur

harpreet (jasmijn) kaur

help

2 Answers

Tobias Helmrich

Tobias Helmrich

harpreet (jasmijn) kaur

harpreet (jasmijn) kaur

Tobias Helmrich

Tobias Helmrich