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 trialdebbiebalbo
7,718 Pointsstuck 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!
<!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>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
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
5,945 PointsIt 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!
Wayne Priestley
19,579 PointsHi 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
7,718 Pointsthanks 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!
debbiebalbo
7,718 Pointsdebbiebalbo
7,718 Pointsyes! 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!