<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 ----------> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <div class="benefit-section"> <div class="container"> <h3 class="site-titles">Benefits</h3> <p class="site_para">Custom Designed with the Latest Technologies</p> <div class="col-md-4 pixi_two_grid_right"> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Ideal Layout</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Custom Designed</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-4 pixi_two_grid_right"> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Ideal Layout</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Custom Designed</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="col-md-4 pixi_two_grid_right"> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Ideal Layout</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> <div class="pixi_two_grid_right1"> <div class="col-xs-3 pixi_two_grid_right_grid"> <div class="pixi_two_grid_right_grid1"> <span class="glyphicon glyphicon-cog icon"></span> </div> </div> <div class="col-xs-9 pixi_two_grid_right_gridr"> <h4>Custom Designed</h4> <p>Suspendisse bibendum ex sit amet tellus finibus ultrices.</p> </div> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div>

body { font-family: 'Roboto';font-size: 14px; } .icon { color : white; padding:15px; font-size:30px; } .benefit-section { background-color:#4f003d; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; -ms-background-size: cover; } .benefit-section { padding: 5em 0; } h3.site-titles { font-size: 3.5em; text-align: center; margin-bottom: 1.3em; position: relative; color: #fff; } h3.site-titles:before, h3.site-titles:after { content: " "; background: #ededed; position: absolute; width: 17%; height: 1px; } h3.site-titles:after { right: 41%; top: 102%; } p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } .pixi_two_grid_right_gridr h4 { font-size: 1.5em; color: #ededed; } .pixi_two_grid_right_gridr p { color: #dedede; line-height: 2em; } .pixi_two_grid_right_grid1 { width: 65px; height: 65px; text-align: center; border: 1px solid #fff; } p.site_para { font-size: 2em; color: #fff; text-align: center; letter-spacing: 4px; }