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 Adding Pages to a Website Make an About Page

wendel geir
wendel geir
3,985 Points
Posted by wendel geir
wendel geir
3,985 Points

.profile-photo

Why doesn't this work I know that I'm doing it right......I need help.

about.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.googleapis.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">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/gratt.png" alt="my pic" class="profile-photo">
        <p>Hello my name is Wendel Geir and I rock.</p>
        .profile-photo {
          display: block;
        }
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></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;
}

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

img {
  max-width: 100%;
}

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  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;
}

3 Answers

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Hi Wendel,

Your CSS code, while correct, should be put inside of the main.css file and not within the body of the HTML. While this is possible to do with 

<script>
``` tags, it's not good practice and I don't think it's the intention of this exercise.
wendel geir
wendel geir
3,985 Points
wendel geir
wendel geir
3,985 Points

Ok I tried that and it didn't work either.

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

I just ran your code in the challenge and it works for Step 3 if I remove this CSS from about.html:

.profile-photo {
     display: block;
}

and place it in css/main.css.

Here is how the finished HTML should look:

      <section>
        <img src="img/gratt.png" alt="my pic" class="profile-photo">
        <p>Hello my name is Wendel Geir and I rock.</p>
      </section>

Here is how the finished CSS should look:

        .profile-photo {
          display: block;
          margin: 0 auto;
          margin-bottom: 30px;
          max-width: 150px;
          border-radius: 100%;
        }
wendel geir
wendel geir
3,985 Points
wendel geir
wendel geir
3,985 Points

Thank you so much you're a life saver!!!!!

Reynaldo Bucio
Reynaldo Bucio
9,824 Points
Reynaldo Bucio
Reynaldo Bucio
9,824 Points

Remember there is two ways to add styles within an html document.

Inline which you add directly to the element you want style.

<img style="display:block;"/>

Or using internal styles using the style tag on the head section of the html page.

<head>
    <style>
     .profile-photo {
         display: block;
     }
    </style>
</head>