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
Olesya Kravchenko
8,958 PointsNot 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
Steve Hunter
57,712 PointsCan you share your workspace address and leave it up and running - we can view your code using that.
Thanks,
Steve.
Olesya Kravchenko
8,958 Points<!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>© 2015 Olesya Kravchenko.</p>
</footer>
</div>
</body>
</html>
Olesya Kravchenko
8,958 Points<!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>© 2015 Olesya Kravchenko.</p>
</footer>
</div>
</body>
</html>
Olesya Kravchenko
8,958 Points<!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>© 2015 Olesya Kravchenko.</p>
</footer>
</div>
</body>
</html>
Olesya Kravchenko
8,958 Points/**********************************************
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
8,958 Points@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;
}
Steve Hunter
57,712 PointsThe 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.
<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
8,958 PointsThank you ) I hope it will work)
Steve Hunter
57,712 PointsLet me know if it doesn't and leave your server running - we can figure it out whilst it is online.
Steve.
Olesya Kravchenko
8,958 PointsThank you very much for your help!) Everything works now.
Olesya Kravchenko
8,958 PointsOlesya Kravchenko
8,958 Pointshttps://teamtreehouse.com/workspaces/4673582# Thanks for help.
Steve Hunter
57,712 PointsSteve Hunter
57,712 PointsThat's not working.
Can you post your code, please? (Or revise the link)
Thanks!
Steve.