<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 ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <section class="sec-1 py-5"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="textandimage text-center anim animate fadeInLeft "> <h2 class="">Works With Your Favorite Marketing Automation Software</h2> </div> </div> </div> </div> </section> <section class="sec-2 py-5"> </section>

/******Section-1 Start*********/ .sec-1 .textandimage h2 { background: linear-gradient(to top, #ee7e00, #9acc4c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } .sec-1 { margin-bottom: 7rem; } /******Section-1 End*********/ /******Section-2 Start*********/ .sec-2 { background-color: #1d1f2c; position:relative; } .sec-2::before { background: inherit; top: -60px; content: ''; display: block; height: 300px; left: 0; position: absolute; right: 0; -webkit-transform: skewY(4.5deg); -ms-transform: skewY(4.5deg); transform: skewY(4.5deg); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; z-index: -1; } .sec-2::after { background: inherit; top: -168px; content: ''; display: block; height: 300px; left: 0; position: absolute; right: 0; -webkit-transform: skewY(-4.5deg); -ms-transform: skewY(-4.5deg); transform: skewY(-4.5deg); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; z-index: -1; } /******Section 2nd End*********/