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 Build the Contact Page

Rutwik Patel
PLUS
Rutwik Patel
Courses Plus Student 963 Points
Posted by Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points

Contact Page won't load 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Rutwik Patel Programmer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic|Yanone+Kaffeesatz:400,700,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Rutwik Patel</h1>
        <h2>Programmer</h2>
      </a>
      <nav> 
      <ul>
        <li> <a href="index.html">  Portfolio </a></li>
        <li> <a href="about.html"> about </a></li>
        <li> <a href ="contact.hmtl"  class= "selected"> Contact </a></li>
        </ul>


   </nav>
        </header>
    <div id="rapper"> 
    <section>
      <img src = "img/nick.jpg" alt="Photograph Of Nick Pettit" class="profile-photo">
      <h3> About </h3>
      <p> Hello! I'm Rutwik Patel and this is just my prototype webpage! </p>
      <p> If you'd like to follow me on instagram my username is <a href="http://twitter.com"> </a> @rutvikx </p>
             </section>
        <footer>
           <a href="http://twitter.com"> <img src= "img/twitter-wrap.png" alt="Twitter logo" class= " social-icon"> </a>
             <a href="http://facebook.com/deadxskillz">  <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a> 
          <p>&copy; 2014 Rutwik Patel.</p>
        </footer>
      </div>
  </body>
</html>
Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points
Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points 
/* Portfolio*/
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Rutwik Patel Programmer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic|Yanone+Kaffeesatz:400,700,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Rutwik Patel</h1>
        <h2>Programmer</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.hmtl"> Contact </a></li>
        </ul>


   </nav>
        </header>
    <div id="rapper"> 
    <section>
                <ul id="gallery">
                   <li>
                     <a href="img/numbers-01.jpg">
                       <img src="img/numbers-01.jpg" alt="">
                         <p> "Experimentation" </p>
                       </a>
                  </li>
                       <li>
                     <a href="img/numbers-02.jpg">
                       <img src="img/numbers-02.jpg" alt="">
                         <p> "Playing with photoshop" </p>
                       </a>
                  </li>
                       <li>
                     <a href="img/numbers-06.jpg">
                       <img src="img/numbers-06.jpg" alt="">
                         <p> "80's style of glow" </p>
                       </a>
                  </li>

                      <li>
                     <a href="img/numbers-09.jpg">
                       <img src="img/numbers-09.jpg" alt="">
                         <p> "Drips created using photshop brushes" </p>
                       </a>
                  </li>
                       <li>
                     <a href="img/numbers-12.jpg">
                       <img src="img/numbers-12.jpg" alt="">
                         <p> "Creating shapes Using Repitiion" </p>
                       </a>
                  </li>                   
                 </ul>
             </section>
        <footer>
           <a href="http://twitter.com"> <img src= "img/twitter-wrap.png" alt="Twitter logo" class= " social-icon"> </a>
             <a href="http://facebook.com/deadxskillz">  <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a> 
          <p>&copy; 2014 Rutwik Patel.</p>
        </footer>
      </div>
  </body>
</html>



/*About Page*/


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Rutwik Patel Programmer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic|Yanone+Kaffeesatz:400,700,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Rutwik Patel</h1>
        <h2>Programmer</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.hmtl"> Contact </a></li>
        </ul>


   </nav>
        </header>
    <div id="rapper"> 
    <section>
      <img src = "img/nick.jpg" alt="Photograph Of Nick Pettit" class="profile-photo">
      <h3> About </h3>
      <p> Hello! I'm Rutwik Patel and this is just my prototype webpage! </p>
      <p> If you'd like to follow me on instagram my username is <a href="http://twitter.com"> </a> @rutvikx </p>
             </section>
        <footer>
           <a href="http://twitter.com"> <img src= "img/twitter-wrap.png" alt="Twitter logo" class= " social-icon"> </a>
             <a href="http://facebook.com/deadxskillz">  <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a> 
          <p>&copy; 2014 Rutwik Patel.</p>
        </footer>
      </div>
  </body>
</html>


/*Contact Page */

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Rutwik Patel Programmer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic|Yanone+Kaffeesatz:400,700,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css">

  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Rutwik Patel</h1>
        <h2>Programmer</h2>
      </a>
      <nav> 
      <ul>
        <li> <a href="index.html" >  Portfolio </a></li>
        <li> <a href="about.html"> about </a></li>
        <li> <a href = "contact.hmtl" class= "selected" > contact </a></li>
        </ul>


   </nav>
        </header>
    <div id="rapper"> 
    <section>
      <img src = "img/nick.jpg" alt="Photograph Of Nick Pettit" class="profile-photo">
      <h3> About </h3>
      <p> Hello! I'm Rutwik Patel and this is just my prototype webpage! </p>
      <p> If you'd like to follow me on instagram my username is <a href="http://twitter.com"> </a> @rutvikx </p>
             </section>
        <footer>
           <a href="http://twitter.com"> <img src= "img/twitter-wrap.png" alt="Twitter logo" class= " social-icon"> </a>
             <a href="http://facebook.com/deadxskillz">  <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> </a> 
          <p>&copy; 2014 Rutwik Patel.</p>
        </footer>
      </div>
  </body>
</html>

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

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

}

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

a {
  text-decoration:none;
}

img {
  max-width:100%;
}



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


header {
  float:let;
  margin:0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

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

h1 {
font-family: 'Yanone Kaffeesatz', 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

}/***************
GENERAL
****************/

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

}

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

a {
  text-decoration:none;
}

img {
  max-width:100%;
}

h3 {
margin: 0 0 1em 0;
}  

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


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

h1 {
font-family: 'Yanone Kaffeesatz', 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;
}


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



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

/***************
PAGE:ABOUT
****************/
.profile-photo {
  display:block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}


/***************
COLOR
****************/

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



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


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

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

}


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


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


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


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






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



/***************
COLOR
****************/

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



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


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

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

}


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


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


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


/* site body */
body {
  background-color: #fff;
  color:#999
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Rutwik,

I've edited your code so it appears correct in your post.

Here is a link to explain how to use Markdown to post your code How to post code If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code

Hope this helps.

3 Answers

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

Hi Rutwik,

Your missing a > after contact.html and you also have a space between class= and "selected". You also have a space between href and ="contact.html". You also have a space between src = and "img/nick.jpg". There are a couple of extra spaces in your footer links too, best you look through your code and correct these.

if you fix these you should be ok.

Hope this helps.

Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points
Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points

but i have the > after my class="selected", isn't that how it should be? and i fixed the spaces. Don't know why it does't work. I basically just copied and pasted my about page code and my about page works, but contact doesn't.

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

Hi Rutwik,

Sorry about that, I was reading on my iPhone and didn't see the code to the right.

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

Hi Rutwik,

Do you see the gap between <a href and = and "contact.html" remove the two spaces for the link to work.

Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points
Rutwik Patel
Rutwik Patel
Courses Plus Student 963 Points

fixed it but still nothing, this is so frustrating ugh

Mikael Enarsson
Mikael Enarsson
7,056 Points
Mikael Enarsson
Mikael Enarsson
7,056 Points

In the header section, in the link to the contact page, you wrote 'contact.hmtl' instead of 'contact.html'.