Markup
<section class="section-padding gray-bg"> <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <div class="section-title"> <h2>Get Insurance</h2> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="single-service-item"> <div class="service-bg service-bg-1"></div> <div class="service-content"> <h3>Business Insurance</h3> <p>We offer many more built-in insur discounts, such as safe driver, pay-in multi-bike, etc.</p> <a href="" class="service-more-btn">see more <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> <div class="col-md-3"> <div class="single-service-item"> <div class="service-bg service-bg-2"></div> <div class="service-content"> <h3>Boat Insurance</h3> <p>We offer many more built-in insur discounts, such as safe driver, pay-in multi-bike, etc.</p> <a href="" class="service-more-btn">see more <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> <div class="col-md-3"> <div class="single-service-item"> <div class="service-bg service-bg-3"></div> <div class="service-content"> <h3>Life Insurance</h3> <p>We offer many more built-in insur discounts, such as safe driver, pay-in multi-bike, etc.</p> <a href="" class="service-more-btn">see more <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> <div class="col-md-3"> <div class="single-service-item"> <div class="service-bg service-bg-4"></div> <div class="service-content"> <h3>House Insurance</h3> <p>We offer many more built-in insur discounts, such as safe driver, pay-in multi-bike, etc.</p> <a href="" class="service-more-btn">see more <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> </div> </section>
Style
/* Base CSS */ .alignleft { float: left; margin-right: 15px; } .alignright { float: right; margin-left: 15px; } .aligncenter { display: block; margin: 0 auto 15px; } a:focus { outline: 0 solid } img { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; font-weight: 700; } body { } a:hover { text-decoration: none } .gray-bg {background-color: #fafafa} .service-bg-1 {background-image: url('../img/business-insurance.jpg');} .service-bg-2 {background-image: url('../img/boat-insurance.jpg');} .service-bg-3 {background-image: url('../img/life-insurance.jpg');} .service-bg-4 {background-image: url('../img/house-insurance.jpg');} .section-padding { padding: 80px 0; } .section-title h2 { color: #333; font-size: 25px; margin-bottom: 60px; } .single-service-item { background: #fff none repeat scroll 0 0; } .service-bg { background-color: #ddd; background-position: center center; background-size: cover; height: 225px; } .service-content { padding: 20px; } body { color: #9c9c9c; } .service-content h3 { color: #333; font-size: 18px; } .service-more-btn { border-radius: 50px; color: #39ca70; display: inline-block; font-weight: 700; margin-top: 5px; padding: 10px 0; transition: all 0.3s ease 0s; } .service-more-btn i.fa { margin-left: 10px; } .service-more-btn:hover { background: #39ca70 none repeat scroll 0 0; color: #fff; padding: 10px 20px; } .single-service-item:hover { box-shadow: 0 0 2px #39ca70; }