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.
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.”
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.