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
Jacob Olenick
1,295 PointsMy website doesn't look anything like his but I followed all the correct coding?
I'm missing the green header, my images aren't the size they should be nothing is changing when I update the code
4 Answers
Nick Pettit
Treehouse TeacherHi Jacob,
I edited your post so that the code is displayed correctly.
It looks like you're missing closing curly braces on your element selectors for the body and the nav elements.
For example, this snippet from your post...
body{
font-family: 'Opens Sans', sans serif;
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
...should instead look like this:
body{
font-family: 'Opens Sans', sans serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
The same is true for the nav selector. This code...
/**************************
NAVIGATION
***************************/
nav {
text-align: center;
padding: 10px 0;
margin 20px 0 0;
...should instead look like this:
/**************************
NAVIGATION
***************************/
nav {
text-align: center;
padding: 10px 0;
margin 20px 0 0;
}
I'm not sure if that will completely fix the problem, but fixing syntax errors like this is always the place to start.
All the best,
Nick
Dan Barness
5,346 PointsYou might have some issues with your comment tags in your CSS. Make sure your comments start with /* and end with */.
Looks like the comments might be getting messed up around the area where you set your green header styles.
Konstantin Golik
Courses Plus Student 3,791 PointsHi Jacob!
You forgot to close your CSS comments.
In CSS comments start with /* and end with */.
Close your comments and everything should work just fine.
Jacob Olenick
1,295 PointsI looked at my comments. they are the way you say they should be
Konstantin Golik
Courses Plus Student 3,791 PointsJacob, which browser are you using?
Jesus Mendoza
23,289 PointsHey Jacob,
Can you show us your code?
Jacob Olenick
1,295 Pointshere is the css
/**************************
GENERAL
***************************/
body{
font-family: 'Opens Sans', sans serif;
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a{
text-decoration: none;
}
img {
max-width: 100%;
}
/**************************
HEADING
***************************/
#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;
/**************************
FOOTER
***************************/
footer {
font-size: 0.75em;
text-align: center;
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: 0.75em;
color: #bdc3c7
}
/**************************
COLORS
***************************/
/* green header */
/* site body */
body {
background-color: #fff;
color: #999;
}
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav backgorund on mobile */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav links */
nav a, nav a:visited {
color: #fff;
}
/* selective nav link color */
nav a.selected, nav a:hover {
color: #32673f;
}
here is the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Olenick | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jacob Olenick</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 with globes</p>
</a>
</li>
<li>
<a href="Img/numbers-09.jpg">
<img src="Img/numbers-09.jpg" alt="">
<p>Drips created using photoshop</p>
</a>
</li>
<li>
<a href="Img/numbers-12.jpg">
<img src="Img/numbers-12.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/jacobolenick"><img src="Img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://www.facebook.com/jacobolenickstudio"><img src="Img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2017 Jacob Olenick.</p>
</footer>
</div>
</body>
</html>
Jacob Olenick
1,295 PointsJacob Olenick
1,295 PointsThank you so much nick. This really helped and worked! Appreciate you!