Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div>&nbsp;</div>
<div class="app-container">
  <div class="cart">
    <div class="cart-control-bar">
      <span class="cart-control-bar-title">Checkout</span>
    </div>
    <div class="cart-body">
      <div class="cart-step cart-step-0">
        <h2 class="cart-fieldset-header">Donate</h2>
        
        <div class="cart-controls">
          <label class="cart-label">Fund</label>
          <select class="cart-select cart-width-1-1">
            <option>Area of greatest needs</option>
            <option>If there was a need</option>
            <option>For multiple funds</option>
          </select>
        </div>
        <div class="cart-controls is-required">
          <label class="cart-label">Amount</label>
          <input type="text" class="cart-input cart-width-1-1">
          <p class="cart-input-error-message">Amount is required</p>
        </div>
        <div class="cart-controls">
          <label class="cart-label">
            <input type="checkbox">
            Make this a monthly recurring donation
          </label>
          <a href="#/" class="cart-button cart-button-step cart-button-primary" data-to-cart-step="1">Next &#x279d;</a>
        </div>
      </div> <!-- END step 0 -->
      
      <div class="cart-step cart-step-1">
        <h2 class="cart-fieldset-header">Contact details</h2>
        <form action="">
          <div class="cart-controls">
            <label class="cart-label">First Name</label>
            <input type="text" class="cart-input cart-width-1-1">
          </div>
          <div class="cart-controls">
            <label class="cart-label">Last Name</label>
            <input type="text" class="cart-input cart-width-1-1">
          </div>
          <div class="cart-controls">
            <label class="cart-label">Email Name</label>
            <input type="text" class="cart-input cart-width-1-1">
          </div>
          <div class="cart-controls">
            <label class="cart-label">Phone</label>
            <input type="text" class="cart-input cart-width-1-1">
          </div>
          <a href="#/" class="cart-button cart-button-step cart-button-primary" data-to-cart-step="2">Next &#x279d;</a>
        </form>
      </div> <!-- END step 1 -->
      
      <div class="cart-step cart-step-2">
        <h2 class="cart-fieldset-header">Payment method</h2>
        <div class="cart-method-container">
          <ul class="cart-method-list u-clearfix">
            <li class="cart-method-item">
              <div class="cart-method is-active u-flex-center">
                <svg fill="#3E84E0" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0h24v24H0z" fill="none"/>
                    <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/>
                </svg>
              </div>
            </li>
            <li class="cart-method-item">
               <div class="cart-method u-flex-center">
                <img src="https://s27.postimg.cc/54lyg4smb/Pay_Pal.png" height="22">
              </div>
            </li>
            <li class="cart-method-item">
               <div class="cart-method u-flex-center">
                <img src="https://s24.postimg.cc/c12pp1vad/apple_pay.png" height="22">
              </div>
            </li>
          </ul>
        </div>
        
        
        <h2 class="cart-fieldset-header">Payment details</h2>
        <div class="cart-controls">
          <label class="cart-label">Card number</label>
          <input type="text" class="cart-input cart-width-1-1">
        </div>
        <div class="cart-controls">
          <label class="cart-label">Name on card</label>
          <input type="text" class="cart-input cart-width-1-1">
        </div>
        <div class="cart-grid">
          <div class="cart-controls cart-width cart-width-1-2">
            <label class="cart-label">Expiry date</label>
            <input type="text" class="cart-input">
          </div>
          <div class="cart-controls cart-width cart-width-1-2">
            <label class="cart-label">Security code</label>
            <input type="text" class="cart-input">
          </div>
        </div>
        <div class="cart-controls">
          <label class="cart-label">Zip/Postal code</label>
          <input type="text" class="cart-input cart-width-1-1">
        </div>

        <a href="#/" class="cart-button cart-button-step cart-button-primary" data-to-cart-step="3">
          <svg fill="#fff" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0h24v24H0z" fill="none" class="cart-button-icon"/>
            <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
          </svg>  
          Donate $500
        </a>
      </div> <!-- END step 2 -->
      
      <div class="cart-step cart-step-3 u-text-center">
        <div style="margin:100px 0 150px;">
          <svg fill="#3E84E0" height="96" viewBox="0 0 24 24" width="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
              <path d="M0 0h24v24H0V0z" id="a"/>
            </defs>
            <clipPath id="b">
              <use overflow="visible" xlink:href="#a"/>
            </clipPath>
            <path clip-path="url(#b)" d="M14 10H2v2h12v-2zm0-4H2v2h12V6zM2 16h8v-2H2v2zm19.5-4.5L23 13l-6.99 7-4.51-4.5L13 14l3.01 3 5.49-5.5z"/>
          </svg>

          <h2 style="font-weight:400;">Congratulations.<br>Your donation was successful.</h2>
          <p class="subtle">We will send a copy of the receipt to your email.</p>
        </div>
        <a href="#/" class="cart-button cart-button-step" data-to-cart-step="0">
         Return to start
        </a>
      </div> <!-- END step 2 -->
      
    </div>
  </div>
</div>
              
            
!

CSS

              
                html {
  background-color: #eee;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
      background-image: url(https://s24.postimg.org/txymqvd9x/child_children_girl_happy.jpg);
    width: 100%;
    height: 100vw;
}

.u-clearfix:before,
.u-clearfix:after {
  content: " ";
  display: table;
}

.u-clearfix:after {
  clear: both;
}

.u-clearfix {
  *zoom: 1;
}

.u-flex-center {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.u-text-center {
  text-align: center;
}

.subtle {
  color: #888;
}

input {
  font-family: 'Roboto', sans-serif;
}

.app-container {
  margin: 10vh 5vw;
  width: 380px;
}

.cart {
  background-color: #fff;
  box-shadow: 0 15px 80px 4px rgba(0,0,0,.18);
  width: 100%;
}

.cart-control-bar {
  background-color: #F4F4F4;
  padding: 15px 0;
  text-align: center;
}

.cart-control-bar-title {
  color: #888;
  font-size: 18px;
  font-weight: 400;
}

.cart-body {
  padding: 20px 10px;
}

.cart-step {
  display: none;
}

.cart-step-0 {
  display: block;
}

.cart-fieldset-header {
  color: #888;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.cart-input-error-message {
  color: #F04848;
  max-height: 0;
  font-weight: 500;
  margin: 5px 0 15px;
  overflow: hidden;
  transition: all 600ms ease-out;
}

.cart-controls {
   margin-bottom: 15px;
}

.cart-controls.is-invalid .cart-input-error-message {
  max-height: 100px;
}

.cart-controls.is-invalid .cart-input {
  border: 1px solid #F04848;
}

.cart-controls.is-invalid .cart-input:focus {
  outline: 1px solid #fcd5d5;
}

.cart-label {
  color: #888;
  display: block;
  margin-bottom: 6px;
}

.cart-input,
.cart-select {
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 15px;
  width: 100%;
}

.cart-input:focus {
  box-shadow: 0 2px 25px 1px rgba(0,0,0,.07);
}

.cart-select {
  
}

.cart-button {
  background-color: #eee;
  border-radius: 2px;
  color: #888;
  display: block;
  font-size: 17px;
  padding: 12px 0;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.cart-button-step {
  margin-top: 50px;
}

.cart-button-primary {
  background-color: #3E84E0;
  color: #fff;
}

.cart-button-icon {
    vertical-align: bottom;
    width: 16px;
}

.cart-method-container {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.cart-method-list {
  list-style-type: none;
  margin: 0 0 0 -5px;
  padding: 0;
}

.cart-method-item {
  box-sizing: border-box;
  display: inline-block;
  float: left;
  margin: 0;
  padding: 0 0 0 5px;
  width: 33.3%;
}

.cart-method {
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
  min-height: 60px;
  text-align: center;
}

.cart-method.is-active {
  border: 1px solid #87b2ec;
  box-shadow: 0px 1px 20px 1px rgba(0,0,0,.12);
}

.cart-grid {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* 1 */
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  /* 2 */
  margin: 0 0 0 -5px;
  padding: 0;
  list-style: none;
}
.cart-grid > * {
  padding-left: 5px;
}

[class*='uk-width'] {
  box-sizing: border-box;
  width: 100%;
  /* 1 */
  max-width: 100%;
}

.cart-width-1-1 {
  width: 100%;
}

.cart-width-1-2 {
  width: 50%;
}
              
            
!

JS

              
                                var currentStep;

$('.cart-button-step').on('click', function() {
  if( !fieldsValid() ) return false;
  var currentStep = $(this).data('to-cart-step');
  $('.cart-step').slideUp('fast');
  $('.cart-step-' + currentStep).slideDown('fast');
});

var fieldsValid = function() {
  $('.is-invalid').removeClass('is-invalid');
  var invalidFields = [];
  $('.is-required:visible').each(function(i, el) {
    var $el = $(el)
      field = $el.find('.cart-input');
    
    if(field.val() == "") {
      invalidFields.push(field);
      $el.addClass('is-invalid');
    }
    
  });
  console.log(invalidFields.length);
  return invalidFields.length == 0;
};
              
            
!
999px

Console