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 Oliver Heaviside
Oliver Heaviside
1,093 Points

It wont recognize my 1.75 em on h1

Help pls the challenge is not seeing the 1.75 em for h1

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Oliver Heaviside | Designer</title>
    <link rel="stylesheet" href="/css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Anton|Fjalla+One|Merriweather:400,400i,700,700i,900,900i" rel="stylesheet">
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>
    <header>
      <a href="Index.Html" id="logo">
        <h1>Oliver Heaviside</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul id="Gallery">
          <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 style="list-style: none;">
          <li style="max-width: 940px;margin: 0 auto;padding: 0 5%;">
            <a href="/Images/Game of Mario.jpg">
              <img src="/Images/Game of Mario.jpg" alt="">
              <p style="margin: 0;padding: 5%;font-size: 0.75;color:#599a68;">Mario</p>
            </a>
          </li>
          <li style="max-width: 940px;margin: 0 auto;padding: 0 5%;">
            <a href="/Images/Skyrim.jpg">
              <img src="/Images/Skyrim.jpg" alt="">
              <p style="margin: 0;padding: 5%;font-size: 0.75;color:#599a68;">Skyrim Dragonborn</p>
            </a>
          </li>
          <li style="max-width: 940px;margin: 0 auto;padding: 0 5%;">
            <a href="/Images/King Bowser.jpg">
              <img src="/Images/King Bowser.jpg" alt="">
              <p style="margin: 0;padding: 5%;font-size: 0.75;color:#599a68;">King Kong Bowser</p>
            </a>
          </li>
          <li style="max-width: 940px;margin: 0 auto;padding: 0 5%;">
            <a href="/Images/Gigantic.jpg">
              <img src="/Images/Gigantic.jpg" alt="">
              <p style="margin: 0;padding: 5%;font-size:0.75;color:#599a68;">Gigantic</p>
            </a>
          </li>
          <li style="max-width: 940px;margin: 0 auto;padding: 0 5%;">
            <a href="/Images/Halo.jpg">
              <img src="/Images/Halo.jpg" alt="">
              <p style="margin:0;padding:5%;fontsize:0.75;color:#599a68;">MasterChief</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/Oliver_2001_12"><img src="/img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://Facebook.com/Oliver_2001_12"><img src="/img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2017 Oliver Heaviside.</p>
      </footer>
     </div>
    </body>
   </html>
css/main.css 
/******************
GENERAL
*******************/

body {
  font-family: 'fjalla one', sans-serif;
}

a {
  text-decoration: none;
}

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

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

a {
  color: #6ab47b;
}

/*GreenHeader*/
header {
  background: #6ab47b;
  border-color: #599a68;
}

/*HeaderColor*/
h1, h2 {
  color: #fff;
}

/*NavBackgroundOnMobileDevices*/
nav {
  background: #599a68;
}

/*NavLinks*/
nav a, nav a:visited {
  color:#fff;
}


/*SelectedNavLinks*/
nav a.selected, nav a:hover {
  color: #32673f;
}

/*SiteBody*/
body {
  background-color: #fff;
  color: #999;
}

/*FONTS*/
h1 {
  font-family: 'Merriweather', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 1em;
}

h2 {
  font-size:: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both; 
  padding-top: 50px;
  color: #ccc;
}

img {
  max-width: 100%;
}

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%
}
/******************
Page Portfolio
*******************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float:left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75;
  color: #bdc3c7
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

/******************
Page About
*******************/

.profile-photo {
  display: block;
  max-width: 250px;
  margin: 0 auto 30px;
  border-radius: 40%;
}

h3 {
  margin: 0 0 1em 0;
}

/******************
Page Contact
*******************/

.contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9em;

  .contact-info a {
    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
  }

}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

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

3 Answers

Yuval Blass
Yuval Blass
18,134 Points
Yuval Blass
Yuval Blass
18,134 Points

.h1 need to be h1 (at the end).

.h1 { /* h1 */
font-family: 'Changa One', sans-serif; 
font-size: 1.75em;  
font-weight: normal;
}
Michael Afanasiev
PLUS
Michael Afanasiev
Courses Plus Student 15,596 Points
Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Hi Oliver,

Yuval is correct on the selector (we add a .dot notation only if the following is a class name) though you have many other issues with your code. Well for starters it is not the code that was provided to you in this challenge! :) It's okay to test your code outside the challenge's editor but you are given a specific code that you need to complete (kind of like fill in the blank _____ type of questions).

Try to complete the challenge again, this time without copy/pasting it from your workspaces/editor.

Also, pay attention to your closing curly braces in the following styling:

/******************
Page Contact
*******************/

.contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9em;
 <------------------------------- closing curly brace should be here 
  .contact-info a {
    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
  }

} <---------------------------------------------- Not here. :-)

Hope this helps, keep on hacking! ?

Oliver Heaviside
Oliver Heaviside
1,093 Points
Oliver Heaviside
Oliver Heaviside
1,093 Points

thank you