<div class="wrapper">
  <div class="main_container">
    <div class="column">
      <div class="container"> 
        <img src="http://lorempixel.com/359/320" />
        <div class="description">
          <h2>Cycling</h2>
        </div>      
      </div>
      <div class="container"> 
        <img src="http://lorempixel.com/359/250" />
        <div class="description">
          <h2>Firefighting</h2>
        </div>      
      </div>
      <div class="container"> 
        <img src="http://lorempixel.com/359/480" />
        <div class="description">
            <h2>Running</h2>
        </div>      
      </div>      
    </div>
    <div class="column alt">
      <div class="container"> 
        <img src="http://lorempixel.com/359/283" />
        <div class="description">
            <h2>Hiking</h2>
        </div>      
      </div>
      <div class="container"> 
        <img src="http://lorempixel.com/359/210" />
        <div class="description">
            <h2>Fishing</h2>
        </div>      
      </div>
      <div class="container"> 
        <img src="http://lorempixel.com/359/180" />
        <div class="description">
            <h2>Motorcycling</h2>
        </div>      
      </div>      
    </div>    
    <div class="column">
      <div class="container"> 
        <img src="http://lorempixel.com/359/190" />
        <div class="description">
            <h2>Hunting</h2>
        </div>      
      </div>
      <div class="container"> 
        <img src="http://lorempixel.com/359/470" />
        <div class="description">
            <h2>Military</h2>
        </div>      
      </div>
      <div class="container"> 
        <img src="http://lorempixel.com/359/230" />
        <div class="description">
            <h2>Golfing</h2>
        </div>      
      </div>      
    </div>   
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Architects+Daughter);

body
{
  background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/retina_wood.png);
   text-align:center; 
}

h2
{
  margin:0;
  padding:0;
  font-family: 'Architects Daughter', cursive;
  text-shadow:#ffffff 0px 2px 0px;
  -webkit-transform: rotate(1.5deg);
  -moz-transform: rotate(1.5deg);
  transform: rotate(1.5deg);
  font-size: 20px;
}

.container
{
  background-color:#fff;
  float:left;
  width:360px;
  margin:10px 0 10px 0;
  padding:10px;  
  border-top:1px solid #eee;
  box-shadow: 0 1px 3px rgba(34,25,25,0.4); 
  -moz-box-shadow: 0 1px 2px rgba(34,25,25,0.4); 
  -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
}

.description
{
  padding:5px 0 5px 0;
  font-family: "Verdana";
  width:100%;
  color: #333;
}

.main_container
{
	margin:60px auto 0; 
  width:100%;
}

.column
{
  float:left;
  width:393px;
}
.alt
{
	margin:20px 10px 0 10px; 
}

.wrapper
{
  margin: 0 auto;
 	width:1200px; 
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js