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!

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

HTML How to Make a Website Adding Pages to a Website Style New Pages

Brack Slater
Brack Slater
2,144 Points



4 Answers

Brack Slater
Brack Slater
2,144 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Brack Slater | Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Brack Slater</h1> <h2>Developer</h2> </a> <nav> <ul> <li><a href="index.html" >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/profile.jpg" alt="Photograph of Brack Slater" class="profile-portfolio"> <h3>About</h3> <p>Hi, I'm Brack Slater! This is my design portfolio where I share all my favorite work. When I'm not developing websites, I enjoy fishing, camping, and hunting with my family. I also enjoy playing video games, umping little league baseball, and going to sporting events.</p> <p>If you'd like to follow me on twitter, my username is <a href="https://twitter.com/BrackSlater>@brackslater.">@brackslater</a>. </p> </section> <footer> <a href="https://twitter.com/BrackSlater"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com/brack.slater"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Brack Slater.</p> </footer> </div> </body> </html>

Brack Slater
Brack Slater
2,144 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 30 px 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; font-weight: normal; line-height: 0.8em; }

h2 { font-size:0.75em; 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 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: PORTFOLIO **********************/

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

/********************* PAGE: ABOUT **********************/

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

h3{ margin: 0 0 1em 0; }

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

/* site body */ body { background-color: #fff; color: #999; }

/* green header / header { background: #6ab47b; border-color: #599a68; } / logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav background on mobile */ nav { background: #599a68; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/*selected nav link */ nav a.selected, nav a:hover { color: #32673f; }

Kevin Korte
Kevin Korte
28,147 Points

Which browser? Which system? Does spacebar work on other text editor type programs? This leads me to believe you have a hardware or driver issue, not a browser issue.

Brack Slater
Brack Slater
2,144 Points

It would pause and play the video every time I pressed it. The problem is in my code and what my question was about why my photo won't add space between it and the nav bar.

Kevin, this is a known problem on Treehouse's end. I've submitted information about it on 4/6 and the response I got was: Hi Abby,

Thank you for writing. I do apologize for any inconvenience caused. We have just been alerted about this today and I've shared the information with my team. I realize your mentioned workaround has some extra steps, but it should still accomplish a similar goal for the time being. The devs will be taking a look at the issue as soon as possible. We appreciate your patience during this time!

Best, Jay

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Ok I am confused You are asking about the spacebar issue or the problem with the img?

Tushar, He's trying to ask about the code, but a Treehouse problem with using the space bar isn't allowing him to ask what he needs to.

@Brack Slater I can explain why your browser isn't allowing space bar. What's happening is an error that Treehouse knows about but hasn't resolved yet. When you open the "Ask for Help" pop up or the rate the video link on a page with video the page interprets space bar as play the video vs. adding a space to your comment. There is a pain in the butt work around which is to open a text program like notepad or word, make your comment and question in there, and then copy it into the "Ask for Help" pop up form on the page. Another work around is to open a new window into the community and ask there, and the space bar will work like normal because there's no video.