The Magnificent Workbench!

Code ON Code OFF

My Widget

Widget Name:

Animation Demo

Entry Animation:

Exit Animation:

CSS

@import url(//fonts.googleapis.com/css?family=Vollkorn:400,700);
@import url(//fonts.googleapis.com/css?family=Droid+Sans: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%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
  background: rgba(0,0,0,0.8);
  background-color: rgba(0,0,0,0.82);
}
#apcl-widget-wrapper{
  width: 100%;
  position: absolute;
  bottom: 0;
}
#apcl-widget-container{
  width: 640px;
  height:440px;
  padding: 0px;
  margin: 0 auto;
  position: relative;
  display:block;
}
#apcl-left-side{
  width:50%;
  float:left;
  height:100%;
  overflow:hidden;
  background-color:#000;
}
#apcl-image{
  height:100%;
  display:block;
}
#apcl-right-side{
  width:50%;
  float:left;
  height:100%;
  background:#000;
  text-align:center;
  padding:20px 40px;
  position:relative;
}
#apcl-heading1{
  color:#fff;
  font-size:30px;
  margin-top:50px;
  margin-bottom:20px;
  padding:0 0 20px 0;
  border-bottom:1px solid #fff;
}
#apcl-heading2{
  font-size:18px;
  color:#fff;
  margin-bottom:40px;
}
#apcl-paragraph{
  font-size:16px;
  color:#fff;
  line-height:32px;
  margin-bottom:20px;
}
#apcl-link{
  color:#fff;
  text-decoration:underline;
  display:block;
  margin-bottom:60px;
}
#apcl-link:hover{
  color:#eee;
  text-decoration:underline;
}
#apcl-input-text{
  width:100%;
  padding:10px;
  color:#fff;
  background:transparent;
  border:1px solid #fff;
  text-align:center;
  font-size:16px;
  font-weight:300;
}
#apcl-formButton {                       
  width:100%;
  background:#fff;
  color: #000000;
  display:block;
  padding:10px;
  border:none;
  margin-top:20px;
  transition:all 0.3s ease-out;
  -moz-transition:all 0.3s ease-out;
  -webkit-transition:all 0.3s ease-out;
  font-size: 21px;
  font-family: "Vollkorn",serif;
  background-color: rgba(255,255,255,1);
}
#apcl-formButton:hover{
  box-shadow:0px 0px 10px 5px rgba(255,255,255,0.4)
}
#apcl-close-button{
  position:absolute;
  z-index:999999999;
  top:10px;
  right:10px;
}
#apcl-close-button span{
  position:relative;
  width:30px;
  height:30px;
  display:block;
  cursor:pointer;
}
#apcl-close-button span:before{
  content:"";
  width:18px;
  height:1px;
  background:#fff;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(45deg);  
}
#apcl-close-button span:after{
  content:"";
  width:18px;
  height:1px;
  background:#fff;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-45deg);  
}
#apcl-credits{
  width:100%;
  text-align:center;
  font-size:13px;
  color:#fff;
  font-family:"Tahoma";
  margin-top:20px;
}
#apcl-credits a{
  font-size:13px;
  color:#fff;
  border-bottom:1px solid #fff;
  padding-bottom:1px;
}
#apcl-heading1 {       
  font-family: "Vollkorn",serif;
}
#apcl-heading1 a {       
  font-family: "Vollkorn",serif;
}
#apcl-heading2 { 
  font-family: "Droid Sans",sans-serif;
  font-size: 20px;
}
#apcl-heading2 a {
  font-family: "Droid Sans",sans-serif;
}
#apcl-paragraph {             
  font-family: "Droid Sans",sans-serif;
  color: #ffffff;
}
#apcl-paragraph a {             
  font-family: "Droid Sans",sans-serif;
  color: #ffffff;
}
#apcl-link {
  font-family: "Droid Sans",sans-serif;
}
#apcl-link a {
  font-family: "Droid Sans",sans-serif;
}
#apcl-formButton a {                  
  font-family: "Vollkorn",serif;
  background-color: rgba(255,255,255,1);
  color: #000000;
}

HTML

<div class="apcl-formLoadingOverlay" id="apcl-formLoadingOverlay" apcl-group="Your Form" apcl-title="Thanks"></div>
<div id="apcl-overlay" class="apcl-overlay" apcl-controls="backgroundColor[aTags=false]" apcl-group="Widget Content" apcl-title="Widget Overlay">
  <div class="apcl-reset" id="apcl-reset">
    <div class="apcl-widget-wrapper" id="apcl-widget-wrapper">
      <div id="apcl-widget-container" class="apcl-widget-container" apcl-actions="animation" apcl-group="Widget Content" apcl-title="Widget Container">
        <div class="apcl-left-side" id="apcl-left-side">
          <img src="https://www.appocalypsis.com/userfiles/widgets/2875/599adf109dcfa_f9.jpg" id="apcl-image" class="apcl-image" apcl-controls="image" apcl-group="Widget Content" apcl-title="Widget Image">
        </div>
        <div class="apcl-right-side" id="apcl-right-side">
          <h1 class="apcl-heading1" id="apcl-heading1" apcl-controls="text fontSize fontFamily color" apcl-group="Widget Content" apcl-title="Widget Heading 1">Fashion Tips</h1>
          <h2 class="apcl-heading2" id="apcl-heading2" apcl-controls="text fontSize fontFamily color" apcl-group="Widget Content" apcl-title="Widget Heading 2">Get weekly fashion tips for Men right into your INBOX</h2>
          <form class="apcl-simple-form" id="apcl-simple-form" apcl-onsubmit-redirect-target="http://www.appocalypsis.com" apcl-onsubmit="close" apcl-title="Widget Form" apcl-group="Your Form" apcl-controls="onSubmit" apcl-lifecycle-label="On Form Submit" apcl-lifecycle="onSubmit">
            <input placeholder="Your E-mail" class="apcl-input-text" id="apcl-input-text" name="apcl-input-text" type="email" apcl-controls="placeholder validation" apcl-group="Your Form" apcl-title="Widget Input" required="" apcl-input-name="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">OK!</button>
          </form>
          <div id="apcl-credits" class="apcl-credits">
            widget by
            <a href="https://www.appocalypsis.com" target="_blank">APPOCALYPSIS</a>
          </div>
        </div>
        <div id="apcl-close-button" class="apcl-close-button" apcl-actions="close"><span></span></div>  
      </div>
    </div>
  </div>
</div>

The magnificent workbench is doing some magic..

please wait and awesomeness will load..

Fashion Tips

Get weekly fashion tips for Men right into your INBOX

CSS

HTML

EXTRAS (updateable)

EXTRAS (non updateable)

Admin Hooks

JS Hooks