Adding an about page. Why am I still getting the same images on my about page that I have on my index.html page?

Question

I have double check my coding and I can't find any errors. I have added a picture in coding but when I refresh the same image is there from index.html. Please check my coding and help me figure out what is wrong. Thanks.

Answer 1 · 2015-02-21T15:09:00Z

February 21, 2015 3:09pm

Hi Sharon,

Can you please copy/paste all of your code to here?

Kind Regards

Answer 2 · 2015-02-21T15:14:59Z

February 21, 2015 3:14pm

ABOUT.HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sharon Weathers | 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>Sharon Weathers</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Sharon Weathers:  This is my design portfolio where I share all of my favorite work.  When I'm not designing things, I enjoy swimming, skydiving, meeting new people and more</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp</a>.</p>
      </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 Sharon Weathers.</p>
      </footer>
    </div>
  </body> 
</html>

INDEX.HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sharon Weathers | 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>Sharon Weathers</h1>
        <h2>Designer</h2>
      </a>  
      <nav>
        <ul>
          <li><a href="index.html"  class="selected">Portfolio</a></li>
          <li><a href="index.html">About</a></li> 
          <li><a href="index.html">Contact</a></li> 
       </ul>        
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <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" 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 Sharon Weathers.</p>
      </footer>
    </div>
  </body> 
</html>

MAIN.CSS

/****************************
GENERAL
*****************************/

body {
  font-family: 'Open Sans', sans-serif;
}

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


a {
  text-decoration: none;
}

img {
  max-width:  100%; 
}

h3 {
  margin: 0 0 1em 0;
}

/****************************
HEADING
*****************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}
#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

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




/****************************
NAVIGATION
*****************************/

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

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

nav li {
  display: inline-block;
}

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

/****************************
FOOTER
*****************************/

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



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

/****************************
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.75em;
  color: #bdc3c7;  
}


/****************************
PAGE:  ABOUT
*****************************/

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;

}

/****************************
COLORS
*****************************/

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

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

/* nav background on mobile devices */
nav {
  background: #599a68;
}

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

/* links */
a {
  color:  #6ab47b;
}

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

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

Answer 3 · 2015-02-21T15:24:30Z

February 21, 2015 3:24pm

I think I found the issue. Inside Index.html, the links to your other pages are all pointing to index.html - so when you click any of them, you'll keep seeing the same page.

      <nav>
        <ul>
          <li><a href="index.html"  class="selected">Portfolio</a></li>
          <li><a href="index.html">About</a></li> 
          <li><a href="index.html">Contact</a></li> 
       </ul>        
      </nav>

After changing these links - if the issue persists please let me know and I'll do my best to find a solution.

Kind Regards

Answer 4 · 2015-02-21T16:11:09Z

February 21, 2015 4:11pm

Is this the changes that you suggest? <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>

Answer 5 · 2015-02-21T16:14:47Z

February 21, 2015 4:14pm

When I made the changes I got a 404 error.

Answer 6 · 2015-02-21T16:17:24Z

February 21, 2015 4:17pm

Try copying all of this code and replacing your current index.html file with this, and let me know if you're still getting 404 errors.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sharon Weathers | 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>Sharon Weathers</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 id="gallery">
          <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" 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 Sharon Weathers.</p>
      </footer>
    </div>
  </body> 
</html>

Answer 7 · 2015-02-21T16:23:50Z

February 21, 2015 4:23pm

I don't know what I did wrong, but boy does it feel good to see the correct workspace images. Hopefully, I won't revert back to the old errors. Thanks for your help!

Answer 8 · 2015-02-21T16:35:46Z

February 21, 2015 4:35pm

Robert,

Now I am back in my Main.css file and I am still getting the 404 error message when I try to look at my image. How to I link the Main.css file to the index.html file. Assuming that I need to do this.

Answer 9 · 2015-02-21T16:51:15Z

February 21, 2015 4:51pm

I was able to get a 404, and it's because when clicking on the link for the contact page, there actually isn't a contact.html page yet - so, this is normal. Later in the series, Nick will talk about adding contact.html and this problem will be resolved.

Answer 10 · 2015-02-21T17:04:38Z

February 21, 2015 5:04pm

But, you're getting a 404 when looking at an image. Hmm OK. What is the name of the image you're trying to look at, and is it located in your img folder on workspaces?

It sounds like you've uploaded a custom image and so will need to update this line in about.html

<img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">

replacing nick.jpg with the image you uploaded.

Answer 11 · 2015-02-21T17:08:42Z

February 21, 2015 5:08pm

Sorry Robert, It is main.css which does show in the index.html. Unsure about this comment from you " if it's not in the CSS folder, then this will need to be updated." Please help. Thanks.

Answer 12 · 2015-02-21T17:55:44Z

February 21, 2015 5:55pm

We'll get through this, I promise! I've already reached out to help@teamtreehouse.com but it could be Monday before we hear anything back from them. Until then, I appreciate your patience. I'll do my best to figure this out with you.

Tagging Nick Pettit to also help us.

Answer 13 · 2015-02-21T21:45:06Z

February 21, 2015 9:45pm

Hi Sharon! My name is Peter and Im a Support Rep for Treehouse. I have contacted you via email so we can figure this out. By the way, you code looks great! :)

Welcome to the Treehouse Community

Looking to learn something new?

Sharon Weathers

Sharon Weathers

Adding an about page. Why am I still getting the same images on my about page that I have on my index.html page?

13 Answers

Robert Richey

Robert Richey

Sharon Weathers

Sharon Weathers

Robert Richey

Robert Richey

Robert Richey

Robert Richey

Sharon Weathers

Sharon Weathers

Robert Richey

Robert Richey

Sharon Weathers

Sharon Weathers

Robert Richey

Robert Richey

Sharon Weathers

Sharon Weathers

Robert Richey

Robert Richey

Sharon Weathers

Sharon Weathers

Robert Richey

Robert Richey

Robert Richey

Robert Richey

Sharon Weathers

Sharon Weathers

Robert Richey

Robert Richey

Sharon Weathers

Sharon Weathers

Robert Richey

Robert Richey

Sharon Weathers

Sharon Weathers

Robert Richey

Robert Richey

Robert Richey

Robert Richey

Sharon Weathers

Sharon Weathers

Peter Drew

Peter Drew