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
Hungry Monkey
2,200 Pointsi used this exactly as stated in css file and also my photo has a class of the same name and it still wont style ??
.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
<img src="img/peter.jpg" alt="photo of peter" class="profile-photo">
Hungry Monkey
2,200 Points/*************************************** 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: 1.25em; text-align: center; clear:both; padding-top: 50px; color:#ccc; }
} /*************************************** PAGE: ABOUT ****************************************/
.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/*************************************** 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 ****************************************/
/* site body*/ body { background-color:#fff; color:#999; } /* green header*/
header { background: #6ab47b; border-color:#599a68; }
/* nav background on mobile*/
nav{ background:#599a68; }
/* logo text */ h1, h2 { color:#fff; }
a { color: #6ab47b; }
/* nav links */ nav a, nav a:visited { color:#fff;
} /* selected nav link */ nav a.selected,nav a:hover{ color:#32673f; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Petr Doubrava | Front end developer</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>Petr Doubrava</h1> <h2>Front end developer</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/peter.jpg" alt="photo of peter" class="profile-photo"> <h3>About</h3> <p>Hi, I am Peter check out my portfolio and let me know what do you think!</p> <p>Be sure Check me out on linkedin <a href="https://www.linkedin.com/in/peter-doubrava-3586a1144/" >Peter Doubrava</a></p> </section> <footer> <a href="https://www.linkedin.com/in/peter-doubrava-3586a1144/" > <img src="img/in.png" alt="linkedin logo" > </a> <p>©2017 Petr Doubrava.</p> </footer> </div> </body> </html>
2 Answers
Tray Denney
Courses Plus Student 12,884 PointsThe simplest of issues is what can make programming very frustrating at times. Your issue is that the extra "}" in:
footer { font-size: 1.25em; text-align: center; clear:both; padding-top: 50px; color:#ccc; }
} <--(extra curly brace here) /*************************************** PAGE: ABOUT ****************************************/
is preventing the statements below it to work. Remove that and you are good to go.
Hungry Monkey
2,200 Pointsthanks a lot now i fell so stupid :))
Robbie Thomas
31,093 PointsHave the margin at: 0 0 30px 0;
The third number represents the bottom.
Here:
.profile-photo {
display: block;
margin: 0 0 30px 0;
max-width: 150px;
border-radius: 100%;
}
Tray Denney
Courses Plus Student 12,884 PointsTray Denney
Courses Plus Student 12,884 PointsCan you send the HTML and the rest of the CSS so that I can see exactly what is going on?