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 How to Make a Website Adding Pages to a Website Make an About Page

Posted by bryan baldasaro
bryan baldasaro
288 Points

Bummer! Make sure your image has a class of "profile-photo".

didn't I do this? ' Bummer! Make sure your image has a class of "profile-photo".'

about.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bryan Baldasaro | 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>Bryan Baldasaro</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="Photo of Gratt" class="Profile-photo">
          <h3>About</h3>
          <p>Hi, I'm Bryan Baldasaro!  This ism my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy exercising, good comedy, and live theatre.</p>
          <p>If you'd like to follow me on Twitter, my username is <a href="https://twitter.com/bryanBbad">@BryanBbad</a>.</p>



      </section>

        <footer>
        <a href="https://twitter.com/bryanBbad"><img src= "img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>

        <a href="https://facebook.com/bryan.baldasaro"><img src= "img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>

        <p>&copy; 2017 Bryan Baldasaro.</p>
        </footer>
      </div>
    </body>
</html>
css/main.css 
/*****************************************
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 o;
  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: 3ccc;
}

.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 {
  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: #599a68;
}

/* nav background on mobile*/
nav {
  background: #599a68;
}

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

/* links */
a {
  color: #6ab07b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link*/
nav a.selected, nav a:hover {
  color: #32673f;
}


p {
  color: #000;
}

1 Answer

ve
ve
5,048 Points
ve
ve
5,048 Points

Try not to capitalize the first "p" in "profile-photo", this should fix the issue.

bryan baldasaro
bryan baldasaro
288 Points

Thanks!