Cool section box design using CSS3 and html5 responsive

Responsive box design using css3

DEMO / DOWNLOAD

HTML

<section>
    <div>
         <h1>Business Strategy</h1>
        <p>More...</p>
    </div>
</section>
<section class="orange">
    <div>
         <h1>City Streets</h1>
        <p>More...</p>
    </div>
</section>
<section class="green">
    <div>
         <h1>Natural</h1>
        <p>More...</p>
    </div>
</section>
<section class="red">
    <div>
         <h1>Transport</h1>
        <p>More...</p>
    </div>
</section>

CSS

* {
    -webkit-box-sizing: border-box;
}
body {
    font-size: 100%;
    background-color: #7d7e7d;
    background-image: url(http://subtlepatterns.com/patterns/tweed.png);
}
section {
    float: left;
    margin-right: 20px;
    width:280px;
    height: 200px;
    background: url(http://lorempixel.com/240/200/business/) #249ed7;
    background-size: 280px 200px;
    box-shadow: 0 4px 15px -4px #000;
    margin-top: 20px;
}
section:hover {  box-shadow: 0 4px 15px -4px #fff; }
div {
    background: #48b1e1;
    width: 170px;
    height: 200px;
    float: right;
    padding: 0 10px 0 20px;
    position: relative;
}
h1 {
    font-size: 1.5em;
    color: #eee;
    font-family:'Raleway', sans-serif;
    font-weight: 100;
}
p {
    background:rgba(255, 255, 255, .2);
    margin:35px 0 0 60px;
    width:90px;
    color: #eee;
    font-family: sans-serif;
    font-weight: 100;
    font-size: .7em;
    padding: 8px 0px 8px 24px;
    border-radius: 50px 0 0 0px;
    position:absolute;
    bottom:0;
    cursor:pointer;
}
.orange {
    background: url(http://lorempixel.com/240/200/city/) -90px 0;
    background-size: 280px 200px;
}
.orange div { background: #e76f50; }
.green {
    background: url(http://lorempixel.com/240/200/nature/) -90px 0;
    background-size: 280px 200px;
}
.green div { background: #73C27D; }
.red {
    background: url(http://lorempixel.com/240/200/transport/) -90px 0;
    background-size: 280px 200px;
}
.red div { background: #c9112d; }