<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="aboutus-section"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="aboutus"> <h2 class="aboutus-title">About Us</h2> <p class="aboutus-text">Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in.</p> <p class="aboutus-text">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem</p> <a class="aboutus-more" href="#">read more</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="aboutus-banner"> <img src="http://themeinnovation.com/demo2/html/build-up/img/home1/about1.jpg" alt=""> </div> </div> <div class="col-md-5 col-sm-6 col-xs-12"> <div class="feature"> <div class="feature-box"> <div class="clearfix"> <div class="iconset"> <span class="glyphicon glyphicon-cog icon"></span> </div> <div class="feature-content"> <h4>Work with heart</h4> <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in.</p> </div> </div> </div> <div class="feature-box"> <div class="clearfix"> <div class="iconset"> <span class="glyphicon glyphicon-cog icon"></span> </div> <div class="feature-content"> <h4>Reliable services</h4> <p>Donec vitae sapien ut libero venenatis faucibu. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt</p> </div> </div> </div> <div class="feature-box"> <div class="clearfix"> <div class="iconset"> <span class="glyphicon glyphicon-cog icon"></span> </div> <div class="feature-content"> <h4>Great support</h4> <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in.</p> </div> </div> </div> </div> </div> </div> </div> </div>

body { font-family: 'Roboto';font-size: 16px; } .aboutus-section { padding: 90px 0; } .aboutus-title { font-size: 30px; letter-spacing: 0; line-height: 32px; margin: 0 0 39px; padding: 0 0 11px; position: relative; text-transform: uppercase; color: #000; } .aboutus-title::after { background: #fdb801 none repeat scroll 0 0; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 54px; } .aboutus-text { color: #606060; font-size: 13px; line-height: 22px; margin: 0 0 35px; } a:hover, a:active { color: #ffb901; text-decoration: none; outline: 0; } .aboutus-more { border: 1px solid #fdb801; border-radius: 25px; color: #fdb801; display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0; padding: 7px 20px; text-transform: uppercase; } .feature .feature-box .iconset { background: #fff none repeat scroll 0 0; float: left; position: relative; width: 18%; } .feature .feature-box .iconset::after { background: #fdb801 none repeat scroll 0 0; content: ""; height: 150%; left: 43%; position: absolute; top: 100%; width: 1px; } .feature .feature-box .feature-content h4 { color: #0f0f0f; font-size: 18px; letter-spacing: 0; line-height: 22px; margin: 0 0 5px; } .feature .feature-box .feature-content { float: left; padding-left: 28px; width: 78%; } .feature .feature-box .feature-content h4 { color: #0f0f0f; font-size: 18px; letter-spacing: 0; line-height: 22px; margin: 0 0 5px; } .feature .feature-box .feature-content p { color: #606060; font-size: 13px; line-height: 22px; } .icon { color : #f4b841; padding:0px; font-size:40px; border: 1px solid #fdb801; border-radius: 100px; color: #fdb801; font-size: 28px; height: 70px; line-height: 70px; text-align: center; width: 70px; } }