I can't see my green header. why?

Question

Answer 1 · 2015-10-08T10:59:33Z

October 8, 2015 10:59am

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nunziella</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,400italic,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

<body>

<header>

  <a href="index.html" id="logo">
    <h1>Nunziella Salluce</h1>
    <h2>Designer</h2>
  </a>

  <nav>
    <ul>
      <li><a href="index.hrml" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

</header>

<div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> </ul> </section> </div> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://twitter.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nunziella</p> </footer> </body> </html>

Answer 2 · 2015-10-08T10:59:54Z

October 8, 2015 10:59am

responsive.css

@media screen and (min-width: 480px) {

#primary { width: 50%; float: left; } #secondary { width: 40%; float: right; }

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

}

.profile-photo { float: left; margin: 0 5% 80px 0; }

@media screen and (min-width: 660px) {

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }

}

Answer 3 · 2015-10-08T11:05:08Z

October 8, 2015 11:05am

Just to ask is this something you are working on your own, and if this is the whole HTML code your missing a few things like the body head, index tags.

Answer 4 · 2015-10-08T11:06:48Z

October 8, 2015 11:06am

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Matthew Goodman | Web 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">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <header>
    <a href="index.html" id="logo">
    <h1>Matthew Goodman</h1>
    <h2>Designer</h2>
    </a>
    <nav>
      <ul>
        <li><a href="indext.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
       </ul>
    </nav>
  </header>

Answer 5 · 2015-10-08T11:09:37Z

October 8, 2015 11:09am

I'm just following the course: I've made this index.html and then the pages: about.html, contact.html, main.css and this responsive.css. after follow the instructions about the second @media screen and my green header on the top it's disappear

Answer 6 · 2015-10-08T11:17:10Z

October 8, 2015 11:17am

well your code works, you know its for a very thin green line along the bottom of the header that blends in with the green header above, I might be wrong which I think I might be but it worked for me using your code.

Answer 7 · 2015-10-08T12:49:37Z

October 8, 2015 12:49pm

hmmm I think something it's broke!

Answer 8 · 2015-10-08T12:49:56Z

October 8, 2015 12:49pm

INDEX

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nunziella</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,400italic,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

<body>

<header>

  <a href="index.html" id="logo">
    <h1>Nunziella Salluce</h1>
    <h2>Designer</h2>
  </a>

  <nav>
    <ul>
      <li><a href="index.hrml" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

</header>

<div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation with color and texture</p> </a> </li> </ul> </section> </div> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://twitter.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nunziella</p> </footer> </body> </html>

Answer 9 · 2015-10-08T12:50:15Z

October 8, 2015 12:50pm

Contact

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nunziella</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,400italic,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

<body>

<header>

  <a href="index.html" id="logo">
    <h1>Nunziella Salluce</h1>
    <h2>Designer</h2>
  </a>

  <nav>
    <ul>
      <li><a href="index.hrml">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 id="primary"> <h3>General information</h3> <p>I am not looking for</p> <p>Please only use phone</p> </section>

<section id="secondary"> <h3>Contact details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:663663636363">663663636363</a></li> <li class="mail"><a href="mailto:nck@gmail.com">nck@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/internet/tweet?screen_name=nun">@nun</a></li> </ul> </section> </div> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://twitter.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nunziella</p> </footer> </body> </html>

Answer 10 · 2015-10-08T12:50:32Z

October 8, 2015 12:50pm

About

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nunziella</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,400italic,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

<body>

<header>

  <a href="index.html" id="logo">
    <h1>Nunziella Salluce</h1>
    <h2>Designer</h2>
  </a>

  <nav>
    <ul>
      <li><a href="index.hrml">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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi I'm Nunziella and this is my design portfolio</p> <p>If you'd like to follow me on twitter</p> </section> </div> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://twitter.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Nunziella</p> </footer> </body> </html>

Answer 11 · 2015-10-08T12:50:52Z

October 8, 2015 12:50pm

main.css

/****** GENERAL ***********/

body {

font-family:: 'Open sans', sans-serif; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

wrapper {

max-width: 940px; padding: 0 5%; margin: 0 auto; }

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; }

nav { text-align: center; padding: 10 px 0; margin: 20 px 0; }

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

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; }

/* green header*/ a { color: #6ab47b; }

/****** HEADING **********/ header { background: #6ab47b; border-color: #888888; } / logo text / h1, h2 { color: #fff; } / nav background on mobile*/ nav { background: #888888; } nav a, nav a:visited { background: #fff; } /* select nev link */ nav a.selected, nav a:hover { color: #32673f; }

nav { text-align: center; padding: 10px 0; margin: 20px 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; } /* site body */

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

.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'); }

Answer 12 · 2015-10-08T12:51:12Z

October 8, 2015 12:51pm

responsive.css

@media screen and (min-width: 480px) {

#primary { width: 50%; float: left; } #secondary { width: 40%; float: right; }

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

}

.profile-photo { float: left; margin: 0 5% 80px 0; }

@media screen and (min-width: 660px) {

nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }

h1 { font-size: 2.5em; }

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }

}

Welcome to the Treehouse Community

Looking to learn something new?

Alessandro Giordo

Alessandro Giordo

I can't see my green header. why?

Matthew Goodman

Matthew Goodman

12 Answers

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

Matthew Goodman

Matthew Goodman

Matthew Goodman

Matthew Goodman

Alessandro Giordo

Alessandro Giordo

Matthew Goodman

Matthew Goodman

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

Alessandro Giordo

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Alessandro Giordo

Alessandro Giordo