The challenge ask me to choose a font, I used the example from the video. It says it took to long to run?

Question

I use the example font that was provided in the video and it says it took to long to run. I am not sure how to fix this problem.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.goggleapis.com/css?family=changa+one|open+sans=400italic,700italic,400,700,800'rel='stylesheet'type='text/css'>
    <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, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

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

Answer 1 · 2017-02-20T16:54:47Z

February 20, 2017 4:54pm

Hi Ethel. At the end of your Google Font link you have: type="text/css". That attribute is not part of the Google Font link and is asking the browser to load your Google Font as a CSS file. Also it is best practice to leave a space in between attributes. You have:

<link href='http://fonts.goggleapis.com/css?family=changa+one|open+sans=400italic,700italic,400,700,800'rel='stylesheet'type='text/css'>

When it should be:

<link href='http://fonts.goggleapis.com/css?family=changa+one|open+sans=400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>

with a space between the rel and type attributes.

You can put your code in a CSS validator and it will come back as an error without the spaces.

Welcome to the Treehouse Community

Looking to learn something new?

Ethel Canty

Ethel Canty

The challenge ask me to choose a font, I used the example from the video. It says it took to long to run?

1 Answer

Savannah Lynn

Savannah Lynn

Seth Kroger

Seth Kroger