Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Olesya Kravchenko
Olesya Kravchenko
8,958 Points

Not a single page. All pages look like index.html.

I have no idea what the problem is.... I tried opening in different browsers, but there is no pages contact and about... At first they were, but after adding responsive.css into the links this problem appeared.

9 Answers

Can you share your workspace address and leave it up and running - we can view your code using that.

Thanks,

Steve.

That's not working.

Can you post your code, please? (Or revise the link)

Thanks!

Steve.

Olesya Kravchenko
Olesya Kravchenko
8,958 Points
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Olesya Kravchenko. 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>Olesya Kravchenko</h1>
  <h2> Designer</h2>
  </a> 
  <nav>
  <ul>
    <li> <a href="index.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>
  <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>Playing with blending modes in Photoshop.</p>
    </a> </li>
  <li><a href="img/numbers-06.jpg">
    <img src="img/numbers-06.jpg" alt="">
    <p>Trying to create an eighties style of glows.</p>
    </a> </li>
    <li><a href="img/numbers-09.jpg">
    <img src="img/numbers-09.jpg" alt="">
    <p>Drips created using Photoshop brushes.</p>
    </a> </li>
    <li><a href="img/numbers-12.jpg">
    <img src="img/numbers-12.jpg" alt="">
    <p>Creating shapes using repetition.</p>
    </a> </li>
  </ul>
  </section>
<footer>
   <a href="http://www.facebook.com/olesya.danilova1">
<img src="img/facebook-wrap.png" alt="facebook icon" class="social-icon">
 </a>
<p>&copy; 2015 Olesya Kravchenko.</p>
</footer>
    </div>
  </body>
</html>
Olesya Kravchenko
Olesya Kravchenko
8,958 Points
Contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Olesya Kravchenko. 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>Olesya Kravchenko</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 id="primary">
 <h3>General information</h3>
  <p>Hello! I am looking for a job. If you would like to hire me  contact me!</p>
    </section>
    <section id="secondary">
 <h3>Contact details</h3>
      <ul class="Contact details">
      <li class="phone"><a href="tel:555-6666">555-6666</a></li>
      <li class="mail"><a href="mailto:olesya@example.com"></a></li>
      <li> </li></ul>
    </section>
<footer>
   <a href="http://www.facebook.com/olesya.danilova1">
<img src="img/facebook-wrap.png" alt="facebook icon" class="social-icon">
 </a>
<p>&copy; 2015 Olesya Kravchenko.</p>
</footer>
    </div>
  </body>
</html>
Olesya Kravchenko
Olesya Kravchenko
8,958 Points
About.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Olesya Kravchenko. 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>Olesya Kravchenko</h1>
  <h2> Designer</h2>
  </a> 
  <nav>
  <ul>
    <li> <a href="index.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>
  <div id="wrapper">
<section>
  <img src="img/SAM_1105.JPG" alt="Photograph of Olesya Kravchenko" class="profile photo">
  <h3> About </h3>
  <p> Hi,I am Olesya Kravchenko! Nice to meet you! This is my first web page) </p>
  <p>If you would like to contact me on Facebook my username is  <a href="http://www.facebook.com/olesya.danilova1"></a> </p>
    </section>
<footer>
   <a href="http://www.facebook.com/olesya.danilova1">
<img src="img/facebook-wrap.png" alt="facebook icon" class="social-icon">
 </a>
<p>&copy; 2015 Olesya Kravchenko.</p>
</footer>
    </div>
  </body>
</html>
Olesya Kravchenko
Olesya Kravchenko
8,958 Points
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%;
}

/**********************************************
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 0;
font-size:1.75em;
text-align: center;
font-weight: normal;
line-height:0,8em;
}
h2
{
font-size: 0,75em;z-index: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 10 px;
padding: 0;

}
nav li {
display:inline-block;
}
nav a {
font-weight:800px;
padding:15px 10px;

}
/**********************************************
PAGE:PORTFOLIO
***********************************************/
#gallery{
margin:0;
padding:0;
list-style:none;
}
#gallery li{
float:left;
width:45%;
margin:2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#galery li a p {
margin:0;
padding:5%;
font-size:0.75em;
color:#bdc3c7;
}


/**********************************************
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:ABOUT
*********************************************/
.profile-photo
{
display:block;
max-width:150px;
margin:0 auto 3px;
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/numbers-01.jpg')};

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

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

/**********************************************
COLORS
***********************************************/
/* site body */
body {
background-color:#fff;
color:#fff;
}
/*green header*/
header {
background: #6ab47b;
border-color:#599a68;
}
/*nav background on mobile*/
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;
}
Olesya Kravchenko
Olesya Kravchenko
8,958 Points
responsive.css
@media screen and (min-width: 480px){ 

/**********************************************
two column layout
***********************************************/
  #primary{
  width:50%;
  float:left;

  }
  #secondary{

  width:40%;
  float:right;

  }
  /**********************************************
HEADER
***********************************************/
}

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


}
/**********************************************
ABOUT
***********************************************/
.profile photo{
  float:left;
  margin:0,5% 80px 0;
}

The link for About.html has a slash rather than a dot in it.

<li> <a href="about/html">About</a></li>

The About.html page has the "selected" class on the wrong link, i.e. not itself.

about.html
<li> <a href="index.html"class="selected">Portfolio</a></li>

I can't see any other reason for the navigation to not work. Maybe leave the server running for a bit later on and I can test drive from here.

Steve.

Olesya Kravchenko
Olesya Kravchenko
8,958 Points

Thank you ) I hope it will work)

Let me know if it doesn't and leave your server running - we can figure it out whilst it is online.

Steve.

Olesya Kravchenko
Olesya Kravchenko
8,958 Points

Thank you very much for your help!) Everything works now.