<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="special-section"> <!-- container --> <div class="container"> <div class="col-md-5 special-info-column"> <h3>Our Services</h3> <h5>Cras porttitor imperdiet volutpat nulla malesuada lectus eros ut convallis felis consectetur ut </h5> <p>Integer vitae ligula sed lectus consectetur pellentesque blandit nec orci. Nulla ultricies nunc et lorem semper, quis accumsan dui aliquam aucibus sagittis placerat. <span>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi non nibh nec enim sollicitudin interdum.tristique senectus et netus et malesuada fames ac turpis egestas</span> </p> <div class="more-button"> <a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal specialty-button" href="#" role="button">See More</a> </div> </div> <div class="col-md-7 special-inner-section "> <div class="special-inner-columns"> <div class="col-md-6 special-inner-column"> <span class="glyphicon glyphicon-cog icon"></span> <h5>Proin eget ipsum ultrices</h5> <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> <div class="col-md-6 special-inner-column"> <span class="glyphicon glyphicon-cog icon"></span> <h5>Proin eget ipsum ultrices</h5> <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> <div class="clearfix"> </div> <div class="col-md-6 special-inner-column"> <span class="glyphicon glyphicon-cog icon"></span> <h5>Proin eget ipsum ultrices</h5> <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> <div class="col-md-6 special-inner-column"> <span class="glyphicon glyphicon-cog icon"></span> <h5>Proin eget ipsum ultrices</h5> <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> </div> </div> <div class="clearfix"> </div> </div> <!-- //container --> </div>

.special-section { padding: 6em 0 5em; } .special-info-column h3 { color: #000; font-size: 40px; font-weight: 300; margin: 0; } .special-info-column h5 { color: #969696; font-size: 14px; margin: 1em 0; line-height: 1.8em; } .special-info-column p { color: #333333; font-size: 14px; margin: 3em 0 0 0; line-height: 1.8em; } .more-button a { background: #E42313; padding: 10px 16px; border: none; border-radius: 0; margin-top:20px; margin-bottom:20px; } .special-inner-column{ padding: 0px 0px 17px; } .icon { color : red; padding:0px; font-size:40px; } .special-inner-column h5 { color: #000; font-size: 17px; font-weight: 600; margin: 1.5em 0 0 0; padding: 0px 0px 10px; } .special-inner-column p { color: #333333; font-size: 14px; margin: 0; line-height: 1.8em; font-weight: 400; }