Add Fonts. Tast 3 of 3.

Question

Hi! For some reason my code isn't validated by your system, however it looks like it's all entered correctly.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>PixelGeek | Designer </title>
    <link rel="stylesheet" href="Css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One" rel="stylesheet">
    <link rel="stylesheet" href="Css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="Logo">
      <h1>PixelGeek</h1>
      <h2>Designer</h2>
    </a>
    <nav>
      <ul>
        <li><a href="index.html" class="selected">Porfolio</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>Experementation 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 88'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>Created shapes using repetition.</p>
            </a>
          </li>
       </ul>
      </section>
      <footer>
            <img src="img/twitter-wrap.png" alt"Twtter Logo.">
            <a href="https://www.facebook.com/profile.php?id=100002435378648"><img src="img/facebook-wrap.png" alt"Facebook Logo."></a>
        <p>&copy; 2014 Pixel Geek.</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;
}

h1 {
  font-family: 'Changa One', sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

Answer 1 · 2016-10-02T12:08:01Z

October 2, 2016 12:08pm

Actually, your css code is right, at least the part which you should add to it, but there are a few errors in your html (and to be honest, I don't know why you've changed it, it's not the point of this challenge).

So... in your css:

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

Here's additional space, it should be:

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

And now, your html:

  <head>
    <meta charset="utf-8">
    <title>PixelGeek | Designer </title>
    <link rel="stylesheet" href="Css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One" rel="stylesheet">
    <link rel="stylesheet" href="Css/main.css">
  </head>

Here you have your "href" links wrong, it should be "css/...", it's case sensitive. So it should be:

  <head>
    <meta charset="utf-8">
    <title>PixelGeek | Designer </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>

Also, you have missed equal signs in your images descriptions inside your footer:

    <footer>
            <img src="img/twitter-wrap.png" alt"Twtter Logo.">
            <a href="https://www.facebook.com/profile.php?id=100002435378648"><img src="img/facebook-wrap.png" alt"Facebook Logo."></a>
        <p>&copy; 2014 Pixel Geek.</p>
      </footer>

Should be:

   <footer>
            <img src="img/twitter-wrap.png" alt="Twtter Logo.">
            <a href="https://www.facebook.com/profile.php?id=100002435378648"><img src="img/facebook-wrap.png" alt="Facebook Logo."></a>
        <p>&copy; 2014 Pixel Geek.</p>
      </footer>

Welcome to the Treehouse Community

Looking to learn something new?

Vsevolod Mestovski

Vsevolod Mestovski

Add Fonts. Tast 3 of 3.

1 Answer

Marcin Lubke

Marcin Lubke

Vsevolod Mestovski

Vsevolod Mestovski