<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="container"> <div class="row"> <div id="webpush-prompt"><div class="backdrop"></div><div class="wrapper"><div class="table content-table"><div class="tablerow"><div class="image-container tablecell"><div class="main-img" align="center"><img class="image-img img-circle" src="https://indior.tours/images-static/indior_transperent%20cropped.png"></div></div><div id="webpush-prompt" class="container tablecell"><div class="description-container"><div class="description">Indior Tours wants to start sending you push notifications. Click <b>Allow</b> to subscribe.</div></div></div></div></div> <div class="button-group-custom clearfix"><button id="deny" class="button close">I'll do this later</button><button id="allow" class="button">Allow</button></div></div></div> </div> </div>

<style type="text/css">.button,.close:hover,.wrapper{text-decoration:none;cursor:pointer}.button,.close,.close:hover,.wrapper{cursor:pointer}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;font-family:'Open Sans',Arial,Helvetica,sans-serif}.button,.wrapper,body{font-weight:400}.container,.image-container,.main-img{vertical-align:middle}body{width:100%;height:100%;line-height:1.5;color:#1C2E3D;background-color:transparent;background-size:cover;margin:0;padding:0}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased}:focus{outline-width:1px;outline-style:solid}::-webkit-scrollbar{display:none}body,head,html{font-size:13px}.button{color:#fff;background-color:#888;border-color:#888;padding:8px 14px;font-size:15px;border-radius:4px;border-style:solid;border-width:1px;min-width:90px;text-align:center;display:inline-block;white-space:nowrap}.button.focus,.button.hover,.button:focus,.button:hover{color:#fff;background-color:rgba(136,136,136,.9);border-color:rgba(136,136,136,.9);outline:0}.button.active,.button:active{-webkit-animation-name:hvr-push;animation-name:hvr-push;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}.transparent{-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0}.image-container{height:100%;width:20%}.main-img{overflow:hidden}.main-img img{display:block;margin:0 auto;max-height:50px;max-width:50px}img{max-width:100%}.button-group-custom{width:100%;display:block}.button-group-custom .button{width:50%;border-radius:0}.button-group-custom .button:first-child,.button-group-custom .button:first-child+.button{border-radius:0}.table{display:table}.content-table{height:76px;width:100%;padding:10px;position:relative}.tablerow{display:table-row}.tablecell{display:table-cell}.wrapper{background:#add8e6;overflow:visible;width:100%;font-size:13px;margin:0;border-left-width:0;border-right-width:0;border-top-width:0;min-height:30px;outline:0;text-align:center}.close{text-align:center;margin:0 auto}.container{overflow:hidden;padding:0 10px}button{margin:0;padding:0;border:none;font:inherit;color:inherit;background:0 0;overflow:visible}button::-moz-focus-inner{padding:0;border:none}button:-moz-focusring{outline:dotted 1px}.description{padding:0;margin:0;text-align:left}.hide{display:none!important}.we-beak{position:absolute;width:0;height:0}</style> <style type="text/css">.wrapper {background : #4A90E2;border-radius: 5px;} .backdrop {background : #000000;opacity : 0.5;width: 100%;height: 100%;position: fixed;} .wrapper {top : 20px;left : 20px;position : absolute;width : 350px;} .button,.button:hover,.button:active,.button:focus,.button:visited {background-color : #3076c8;border-color : #3076c8;color : #FFFFFF;fonbt-size : 16px;} .button-group-custom > .button:first-child {border-right-color: #4A90E2;border-bottom-left-radius: 5px;}.button-group-custom > .button:first-child + .button {border-left-color: #4A90E2;border-bottom-right-radius: 5px;} .description {color : #FFFFFF;font-size : 14px;}</style>