cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="padiOverlay" style="display: block;">
  <div class="padiPop4Wrap" style="display: block;">
    <div class="padiPop4Overlay" >
      <div class="padiPopupContent" > <a href="#" class="padiClose" title="Close" style="display:block;" >&times;</a>

        <div class="padiContent" style="display:block">
          
          <h1 class="padiTitle">
          <!-- any TEXT can go from here -->

          Subscribe to our newsletter

          <!-- to here -->
          </h1>

          <!-- any HTML can go from here -->
          
          <p >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
         
          <!-- to here -->

          
          
          <!--padiForm-->
          <div class="padiFormWrap">
            <p class="padiErrorMessage" style="display:none">Something went wrong!</p>
            <div class="padiFields">
              <form class="padiForm">
                <p>
                  <label class="padiLabel"><span>Email*:</span>
                    <input style="" class="padiField" name="Email|EmailBase" type="email">
                  </label>
                </p>
                <p>
                    <label class="padiLabel"><span>Name*:</span>
                    <input style="" class="padiField" name="Email|EmailBase" type="email">
                  </label>
                </p>
                <input type="hidden" name="segment" value="1576">
                <p class="padiCheckTerms">
                  <label>
                    <input type="checkbox" />
                    I agree with the Terms and Conditions</label>
                </p>
                <p>
                  <button type="submit" name="norilsk_save" class="padiButton"> Subscribe Now </button>
                  <span class="padiPreload" style="display: none;"><img alt="loading..." src="https://d2xgf76oeu9pbh.cloudfront.net/images/ajax-loader.gif"></span></p>
              </form>
            </div>
            <!--padiFields--> 
          </div>
          <!--padiForm-->
         
          <div class="padiPrivacy padiClearfix">
            <!-- any HTML can go from here -->
            <br style="clear:both"/>
            <p class="privacy">We value your privacy. You can unsubscribe anytime. </p>

            <!-- to here -->
          </div>
          
          <div class="padiClear"></div>
        </div>
        <div class="padiThanks" style="display:none">
            <!-- any HTML can go from here -->

            <p>Thank you for subscribing</p>

            <!-- to here -->
        </div>
      </div>
    </div>
          
  </div>
  
  <div class="padiFade"></div>
</div>


            
          
!
            
              .padiOverlay {
	position: fixed;
	left: 0px;
	top: 0px;
	padding: 0px;
	margin: 0px;
	visibility: visible;
	
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	height: 100%;
	z-index: 1040;
}
.padiFade { 
  zoom: 1;
	background-color: rgba(0,0,0,0.6);
  width: 100%;
	height: 100%;
	z-index: 1041;
}
.padiPop4Overlay h1, .padiPop4Overlay h2, .padiPop4Overlay h3, .padiPop4Overlay div, .padiPop4Overlay ul, .padiPop4Overlay li, .padiPop4Overlay ol, .padiPop4Overlay p, .padiPop4Overlay a, .padiPop4Overlay input, .padiPop4Overlay input[type=text], .padiPop4Overlay input[type=email] {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: middle;
	float: none;
	width: auto;
	height: auto;
	background-image: none;
	letter-spacing: 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	list-style: none;
	-webkit-text-shadow: none !important;
	-moz-text-shadow: none !important;
	text-shadow: none !important;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.padiPop4Overlay *, .padiPop4Overlay *:before, .padiPop4Overlay *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.padiPop4Wrap {
	position: absolute;
	visibility: visible;
	z-index: 1602;
	padding: 10px;
	left: 50%;
	margin-left: -200px;
	top: 5%;
	height: auto;
	width: auto;
	max-width: 400px;
}
.padiPop4Overlay {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	background-color: rgb(180,180,180);
	background-color: rgba(180,180,180,0.8);
	background-image: none;
	background-repeat: no-repeat;
	padding: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
	-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
	-moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	position: static;
	margin: 0;
	z-index: 1060;
	overflow: auto;
}
.padiPop4Overlay a {
	color: inherit;
	text-decoration: underline;
	border-bottom: none;
}
.padiPop4Overlay a:hover { 
	color:inherit;
	text-decoration: underline;
	border-bottom: none;
}
.padiPop4Overlay h1.padiTitle {
	color: #000;
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	padding: 15px 0;
	text-shadow: none;
	word-spacing: -1px;
	text-decoration: none;
	line-height: 22px;
}
.padiPop4Overlay div.padiPopupContent {
	position: relative;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	background: rgb(255,255,255);
	margin-bottom: 0;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	color: #2d2d2d;
}
.padiPop4Overlay .padiContent {
	padding: 0 1.6em 0.2em 1.5em;
	color: #2d2d2d;
}
.padiPop4Overlay .padiContent p {
	margin-top: 0;
	margin-bottom: 1.4em;
}
.padiPop4Overlay .padiCriticalMessage {
	border: none !important;
	background: #FCC;
	padding: 10px;
	font-size: 13px;
	font-weight: normal;
	color: #b10000;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
.padiPop4Overlay .padiFields {
	width: 100%;
	display: block;
	vertical-align: top;
	padding: 0;
}
.padiPop4Overlay .padiThanks {
	width: 100%;
	display: block;
	vertical-align: top;
	padding: 0;
	font-weight: bold;
	color: #2d2d2d;
}
.padiClearfix:after {
	content: " "; /* Older browser do not support empty content */
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}
.padiPop4Overlay .padiClose {
	font-family: Arial, Helvetica, sans-serif;
	padding: 8px;
	margin: 0;
	display: block;
	float: right;
	font-size: 28px;
	font-weight: bold;
	line-height: 18px;
	color: rgb(180,180,180);
	text-shadow: none;
	opacity: 0.5;
	filter: alpha(opacity=20);
	text-decoration: none !important;
	border: none;
}
.padiPop4Overlay .padiClose:hover {
	color: rgb(180,180,180);
	text-decoration: none;
	opacity: 0.9;
	filter: alpha(opacity=40);
	cursor: pointer;
	text-decoration: none !important;
	border: none;
	padding: 8px;
	margin: 0;
	display: block;
}
/* THE FORM FIELDS */
.padiPop4Overlay form {
	position: relative;
	padding-top: 5px;
	margin: 0;
	display: block;
}
.padiPop4Overlay form .padiField {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 8px;
	font-size: 13px;
	line-height: 1.428571429;
	color: #2d2d2d;
	vertical-align: middle;
	background-color: rgba(255,255,255,0.3);
	background-image: none;
	border: 1px solid #CCC;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.18);
	-moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.18);
	box-shadow: inset 0 0 3px rgba(0,0,0,0.18);
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	margin: 4px 0px 3px 0px;
	font-family: Arial, Helvetica, sans-serif;
}
.padiPop4Overlay form .padiCheck {
	margin: 0px 4px 2px 4px;
	vertical-align: bottom;
}
.padiPop4Overlay form .padiField:focus {
	border-color: #666;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(255,255,255,0.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(255,255,255,0.6);
}
.padiPop4Overlay form .padiLabel {
	font-weight: bold;
}
.padiPop4Overlay form .padiRadioLabel {
	font-weight: normal !important;
	font-size: 12px;
}
.padiPop4Overlay form option {
	color: #333;
}
.padiPop4Overlay form .padiRadio {
	margin-bottom: 1.4em;
	padding: 0;
	list-style: none;
}
.padiPop4Overlay form .padiRadio li {
	margin: 3px 0px;
}
.padiPop4Overlay form .padiButton {
	color: #fff;
	background-color: #222;
	border-color: #000;
}
.padiPop4Overlay form .padiButton:hover {
	background-color: #444;
	border-color: #222;
}
.padiPop4Overlay form .padiButton:active {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.225);
	box-shadow: inset 0 3px 5px rgba(0,0,0,0.225);
}
.padiPop4Overlay form .padiButton {
	display: inline-block;
	padding: 4px 10px;
	margin-bottom: 0;
	margin-top: 15px;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.428571429;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	outline: none;
	opacity: 0.9;
	font-family: Arial, Helvetica, sans-serif;
}
.padiPop4Overlay form .padiButton:hover {
	opacity: 1;
}
.padiPop4Overlay form .padiSLabel {
	font-size: 12px;
	display: block;
	margin: 5px 0;
}
.padiPop4Overlay .privacy {
	font-size: 11px;
	font-style: italic;
	color: #777;
	margin-bottom: 10px !important;
}
.padiPreload {
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: inherit;
	padding: 3px;
}


            
          
!
            
              //jQuery('.padiContent').hide();
//jQuery('.padiThanks').show();
//jQuery('.padiErrorMessage').show();
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console