here is sample html5 banner for wordpress
1 |
<div id="g-poapemblackfriday" class="gqb18hq g-393wax g-b8acwp g-j3whxj g-lt5o0t" role="dialog" tabindex="0"><div class="g-2gvxmz"><style media="print" type="text/css">#g-poapemblackfriday{display:none!important}</style><style media="handheld,screen,projection,tv" type="text/css">#g-poapemblackfriday{margin:0;padding:0;border:0;box-sizing:content-box!important;box-shadow:none;background-clip:padding-box!important;line-height:1.2;vertical-align:middle;text-align:right;font-weight:400;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-style:normal;direction:rtl;letter-spacing:normal;text-shadow:none;text-transform:none;float:none;-webkit-font-smoothing:subpixel-antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);filter:none}#g-poapemblackfriday a,#g-poapemblackfriday b,#g-poapemblackfriday div,#g-poapemblackfriday em,#g-poapemblackfriday form,#g-poapemblackfriday h1,#g-poapemblackfriday i,#g-poapemblackfriday img,#g-poapemblackfriday label,#g-poapemblackfriday li,#g-poapemblackfriday ol,#g-poapemblackfriday p,#g-poapemblackfriday span,#g-poapemblackfriday strong,#g-poapemblackfriday u,#g-poapemblackfriday ul{margin:0;padding:0;border:0;border-radius:0;vertical-align:inherit;width:auto;height:auto;min-width:0;min-height:0;max-width:none;max-height:none;text-shadow:none!important;box-shadow:none!important;font-family:inherit;line-height:inherit;letter-spacing:normal;color:inherit;background-color:transparent;position:static;font-size:inherit;font-weight:inherit;font-style:inherit;text-transform:inherit;text-decoration:inherit;text-align:inherit;float:none;outline:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}#g-poapemblackfriday a,#g-poapemblackfriday a:active,#g-poapemblackfriday a:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);text-decoration:none}#g-poapemblackfriday img{display:block}#g-poapemblackfriday .g-4y8yfx{vertical-align:baseline;line-height:1.35}#g-poapemblackfriday .g-4y8yfx b,#g-poapemblackfriday .g-4y8yfx strong{font-weight:700}#g-poapemblackfriday .g-4y8yfx em,#g-poapemblackfriday .g-4y8yfx i{font-style:italic}#g-poapemblackfriday .g-4y8yfx u{text-decoration:underline}#g-poapemblackfriday .g-4y8yfx p{margin:0 0 10px 0}#g-poapemblackfriday .g-4y8yfx a{text-decoration:underline}#g-poapemblackfriday .g-4y8yfx.g-z24fnt{display:inline;white-space:nowrap;margin:0;padding:0}#g-poapemblackfriday .g-4y8yfx.g-z24fnt *{white-space:nowrap;display:inline;margin:0;padding:0}#g-poapemblackfriday ::-webkit-input-placeholder{color:#cacaca!important;text-overflow:ellipsis!important;opacity:1;overflow:hidden;white-space:nowrap;vertical-align:middle;font-size:14px;text-align:right;font-weight:400;position:static}#g-poapemblackfriday :-moz-placeholder,#g-poapemblackfriday ::-moz-placeholder{color:#cacaca!important;text-overflow:ellipsis!important;opacity:1;overflow:hidden;white-space:nowrap;vertical-align:middle;font-size:14px;text-align:right;font-weight:400;position:static}#g-poapemblackfriday input:-ms-input-placeholder{color:#cacaca!important;text-overflow:ellipsis!important;opacity:1;overflow:hidden;white-space:nowrap;vertical-align:middle;font-size:14px;text-align:right;font-weight:400;position:static}#g-poapemblackfriday [placeholder]{text-overflow:ellipsis}#g-poapemblackfriday input:-moz-placeholder,#g-poapemblackfriday input:-ms-input-placeholder,#g-poapemblackfriday input::-moz-placeholder{text-overflow:ellipsis}#g-poapemblackfriday input,#g-poapemblackfriday input:focus,#g-poapemblackfriday select,#g-poapemblackfriday select:focus,#g-poapemblackfriday textarea,#g-poapemblackfriday textarea:focus{margin:0!important;padding:0;border:0;text-align:right!important;border-radius:3px!important;background:0 0;vertical-align:middle;width:auto!important;height:auto!important;min-width:0;min-height:0;max-width:none;max-height:none;text-shadow:none!important;box-shadow:none!important;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif!important;background-clip:padding-box!important;line-height:1!important;letter-spacing:normal!important;outline:0 none!important;font-size:14px!important;float:none}#g-poapemblackfriday button,#g-poapemblackfriday input[type=submit]{margin:0;padding:0;background:0 0;width:auto;height:auto;text-shadow:none!important;box-shadow:none!important;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1;letter-spacing:normal;float:none;font-weight:700;text-decoration:none;display:inline-block;text-align:center;border-radius:2px;vertical-align:middle;cursor:pointer;background-image:none;border:0;white-space:nowrap;outline:0;font-family:inherit;text-transform:none;overflow:visible}#g-poapemblackfriday button:active,#g-poapemblackfriday button:disabled,#g-poapemblackfriday button:focus,#g-poapemblackfriday button:hover,#g-poapemblackfriday input[type=submit]:active,#g-poapemblackfriday input[type=submit]:disabled,#g-poapemblackfriday input[type=submit]:focus,#g-poapemblackfriday input[type=submit]:hover{outline:0;text-decoration:none}#g-poapemblackfriday button::-moz-focus-inner,#g-poapemblackfriday input[type=submit]::-moz-focus-inner{padding:0;border:0}#g-poapemblackfriday textarea{line-height:1.2;overflow:auto;resize:none!important}#g-poapemblackfriday input:-webkit-autofill,#g-poapemblackfriday textarea:-webkit-autofill{background-color:transparent!important;-webkit-box-shadow:0 0 0 1000px #fff inset!important}#g-poapemblackfriday *{box-sizing:content-box!important;filter:none}#g-poapemblackfriday .g-trqehq{text-decoration:none;display:inline-block;border-radius:2px;vertical-align:middle;cursor:pointer;background-image:none;border:0;outline:0;font-family:inherit;text-transform:none;overflow:visible;color:#ffffff!important;background:#fb3535!important;transition:background-color .2s ease-out!important;word-wrap:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:700;text-align:center;line-height:44px;display:block;padding:0 8px}#g-poapemblackfriday .g-trqehq:active,#g-poapemblackfriday .g-trqehq:disabled,#g-poapemblackfriday .g-trqehq:focus,#g-poapemblackfriday .g-trqehq:hover{outline:0;text-decoration:none}#g-poapemblackfriday .g-trqehq::-moz-focus-inner{padding:0;border:0}#g-poapemblackfriday .g-trqehq:active,#g-poapemblackfriday .g-trqehq:hover{background:#fb4949!important;color:#ffffff!important}#g-poapemblackfriday{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-touch-action:manipulation;touch-action:manipulation}#g-poapemblackfriday.g-j3whxj{position:relative;top:0;right:0;bottom:0;left:0;outline:0;overflow-y:hidden;overflow-x:hidden;padding:25px;display:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:touch;transition:background-color .4s cubic-bezier(.455,.03,.515,.955)}.g-393wax#g-poapemblackfriday.g-j3whxj{transition:none!important}#g-poapemblackfriday .g-2gvxmz{color:#ffffff!important;background:#142223!important;will-change:transform;position:relative;margin:auto;padding:22px 16px;box-shadow:0 12px 27.26px 1.74px rgba(0,0,0,.4);border-radius:4px;text-align:right;min-width:238px;max-width:293px;transition-property:height,margin;transition-duration:.2s;transition-timing-function:cubic-bezier(.455,.03,.515,.955);transition-delay:0s}#g-poapemblackfriday .g-2gvxmz a,#g-poapemblackfriday .g-2gvxmz a:active,#g-poapemblackfriday .g-2gvxmz a:focus,#g-poapemblackfriday .g-2gvxmz a:hover,#g-poapemblackfriday .g-2gvxmz button,#g-poapemblackfriday .g-2gvxmz button:active,#g-poapemblackfriday .g-2gvxmz button:focus,#g-poapemblackfriday .g-2gvxmz button:hover,#g-poapemblackfriday .g-2gvxmz div,#g-poapemblackfriday .g-2gvxmz input,#g-poapemblackfriday .g-2gvxmz input:active,#g-poapemblackfriday .g-2gvxmz input:focus,#g-poapemblackfriday .g-2gvxmz label,#g-poapemblackfriday .g-2gvxmz span,#g-poapemblackfriday .g-2gvxmz textarea,#g-poapemblackfriday .g-2gvxmz textarea:active,#g-poapemblackfriday .g-2gvxmz textarea:focus{color:inherit}.g-393wax#g-poapemblackfriday .g-2gvxmz{transition:none!important}#g-poapemblackfriday .g-2gvxmz .g-y2lowt,#g-poapemblackfriday .g-2gvxmz .ghy7m6n{color:#ffffff;text-align:right;font-size:16px;font-weight:700;margin-bottom:16px;line-height:1.2;padding-right:32px;white-space:normal;overflow-wrap:break-word;word-wrap:break-word;word-break:normal}#g-poapemblackfriday .g-2gvxmz .g-2dc9og,#g-poapemblackfriday .g-2gvxmz .g-jlqx3h{text-align:right;font-size:14px;margin-bottom:16px;white-space:normal;overflow-wrap:break-word;word-wrap:break-word;word-break:normal}#g-poapemblackfriday .g-2gvxmz .gnrqzf6{margin-top:15px;opacity:.5;text-align:right;font-size:12px;white-space:normal;overflow-wrap:break-word;word-wrap:break-word;word-break:normal}#g-poapemblackfriday .g-2gvxmz .gbg3hx3{color:#ffffff!important;opacity:0;font-family:gsc!important;font-style:normal!important;font-weight:400!important;line-height:1;vertical-align:middle;display:inline-block;background-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:22px;height:22px;width:22px;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;padding:10px;cursor:pointer;position:absolute;right:0;top:0}#g-poapemblackfriday .g-2gvxmz .gbg3hx3:before{color:inherit!important;font-family:gsc!important;font-style:inherit!important;font-weight:inherit!important;vertical-align:baseline!important;background-color:inherit!important}#g-poapemblackfriday .g-2gvxmz .gbg3hx3:before{content:"\e81c"}@media screen and (min-width:736px){#g-poapemblackfriday .g-2gvxmz{min-width:293px;max-width:332px}}#g-poapemblackfriday .g1vfz1l{text-indent:0!important;text-align:center!important;font-size:12px!important;font-weight:400!important;white-space:nowrap!important;vertical-align:middle!important;text-decoration:none!important;margin:22px -16px -22px;line-height:32px;background-color:#2b3839!important;color:#ffffff!important;border-radius:0 0 4px 4px;opacity:.5!important}#g-poapemblackfriday .g1vfz1l>span{position:relative}#g-poapemblackfriday .g1vfz1l>span:before{content:"\e809";color:inherit!important;font-family:gsc!important;font-style:inherit!important;font-weight:inherit!important;vertical-align:baseline!important;background-color:inherit!important;font-size:16px;width:16px;height:16px;position:absolute;left:-20px}#g-poapemblackfriday.g-lt5o0t{display:-ms-flexbox;display:flex}#g-poapemblackfriday.g-lt5o0t.g7ssdic{animation-name:gscw-fadeIn;animation-duration:.8s}#g-poapemblackfriday.g-lt5o0t.g7ssdic .g-2gvxmz{animation-name:gscw-bounceInUp;animation-duration:.8s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.455,.03,.515,.955)}#g-poapemblackfriday.gtbcsig.g7ssdic{animation-name:gscw-fadeOut;animation-duration:.2s;display:-ms-flexbox;display:flex}#g-poapemblackfriday.gj7n34s.g-j3whxj{background:rgba(77,77,77,0);transition:top .2s cubic-bezier(.455,.03,.515,.955)}.g-393wax#g-poapemblackfriday.gj7n34s.g-j3whxj{transition:none!important}#g-poapemblackfriday.gtfkjtl.g-j3whxj{top:70vh;padding-top:0;overflow:visible}</style><div class="g-y2lowt ">العرض المجنون - السايبر مونداي</div><div class="g-2dc9og g-4y8yfx ">احصل على<b> خصم 1700 دولار</b> على كل دوراتنا من الخطة الشاملة لاكتساح التسويق والتجارة الالكترونية + دورة السيرفرات شامل جميع الهدايا والاضافات مدى الحياة - <b>لمدة محدودة</b></div><a class="g-trqehq " target="_blank" data-track="action" href="https://anbilarabi.com/product/black-friday-bundle/"> التسجيل الآن</a><span class="gbg3hx3"></span></div></div> |
and here is the preview
العرض المجنون – السايبر مونداي
احصل على خصم 1700 دولار على كل دوراتنا من الخطة الشاملة لاكتساح التسويق والتجارة الالكترونية + دورة السيرفرات شامل جميع الهدايا والاضافات مدى الحياة – لمدة محدودة