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

CSS

Posted by rafael marcus
rafael marcus
472 Points

Full width banner (and parallax? i think)

Hey Treehouse,

Just wondering if you guys touch upon creating websites that have those big banners and long form pages that span across the entire screen (and are responsive). one of my favorites, which i think is beautifullly done is eatwith.com

I also wouldn't mind learning how they fixed the header and the nav bar under the banner as it scrolls, but i'm more interested in the layout and design of the site. are there CSS templates out there (like grid.css) for these kind of designs?

Thanks!

2 Answers

Michele Mirandola
Michele Mirandola
3,091 Points
Michele Mirandola
Michele Mirandola
3,091 Points

You should use a css framework link Bootstrap (http://getbootstrap.com/) or PureCss (http://purecss.io/base). This tools provide you a good grid to work with and a lot of css "ready-to-work" components (like navbars, buttons, slides, ecc..).

Uh, and here (http://startbootstrap.com/) you can find some free templates for starting your project with Bootstrap: the Grayscale template has some parallax features, chek it out.

Mike Baxter
Mike Baxter
4,442 Points
Mike Baxter
Mike Baxter
4,442 Points

It doesn't appear that Grayscale has parallax. Maybe they removed it?

rafael marcus
rafael marcus
472 Points
rafael marcus
rafael marcus
472 Points

great, i'll give them a try. Thanks michele!