Markup
<div class="section-padding"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-title"> <h2>Why Choose Us</h2> <div class="section-borders"> <span></span> <span class="black-border"></span> <span></span> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="single-feature-item"> <div class="row"> <div class="col-md-3"> <div class="bordered-img bordered-img-bg-1"></div> </div> <div class="col-md-9"> <h3>Guaranteed Word</h3> <p>Duis autem vel eum iriure dolor in hendrerit in velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.</p> </div> </div> </div> <div class="single-feature-item"> <div class="row"> <div class="col-md-3"> <div class="bordered-img bordered-img-bg-2"></div> </div> <div class="col-md-9"> <h3>Expert Worker</h3> <p>Duis autem vel eum iriure dolor in hendrerit in velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.</p> </div> </div> </div> <div class="single-feature-item"> <div class="row"> <div class="col-md-3"> <div class="bordered-img bordered-img-bg-3"></div> </div> <div class="col-md-9"> <h3>24/7 Support</h3> <p>Duis autem vel eum iriure dolor in hendrerit in velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.</p> </div> </div> </div> </div> <div class="col-md-6"> <div class="big-feature-bordered-img"></div> </div> </div> </div> </div>
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 } .section-padding { padding: 80px 0; } .section-title { margin-bottom: 80px; text-align: center; } .single-feature-item { margin-bottom: 40px; } .bordered-img-bg-1 {background: url('../img/guaranteed-word.jpg')} .bordered-img-bg-2 {background: url('../img/expert-worker.jpg')} .bordered-img-bg-3 {background: url('../img/24-7-support.jpg')} .bordered-img { border: 1px solid #fff; height: 120px; position: relative; width: 100px; } .bordered-img::after { background-color: #6AAF08; bottom: -5px; content: ""; height: 100%; position: absolute; right: -5px; width: 100%; z-index: -1; } .single-feature-item h3 { border-bottom: 1px dashed #6AAF08; color: #333; font-size: 18px; font-weight: 400; margin-bottom: 14px; margin-top: 6px; padding-bottom: 12px; } .section-borders span { background: #6aaf08 none repeat scroll 0 0; border-radius: 4px; display: inline-block; height: 3px; width: 36px; } .section-borders .black-border { background: #000 none repeat scroll 0 0; width: 24px; } .big-feature-bordered-img { background: #ddd url('../img/big-image.jpg'); background-position: center; background-size: cover; border: 1px solid #fff; height: 430px; margin-left: 5%; position: relative; width: 95%; } .big-feature-bordered-img::after { background: #000; content: ""; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; } .big-feature-bordered-img::before { background: #6AAF08 url('../img/black-twill.png'); content: ""; height: 100%; left: -8px; position: absolute; top: 8px; width: 100%; z-index: -1; }