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 trial12 Answers
Alessandro Giordo
2,065 Points<!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>
Alessandro Giordo
2,065 Pointsresponsive.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; }
}
Matthew Goodman
12,786 PointsJust 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.
Matthew Goodman
12,786 Points<!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>
Alessandro Giordo
2,065 PointsI'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
Matthew Goodman
12,786 Pointswell 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.
Alessandro Giordo
2,065 Pointshmmm I think something it's broke!
Alessandro Giordo
2,065 PointsINDEX
<!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>
Alessandro Giordo
2,065 PointsContact
<!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>
Alessandro Giordo
2,065 PointsAbout
<!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>
Alessandro Giordo
2,065 Pointsmain.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'); }
Alessandro Giordo
2,065 Pointsresponsive.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; }
}
Matthew Goodman
12,786 PointsMatthew Goodman
12,786 PointsCan you show your code please.