<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 rel="stylesheet" href="https://fontawesome.com/v4.7.0/assets/font-awesome/css/font-awesome.css">

.btn:not(:disabled):not(.disabled) { cursor: pointer; } .item-purchase-banner .banner-button { background-image: linear-gradient(109.6deg, #0b85ea 11.2%, #223fc9 91.1%); border: none; color: #ffffff; } .item-purchase-banner .banner-text { margin-bottom: 0; margin-right: 15px; font-weight: 400; color: #ffffff; } .item-purchase-banner { position: fixed; top: 0px; width: 100%; height: 55px; display: flex; justify-content: center; align-items: center; padding: 10px 15px; z-index: 9990; background: #000; color: #ffffff; } .item-purchase-banner .toggler-close { margin-left: auto; color: #ffffff; }

$(function () { function appendBanner() { $("body").addClass("purchase-banner-active"); $("body").prepend('\ <div class= "item-purchase-banner">\ <p class="banner-text">Yatendra Pratap singh Design layouts, sample pages, and more! </p>\ <a href="https://yatendrapratapsingh.blogspot.com/" target="_blank" class= "banner-button btn btn-primary btn-icon">\ <i class="fa fa-user"></i> Read More\ </a>\ <span class="toggler-close"><i class="fa fa-close"></i></span>\ </div>\ ') $(".item-purchase-banner .toggler-close").on("click", function () { $(".item-purchase-banner").slideUp(300); $("body").removeClass("purchase-banner-active"); }); } appendBanner(); });