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

Posted by aaron Leighton
.a{fill-rule:evenodd;}techdegree
aaron Leighton
Full Stack JavaScript Techdegree Student 1,267 Points

index.html uploads to host but linking pages are broken why?

I am studying track web design with nick and after finishing my html and css the best i could I now have problems displaying my about and contact page only the index page works even though they are set out right on the web server...

Jake Steel
Jake Steel
5,048 Points

Is it possible for you to attach your code and css. We can't no what is going on without seeing the code.

2 Answers

aaron Leighton
.a{fill-rule:evenodd;}techdegree
aaron Leighton
Full Stack JavaScript Techdegree Student 1,267 Points

it was the capitalisation of the anchors they need to bee all lower case.

Oziel Perez
Oziel Perez
61,321 Points

I kinda skimmed through the code, but sounds that this could very likely be the answer. Make sure that your href attributes point to the exact file names, which means they have to be lowercase.

aaron Leighton
seal-mask
.a{fill-rule:evenodd;}techdegree
aaron Leighton
Full Stack JavaScript Techdegree Student 1,267 Points
aaron Leighton
.a{fill-rule:evenodd;}techdegree
aaron Leighton
Full Stack JavaScript Techdegree Student 1,267 Points

here is all my code

<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>Aaron Leighton | Design</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans:400italic,700italic,800italic,700,800,400|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main2.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="ïndex.html" id="logo"> <h1>Aaron Leighton</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/shaping_dimentions-surfboard.jpg"> <img src="img/shaping_dimentions-surfboard.jpg" alt=""> <p>Basic rules in surfboard design shared and illustated for you.</p> </a> </li>

   <li>
      <a href="img/robo_surfboard.jpg">
        <img src="img/robo_surfboard.jpg" alt="">
        <p>new look, no just more squares</p>
     </a>
    </li>
   <li>
        <a href="img/comby-surfboard.jpg">
        <img src="img/comby-surfboard.jpg" alt="">
        <p>The real things Worth sixtyt thousand dollars on the market today.</p>
     </a>
    </li>
   <li>
        <a href="img/seal-surfboard.jpg">
        <img src="img/seal-surfboard.jpg" alt="">
        <p>What appears to be a bull seal.</p>
     </a>
    </li>
   <li>
        <a href="img/motorbike-surfboard.jpg">
        <img src="img/motorbike-surfboard.jpg" alt="">
      <p>Classic motorbike, like out of the great escape.</p>
     </a>
    </li>

</ul>

</section> <footer> <a href="http://twitter.com/aaronjamesleigh"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/aaron.james.leighton"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2015 Aaron Leighton </p> </footer> </div> </body> </html> 

   <!DOCTYPE html>

<html>
<head> <meta charset="utf-8"> <title>Aaron Leighton | Design</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans:400italic,700italic,800italic,700,800,400|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main2.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="ïndex.html" id="logo"> <h1>Aaron Leighton</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/photo of aaron.jpg" alt="photo of aaron" class="profile-photo">

  </section>
 <footer>
   <h3>About</h3>
 <p> Hi I am Aaron Leighton This is my design portfolio where I share all of my  Work. I have a Solid background in design, and the arts.</p>

  <a href="http://twitter.com/aaronjamesleigh"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
  <a href="http://facebook.com/aaron.james.leighton"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
            <p>&copy; 2015 Aaron Leighton </p>

</footer> </div> </body> </html> 

   <!DOCTYPE html>

<html>
<head> <meta charset="utf-8"> <title>Aaron Leighton | Design</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans:400italic,700italic,800italic,700,800,400|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main2.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="ïndex.html" id="logo"> <h1>Aaron Leighton</h1> <h2>Designer</h2> </a> <nav>
<ul> <li><a href="Index.html">Portfolio</a></li> <li><a href="About.html">About</a></li> <li><a href="Contact.html"class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section>

 <footer>

   <h3> General Information</h3>
 <p> I am currently looking for new design work, I am also available for art work especially to do with surfboards and the ocean. If you Have any questions please don't hesitate to contact me.</p>
 <H4>CONTACT INFORMATION</H4>

 <p>Only use phone contact for urgent inquieries. Otherwise, Twitter and email are the best way to reach me. My eamail adress is aaron.leighton@hotmail.com and Ph No: +61 03 95531930</p>

 <ul>

<li class="phone"><a href="tel: 61 3955319"></a> </li> </ul>

  <a href="http://twitter.com/aaronjamesleigh"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
  <a href="http://facebook.com/aaron.james.leighton"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
            <p>&copy; 2015 Aaron Leighton </p>

</footer> </div> </body> </html> 

   /******************************************************* 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%; }

/******************************************************* 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: 'Oswald', 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; margin: text-align: center; }

.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{ border-radius: 100%; display: block; max-width: 150px; margin: 0 auto 30 100%; }

/***************************************PAGE CONTACT******************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em }

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

/over nav link/ nav a.selected, nav a:hover { color: #43563f}

/site body/ body { background-color: #f5f5f5; color: #f5f5f5; }

header { background: #eba133; border-color: #500a68 }

nav { background: #888888; }

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

/link color/ a { color: #EBA133; }

/nav link/

nav a, nav a:visited { color: #eba133; font-family: 'Roboto', sans-serif; font-weight: normal; line-height: 0.8em; }