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

Posted by Olivia Maison
Olivia Maison
2,327 Points

can someone tell me where i made an error here?

it asked me to : "select the profile image and set it to be a block element"

so i put:

.profile-photo { display: block; } am i missing a word spacing etc

thank you

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 class="profile-photo" src="img/gratt.png" alt="A photo.">
        <p>hi,my name is olivia blah blah blah</P>
  .profile-photo {
  display property: 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

Mark Pryce
Mark Pryce
8,804 Points
Mark Pryce
Mark Pryce
8,804 Points

Is seems you have included your .profile photo declaration in your html document, try moving it to your css instead and it should work :)

Happy coding.

Olivia Maison
Olivia Maison
2,327 Points

thank you!

Žiga Pregelj
Žiga Pregelj
18,126 Points
Žiga Pregelj
Žiga Pregelj
18,126 Points

Hi, you are not writing code in the right file. In about.html, you have HTML code and it is for words & text on your page, in main.css you have your CSS file which is made for styling and moving your text, paragraphs and other visual things of your page.

You need to add your styling syntax to main.css file like this:

.profile-photo {
        display: block;
}

and remove it form your about.html file ;)

Anthony Stapor
Anthony Stapor
3,369 Points
Anthony Stapor
Anthony Stapor
3,369 Points

Hi, I did the challenge this way and it worked. Be sure to add the code at the end of your CSS file.

.profile-photo {
  display: block;
}