CSS: Powderlife

Powderlife is a site that helps users plan trips to Niesko, a popular ski area in Japan. This site serves as a travel guide. It has a lot of cool features but what I like the most is the use of their background images. 

Image

 

The home page has 5 different sections on it as users scroll down. The first image scrolls with the page until it is hidden by the next section, which is a fixed image. The third section uses a black transparent layer over a photo. The next section follows the style of the first with the background image scrolling with the page until it falls behind the final section. 

The use of CSS allows the site to accomplish such a unique design by creating different divisions within the homepage aspect…

Image

 

Image

 

There are many more CSS elements defined as the sections continue, but the important aspect is that they are all divided and that allows them to be styled differently. 

This is definitely a feature I would like to use in building my own website. 

Advertisements

3 responses to “CSS: Powderlife

  1. I like this site, especially the design of the section content when you hover over the nav links.

  2. I agree – I love the navigation bar! Also, this site has a nice grid pattern; the elements within the navigation bar line up nicely, as do the different elements on the home page (the about section, the stay section, the play session, etc.). The site seems well-organized.

  3. I like how the whole website keeps everything simple, I think the layout helps the viewers to navigate the site easier. It’s really cool to see a mixture of moving lines on the navigation (the technique you mentioned) and a fixed information as scrolling down the page. The hovering image adds an interesting point to the clean and simple website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s