Church of the Atom — Cool way to look at beer

This was a cool site I found the on Fueled Blog where I visit every now and then for design inspiration. This week they had Church of the Atom site as one of their top favorites. I found this site to be a really cool way of organizing information, much like the secrets we have to organize. The colors are awesome and the navigation bar is aesthetically pleasing and very functional.

Screen shot 2013-11-29 at 3.36.06 PM

This is the home page ^^^. It’s very simple and contains a great photograph. You click on the text to enter the site. The text was a separate image that contained a link to the site containing the content. Once you enter you see this.

Screen shot 2013-11-29 at 3.36.31 PM

When you scroll, the nav bar stays at the top of the screen. This was done my putting the nav bar under the class “fixed.”

Screen shot 2013-11-29 at 4.04.59 PMIn CSS, it looked like this:

.fixed {
position:fixed;
margin: 0 auto;
top: 10px;
}

This was pretty cool to me, because jquery wasn’t used to keep the nav bar sticky, like I have learned in the past. Fixed was all it took.

When you click on the triangle, the page moves up and down to the picture it is linked to. From looking at the code, I found they site designers used a vertical carousel using Jquery. This allowed the user to click arrows on the sides to view the label of the beer and then a sort description of the beer. This would be a great feature for the secrets project.

Screen shot 2013-11-29 at 3.36.51 PM

After looking at the code and other aspects of carousels, I found a web site that somewhat explains and shows the code for the different styles of carousels including vertical. Here is the link: http://bxslider.com/examples/carousel-demystified

Advertisements

2 responses to “Church of the Atom — Cool way to look at beer

  1. Kaylie Denenberg

    I saw this site while browsing for cool effects also. I think it’s awesome they got the nav bar to stay in one place using CSS instead of Jquery because it’s a much simpler way to have the same effect. The triangles are also really cool, but they are a little random as far as design goes. I like that they scroll though when clicked because that is an awesome effect that I tried to master also for my projects. Definitely an interesting site with awesome coding!!!

  2. Cute website! I really like the idea of two layers, with one that’s fixed covering the who that moves. Navigation is clear, and I like the scrolling effect when you click a different triangle. The website is creative, but not in a way that will overwhelm us for its complicated codings. This is a website that we, as beginner, can actually learn something.

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