<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Exo+2:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i&display=swap'"> <div class="IndustryServe"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="IndustryServeBox"> <div class="IndustryIcon"> <img src="images/img1.png" /> <div class="IndustryIconAB"> <img src="images/industry-icon.png" /> </div> </div> <div class="IndustryServe-Text"> <h3>Petroleum and Gas</h3> <p>There are many variations of passages of available but the have alteration in that some form by injected.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div> <div class="col-md-4"> <div class="IndustryServeBox"> <div class="IndustryIcon"> <img src="images/img2.png" /> <div class="IndustryIconAB"> <img src="images/industry-icon.png" /> </div> </div> <div class="IndustryServe-Text"> <h3>Petroleum and Gas</h3> <p>There are many variations of passages of available but the have alteration in that some form by injected.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div> <div class="col-md-4"> <div class="IndustryServeBox"> <div class="IndustryIcon"> <img src="images/img3.png" /> <div class="IndustryIconAB"> <img src="images/industry-icon.png" /> </div> </div> <div class="IndustryServe-Text"> <h3>Petroleum and Gas</h3> <p>There are many variations of passages of available but the have alteration in that some form by injected.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div> </div> </div> </div>

body { font-family: 'Exo 2', sans-serif; font-size: 15px; background-color: #f8f8f8; } .IndustryServe { padding: 100px 0px; background: #f2f3f5; } .IndustryServeBox { position: relative; background: #fff; border-radius: 5px; } .IndustryServeBox h3 { margin: 54px 0px 15px; color: #131d3b; font-size: 24px; font-weight: 600; } .IndustryServeBox p { color: #666d81; line-height: 30px; font-size: 16px; } .IndustryServeBox .read-more { text-align: left; text-transform: uppercase; letter-spacing: 2px; color: #ff4f01; font-size: 16px; line-height: 30px; font-weight: 500; position: relative; } .IndustryServeBox .read-more:hover { text-align: left; text-transform: uppercase; letter-spacing: 2px; color: #ff4f01; font-size: 16px; line-height: 30px; font-weight: 500; position: relative; } .IndustryServeBox .read-more:before { content: ''; background-color: #ff4f01; width: 20px; height: 2px; position: absolute; left: 116px; bottom: 8px; z-index: 12; } .IndustryServeBox .read-more:after { content: ''; background-color: #e7eaee; width: 171px; height: 2px; position: absolute; left: 116px; bottom: 8px; } .IndustryServeBox img { width: 100%; } .IndustryIcon { position: relative; } .IndustryIconAB { width: 69px; height: 86px; background-color: #ff4f01; border-radius: 5px; padding: 22px 13px; position: absolute; bottom: -37px; left: 50px; } .IndustryIconAB img { width: 40px; } .IndustryServe-Text { padding: 0px 50px 40px; }