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
Haitham El Khatib
765 PointsMy preview is looking completely different than the video. Pretty sure code is the same except for colour. Please help.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kruzer - Rent your Car</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">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Kruzer</h1>
<h2>peer to peer car rental</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">How it works</a></li>
<li><a href="index.html">Search</a></li>
<li><a href="index.html">Cars</a></li>
<li><a href="index.html">Trips</a></li>
<li><a href="index.html">Profile</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 80's 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://twitter.com/kruzer"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/kruzer"><img src="img/facebook-wrap.png" alt="Twitter Logo"></a>
<p>©2015 Kruzer</p>
</footer>
</div>
</body>
</html>
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 **************************/
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; }
/************************** FOOTER **************************/
footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc
/************************** PAGE: PORTFOLIO **************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
list-style: none;
}
/************************** COLORS **************************/
/* site body */ body { background-color: #fff; color: #999; }
/* Orange header */ header { background: #ffc01c border-color: #f0b41b }
/* nav background on mobile */ nav { background: #f0b41b; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #ffc01c; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #ededed; }
Haitham El Khatib
765 PointsUse this link: https://w.trhou.se/6er8z08lyk
9 Answers
Haitham El Khatib
765 Pointssorted out. Thank you
Caleb Kleveter
Treehouse Moderator 37,862 PointsWhat are you trying to do?
Caleb Kleveter
Treehouse Moderator 37,862 PointsGlad You got it! Happy coding!
Haitham El Khatib
765 PointsCaleb, you seem to be advanced on all the treehouse tracks. Nice job man. I just started the trial. I have an idea for a web/app similar to the size, design and functionality of airbnb. I am planning to cover all the treehouse tracks and apply whatever is relevant. From your experience so far, do you believe the tracks provided would help me in setting up something like that?
Cheers
Caleb Kleveter
Treehouse Moderator 37,862 PointsIs this a web app, or a mobile app? If so iOS or android?
Haitham El Khatib
765 Pointsi'm looking at web first, then iOS quickly after and android later.
Caleb Kleveter
Treehouse Moderator 37,862 PointsI have not done the Rails track ( I did the 'Learn Ruby' track ), so I don't know on that one. The iOS tracks (Swift and Objective-C) are good, although the Obj-C one has some outdated courses; They won't do you any good if you don't try to implement them which is the hard part ( I'm work on that right now ). All I have any idea how to do in android is put an app on the google play store. And I have not heard of airbnb.
Haitham El Khatib
765 PointsThanks for the feedback. Let's see what comes out of this :) And i recommend checking airbnb
Caleb Kleveter
Treehouse Moderator 37,862 PointsWhat is it?
Caleb Kleveter
Treehouse Moderator 37,862 PointsI found it, vary neat.
Haitham El Khatib
765 Pointsplease don't tell me you've never heard of uber too
Caleb Kleveter
Treehouse Moderator 37,862 PointsNope. I do know about zippo though!!!
Rana Makki
4,692 PointsRana Makki
4,692 PointsHow did you fix your preview? My is the exact same as the video including color but I can't get site to do what the video is doing. Tips?