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

              
                .header
  h1 Your cart
  p "I say let the world go to hell, but I should always have my tea."
  p ― Fyodor Dostoyevsky, Notes from Underground

.cart-container
  .empty style="display:none" No more twinkies ! 
  ul.cart

    li.product data-price=4.90 data-quantity=2
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/sidebar-cupcake.png"
        .product-paper
          .product-name Cupcake
          .product-price $ 4.90
      .product-quantity x2
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=3.50 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/ponytails-coffee-time-coffee-cup3.png"
        .product-paper
          .product-name Coffee
          .product-price $ 3.50
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=5.70 data-quantity=3
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/Chocolate.png"
        .product-paper
          .product-name Chocolate
          .product-price $ 5.70
      .product-quantity x3
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=6.90 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/waffle-homestyle.png"
        .product-paper
          .product-name Waffle
          .product-price $ 6.90
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=3.90 data-quantity=2
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/donuts.jpg"
        .product-paper
          .product-name Donuts
          .product-price $ 3.90
      .product-quantity x2
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=6.50 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/raspberry-sorbet.gif"
        .product-paper
          .product-name Sorbet
          .product-price $ 6.50
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=1.80 data-quantity=3
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/croissant-psd49504.png"
        .product-paper
          .product-name French Croissant
          .product-price $ 1.80
      .product-quantity x3
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=2.50 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/Macaron.png"
        .product-paper
          .product-name Macaron
          .product-price $ 2.50
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=2.50 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/millefeuille-vanille.jpg"
        .product-paper
          .product-name Mille-feuille
          .product-price $ 12.90
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

    li.product data-price=9.90 data-quantity=1
      .product-preview
        .thumbnail
          img.image src = "https://s.cdpn.io/24822/tarte-au-citron.jpg"
        .product-paper
          .product-name Lemon Pie
          .product-price $ 9.90
      .product-quantity x1
      .product-interactions
        .button.plus +
        .button.minus -
        .button.del

table.bill
  tr.subtotal
    td.label Subtotal :
    td.value $ 71.90
  tr.salestax
    td.label Sales tax : 
    td.value $ 3.60
  tr
    td.label Shipping :
    td.value $ 5.00
  tr.total
    td.label Total :
    td.value $ 80.50

.actions
  .big-button.go Get them !
.actions
  .big-button.return Return to shop
  
              
            
!

CSS

              
                @import compass

@import url(https://fonts.googleapis.com/css?family=Mouse+Memoirs:400,700)

*
  box-sizing: border-box

html, body
  font: 16px 'Mouse Memoirs' 
  background: #ad6932
  color: #523118
  width: 100%
  height: 100%

.header
  text-align: center
  padding: 1em 0 2em
  background-image: repeating-linear-gradient(45deg, #5f391c, #5f391c 100px, #865127 100px, #865127 200px)
  color: #f0dccd
  //border-bottom: 5px solid white
  box-shadow: 0 0 0 .5em rgba(255, 255, 255, 0.25) inset
  h1
    font-size: 4em
  p
    font-size: 1.2em
    font-style: italic

.cart-container
  width: 100%
  height: 280px
  display: table
  
  .empty
    font-size: 3em
    width: 100%
    text-align: center
    display: table-cell
    vertical-align: middle
  
.cart
  list-style: none
  height: 280px
  width: 10000px
  cursor: grab
  position: relative
  left: 0
  transform: translate3d(0, 0, 0) 
  
  .product
    position: relative
    width: 200px
    height: 280px
    float: left
    &:hover
      z-index: 1
    
    &:nth-child(3n+1)
      .product-preview, .product-interactions
        background: #E8B0AF

    &:nth-child(3n+2)
      .product-preview, .product-interactions 
        background: #FDDAC4
      
    &:nth-child(3n)
      .product-preview, .product-interactions
        background: #F1D5A5
      
    .product-preview
      padding: 1em
      height: 280px
      position: relative
      
      .thumbnail
        width: 100%
        min-height: 120px
        max-height: 200px

        .image
          width: 100%
          margin-top: 1em
          
      .product-paper
        position: absolute
        height: 75px
        bottom: 0
        background: rgba(255, 255, 255, 0.65)
        padding: 1em
        display: block
        width: 100%
        margin-left: -1em
        
      .product-name
        font-size: 1.6em
        //letter-spacing: -1px
        text-align: center
        
      .product-price
        text-align: center
        font-size: 1.2em

    .product-quantity
      font-size: 2em
      width: 2em
      height: 2em
      text-align: center
      padding: .35em 0
      border-radius: 1em
      position: absolute
      top: .5em
      right: .5em
      background: #fff
      transform: rotateZ(10deg)
      backface-visibility: hidden 

    &:hover .product-interactions, .visible
      opacity: 1!important
      transform: perspective(600px) rotateX(0deg)!important
      
    .product-interactions
      position: absolute
      bottom: 75px
      width: 100%
      height: 60px
      border-bottom: 1px dashed rgba(0, 0, 0, .4)
      transform-origin: 50% 100% 0
      transform: perspective(600px) rotateX(90deg)
      opacity: 0
      transition: .4s all ease-in-out
      display: table
        
      .button
        width: 32%
        height: 60px
        float: left
        text-align: center
        font-size: 5em
        line-height: .75em
        color: #999
        background: rgba(255, 255, 255, .65)
        cursor: pointer
        user-select: none
        transition: .1s all ease-in-out
        transform-origin: 50% 0 0
        transform: perspective(600px)
        z-index: 0
        position: relative
        display: table-cell
        vertical-align: middle
        
        &.plus
          color: #7fb034
          
        &.minus
          color: #a0ce5a
          
        &.del:after
          content: "+"
          position: absolute
          color: red 
          left: 50%
          margin-left: -.15em
          transform: rotateZ(45deg)
          

        &:nth-child(1), &:nth-child(2)
          border-right: 1px dashed rgba(0, 0, 0, .1)
        &:nth-child(2)
          width: 36% 
        &:active
          font-size: 7em 
          background: #fff!important
          box-shadow: 0 0 0 10px #fff!important
          z-index: 10
          line-height: .45em

        &:hover
          background: rgba(255, 255, 255, .5)

.bill
  margin: 0
  padding: 1em
  font-size: 1.4em
  line-height: 1.6em
  background: #F1D5A5
  color: #48320b
  width: 100%
  .total
    font-weight: bold
    font-size: 1.6em
  tr
    td
      width: 50%
      padding: .25em 20px
    .label
      text-align: right
      
      
.actions
  text-align: center
  position: relative
  width: 100%
  height: 6em

  .big-button
    position: absolute
    cursor: pointer
    user-select: none
    padding: 1em
    width: 100%
    //background: #865127
    //color: #f0dccd
    font-size: 1.5em
    transition: .1s all ease-in-out
    box-shadow: 0 0 0 0 #6c411f
      
    &:active
      z-index: 10
      font-size: 2em
      
    &.return
      background: #ad6932
      color: #f0dccd
      &:hover
        background: #6c411f
      &:before
        content: "←"
        
    &.go
      background: #a0ce5a
      color: #334715
      font-size: 2em
      &:hover
        background: #7fb034
      &:active
        font-size: 2.5em
        background: #bede8e
        box-shadow: 0 0 0 10px #bede8e 

        
    
    
              
            
!

JS

              
                $('.cart-container').on('mousemove', function(evt) {
  var windowWidth = $(window).width();
  var cartWidth = $('.product').length * 200;
  if(windowWidth < cartWidth)
    $('.cart').stop(false, true).animate({
      left: - (evt.clientX / windowWidth) * (cartWidth - windowWidth)
    });
  else
    $('.cart').stop(false, true).css({
      left: 0
    });
});

$('.plus').click( function() {
  var product = $(this).closest('.product')
  var q = product.data('quantity') + 1;
  product.data('quantity', q);
  updateProduct(product);
});

$('.minus').click( function() {
  var product = $(this).closest('.product')
  var q = Math.max(1, product.data('quantity') - 1); 
  product.data('quantity', q);
  updateProduct(product);
});

$('.del').click( function() {
  var product = $(this).closest('.product')
  product.hide('blind', {direction:'left'}, 500, function() {
    product.remove();
    updateProduct(product);
    if($('.product').length == 0)  {
      $('.cart-container .cart').hide();
      $('.cart-container .empty').show();
    }
  });
});

function updateProduct(product) {
  var quantity = product.data('quantity');
  var price = product.data('price');
  $('.product-quantity', product).text('x' + quantity);
  $('.product-price', product).text('$ ' + (price * quantity).toFixed(2));
  updateBill();
}

function updateBill() {
  var subtotal = 0;
  var salestax = 0;
  var shipping = 5;
  var total = 0;
  $('.product').each(function () {
    subtotal += $(this).data('quantity') * $(this).data('price');
  });
  salestax = subtotal * 0.05;
  total = subtotal + salestax + shipping;
  $('.subtotal .value').text('$ ' + subtotal.toFixed(2));
  $('.salestax .value').text('$ ' + salestax.toFixed(2)); 
  $('.total .value').text('$ ' + total.toFixed(2));
}
              
            
!
999px

Console