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

CSS How to Make a Website Adding Pages to a Website Make an About Page

Posted by debbiebalbo
debbiebalbo
7,718 Points

stuck on challenge and with/adding pages to a website

I'm trying to get through this challenge but it doesn't appear that the .profile-picture command is referencing the photo. Perhaps I'm leaving something out?

Also--when I cut and paste the EXACT code from the "about" page to create a "contact" page--all I get is a "404" error and nothing comes up. I've refreshed, closed it down brought it back up, re copied/pasted, and I have nothing. Any suggestions?

Thanks for the help, in advance--I'm eager to get through these lessons!

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="description goes here" class="profile-photo">
        <p> this is text about me and how interesting I am</p>
      </section>
      .profile-photo {
        display: block;
      }
      <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;
}

2 Answers

bleedcmyk
bleedcmyk
5,945 Points

It appears that you appended your .profile-photo CSS into your body html and not into your CSS stylesheet.

.profile-photo { display: block; }

It looks like its above your footer in about.html, try removing it there and adding it into your CSS stylesheet!

debbiebalbo
debbiebalbo
7,718 Points

yes! I went for a walk to clear my head and thought of this--I just wrote it on the wrong page--thanks so much--this is exactly what was wrong!

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Debbie,

Have you renamed your new page contact.html ?
Its just i noticed the code you posted still had about.html as the file name, also you need to add class="selected" to the contact page link.

Hope this helps.

debbiebalbo
debbiebalbo
7,718 Points

thanks so much for the suggestions! I had everything in place, but found a mistake on the index.html page and just got lucky, previously, I guess--I found it, though!

Thanks so much for your response!