<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="seo-services-banner-main"> <div class="seo-services-banner-left-corner"></div> <div class="seo-services-banner-left-corner1"></div> <div class="container"> <div class="row"> <div class="col-md-6"> <div> <img src="https://www.hummingwebians.com/public/images/seo-rocket.png" alt="Seo Services"> </div> </div> <div class="col-md-6 seo-services-banner-text py-50"> <div class="seo-services-banner-text-box"> <h1>Get on Top on SERP</h1> <p>The easy and effective way to have better positioning and more visitors on your website.</p> </div> </div> </div> </div> </div>

.seo-services-banner-main { background: #d9eef9; } .seo-services-banner-text{ background: #3fc8d0; } .seo-services-banner-text-box{ position: relative; left: -217px; border: 3px solid #fff; padding: 31px; margin: 43px; box-shadow: 7px 8px 0px -1px #08656b; } .seo-services-banner-left-corner{ width: 200px; height: 124px; background: #3fc8d0; position: absolute; top: 0px; left: 0px; } .seo-services-banner-left-corner1{ width: 100px; height: 62px; background: #89e4ea; position: absolute; top: 0px; left: 0px; } .seo-services-banner-bottom-thin{ width: 26px; height: 98px; background: #00c444; border: 8px solid #fff; position: absolute; bottom: -46px; right: 75px; } .seo-service-left-text{ color: #fff; font-size: 14px; margin-bottom: 0px; }