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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                section.card
    div.info
        ul.info-list
            li.current
                img(src="https://cdn.arnellebalane.com/images/codepen-day85/artwork-1.jpg", alt="The Marcian") 
                h1 The Martian
                p During a manned mission to Mars, Astronaut Mark Watney
                  | (Matt Damon) is presumed dead after a fierce storm and left
                  | behind by his crew.
                span.rating 9.1
            li
                img(src="https://cdn.arnellebalane.com/images/codepen-day85/artwork-2.jpg", alt="Interstellar")
                h1 Interstellar
                p A team of explorers travel through a wormhole in space in an 
                  | attempt to ensure humanity's survival.
                span.rating 8.3
            li
                img(src="https://cdn.arnellebalane.com/images/codepen-day85/artwork-3.jpg", alt="Gravity")
                h1 Gravity
                p An astronaut out of three is taken into a series of debris and 
                  | starts orbiting around the Earth. She will have to stay extremely 
                  | strong in order to keep her sanity.
                span.rating 7.9
    footer.actions
        span.rating-container
        button.cart Book Movie
        ul.navigation
            li.current
            li
            li

    form.booking-form
        button.cancel Cancel
        p.input IMAX 3D
        p.input Monday, 21
            sup st 
            | September - 18:00
        p.input 6 Adults
        div.seats
            header
                label.legend
                    span.seat
                    span.legend-label Available
                label.legend
                    span.seat.taken
                    span.legend-label Taken    
            ul.seats-container
                li.seats-row
                    - var i = 0
                    while i++ < 3
                        button.seat(type="button")
                - var i = 0
                while i++ < 6
                    li.seats-row
                        - var j = 0
                        while j++ < 7
                            button.seat(type="button")
        footer
            label.total-label Total
            p.total-price $56.90
            button.submit-button Checkout
              
            
!

CSS

              
                /** Base Styles **/
*
*::before
*::after
    margin 0
    padding 0
    box-sizing border-box


html
    font-size 62.5%


body
    display flex
    justify-content center
    align-items center
    height 100vh
    font-family "Proxima Nova", "Myriad Pro", sans-serif
    -webkit-font-smoothing antialiased
    -moz-osx-font-smoothing grayscale
    color #333
    background url("https://cdn.arnellebalane.com/images/codepen-day85/background.jpg") center center no-repeat
    background-size cover


ul
    list-style none


button
    border none
    appearance none
    background none
    outline none


/** Card Styles **/
.card
    width 38rem
    height 64rem
    position relative
    border-radius 0.5rem
    background #fff top center no-repeat
    background-size cover
    box-shadow 0 0.2rem 8.4rem 0 rgba(0, 0, 0, 0.5)
    overflow hidden
    transition background-image 500ms ease-out

    &::before
    &::after
        content ""
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        border-radius 0.5rem

    &::before
        background-color #21313c
        clip-path polygon(0 30%, 100% 48%, 100% 100%, 0% 100%)
        mix-blend-mode overlay

    &::after
        background-color #393a3d
        clip-path polygon(0 44%, 100% 62%, 100% 100%, 0% 100%)
        opacity 0.7


.card .info
    width 100%
    height 23rem
    padding 5rem 0 4rem 0
    position absolute
    bottom 0
    z-index 1
    text-align center
    background-color #fff

    &::before
        content ""
        height 8rem
        position absolute
        left -1px
        right 0
        bottom calc(100% - 1px)
        background-color #fff
        clip-path polygon(0 100%, 100% 0, 100% 100%)


.card .info .info-list
    position relative


.card .info li
    padding 0 4rem
    position absolute
    top 0
    left 0
    right 0
    visibility hidden
    opacity 0
    transform translateX(100%)
    transition transform 500ms ease-out,
        visibility 0s ease-out 500ms,
        opacity 500ms ease-out

    &.current
        visibility visible
        opacity 1
        transform translateX(0)
        transition transform 500ms ease-out,
            visibility 0s ease-out 0s,
            opacity 500ms ease-out

    &.move-left
        transform translateX(-100%)


.card .info img
    display none


.card .info h1
    margin-bottom 1.8rem
    font-size 3rem
    font-weight normal


.card .info p
    font-size 1.6rem
    color #999

.card .info .rating
    display none


.card .actions
    position absolute
    left 0
    right 0
    bottom 0
    z-index 1
    background-color #fff
    box-shadow 0 0 3rem rgba(255, 255, 255, 1);


.card .actions .rating-container
    width 10rem
    height 10rem
    position absolute
    right 10rem
    bottom 20.5rem
    font-size 2.4rem
    text-align center
    line-height 10rem
    background-color #fff
    box-shadow 0 0.9rem 3.2rem rgba(56, 52, 57, 0.35)


.card .actions .cart
    width 12rem
    border none
    appearance none
    position absolute
    left 8rem
    bottom 21.5rem
    text-indent -100rem
    line-height 12rem
    background #1e1f22 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAhCAYAAAHGyjm9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAuxJREFUeNpi/PPnDwM6YILS/4HYC0r/Z4EKMkIVgGg5RnzaQeAdELOBGAABhKGSBYn9H91WRmQBRhjNhGbRRIAAAhkKcuBWIP4NswkdINssBsQvkYyEOwCbR/6jG8TEgB2ATJsI4wAEEMwkRiwmoHj+P5r3sCoCSTojBcp/fL77j81n6A5nwuUuFixeR1aYhq4Ip+PRw2kCNhPRTSpDMu09TBAggEC+ewakJZEUigDxWwYSAchJUlAbYLa8AWI7JDXPYEkdH2bCEgCgCDgIxJVQMWSL0PEaqJp1DKCIw4IfAvF/IN6CQx6EU6FqXoP4WPMgFKwH4gAgfgrEMmhyckD8EDka8RkEAoFgZ2MHKBYQMoikWMMH3iLFDD4xBoAAQnYR3oxJjItgpv9DTqnkGPQCiS8AxGrkGiQJ9VYSVOwmlkKAEH6GHNjzkdgxSOwXRDhoCXr0awHxVUKFHZbCB6O8vQbEn6DsaQQM6YDSF3ElSA4g/k6Eq2Cu4QKpx5YgfwDxGSj7PA5DHKD0H5il+LIIzEZuIP6GJvcbWnI6AvEBQllkMpT+iiW6YcXvAWIzLagmF8Qh5w3E2+ie+6lmECxMOgiIEfTaf6SwEsYjRtBFk6BFiyQBMQaAAAO5yBNIz0WXgCpOhlYCdAPYamxsvsunl4OYsFTI3NDaHgby8NRsIOBJbOuAUBkLMgtXIgI59CwQGyCJgcoVMyz1FaEQJgW8JJSqt0BzOAw8AmJ1aMFHKQAVjPuR+CCHKBPKHT5APAOtJfMS2rqnBIDM2Y0m5gryMDElUSYQVyPx+aCtIk0yHcMJTQ4saE3wA6QUjW1AHIvWxr8G7VKQCo5B294w0A3Es8kt9O2Rqx4oSEJreOADoGZ0MBJ/HRqfrFoI1P66AsSsFKaji2i5mKJqEVRn3IE2EMkBr4FYHqmtQ7GDaFp1DCoHUdIAYYOOCbyFVv0TcQxPEKuO4hACWSCEpU0nTKY6ikNoMRaxORSoAwMA379EywQmkkQAAAAASUVORK5CYII=") center center no-repeat
    box-shadow 0 0.9rem 3.2rem rgba(40, 43, 41, 0.56)
    overflow hidden
    cursor pointer
    transition background-color 200ms ease-out

    &:hover
    &:focus
        background-color lighten(#1e1f22, 5%)

    &:active
        background-color darken(#1e1f22, 5%)
        transition none


.card .navigation
    display flex
    justify-content center
    align-items center
    height 4rem


.card .navigation li
    width 0.7rem
    height 0.7rem
    margin 0 0.2rem
    border-radius 50%
    background-color #ccc
    cursor pointer

    &.current
        background-color #1e1f22


/** Booking Form Styles **/
.booking-form
    padding 5rem 3rem 3rem 3rem
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    z-index 1
    border-radius 0.5rem
    background-color #fff
    overflow hidden
    transform translateY(100%)
    transition transform 250ms ease-in

    &.visible
        transform translateY(0)
        transition transform 350ms ease-out


.booking-form .cancel
    width 5rem
    height 1rem
    position absolute
    top 2rem
    left calc(50% - 2.5rem)
    font-size 0
    cursor pointer
    opacity 0.5
    transition opacity 250ms ease-out

    &:hover
        opacity 1

    &::before
    &::after
        content ""
        width 2.5rem
        border-top 2px solid #ccc
        position absolute
        top 0
        left 50%
        border-radius 2px
        transform-origin left center

    &::before
        transform translateX(-1px) rotate(20deg)

    &::after
        transform translateX(1px) rotate(160deg)


.booking-form .input
    margin-bottom 1px
    padding 1.5rem 2rem
    position relative
    font-size 1.6rem
    line-height 1
    color #666
    background-color #ebebeb

    &:first-of-type
        border-radius 0.3rem 0.3rem 0 0

    &:last-of-type
        border-radius 0 0 0.3rem 0.3rem

    &::after
        content ""
        width 0.8rem
        height 0.8rem
        border-right 2px solid #b2b2b2
        border-bottom 2px solid #b2b2b2
        position absolute
        top 1.8rem
        right 2rem
        border-radius 1px
        transform rotate(45deg)


.booking-form .seats
    padding 3rem
    border-radius 0.3rem
    background-color #ebebeb


.booking-form .seats header
    display flex
    margin-bottom 5rem


.booking-form .seats .legend
    display flex
    align-items center
    margin-right 3rem
    font-size 1.6rem


.booking-form .seats .legend-label
    margin 0.3rem 0 0 1rem
    color #666


.booking-form .seats-row
    display flex
    justify-content center

    &:not(:last-child)
        margin-bottom 1rem


.booking-form .seat
    flex-shrink 0
    display inline-block
    width 2rem
    height 2rem
    border-radius 50%
    background-color #ccc
    cursor pointer

    &:first-child
        margin-left 0

    &:last-child
        margin-right 0

    &.taken
        background-color #808080
        cursor default

    &.selected
        background-color #00aeef


.booking-form .seats-row .seat
    margin 0 0.5rem
    transition transform 150ms ease-out,
        background-color 150ms ease-out

    &:not(.taken):active
        transform scale(1.2)

.booking-form .seats-row:not(:first-child) button:nth-child(2)
    margin-right 3.5rem

.booking-form .seats-row:not(:first-child) button:nth-last-child(2)
    margin-left 3.5rem


.booking-form footer
    padding 2rem 2rem 1.5rem 2rem
    position absolute
    left 0
    right 0
    bottom 0
    font-size 1.6rem
    border-radius 0 0 0.5rem 0.5rem
    background-color #313131


.booking-form .total-label
    color #8f8f8f


.booking-form .total-price
    color #fcfcfc


.booking-form .submit-button
    padding 2.8rem 6rem
    position absolute
    right 2rem
    bottom 2rem
    font-size 1.6rem
    text-transform uppercase
    color #fcfcfc
    background-color #1e1f22
    box-shadow 0 1.5rem 4.6rem rgba(11, 5, 5, 0.45)
    cursor pointer
    transform scale(0)
    transition background-color 200ms ease-out,
        transform 200ms cubic-bezier(0.25, 0.1, 0.51, 1.32) 275ms

    &:hover
    &:focus
        background-color lighten(#1e1f22, 3%)

    &:active
        background-color darken(#1e1f22, 3%)
        transition none

.booking-form.visible .submit-button
    transform scale(1)

              
            
!

JS

              
                var card = $('.card');
var infos = $('.info-list li');
var nav = $('.navigation li');

var animating = false;

showItem(0);
renderTakenSeats();


$('.navigation').on('click', 'li:not(.current)', function() {
    var index = $(this).index();
    showItem(index);
});

$(document).on('keydown', function(e) {
    if (!animating) {
        var index = infos.filter('.current').index();
        if (e.keyCode === 37 && index > 0) {
            // left arrow
            animating = true;
            showItem(index - 1);
        } else if (e.keyCode === 39 && index < infos.length - 1) {
            // right arrow
            animating = true;
            showItem(index + 1);
        }
    }
});

$(document).on('transitionend', '.current', function() {
    animating = false;
});

$(document).on('click', '.actions .cart, .booking-form .cancel', function() {
    $('.booking-form').toggleClass('visible');
});

$(document).on('click', '.seats button:not(.taken)', function() {
    $(this).toggleClass('selected');
});

$(document).on('submit', 'form', function(e) {
    e.preventDefault();
});


function showItem(index) {
    var info = infos.removeClass('current').eq(index).addClass('current');
    nav.removeClass('current').eq(index).addClass('current');

    infos.removeClass('move-left');
    info.prevAll().addClass('move-left');

    var background = info.find('img').attr('src');
    card.css('background-image', `url("${ background }")`);

    var rating = info.find('.rating').text();
    card.find('.rating-container').text(rating);
}


function renderTakenSeats() {
    var seats = $('.booking-form .seats button');
    var seatsCount = seats.length;
    var n = Math.random() * 10 + 5;
    for (let i = 0; i < n; i++) {
        seats.eq(Math.floor(Math.random() * seatsCount)).addClass('taken');
    }
}

              
            
!
999px

Console