Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                body
    .container
      .mGrid
        .total
          p total
          p $898
        .detail
          p detail
          ul
            li iPad Pro
            li $799
          ul
            li Apple Pencil
            li $99
        button pay now
      // Small Side Card detail
      .subContainer
        p Carly Ling
        // svg Logo
        .visaCont
          svg.visa(enable-background="new 0 0 291.764 291.764" version="1.1" viewbox="5 70 290 200" xml:space="preserve" xmlns="http://www.w3.org/2000/svg")
            path.svgcolor(d="m119.26 100.23l-14.643 91.122h23.405l14.634-91.122h-23.396zm70.598 37.118c-8.179-4.039-13.193-6.765-13.193-10.896 0.1-3.756 4.24-7.604 13.485-7.604 7.604-0.191 13.193 1.596 17.433 3.374l2.124 0.948 3.182-19.065c-4.623-1.787-11.953-3.756-21.007-3.756-23.113 0-39.388 12.017-39.489 29.204-0.191 12.683 11.652 19.721 20.515 23.943 9.054 4.331 12.136 7.139 12.136 10.987-0.1 5.908-7.321 8.634-14.059 8.634-9.336 0-14.351-1.404-21.964-4.696l-3.082-1.404-3.273 19.813c5.498 2.444 15.609 4.595 26.104 4.705 24.563 0 40.546-11.835 40.747-30.152 0.08-10.048-6.165-17.744-19.659-24.035zm83.034-36.836h-18.108c-5.58 0-9.82 1.605-12.236 7.331l-34.766 83.509h24.563l6.765-18.08h27.481l3.51 18.153h21.664l-18.873-90.913zm-26.97 54.514c0.474 0.046 9.428-29.514 9.428-29.514l7.13 29.514h-16.558zm-160.86-54.796l-22.931 61.909-2.498-12.209c-4.24-14.087-17.533-29.395-32.368-36.999l20.998 78.33h24.764l36.799-91.021h-24.764v-0.01z" fill="#FFF")
            path.svgtipcolor(d="m51.916 111.98c-1.787-6.948-7.486-11.634-15.226-11.734h-36.316l-0.374 1.686c28.329 6.984 52.107 28.474 59.821 48.688l-7.905-38.64z" fill="#EFC75E")
        .cardNum
          ul
            li 4514
            li 6188
            li 1234
            li 5678
        .date
          p.datepara January        2018
        .ccv
          p 983
    .backlayer
              
            
!

CSS

              
                //css color varables
$blue: #0b82f8
$darkblue: #0A6DD3
$darkgrey: #808eab
$cardblue: rgba(31,143,255,1)
$cardcolor: rgba(55,153,255,1)
$colorcard: rgba(142,190,255,.9)
$font: 'Roboto', sans-serif
$font1: 'Open Sans', sans-serif
$font2: 'Montserrat', sans-serif
//corrected variables

//short-styles
%pseudo
    position: absolute
    top: -25px
    font-family: $font
    left: 0
    color: $colorcard
    font-size: 13px
%para
    padding: 0
    margin: 0
    font-size: 15px
    font-family: $font2
    font-weight: lighter
    text-align: center
    padding: 4px 20px
    padding-right: 25px  
*
    font-family: $font
    box-sizing: border-box
    padding: 0
    margin: 0 
body 
    overflow: hidden
//main container and its items
.container
    position: absolute
    width: 600px
    height: 400px
    background: #FFF
    box-shadow: 0px 0px 40px 1px #eee
    top: 50%
    left: 50%
    transform: translate(-50%,-50%)
    display: grid
    grid-template-columns: repeat(2, 1fr)
    justify-content: space-between
    grid-template-areas: 'mGrid card'
    min-height: 0
    min-width: 0
    border-radius: 9px 
    z-index: 7
.mGrid
    grid-area: mGrid
    display: grid
    grid-template-rows: repeat(3, 1fr)
    overflow: hidden
    justify-content: center
    margin-top: 15px
    margin-left: -10px
.total 
    padding-top: 50px
    align-self: end
    p 
        text-align: center
        font-size: 15px
        text-transform: uppercase
        font-weight: 400
        color: $darkgrey
        letter-spacing: .15rem
        &:last-child
            font-size: 2rem
            font-weight: bold
            color: $blue
            padding-top: 10px
            font-family: $font
.detail
    font-family: $font
    align-self: start
    display: grid
    margin-top: 32px
    grid-template-rows: repeat(3, 1fr)
    p 
        text-align: center
        font-size: 15px
        text-transform: uppercase
        font-weight: 400
        color: $darkgrey
        letter-spacing: .15rem                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
        margin-bottom: 10px
    ul 
        list-style-type: none
        display: grid
        grid-template-columns: repeat(2, 1fr)
        font-family: $font
        justify-content: center
        align-content: start
        li 
            display: inline-block
            color: rgb(81,88,96)
            text-align: left
            font-size: 15px
            &:last-child
                text-align: right
                color: $blue
                font-family: $font
button 
    display: block
    justify-self: center
    align-self: center
    font-family: $font1
    background: #ffffff
    color: $blue
    border: 1px solid rgba(11,130,248,1)
    text-transform: uppercase
    font-size: .97rem
    opacity: .8
    font-weight: lighter
    padding: 7px 40px
    border-radius:  1.6rem
    cursor: pointer
    outline: none
    transition: all .2s linear
    &:hover
        transition: all .2s linear
        background: $blue
        color: #FFF
.subContainer
    position: absolute
    top: 50%
    transform: translateY(-50%)
    height: 270px
    width: 400px
    border-radius: 9px 
    font-family: $font
    bottom: 0
    color: #fff
    min-height: 0
    min-width: 0
    background: $cardblue
    box-shadow: -10px 10px 60px 10px #ADB7C4
    grid-area: card
    display: grid
    grid-template-columns: repeat(7, 1fr)
    grid-template-rows: repeat(3, 1fr)
    grid-template-areas: "name name  . . . visa visa "  "cardNum cardNum cardNum cardNum cardNum . ." " date date date date . ccv ccv "
    p, .visaCont, .cardNum, .date, .ccv
        margin-left: 35px 
        margin-top: -25px
    p 
        padding-top: 25px
        font-weight: 600
        grid-area: name
        margin-top: 0px
    .visaCont
        display: grid
        grid-area: visa
        overflow: hidden
        margin: 0
        justify-self: center
        align-self: center
        svg
            height: 50px
            width: 100px
    .cardNum 
        position: relative
        grid-area: cardNum
        background: $cardcolor
        align-self: center
        padding: 7px 5px
        font-size: 19px
        &:after
            @extend %pseudo
            content: 'Credit  Card  Number'   
        ul 
            list-style-type: none
            text-align: center
            li 
                display: inline-block
                font-family: $font2
                margin: 0 auto
                letter-spacing: 1px
                &:last-child
                    text-align: right
    .date
        position: relative
        grid-area: date 
        background: $cardcolor
        align-self: center
        justify-self: left
        &:after
            @extend %pseudo
            content: 'Expiration'  
        p 
            @extend %para   
    .ccv
        position: relative
        grid-area: ccv
        align-self: center
        justify-self: left
        background: $cardcolor
        margin-left: 0
        &:after
            @extend %pseudo 
            content: 'CCV'  
        p 
            @extend %para
            padding: 4px 12px
            letter-spacing: 1px   
    

              
            
!

JS

              
                // INSPIRATION
/*
https://dribbble.com/shots/2550178-Daily-UI-002-Credit-Card-Checkout
*/

              
            
!
999px

Console