Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Customizing Colors and Fonts Add Fonts

Posted by Tony Bourne
Tony Bourne
2,432 Points

Pick Fonts and Set Relative Units

I'm sure my work is correct, but I keep on getting an error message saying my code took too long to run.

Please Help.

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleleapis.com/css?family=Lato:700" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </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 {
  font-family: 'Lato', sans-serif;
  margin: 15px 0;
  font-size: 1.7em;
  }

h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

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

3 Answers

millogt
millogt
7,644 Points
millogt
millogt
7,644 Points

Seems to be a problem with the google font (or link). Don't really get the problem but when I picked another one it completed the task in a second. Just try changing it or check if its the right link?

Good luck!

Tony Bourne
Tony Bourne
2,432 Points
Tony Bourne
Tony Bourne
2,432 Points

Hello Girt.

I tried at least 3 of 4 google fonts and they still don't run. Is there another site similar to Google Fonts that i can use?

Cheers!

millogt
millogt
7,644 Points
millogt
millogt
7,644 Points

I'm not a specialist on google fonts as Im just a student here as well. I used this for google font in my html file:

     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Then use this as your CSS task, I noticed u had set font-size to 1.7em instead of 1.75em as asked for the task:

a {
  text-decoration: none;
}

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

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

h1 {
  font-family: 'Roboto', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  }

h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

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

This worked for me so should work for you? Good luck!