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
Nick Hopkins
1,386 PointsI put the profile image property to block and i did but it will still say that i did not. Can i get some help.
I know i put the display property to block but it still says i do not have that.
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8"></Meta>
<title>Nick Hopkins | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Hopkins</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="Photograph of Nick" class="profile-photo"><p>...</p>
<h3>About Aids</h3>
<p>Hi, I'm Nick. This is my design porfolio where I share all my favorite work. When I'm not desighing things, I enjoy exercising, playing video games, and watching anime.</p>
<p> If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/nickrp">@nickrp</a>.</p>
<p>aid aids aids aids aids aids aids aids aids aids aids aids aids aids aids aids</p>
</section>
<footer>
<a herf="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a herf="https://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2015 Nick Hopkins</p>
</footer>
</div>
</body>
</html>
/************
GENERAL
************/
body {
font-family: 'Kaushan Script', sans-serif;
font-size: 1.30em;
}
#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: 'Kaushan Script', cursive;
margin: 150x 0;
font-size: 1.75em;
font-weight: normal;
line-height: 1.00;
}
h2 {
font-family: 'Kaushan Script', cursive;
font-size: 1.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 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
***********************/
.porfile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/**********************
COLORS
***********************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/*green header*/
header {
background: #6ab47b;
border-color: #000;
}
/*nav background on moblie*/
nav {
background: #599a68;
}
/*logo color*/
h1, h2 {
color: #000;
}
a {
color: #000;
}
/*nav link*/
nav a, nav a:visited {
color: #000;
}
/*selected nav link*/
nav a.selected, nav a:hover {
color: #4b0;
}
3 Answers
Michael Afanasiev
Courses Plus Student 15,596 PointsYou misspelled profile-photo, check it again. It says PORfile :)
Michael Afanasiev
Courses Plus Student 15,596 PointsHey Nick,
I think from some reason you are using the wrong CSS file, not the quiz's one.
You are missing a display property in your CSS file. :)
img {
max-width: 100%;
}
Nick Hopkins
1,386 Points/**********************
PAGE: ABOUT
***********************/
.porfile-photo {
display: block; <------- and its right there.
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
Ok, but this is what i have in my Main.css file.
Nick Hopkins
1,386 Points.porfile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
section img { display: block; margin: 0 auto 30px; } <------ I need this.
I found it out. It seems that i need to just add a random section image element. But thanks anyways.
Nick Hopkins
1,386 PointsNope i misspelled a word, no my brightest moment.
Nick Hopkins
1,386 PointsNick Hopkins
1,386 PointsSorry i got bored trying to finger out what i did wrong and i just put aids, plz ignore that and thanks.