The Escape Committee’s beautiful HTML/CSS techniques

When I visited the Escape Committee’s website, I knew immediately I wanted to copy its CSS technique for my next website.

The creators of this site appeared to use a grid system when designing the home page; the page consists four rows of three photos and/or projects. Not all of the boxes are the same size, which adds an asymmetrical touch to the grid pattern.

Screen shot 2013-10-29 at 3.00.05 PM

While inspecting the home page’s HTML, I realized the site’s developers used a code I was unfamiliar with. The following is  small chunk of code the developers used to design the page:

<div class=”m-home_content” >
<div class=”grid-pageContentContainer” >
<div class=”grid-homeContent style-white u-clearfix” >
<div class=”grid-homeContent_itemA grid-homeContent_itemDouble” >

Another design feature I love about this site is the hovering effect we see when we scroll over one of the photos. When we move our computer mouse over a photo, the photo becomes darker, and text appears that tells us the name of that project. We now also have the option to click on “View Article.”

Screen shot 2013-10-29 at 3.01.08 PM

The HTML I found for this effect is as follows:

<div class=”c-imageBlock c-imageBlock_verticalAlign c-hideContentUntilHover” style=”background-image:url(http://www.escapecommittee.com/wp-content/uploads/2013/05/11-580×400.jpg >

The site’s grid pattern adds organization to the site, and its hover effect allows the user to know what he or she will see once he or she clicks on one of the squares. I would like to use these techniques when I create my next website.

Advertisements

3 responses to “The Escape Committee’s beautiful HTML/CSS techniques

  1. Nice choice! I really like the simply but clear layout of the page. Definitely a great choice for photo gallery! And I REALLY like the js when it makes it dim and the information pops up!

  2. I love how the page is divided into different parts by choosing various colors. The color choice is really nice and makes the site clean and organized. Loving the picture grids as well!

  3. I agree that the asymmetrical look of the grid pattern looks very nice! I also really like the little white icons that pop up when you hover over the red boxes.

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