The magnificent workbench is doing some magic..
please wait and awesomeness will load..
100 FREE SPOTS
Register now and get our product for free!
100 FREE SPOTS
Use your promo code during registration.
PROMO CODE:
EARLYBIRD
Close
widget by
APPOCALYPSIS
I WANT IT FOR FREE!
widget by
APPOCALYPSIS
Exit
Code ON
Code OFF
My Widget
Widget Name:
Animation Demo
Entry Animation:
Select ENTRY Animation
Bounce In
Bounce in Down
Bounce In Left
Bounce in Right
Bounce in Up
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
flipInX
flipInY
lightSpeedIn
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
slideInDown
slideInLeft
slideInRight
slideInUp
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
Exit Animation:
Select EXIT Animation
Bounce Out
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipOutX
flipOutY
lightSpeedOut
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
CSS
@import url(//fonts.googleapis.com/css?family=Fjalla+One); @import url(//fonts.googleapis.com/css?family=Lato:400,700); #widget_html_main *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:normal; margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; line-height:normal; background:none; text-decoration:none; text-transform:initial; } #apcl-reset *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-weight:normal; margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; line-height:1; background:none; text-decoration:none; text-transform:initial; } #apcl-reset input:focus, #widget_html_main input:focus{ outline:none; } #apcl-reset input[type="radio"], #widget_html_main input[type="radio"]{ position:relative; top:auto; left:auto; } #apcl-reset label, #widget_html_main label{ min-height:auto; } #apcl-overlay { width: 100%; height: 100%; background: rgba(0,0,0,0.7); position: fixed; top: 0; left: 0; z-index: 9999999999999999999; background-color: rgba(0,0,0,0.68); } #apcl-widget-container { width: 500px; background: #02B5EF; border-radius:5px; padding: 100px 40px; position: fixed; top: 50%; left: 50%; transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color: rgba(18,18,18,1); background-repeat:no-repeat; background-size:cover; background-image: url("https://www.appocalypsis.com/userfiles/widgets/2648/597b76bb2de04_dft-night.jpg"); } #apcl-widget-title { color: #ffffff; font-size: 50px; font-family: "Fjalla One",sans-serif; text-align:center; margin-bottom:20px; letter-spacing:5px; text-transform:uppercase; } #apcl-widget-title a { color: #ffffff; font-family: "Fjalla One",sans-serif; } #apcl-widget-subtitle { color: #ffffff; font-family: "Lato",sans-serif; font-size: 21px; text-align:center; text-transform:uppercase; line-height:27px; letter-spacing:3px; } #apcl-widget-subtitle a { color: #ffffff; font-family: "Lato",sans-serif; } #apcl-formThankYouContainer { display:none; text-align:center; position:absolute; top:0; left:0; width:100%; height:100%; padding:40px; background-color: rgba(50,35,98,1.00); } #apcl-simple-form{ margin-top:60px; } #apcl-input-text{ width:100%; background:#fff; padding:15px; border-radius:3px; font-size:14px; margin-bottom:10px; } #apcl-formButton { background-color: rgba(179,179,179,1); font-family: "Fjalla One",sans-serif; font-size: 22px; color: #ffffff; display:block; width:100%; padding:15px; border-radius:3px; } #apcl-formButton a { background-color: rgba(179,179,179,1); font-family: "Fjalla One",sans-serif; color: #ffffff; } #apcl-widget-close{ width:30px; height:30px; position:absolute; top:15px; right:15px; background:url(https://www.appocalypsis.com/images/close-icon-white.png) no-repeat center center; background-size:95%; } #apcl-close-text-title { color: #ffffff; font-size: 30px; font-family: "Lato",sans-serif; margin:20px; } #apcl-close-text-title a { color: #ffffff; font-family: "Lato",sans-serif; } #apcl-close-text-subtitle { color: #ffffff; font-family: "Fjalla One",sans-serif; font-size: 28px; letter-spacing:1px; display:inline-block; ; } #apcl-close-text-subtitle a { color: #ffffff; font-family: "Fjalla One",sans-serif; } #apcl-close-container-button { background-color: rgba(115,115,115,1); color: #ffffff; font-size: 16px; font-family: "Fjalla One",sans-serif; padding:15px; border-radius:3px; margin-top:40px; cursor:pointer; } #apcl-close-container-button a { color: #ffffff; font-family: "Fjalla One",sans-serif; } #apcl-after-close-align{ position:relative; top:50%; transform:translateY(-50%); } #apcl-widget-title-2 { color: #ffffff; font-size: 50px; font-family: "Fjalla One",sans-serif; text-align:center; margin-bottom:20px; letter-spacing:5px; text-transform:uppercase; } #apcl-widget-title-2 a { font-family: "Fjalla One",sans-serif; color: #ffffff; } #apcl-widget-subtitle-2 { color: #ffffff; font-family: "Lato",sans-serif; font-size: 21px; text-align:center; text-transform:uppercase; line-height:27px; letter-spacing:3px; } #apcl-widget-subtitle-2 a { font-family: "Lato",sans-serif; color: #ffffff; } #apcl-credits{ position:absolute; bottom:-30px; left:0px; width:100%; text-align:center; color:#fff; font-family:tahoma; font-size:13px; } #apcl-credits a{ display:inline-block; color: #fff; padding-bottom:1px; border-bottom:1px solid #fff; }
HTML
<div class="apcl-formLoadingOverlay" id="apcl-formLoadingOverlay" apcl-group="Your Form" apcl-title="Thanks"></div> <div class="apcl-overlay" id="apcl-overlay" apcl-title="Widget Overlay" apcl-group="Widget Content" apcl-controls="backgroundColor[aTags=false]" apcl-actions="animation"> <div class="apcl-reset" id="apcl-reset"> <div class="apcl-widget-container" id="apcl-widget-container" apcl-title="Widget Container" apcl-group="Widget Content" apcl-controls="backgroundImage"> <a href="#" class="apcl-widget-close" id="apcl-widget-close" apcl-actions="close"></a> <h1 class="apcl-widget-title" id="apcl-widget-title" apcl-title="Widget Title" apcl-group="Widget Content" apcl-controls="text color fontSize fontFamily">100 FREE SPOTS</h1> <h2 class="apcl-widget-subtitle" id="apcl-widget-subtitle" apcl-title="Widget SubTitle" apcl-group="Widget Content" apcl-controls="text color fontSize fontFamily">Register now and get our product for free!</h2> <div id="apcl-formThankYouContainer" class="apcl-formThankYouContainer" apcl-controls="backgroundColor[aTags=false]" apcl-title="After Close Container" apcl-group="Widget (2nd Screen)" aplc-controls="backgroundColor[aTags=false]"> <a href="#" class="apcl-widget-close" id="apcl-widget-close" apcl-actions="close"></a> <div class="apcl-after-close-align" id="apcl-after-close-align"> <h1 class="apcl-widget-title-2" id="apcl-widget-title-2" apcl-title="Widget Second Title" apcl-group="Widget (2nd Screen)" apcl-controls="text color fontSize fontFamily">100 FREE SPOTS</h1> <h2 class="apcl-widget-subtitle-2" id="apcl-widget-subtitle-2" apcl-title="Widget Second SubTitle" apcl-group="Widget (2nd Screen)" apcl-controls="text color fontSize fontFamily">Use your promo code during registration.</h2> <div class="apcl-close-text-title" id="apcl-close-text-title" apcl-title="After Close Title" apcl-group="Widget (2nd Screen)" apcl-controls="text color fontSize fontFamily">PROMO CODE:</div> <div class="apcl-close-text-subtitle" id="apcl-close-text-subtitle" apcl-title="After Close SubTitle" apcl-group="Widget (2nd Screen)" apcl-controls="text color fontSize fontFamily">EARLYBIRD </div> <div class="apcl-close-container-button" id="apcl-close-container-button" apcl-title="After Close Button" apcl-group="Widget (2nd Screen)" apcl-controls="text backgroundColor[aTags=false] color fontSize fontFamily" apcl-actions="close">Close </div> <div class="apcl-credits" id="apcl-credits">widget by <a href="https://www.appocalypsis.com">APPOCALYPSIS</a></div> </div> </div> <form class="apcl-simple-form" id="apcl-simple-form" apcl-onsubmit-redirect-target="http://www.appocalypsis.com" apcl-onsubmit="thankyou" apcl-title="Widget Form" apcl-group="Your Form" apcl-controls="onSubmit" apcl-lifecycle-label="On Form Submit" apcl-lifecycle="onSubmit"> <input placeholder="Enter your email address" class="apcl-input-text" id="apcl-input-text" name="apcl-input-text" apcl-controls="placeholder validation" apcl-group="Your Form" apcl-title="Widget Input" required="" apcl-input-name="email" type="email"> <button class="apcl-formButton" id="apcl-formButton" apcl-controls="text backgroundColor fontSize fontFamily color" apcl-title="Widget Button" type="submit" apcl-group="Your Form">I WANT IT FOR FREE!</button> </form> <div class="apcl-credits" id="apcl-credits">widget by <a href="https://www.appocalypsis.com">APPOCALYPSIS</a></div> </div> </div> </div>
EXTRAS (updateable)
EXTRAS (non updateable)
Admin Hooks
After Entry Animation Hook /*Your js here*/ Before Widget Opens Hook /*Your js here*/ After Widget Opens Hook /*Your js here*/ After Widget Closes Hook /*Your js here*/
JS Hooks
After Entry Animation Hook /*Your js here*/ Before Widget Opens Hook /*Your js here*/ After Widget Opens Hook /*Your js here*/ After Widget Closes Hook /*Your js here*/ After Form Submits Hook /*Your js here*/