Contact info style not showing up.

Question

Can someone check my code, the contact info style is not showing? Nothing is happening.

Also, I notice for the selected class for contact, Nick used “.contact-info” instead of just ".contact". I am guessing that you do not have the use the exact name that's in html when doing a class selection. Is that correct ?

One more thing, my about and contact links does not highlight on the page automatically as Nick suggested. Any suggestions?

Thanks !

          <p><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Carleen Hall | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto+Condensed" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Alicia Hall</h1>
        <h2>Designer</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>I am currently taking on free-lance assignment. If you will like to discuss and up coming assignment with me please don't hesitate to contact me</p>
             <p>Please only use phone contact for urgent inquires. Otherwise, Twitter and email are the best way to reach me.</p>
          </section>
          <section>
              <h3>Contact Details</h3>
              <ul class="contact=info"</ul>
                  <li class="phone"><a href="tel:347-526-3512">347-526-3512</a></li>
                  <li class="mail"><a href="mailto:challfuture.com">challfuture@gmail.com</a></li>
                  <li class="twitter"><a href="http://twitter.com/intent/tweet? screen_name=nickrp">@nickrp</a></li>
          </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>
</p>
          ```

        ```css
          <p>/***************************
GENERAL 
*****************************/  

body {

font-family: 'Condensed', san-serif;    
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;  
}
a {
    text-decoration: none;
    color: #6ab47b;
}

img {
    max-width: 100%;
}

h3 {
    margin: 0 0 1em 0;
}

/**********************************
    HEADING 
************************************/   

header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0; 
    width: 100%;
}

#logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: 'Righteous', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
    }

/**********************************
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 portofolie 
************************************/   
 #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: 0px;
    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 {

    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;

}

/**********************************
    COLORS
***********************************/

/* site body */

body {
    background-color: #ffff;
    color: #999;
}

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


/* logo text */ 


h1, h2 {
    color: #FF9900;
}

/* links */

a {
    color: #ffff;
    }

/* nav links */

nav {
    background: #599a68;
}

nav a, nav a:visited {
    color: #00000;
}

/* selected nav link */

nav a .selected, nav a:hover {
    color: #326773;
}

</p>
          ```

Answer 1 · 2016-08-28T11:12:14Z

August 28, 2016 11:12am

Hi Carleen, as Jennifer already stated the name of the class you wish to target in CSS must be exact as the class name given in HTML. An example:

class="contact" = .contact
class="contact-info" = .contact-info
class="Contact-info" = .Contact-info Class names are also case sensitive!

Your ul element:

<ul class="*contact=info"</ul>
                  <li class="phone"><a href="tel:347-526-3512">347-526-3512</a></li>
                  <li class="mail"><a href="mailto:challfuture.com">challfuture@gmail.com</a></li>
                  <li class="twitter"><a href="http://twitter.com/intent/tweet? screen_name=nickrp">@nickrp</a></li>

You misspelled the class name and it does not corresponds to "contact-info" in your CSS. Which is why the CSS is not applied. Also note that you are adding a class name to your ul element and closing it right after. All your li elements are outside your ul element. This can also cause CSS to break.

Should be:

<ul class="contact-info">
                  <li class="phone"><a href="tel:347-526-3512">347-526-3512</a></li>
                  <li class="mail"><a href="mailto:challfuture.com">challfuture@gmail.com</a></li>
                  <li class="twitter"><a href="http://twitter.com/intent/tweet? screen_name=nickrp">@nickrp</a></li>
</ul>

If you got any other questions, don't hesitate to ask!

Answer 2 · 2016-08-28T09:19:01Z

August 28, 2016 9:19am

Hi there! It seems like maybe you're missing a style. You have a class called "contact", which he doesn't show in his CSS. His all seem to be named "contact-info". You need to rename the "contact" class to "contact-info" and then continue entering the CSS. You also have a typo:

You've written:

<ul class="contact=info"</ul>

That should be:

<ul class="contact-info"</ul>

Note the replacement of the equals with a hyphen. My best suggestion to you is to go back to the video and restart the CSS code inside the "Contact Page" portion.

edited for additional note

And yes, you have to use the exact name of the class otherwise the styles will not be applied.

Good luck!

Answer 3 · 2016-08-28T12:52:40Z

August 28, 2016 12:52pm

Thanks! Jennifer and Robbert

Oh! I was looking at the contact in the nav tag and not the footer.

Welcome to the Treehouse Community

Looking to learn something new?

Carleen Hall

Carleen Hall

Contact info style not showing up.

3 Answers

Robbert Slijkhuis

Robbert Slijkhuis

Jennifer Nordell

Jennifer Nordell

Carleen Hall

Carleen Hall