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 Add Iconography

Can anybody help me in resolving multiple issues appearing in Contact page?

I have following issues:

  1. Links are not appearing in green.
  2. There are 6 list instead of three. Images are also appearing as a list.
  3. Contact information heading is too close to the paragraph of Gen Info.

Thanks

/**********
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%;  
}

p {
  margin: 0;
}


#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: 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
***********/
.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}


/**********
Page: Contact
***********/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}


.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}


.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}




/**********
Colors
***********/



/* site body */
body {
  background color: #fff;
  color: #999;
}

/* Green Header */
header {
  background:#6ab47b;
  border-color: #599a68;
}

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

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

/* Links */
a {
  color: #6ab47b;
}

/* nav link */
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>Renu Kumari | Technical Writer</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>Renu Kumari</h1>
      <h2>Technical Writer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <h3>General Information</h3>
        <p>This is general information about contacting me.</p>
        <p>You can email or call me if only it is urgent. In rest of the cases, you can tweet me.</p>
      </section>        
      <section>
        <h3>Contact Details</h3>
        <ul class="contact-info">          
          <li class="mail"><a href="mailto:nueram@gmail.com"></a>nueram@gmail.com</li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen-name=nueram"></a>@nueram</li>
          <li class="phone"><a href="tel:000 000 0000"></a>000 000 0000</li>
        </ul>
      </section>
      <footer>
        <a href="https://www.facebook.com/profile.php?id=100006844172299"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
        <a href="https://twitter.com/nueram"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <p>&copy; 2016 Renu Kumari.</p>
      </footer>
    </div>  
  </body>
</html>

3 Answers

Daniel Stopka
Daniel Stopka
13,520 Points

Hi,

  1. your links need to be wrapped by anchor element like this:

    <li class="mail"><a href="mailto:nueram@gmail.com">nueram@gmail.com</a></li>
    
  2. I can't see images as list... there is one ul for menu and one ul for contact info, both containing 6 list items total (3 each)...

  3. contact info is close, because you set so: h3 { margin: 0 0 1em 0; }

If you want a margin, you can set it on all h3 elements, or you can also add an extra class to the second h3 (or section) and make margin there, in case you don't want a margin on h3 element above...

Hope it helps...

Craig Watson
Craig Watson
27,930 Points

Hi,

I have a sample site hosted on GitHub for students to use as a guide on this course, it can be really helpful to compare code of your own to the code on the site.

Live - http://rokkitpress.github.io/Treehouse_How_To_Make_A_Website

Code - https://github.com/rokkitpress/Treehouse_How_To_Make_A_Website

It should give you a nice static version of the completed code to read :)

Craig

Thank you for your help, Daniel. I could resolve the issue. Thank you for sharing additional information, Craig. It helps me.