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 Oscar Camacho
.a{fill-rule:evenodd;}techdegree
Oscar Camacho
Full Stack JavaScript Techdegree Student 5,428 Points

Select the image and set it to be a block element

I want to do this on the Quiz but I don't know where to put it, in the section or out or the section area.

about.html 
<!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="Photograph of Oscar Camacho" class="profile-photo">
        <p>Hi, I am Oscar Camacho! This is my design portfolio where I share all my favorite work. 
          When I am not desingning things, I am studing, I enjoy expending time with my family, 
          walking my dog and playing with him, reading books. </p>
      </section>
      <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>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>
css/main.css 
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;
}

4 Answers

Oscar Camacho
seal-mask
.a{fill-rule:evenodd;}techdegree
Oscar Camacho
Full Stack JavaScript Techdegree Student 5,428 Points
Oscar Camacho
.a{fill-rule:evenodd;}techdegree
Oscar Camacho
Full Stack JavaScript Techdegree Student 5,428 Points

The problem that I have in the quiz that I don't have the different files like index.html about. html main.css etc.

Matthew Brock
Matthew Brock
16,791 Points
Matthew Brock
Matthew Brock
16,791 Points

You can do either. Preferably the way you have it.

<section>
  <img src="img/gratt.png" alt="Photograph of Oscar Camacho" class="profile-photo">
  <p>Hi, I am Oscar Camacho! This is my design portfolio where I share all my favorite work. 
          When I am not desingning things, I am studing, I enjoy expending time with my family, 
          walking my dog and playing with him, reading books. </p>
</section>

Then you can format it with CSS.

Thomas Buchstab
Thomas Buchstab
14,766 Points
Thomas Buchstab
Thomas Buchstab
14,766 Points

You need to target the img in your css and then set the display to block

Burton King
Burton King
3,938 Points
Burton King
Burton King
3,938 Points

I'm having the same problem --and honestly getting tired of Treehouse not helping me resolve the issue and move on --it's a waste of time to spend hours on this.